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:
@@ -1,3 +1,5 @@
|
||||
@use "@/presentation/assets/styles/colors" as *;
|
||||
|
||||
@mixin hover-or-touch($selector-suffix: '', $selector-prefix: '&') {
|
||||
@media (hover: hover) {
|
||||
/*
|
||||
@@ -65,3 +67,47 @@
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
@mixin reset-button {
|
||||
margin: 0;
|
||||
padding-block: 0;
|
||||
padding-inline: 0;
|
||||
font: unset;
|
||||
border: unset;
|
||||
background: unset;
|
||||
align-items: unset;
|
||||
text-align: unset;
|
||||
text-shadow: unset;
|
||||
text-rendering: unset;
|
||||
color: inherit;
|
||||
writing-mode: unset;
|
||||
letter-spacing: unset;
|
||||
word-spacing: unset;
|
||||
line-height: unset;
|
||||
text-transform: unset;
|
||||
text-indent: unset;
|
||||
appearance: unset;
|
||||
cursor: unset;
|
||||
}
|
||||
|
||||
@mixin flat-button($disabled: false) {
|
||||
@include reset-button;
|
||||
|
||||
@if $disabled {
|
||||
color: $color-primary-light;
|
||||
} @else {
|
||||
color: inherit;
|
||||
@include clickable;
|
||||
@include hover-or-touch {
|
||||
text-decoration: underline;
|
||||
color: $color-highlight;
|
||||
/*
|
||||
Using color change and underlining and as hover cues instead of bold text,
|
||||
due to inconsistent bold rendering in macOS browsers:
|
||||
- Safari: Renders bold, causes layout shift.
|
||||
- Firefox: Renders bold correctly, no layout shift.
|
||||
- Chromium-based browsers (including Electron app): Do not render bold, no layout shift.
|
||||
*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user