Files
Graphite/client/web/src/components/widgets/inputs/MenuBarInput.vue
2021-05-27 00:14:50 -07:00

55 lines
1.0 KiB
Vue

<template>
<div class="menu-bar-input">
<div class="entry"><GraphiteLogo width="16" height="16" /></div>
<div class="entry"><span>File</span></div>
<div class="entry"><span>Edit</span></div>
<div class="entry"><span>Document</span></div>
<div class="entry"><span>View</span></div>
<div class="entry"><span>Help</span></div>
</div>
</template>
<style lang="scss">
.menu-bar-input {
display: flex;
.entry {
display: flex;
align-items: center;
white-space: nowrap;
padding: 0 8px;
svg {
fill: var(--color-e-nearwhite);
}
&:hover {
background: var(--color-6-lowergray);
svg {
fill: var(--color-f-white);
}
span {
color: var(--color-f-white);
}
}
}
}
</style>
<script lang="ts">
import { defineComponent } from "vue";
import { ApplicationPlatform } from "../../window/MainWindow.vue";
import GraphiteLogo from "../../../../assets/16px-solid/graphite-logo.svg";
export default defineComponent({
components: { GraphiteLogo },
data() {
return {
ApplicationPlatform,
};
},
});
</script>