faa7a38a7d
This commit centralizes the styling of key UI elements across the project to ensure: - Consistent look and feel. - Enhanced code reusability. - Simpified maintenance, improving development speed. It establishes a uniform foundation that can be leveraged across different parts of the project, even enabling the styling to be shared across different websites (supporting issue #49). Key changes: - Apply the following shared styles globally: * Styling of code, blockquotes, superscripts, horizontal rules and anchors. * Vertical and horizontal spacing. - Segregate base styling into dedicated SCSS files for clearer structure and increased maintainability. - Remove custom styling from affected components, enabling global style reuse for visual uniformity, reduced redundancy, and enhanced semantics. Other supporting changes: - Rename `globals.scss` to `base.scss` for better clarity. - Add `.editorconfig` for `.scss` files to ensure consistent whitespace usage. - Remove `2` file from the project root, that was included in the source code by mistake. - Remove unused font-face imports
131 lines
3.4 KiB
SCSS
131 lines
3.4 KiB
SCSS
@use "@/presentation/assets/styles/colors" as *;
|
|
@use "@/presentation/assets/styles/typography" as *;
|
|
|
|
@mixin hover-or-touch($selector-suffix: '', $selector-prefix: '&') {
|
|
@media (hover: hover) {
|
|
/*
|
|
Only apply hover styles if the device truly supports hover; otherwise the
|
|
emulator in mobile keeps hovered style in-place even after touching, making it sticky.
|
|
*/
|
|
#{$selector-prefix}:hover #{$selector-suffix} {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@media (hover: none) {
|
|
/*
|
|
Apply active styles on touch or click, ensuring interactive feedback on devices without hover capability.
|
|
*/
|
|
#{$selector-prefix}:active #{$selector-suffix} {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
This mixin removes the default blue tap highlight seen in mobile WebKit browsers (e.g., Chrome, Safari, Edge).
|
|
The mixin by itself may reduce accessibility by hiding this interactive cue. Therefore, it is recommended
|
|
to use this mixin in conjunction with the `hover-or-touch` mixin to provide necessary visual feedback
|
|
for interactive elements during hover or touch interactions.
|
|
*/
|
|
@mixin clickable($cursor: 'pointer') {
|
|
cursor: #{$cursor};
|
|
user-select: none;
|
|
-webkit-tap-highlight-color: transparent; // Removes blue tap highlight
|
|
}
|
|
|
|
@mixin fade-transition($name) {
|
|
.#{$name}-enter-active,
|
|
.#{$name}-leave-active {
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.#{$name}-enter-from,
|
|
.#{$name}-leave-to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@mixin fade-slide-transition($name, $duration, $offset-upward: null) {
|
|
|
|
.#{$name}-enter-active,
|
|
.#{$name}-leave-active {
|
|
transition: all $duration;
|
|
}
|
|
|
|
.#{$name}-leave-active,
|
|
.#{$name}-enter-from {
|
|
opacity: 0;
|
|
|
|
@if $offset-upward {
|
|
transform: translateY($offset-upward);
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin reset-ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
@mixin reset-sup {
|
|
vertical-align: unset;
|
|
font-size: unset;
|
|
}
|
|
|
|
@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;
|
|
$font-size: $font-size-absolute-normal;
|
|
|
|
@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.
|
|
*/
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin set-property-ch-value-with-fallback($property, $value-in-ch) {
|
|
@supports (width: 1ch) {
|
|
#{$property}: #{$value-in-ch}ch;
|
|
}
|
|
// For browsers that does not support `ch` unit (e.g., Opera Mini):
|
|
$estimated-width-per-character-in-em: calc(1em / 2); // 1 character is approximately half the font size
|
|
$calculated-width-in-em: calc(#{$estimated-width-per-character-in-em} * #{$value-in-ch});
|
|
#{$property}: $calculated-width-in-em;
|
|
}
|