Fix excessive highlighting on hover
It fixes whitespace on left when being highlighted when hovering on macOS (OS selection button on top) The commit also unifies the way top menu buttons are displayed by reusing `MenuOptionListItem`s (renamed from `SelectableOption`) and `MenuOptionList`. This ensures right and consistent behavior. Finally it fixes `enabled` property in menu option setting disabled state instead.
This commit is contained in:
38
src/presentation/components/Scripts/Menu/MenuOptionList.vue
Normal file
38
src/presentation/components/Scripts/Menu/MenuOptionList.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div class="list">
|
||||
<div v-if="label">{{ label }}:</div>
|
||||
<div class="items">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Prop } from 'vue-property-decorator';
|
||||
|
||||
@Component
|
||||
export default class MenuOptionList extends Vue {
|
||||
@Prop() public label: string;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/presentation/styles/fonts.scss";
|
||||
|
||||
$gap: 0.25rem;
|
||||
.list {
|
||||
font-family: $normal-font;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.items {
|
||||
* + *::before {
|
||||
content: '|';
|
||||
padding-right: $gap;
|
||||
padding-left: $gap;
|
||||
}
|
||||
}
|
||||
> *:not(:last-child) {
|
||||
margin-right: $gap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user