Rename field height var

This commit is contained in:
hfcRed
2026-01-19 20:56:45 +01:00
parent c9069770c0
commit 1d307f5add
17 changed files with 35 additions and 35 deletions

View File

@@ -1,6 +1,6 @@
.addNewButton {
padding: 0;
height: var(--field-height-small);
height: var(--field-size-small);
overflow: hidden;
width: max-content;
}
@@ -16,7 +16,7 @@
}
.iconsContainer > svg {
width: calc(var(--field-height-small) / 2);
width: calc(var(--field-size-small) / 2);
color: var(--color-text-accent);
}

View File

@@ -5,8 +5,8 @@
color: var(--color-text);
font-size: var(--fonts-md);
padding: var(--s-0-5);
width: calc(var(--field-height) * 0.7);
height: calc(var(--field-height) * 0.7);
width: calc(var(--field-size) * 0.7);
height: calc(var(--field-size) * 0.7);
display: flex;
align-items: center;
justify-content: center;
@@ -18,7 +18,7 @@
}
.triggerTiny {
width: var(--field-height-smaller);
height: var(--field-height-smaller);
width: var(--field-size-smaller);
height: var(--field-size-smaller);
font-size: var(--fonts-xs);
}

View File

@@ -6,12 +6,12 @@
border: var(--border-style);
border-radius: var(--radius-field);
background-color: var(--color-bg);
height: var(--field-height);
height: var(--field-size);
width: 100%;
& svg {
color: var(--color-text-high);
height: calc(var(--field-height) / 2);
height: calc(var(--field-size) / 2);
margin: auto;
margin-right: 15px;
}

View File

@@ -88,8 +88,8 @@
display: grid;
place-items: center;
background-color: transparent;
width: var(--field-height-small);
height: var(--field-height-small);
width: var(--field-size-small);
height: var(--field-size-small);
padding: 0;
border: none;
border-radius: var(--radius-field);

View File

@@ -15,7 +15,7 @@
padding: 0 var(--field-padding);
user-select: none;
outline-color: var(--color-text-accent);
height: var(--field-height);
height: var(--field-size);
white-space: nowrap;
}
@@ -60,21 +60,21 @@
font-size: var(--fonts-xs);
padding-block: var(--s-1);
padding-inline: var(--s-2);
height: var(--field-height-small);
height: var(--field-size-small);
}
.miniscule {
font-size: var(--fonts-xxs);
padding-block: var(--s-1);
padding-inline: var(--s-2);
height: var(--field-height-smaller);
height: var(--field-size-smaller);
}
.big {
font-size: var(--fonts-md);
padding-block: var(--s-2-5);
padding-inline: var(--s-6);
height: var(--field-height-large);
height: var(--field-size-large);
}
.square {

View File

@@ -1,5 +1,5 @@
.group {
height: var(--field-height);
height: var(--field-size);
padding: 0 var(--field-padding);
border: var(--border-style);
border-radius: var(--radius-field);

View File

@@ -1,5 +1,5 @@
.button {
height: var(--field-height);
height: var(--field-size);
padding: 0 var(--field-padding);
border: var(--border-style);
border-radius: var(--radius-field);

View File

@@ -9,7 +9,7 @@
color: var(--color-text-high);
font-size: var(--fonts-xs);
cursor: pointer;
height: var(--field-height-small);
height: var(--field-size-small);
transition: background-color 0.15s;
}

View File

@@ -8,7 +8,7 @@
display: flex;
align-items: center;
padding: 0 var(--s-2);
height: var(--field-height-small);
height: var(--field-size-small);
border: none;
border-radius: var(--radius-field);
background: transparent;

View File

@@ -25,8 +25,8 @@
display: grid;
place-items: center;
background-color: var(--color-bg);
width: var(--field-height-small);
height: var(--field-height-small);
width: var(--field-size-small);
height: var(--field-size-small);
padding: 0.25rem;
border: var(--border-style);
border-radius: 50%;

View File

@@ -8,14 +8,14 @@
}
.avatar {
width: var(--field-height-small);
height: var(--field-height-small);
width: var(--field-size-small);
height: var(--field-size-small);
color: transparent;
}
.logInButton {
display: flex;
height: var(--field-height-small);
height: var(--field-size-small);
align-items: center;
justify-content: center;
padding: 0.5rem;

View File

@@ -17,7 +17,7 @@
display: grid;
place-items: center;
min-width: max-content;
height: var(--field-height-small);
height: var(--field-size-small);
}
.tag[data-selected] {

View File

@@ -96,7 +96,7 @@
padding: 0 var(--s-1-5);
display: flex;
gap: var(--s-1);
height: var(--field-height-smaller);
height: var(--field-size-smaller);
align-items: center;
}

View File

@@ -158,7 +158,7 @@
display: flex;
gap: var(--s-2);
align-items: center;
height: var(--field-height-small);
height: var(--field-size-small);
&:hover svg,
&:focus-visible svg {

View File

@@ -122,8 +122,8 @@
display: flex;
align-items: center;
justify-content: center;
width: var(--field-height-smaller);
height: var(--field-height-smaller);
width: var(--field-size-smaller);
height: var(--field-size-smaller);
border-radius: 50%;
font-weight: bold;
font-size: var(--fonts-sm);

View File

@@ -99,7 +99,7 @@ input:not(.in-container) {
border-radius: var(--radius-field);
background: var(--color-bg);
padding: 0 var(--field-padding);
height: var(--field-height);
height: var(--field-size);
line-height: var(--field-line-height);
outline: none;
@@ -248,7 +248,7 @@ select {
var(--field-padding) +
var(--s-2)
);
height: var(--field-height);
height: var(--field-size);
line-height: var(--field-line-height);
display: inline-flex;
align-items: center;
@@ -370,7 +370,7 @@ select {
}
input[type="color"] {
padding: calc(var(--field-height) / 8) var(--field-padding);
padding: calc(var(--field-size) / 8) var(--field-padding);
}
input[type="color"]::-webkit-color-swatch {

View File

@@ -140,10 +140,10 @@ html {
--border-style-high: var(--border-width) solid var(--color-border-high);
--border-style-accent: var(--border-width) solid var(--color-text-accent);
--field-height-smaller: 1.25rem;
--field-height-small: 2rem;
--field-height: 2.5rem;
--field-height-large: 3rem;
--field-size-smaller: 1.25rem;
--field-size-small: 2rem;
--field-size: 2.5rem;
--field-size-large: 3rem;
--field-padding: 1rem;
--field-line-height: 1.2rem;
--field-focus-ring: 2px solid var(--color-text-accent);