Apply global styles for visual consistency
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
This commit is contained in:
@@ -129,7 +129,6 @@ function getCounterpartBoxOffsetProperty(placement: Placement): keyof CSSPropert
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use 'sass:math';
|
||||
@use "@/presentation/assets/styles/main" as *;
|
||||
|
||||
$color-tooltip-background: $color-primary-darkest;
|
||||
@@ -210,21 +209,11 @@ $color-tooltip-background: $color-primary-darkest;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin set-max-width($total-characters) {
|
||||
@supports (width: 1ch) {
|
||||
max-width: #{$total-characters}ch;
|
||||
}
|
||||
// For browsers that does not support `ch` unit (e.g., Opera Mini):
|
||||
$estimated-character-size: calc(1em / 2); // 1 character is approximately half the font size
|
||||
$estimated-width: calc(#{$estimated-character-size} * #{$total-characters});
|
||||
max-width: $estimated-width;
|
||||
}
|
||||
|
||||
.tooltip__content {
|
||||
background: $color-tooltip-background;
|
||||
color: $color-on-primary;
|
||||
border-radius: 16px;
|
||||
padding: 5px 10px 4px;
|
||||
padding: 12px 10px;
|
||||
font-size: $font-size-absolute-normal;
|
||||
|
||||
/*
|
||||
@@ -237,13 +226,14 @@ $color-tooltip-background: $color-primary-darkest;
|
||||
margin-right: 2px;
|
||||
|
||||
// Setting max-width increases readability and consistency reducing overlap and clutter.
|
||||
@include set-max-width(
|
||||
@include set-property-ch-value-with-fallback(
|
||||
$property: max-width,
|
||||
/*
|
||||
Research in typography suggests that an optimal line length for text readability is between 50-75 characters per line.
|
||||
Tooltips should be brief, so aiming for the for the lower end of this range (around 50 characters).
|
||||
*/
|
||||
$total-characters: 50
|
||||
);
|
||||
$value-in-ch: 50,
|
||||
)
|
||||
}
|
||||
|
||||
.tooltip__arrow {
|
||||
|
||||
Reference in New Issue
Block a user