ba873926fa
Closes #3448. New ui/ primitives: FormField (shared label+control wrapper), TextField, SelectField, Button — each with a min-height touch target (2.75em ~= 44px, WCAG 2.5.5) per mara's #3447 ask, and a max-width instead of a fixed width so the control caps on desktop without overflowing a narrow/touch viewport. CreateAgentPage's name field + submit button now come from the kit instead of page-scoped CSS; ComponentsPage gets a section for each new primitive with an editable sample.
32 lines
1.1 KiB
CSS
32 lines
1.1 KiB
CSS
/* <FormField> — label stacked above its control, plus the shared
|
|
`.ui-form-control` chrome every text/select input in the kit draws
|
|
from (one class, so the two never drift). `max-width` + `width: 100%`
|
|
rather than a fixed `width`: caps the control on a wide desktop
|
|
viewport without forcing an overflow on a narrow/touch one.
|
|
`min-height` is a touch-target floor (44px at the default 16px root
|
|
font — WCAG 2.5.5's minimum), not a visual choice — it's the same on
|
|
every control in the kit whether or not it's ever used on a touch
|
|
device, since the alternative is a component that behaves differently
|
|
per input method. Colours are the shared base16-derived vars
|
|
(../../theme.css), never literal. */
|
|
.ui-form-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.3em;
|
|
}
|
|
.ui-form-field-label {
|
|
font-size: 0.85em;
|
|
color: var(--muted);
|
|
}
|
|
.ui-form-control {
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
border: 1px solid var(--purple-dim);
|
|
border-radius: 0.3em;
|
|
padding: 0.4em 0.6em;
|
|
font: inherit;
|
|
width: 100%;
|
|
max-width: 16em;
|
|
box-sizing: border-box;
|
|
min-height: 2.75em;
|
|
}
|