style(next): rename some variables

This commit is contained in:
Adorian Doran 2025-01-17 00:58:11 +02:00
parent 398591fb1f
commit a2a9bee7eb
3 changed files with 12 additions and 12 deletions

View File

@ -46,9 +46,9 @@
--input-action-button-color: #c6c6c6; --input-action-button-color: #c6c6c6;
--input-action-button-hover: white; --input-action-button-hover: white;
--radio-background: #ffffff30; --radio-checkbox-background: #ffffff30;
--radio-hover-background: #ffffff61; --radio-checkbox-hover-background: #ffffff61;
--radio-indicator-color: white; --radio-checkbox-indicator-color: white;
--select-focus-background: #333; --select-focus-background: #333;
--select-focus-text-color: var(--input-text-color); --select-focus-text-color: var(--input-text-color);

View File

@ -46,9 +46,9 @@
--input-action-button-color: #575757; --input-action-button-color: #575757;
--input-action-button-hover: black; --input-action-button-hover: black;
--radio-background: #0000002e; --radio-checkbox-background: #0000002e;
--radio-hover-background: #0000004f; --radio-checkbox-hover-background: #0000004f;
--radio-indicator-color: black; --radio-checkbox-indicator-color: black;
--select-focus-background: white; --select-focus-background: white;
--select-focus-text-color: var(--input-text-color); --select-focus-text-color: var(--input-text-color);

View File

@ -230,11 +230,11 @@ label:has(input[type="checkbox"]:focus-visible)::before {
/* The check box background */ /* The check box background */
label:has(input[type="checkbox"])::before { label:has(input[type="checkbox"])::before {
border-radius: 3px; border-radius: 3px;
background: var(--radio-background); background: var(--radio-checkbox-background);
} }
label:has(input[type="checkbox"]):hover:before { label:has(input[type="checkbox"]):hover:before {
background: var(--radio-hover-background); background: var(--radio-checkbox-hover-background);
} }
@keyframes checkbox-checked { @keyframes checkbox-checked {
@ -250,7 +250,7 @@ label:has(input[type="checkbox"])::after {
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ctitle%3echeck-bold%3c/title%3e%3cpath d='M9%2c20.42L2.79%2c14.21L5.62%2c11.38L9%2c14.77L18.88%2c4.88L21.71%2c7.71L9%2c20.42Z' /%3e%3c/svg%3e"); mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ctitle%3echeck-bold%3c/title%3e%3cpath d='M9%2c20.42L2.79%2c14.21L5.62%2c11.38L9%2c14.77L18.88%2c4.88L21.71%2c7.71L9%2c20.42Z' /%3e%3c/svg%3e");
mask-position: center center; mask-position: center center;
mask-size: .95em; mask-size: .95em;
background-color: var(--radio-indicator-color); background-color: var(--radio-checkbox-indicator-color);
transform: scale(0); transform: scale(0);
opacity: 0; opacity: 0;
transition: transform 300ms ease-out, transition: transform 300ms ease-out,
@ -273,11 +273,11 @@ label:has(input[type="radio"])::after {
/* The outer circle */ /* The outer circle */
label:has(input[type="radio"])::before { label:has(input[type="radio"])::before {
background: var(--radio-background); background: var(--radio-checkbox-background);
} }
label:has(input[type="radio"]:hover)::before { label:has(input[type="radio"]:hover)::before {
background: var(--radio-hover-background); background: var(--radio-checkbox-hover-background);
} }
/* The inner circle */ /* The inner circle */
@ -288,7 +288,7 @@ label:has(input[type="radio"])::after {
} }
label:has(input[type="radio"]:checked)::after { label:has(input[type="radio"]:checked)::after {
background: var(--radio-indicator-color); background: var(--radio-checkbox-indicator-color);
transform: scale(.5); transform: scale(.5);
transition: transform 150ms ease-in; transition: transform 150ms ease-in;
} }