56 lines
1 KiB
CSS
56 lines
1 KiB
CSS
.taf > .window-content input {
|
|
&.large {
|
|
--input-height: 2.5rem;
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
&[type="checkbox"] {
|
|
--checkbox-checked-color: var(--color-warm-1);
|
|
width: var(--checkbox-size);
|
|
height: var(--checkbox-size);
|
|
background: var(--input-background-color);
|
|
border: 2px solid var(--color-cool-3);
|
|
position: relative;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
|
|
&::before, &::after {
|
|
display: none;
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: 2px solid var(--checkbox-checked-color);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
&:checked::after {
|
|
display: block;
|
|
position: absolute;
|
|
inset: 4px;
|
|
z-index: 1;
|
|
content: "";
|
|
border-radius: 4px;
|
|
background: var(--checkbox-checked-color);
|
|
cursor: pointer;
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
|
|
&::before {
|
|
display: block;
|
|
position: absolute;
|
|
inset: 0;
|
|
content: "";
|
|
background: var(--color-level-error-bg);
|
|
border-radius: 2px;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
&::after {
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
}
|
|
}
|