29 lines
1,003 B
CSS
29 lines
1,003 B
CSS
/* The look of an input, in one place. The two primitives that wear it stay separate — a search
|
|
field clears on Escape and needs no label, a form field requires one — but their input is the
|
|
same object, and it stood here as two byte-equal copies (BACKLOG Ф-40).
|
|
|
|
Both classes live in ONE module on purpose: order between two CSS modules is the order of their
|
|
imports, and the modifier below has to come after the base. */
|
|
.input {
|
|
width: 100%;
|
|
height: var(--row-height);
|
|
border: 1px solid transparent;
|
|
padding-inline: var(--space-4);
|
|
border-radius: var(--radius-control);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.input::placeholder {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* The only patch of colour in a panel is the border of the focused field (accent, prompt §1). */
|
|
.input:focus {
|
|
border-color: var(--color-accent);
|
|
outline: none;
|
|
}
|
|
|
|
/* A field of a FORM shows its edge at rest; a filter stays quiet until it is focused. */
|
|
.framed {
|
|
border-color: var(--color-border);
|
|
}
|