WildDragonLLC/dragonflight
1
0
Fork 0
Code Issues 18 Pull requests 3 Projects Releases Packages Wiki Activity Actions

web-ui: wave-1 foundation — services/web-ui/src/css/components/form-controls.css

Browse source
This commit is contained in:
Zac Gaetano 2026-05-21 12:30:37 -04:00
parent 836a163cc8
commit a76e6b9a81
1 changed files with 94 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
services/web-ui/src/css/components/form-controls.css Normal file
View file

@ -0,0 +1,94 @@
/* form-controls.css ─ label/input/select/textarea/hint/toggle */
.wd-label {
display: block;
font: 600 11px/1 var(--font);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 4px;
}
.wd-input, .wd-select, .wd-textarea {
width: 100%;
height: 32px;
padding: 0 10px;
background: var(--bg-deep);
border: 1px solid var(--border);
border-radius: 4px;
font: 400 13px/1 var(--font);
color: var(--text-primary);
transition: border-color 120ms cubic-bezier(0.25, 1, 0.5, 1);
}
.wd-textarea { height: auto; min-height: 80px; padding: 8px 10px; line-height: 1.5; resize: vertical; }
.wd-input:focus, .wd-select:focus, .wd-textarea:focus {
border-color: var(--accent-border);
outline: 2px solid var(--accent-subtle);
outline-offset: 1px;
}
.wd-input:disabled, .wd-select:disabled, .wd-textarea:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.wd-input::placeholder, .wd-textarea::placeholder {
color: var(--text-tertiary);
}
.wd-hint {
font: 400 11px/1.5 var(--font);
color: var(--text-tertiary);
margin-top: 4px;
}
.wd-hint code {
font-family: var(--font-mono);
font-size: 11px;
background: var(--bg-surface);
padding: 1px 4px;
border-radius: 2px;
}
.wd-form-group { display: flex; flex-direction: column; }
.wd-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wd-form-row--3 { grid-template-columns: 1fr 1fr 1fr; }
/* Toggle switch — 34x18 */
.wd-toggle {
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
user-select: none;
}
.wd-toggle input {
position: absolute;
opacity: 0;
width: 0; height: 0;
}
.wd-toggle-track {
position: relative;
width: 34px;
height: 18px;
background: var(--bg-hover);
border: 1px solid var(--border);
border-radius: 999px;
transition: background 200ms cubic-bezier(0.25, 1, 0.5, 1);
}
.wd-toggle-track::after {
content: '';
position: absolute;
top: 2px; left: 2px;
width: 12px; height: 12px;
border-radius: 50%;
background: var(--text-secondary);
transition: transform 200ms cubic-bezier(0.25, 1, 0.5, 1),
background 200ms cubic-bezier(0.25, 1, 0.5, 1);
}
.wd-toggle input:checked ~ .wd-toggle-track {
background: var(--accent);
border-color: var(--accent);
}
.wd-toggle input:checked ~ .wd-toggle-track::after {
transform: translateX(16px);
background: oklch(98% 0.005 266);
}
.wd-toggle-label { font: 400 13px/1 var(--font); color: var(--text-secondary); }