cronekorkn/left4me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(css): add .field/.radio-row/.switch-row/.table-actions primitives

Browse source 
Reusable form-control primitives used by the upcoming overlay create-modal
and workshop-section redesigns. Custom-styled radios and a switch built
from native inputs (no JS), so accessibility and form behavior come for
free. Tokens unchanged.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
mwiegand 2026-05-19 00:28:33 +02:00
parent 5c56f18d0c
commit 6cce8b7be7
No known key found for this signature in database
1 changed files with 144 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

144
l4d2web/l4d2web/static/css/components.css
View file

@ -1189,3 +1189,147 @@ div.modal.modal-wide {
#console-modal .modal-body .console-input-form {
flex: 0 0 auto;
}
/* --- Form primitives (new vocabulary, 2026-05) -------------------------- */
.field {
display: grid;
gap: var(--space-xs);
}
.field-label {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text);
}
/* .field-hint already defined earlier in this file. */
.radio-list {
display: grid;
gap: var(--space-xs);
}
.radio-row {
display: flex;
align-items: flex-start;
gap: var(--space-s);
padding: var(--space-xs) 0;
cursor: pointer;
}
.radio-row > input[type="radio"] {
appearance: none;
width: 1rem;
height: 1rem;
border-radius: 50%;
border: 1.5px solid var(--color-border);
background: var(--color-bg);
flex: 0 0 auto;
margin: 0.2rem 0 0 0;
display: grid;
place-items: center;
cursor: pointer;
}
.radio-row > input[type="radio"]:checked {
border-color: var(--color-primary);
}
.radio-row > input[type="radio"]:checked::after {
content: "";
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: var(--color-primary);
}
.radio-row > input[type="radio"]:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
.radio-row-text {
display: grid;
gap: 0.0625rem;
}
.radio-row-text strong {
font-weight: 600;
font-size: 0.9375rem;
color: var(--color-text);
}
.radio-row-text span {
color: var(--color-muted);
font-size: 0.8125rem;
}
.switch-row {
display: flex;
align-items: flex-start;
gap: var(--space-s);
padding: var(--space-xs) 0;
cursor: pointer;
}
.switch-row > input[type="checkbox"] {
appearance: none;
position: relative;
width: 1.875rem;
height: 1rem;
background: var(--color-border);
border-radius: 999px;
flex: 0 0 auto;
margin: 0.225rem 0 0 0;
cursor: pointer;
transition: background 0.15s;
}
.switch-row > input[type="checkbox"]::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 0.75rem;
height: 0.75rem;
background: #fff;
border-radius: 50%;
transition: transform 0.15s;
}
.switch-row > input[type="checkbox"]:checked {
background: var(--color-button-primary);
}
.switch-row > input[type="checkbox"]:checked::after {
transform: translateX(0.875rem);
}
.switch-row > input[type="checkbox"]:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
.switch-row-text {
display: grid;
gap: 0.0625rem;
}
.switch-row-text strong {
font-weight: 600;
font-size: 0.9375rem;
color: var(--color-text);
}
.switch-row-text span {
color: var(--color-muted);
font-size: 0.8125rem;
}
.table-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: var(--space-m);
}