mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-09-13 14:46:10 -05:00
Rename field height var
This commit is contained in:
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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%;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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] {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user