You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
2.6 KiB
77 lines
2.6 KiB
/*
|
|
* TimeRangeField — LAYOUT ONLY.
|
|
*
|
|
* Each endpoint is a REAL composed `<TimeField>` (soma renders
|
|
* `TimeField.Provider > TimeField.Input`), so all endpoint chrome — box, border,
|
|
* radius, padding, focus ring, invalid, disabled, segment styling — comes from
|
|
* `field.css` / `time-field.css` on the endpoint's own `[data-field]` /
|
|
* `[data-time-field-input]`. This recipe NEVER paints chrome; it only places the
|
|
* two endpoints + the shared label + the separator on a grid.
|
|
*
|
|
* [data-time-range-field] → grid wrapper (label row + inputs row)
|
|
* [data-time-range-field-label] → shared label, spans the full row
|
|
* [data-time-range-field-input] → endpoint = the composed TimeField root
|
|
* (also [data-field] / [data-time-field])
|
|
*/
|
|
|
|
[data-time-range-field] {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
grid-template-rows: auto auto;
|
|
column-gap: var(--time-range-field-row-gap, var(--space-3));
|
|
row-gap: var(--space-1-5);
|
|
align-items: center;
|
|
inline-size: 100%;
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
/* Shared label — one step below the control, matching the Field label doctrine.
|
|
The range root is NOT a `[data-field]`, so it can't read field.css's
|
|
`[data-field]`-scoped label tokens; it uses the same foundation values. */
|
|
[data-time-range-field-label] {
|
|
grid-column: 1 / -1;
|
|
grid-row: 1;
|
|
color: var(--color-content-primary);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: var(--font-weight-regular);
|
|
}
|
|
|
|
[data-time-range-field-input] {
|
|
grid-row: 2;
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
[data-time-range-field-input][data-endpoint='start'] {
|
|
grid-column: 1;
|
|
}
|
|
|
|
[data-time-range-field-input][data-endpoint='end'] {
|
|
grid-column: 3;
|
|
}
|
|
|
|
/* Em-dash separator between the two inputs, anchored to the grid's middle
|
|
column / second row. Only when both endpoints are present. */
|
|
[data-time-range-field]:has(
|
|
[data-time-range-field-input][data-endpoint='start']
|
|
):has([data-time-range-field-input][data-endpoint='end'])::before {
|
|
content: var(--time-range-field-separator-glyph, '—');
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
color: var(--time-range-field-separator-color, var(--color-content-muted));
|
|
font-size: 0.9em; /* literal: separator scales with the field font-size */
|
|
user-select: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Range-level disabled: each endpoint TimeField already dims its own control
|
|
(field.css `[data-field][data-disabled]`); here we only lock interaction and
|
|
dim the shared label + separator. */
|
|
[data-time-range-field][data-disabled] {
|
|
pointer-events: none;
|
|
}
|
|
|
|
[data-time-range-field][data-disabled] [data-time-range-field-label],
|
|
[data-time-range-field][data-disabled]::before {
|
|
opacity: var(--opacity-disabled);
|
|
}
|