Fix button inconsistencies and macOS layout shifts
This commit fixes layout shifts experienced in macOS Safari when hovering over top menu items. Instead of making text bold — which was causing layout shifts — the hover effect now changes the text color. This ensures a consistent UI across different browsers and platforms. Additionally, this commit fixes the styling of the privacy button located in the bottom right corner. Previously styled as an `<a>` element, it is now correctly represented as a `<button>`. Furthermore, the commit enhances HTML conformity and accessibility by correctly using `<button>` and `<a>` tags instead of relying on click interactions on `<span>` elements. This commit introduces `FlatButton` Vue component and a new `flat-button` mixin. These centralize button usage and link styles, aligning the hover/touch reactions of buttons across the application, thereby creating a more consistent user interface.
This commit is contained in:
@@ -31,7 +31,7 @@
|
||||
</div>
|
||||
<div class="card__expander" @click.stop>
|
||||
<div class="card__expander__close-button">
|
||||
<AppIcon
|
||||
<FlatButton
|
||||
icon="xmark"
|
||||
@click="collapse()"
|
||||
/>
|
||||
@@ -51,6 +51,7 @@ import {
|
||||
defineComponent, computed, shallowRef,
|
||||
} from 'vue';
|
||||
import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
|
||||
import FlatButton from '@/presentation/components/Shared/FlatButton.vue';
|
||||
import { injectKey } from '@/presentation/injectionSymbols';
|
||||
import ScriptsTree from '@/presentation/components/Scripts/View/Tree/ScriptsTree.vue';
|
||||
import { sleep } from '@/infrastructure/Threading/AsyncSleep';
|
||||
@@ -61,6 +62,7 @@ export default defineComponent({
|
||||
ScriptsTree,
|
||||
AppIcon,
|
||||
CardSelectionIndicator,
|
||||
FlatButton,
|
||||
},
|
||||
props: {
|
||||
categoryId: {
|
||||
|
||||
Reference in New Issue
Block a user