Foundry/taf
1
0
Fork 0
Code Issues 8 Pull requests Releases 1 Wiki Activity Actions

Add better styling for checkboxes to make them more distinct

Browse source
This commit is contained in:
Oliver-Akins 2025-07-26 22:36:37 -06:00
parent 08fb6768ad
commit daa88fb272
3 changed files with 59 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

50
styles/elements/input.css
View file

@ -3,4 +3,54 @@
--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;
}
}
}
}