diff --git a/styles/elements/input.css b/styles/elements/input.css index 9b72811..4c6c747 100644 --- a/styles/elements/input.css +++ b/styles/elements/input.css @@ -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; + } + } + } } diff --git a/styles/main.css b/styles/main.css index 45fc73d..16de3e5 100644 --- a/styles/main.css +++ b/styles/main.css @@ -2,6 +2,7 @@ /* Resets */ @import url("./resets/hr.css") layer(resets); +@import url("./resets/inputs.css") layer(resets); /* Themes */ @import url("./themes/dark.css") layer(themes); diff --git a/styles/resets/inputs.css b/styles/resets/inputs.css new file mode 100644 index 0000000..0a7928f --- /dev/null +++ b/styles/resets/inputs.css @@ -0,0 +1,8 @@ +.taf > .window-content { + input[type="checkbox"] { + all: initial; + &::after, &::before { + all: initial; + } + } +}