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.
92 lines
3.3 KiB
92 lines
3.3 KiB
/*
|
|
* DateRangeField recipe — layout only.
|
|
*
|
|
* The chrome of each endpoint input is painted by `date-field.css`
|
|
* because:
|
|
*
|
|
* 1. The eidos `<DateRangeField>` root overlays `data-date-field=""`
|
|
* on top of `data-date-range-field`, so the existing
|
|
* `[data-date-field] { --_*: … }` token setup, size cascades,
|
|
* variant cascades and color tokens all apply inside the range.
|
|
*
|
|
* 2. soma's `<DateRangeField.Input>` overlays `data-date-field-input`
|
|
* on each endpoint container (the runtime composes both markers
|
|
* on the same element). So `[data-date-field-input]` chrome rules
|
|
* paint each endpoint exactly like a standalone DateField.
|
|
*
|
|
* This recipe only adds the range-specific layout:
|
|
*
|
|
* - Label sits above the inputs, spans the full row
|
|
* - Two inputs side-by-side via grid (1fr · auto · 1fr)
|
|
* - Em-dash separator in the middle grid cell
|
|
* - `data-endpoint='start'` / `data-endpoint='end'` available for
|
|
* consumer-side tinting; the default recipe leaves it inert.
|
|
*
|
|
* [data-date-range-field] → grid wrapper (also data-date-field)
|
|
* [data-date-range-field-label] → label, spans the full row
|
|
* [data-date-range-field-input] → endpoint container
|
|
* (also data-date-field-input)
|
|
*/
|
|
|
|
/*
|
|
* Specificity bump (0, 2, 0) so we beat `[data-date-field]`'s base
|
|
* rule from `date-field.css` — that rule sets
|
|
* `display: inline-flex; flex-direction: column;` which would stack
|
|
* the inputs instead of placing them on a 1fr · auto · 1fr grid.
|
|
* The eidos wrapper overlays both markers on the same element; this
|
|
* recipe makes the grid layout deterministic regardless of CSS
|
|
* import order.
|
|
*/
|
|
[data-date-range-field][data-date-field] {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
grid-template-rows: auto auto;
|
|
column-gap: var(--date-range-field-row-gap, var(--space-3));
|
|
row-gap: var(--date-field-stack-gap, var(--space-1-5));
|
|
align-items: center;
|
|
inline-size: 100%;
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
[data-date-range-field-label] {
|
|
grid-column: 1 / -1;
|
|
grid-row: 1;
|
|
font-family: var(--date-field-label-font-family, var(--style-label-font-family));
|
|
font-size: var(--date-field-label-font-size, var(--font-size-sm));
|
|
font-weight: var(--date-field-label-font-weight, 500);
|
|
color: var(--date-field-label-color, var(--color-content-primary));
|
|
}
|
|
|
|
[data-date-range-field-input] {
|
|
grid-row: 2;
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
[data-date-range-field-input][data-endpoint='start'] {
|
|
grid-column: 1;
|
|
}
|
|
|
|
[data-date-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. */
|
|
[data-date-range-field]:has(
|
|
[data-date-range-field-input][data-endpoint='start']
|
|
):has([data-date-range-field-input][data-endpoint='end'])::before {
|
|
content: var(--date-range-field-separator-glyph, '—');
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
color: var(--date-range-field-separator-color, var(--color-content-muted));
|
|
font-family: var(--style-label-font-family, var(--font-ui));
|
|
font-size: 0.9em; /* literal: separator scales with the field font-size */
|
|
user-select: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
[data-date-range-field][data-disabled] {
|
|
opacity: var(--date-field-disabled-opacity, 0.55);
|
|
pointer-events: none;
|
|
}
|