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:
undergroundwires
2023-12-29 17:26:40 +01:00
parent 2f06043559
commit 86fde6d7dc
19 changed files with 363 additions and 106 deletions

View File

@@ -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.
*/
}
}
}