3233d9b802
Disable selecting clickables as text. Selecting buttons leads to unintended selection. This is seen when touching on clickables using mobile devices. Prevent blue highlight when touching on clickables. This is seen on mobile webkit browsers. It looks ugly and the visual clue provided is not needed beacuse all clickables on mobile already have visual clues.
42 lines
990 B
Vue
42 lines
990 B
Vue
<template>
|
|
<span> <!-- Parent wrapper allows adding content inside with CSS without making it clickable -->
|
|
<span
|
|
v-bind:class="{ 'disabled': !enabled, 'enabled': enabled}"
|
|
v-non-collapsing
|
|
@click="enabled && onClicked()">{{label}}</span>
|
|
</span>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {
|
|
Component, Prop, Emit, Vue,
|
|
} from 'vue-property-decorator';
|
|
import { NonCollapsing } from '@/presentation/components/Scripts/View/Cards/NonCollapsingDirective';
|
|
|
|
@Component({
|
|
directives: { NonCollapsing },
|
|
})
|
|
export default class MenuOptionListItem extends Vue {
|
|
@Prop() public enabled: boolean;
|
|
|
|
@Prop() public label: string;
|
|
|
|
@Emit('click') public onClicked() { /* do nothing except firing event */ }
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "@/presentation/assets/styles/main" as *;
|
|
|
|
.enabled {
|
|
@include clickable;
|
|
@include hover-or-touch {
|
|
font-weight:bold;
|
|
text-decoration:underline;
|
|
}
|
|
}
|
|
.disabled {
|
|
color: $color-primary-light;
|
|
}
|
|
</style>
|