Normalize and improve font sizes

This commit standardizes font sizes across components for a uniform
look. The icon sizes, font weights and line heights are also adjusted
accordingly for better standardization and simplicity.

- Introduce variables for standard font sizes, enhancing
  maintainability.
- Remove explicit pixel values, replaced with scalable units based on
  root size.
- Remove workaround for line-height adoptation of bigger font-size.
- Use consistent small font-size for the code area.
- Adjust checkbox tick to scale with font size.
This commit is contained in:
undergroundwires
2024-01-31 19:54:11 +01:00
parent a5ffed4cd6
commit 4da306b9f7
25 changed files with 70 additions and 70 deletions

View File

@@ -53,13 +53,13 @@ export default defineComponent({
@use "@/presentation/assets/styles/main" as *;
@use "./../tree-colors" as *;
$sideSizeInPx: 30px;
$side-size-in-px: $font-size-larger;
.checkbox {
position: relative;
width: $sideSizeInPx;
height: $sideSizeInPx;
width: $side-size-in-px;
height: $side-size-in-px;
box-sizing: border-box;
border: 1px solid $color-node-checkbox-border-unchecked;
@@ -76,12 +76,12 @@ $sideSizeInPx: 30px;
&.indeterminate {
border-color: $color-node-checkbox-border-unchecked;
&:after {
&:after { // Draw line (─)
background-color: $color-node-checkbox-border-indeterminate;
top: 50%;
left: 20%;
right: 20%;
height: 2px;
height: 1.5px;
}
}
@@ -89,15 +89,18 @@ $sideSizeInPx: 30px;
background: $color-node-checkbox-bg-checked;
border-color: $color-node-checkbox-border-checked;
&:after {
&:after { // Draw checkmark tick (✔️)
box-sizing: content-box;
border: 1.5px solid $color-node-checkbox-tick-checked;
border-left: 0;
border-top: 0;
left: 9px;
top: 3px;
height: 15px;
width: 8px;
left: $side-size-in-px * 0.33;
top: $side-size-in-px * 0.11;
height: $side-size-in-px * 0.50;
width: $side-size-in-px * 0.25;
transform: rotate(45deg) scaleY(1);
transition: transform .25s;
transform-origin: center;