/* ==========================================================================
Time-range select — a segmented control for picking a relative window
(Today / 7d / 30d …). Choosing "Custom" morphs the track in place into an
inline "start — end" range editor; a back arrow returns to the presets.
Shared design-system component, loaded globally like every other component.
Works two ways with one stylesheet:
- rendered by the TimeRangeSelectWidget (common/forms/widgets.py), or
- hand-written in a template using the classes below.
The presets mirror the app's .nav-tabs segmented control (same track, same
active fill/shadow tokens) so a time range picked in a form reads the same
as the scope switch on a dashboard.
Markup contract:
.time-range-select[data-time-range] the track
.time-range-select__presets the preset face
label.time-range-select__seg > input.time-range-select__input + span…
(last segment is Custom, radio value="")
.time-range-select__range the custom face
button.time-range-select__back
— —
Adding .time-range-select--custom swaps the visible face; the JS keeps it in
sync with the checked radio.
========================================================================== */
/* Full width, like any other form-group control in the row. */
.time-range-select {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
padding: 4px;
background: var(--tabs-track-bg);
border: 1px solid var(--border-normal);
border-radius: 8px;
}
/* --- Preset face -------------------------------------------------------- */
/* Presets share the full width evenly, so the control fills its row rather
than clustering a few small pills at the left. */
.time-range-select__presets {
display: flex;
flex: 1 1 auto;
flex-wrap: wrap;
gap: 4px;
}
.time-range-select__seg {
flex: 1 1 auto;
margin: 0;
}
/* The radio drives the :checked state on its label but is itself off-screen,
staying focusable for keyboard use. */
.time-range-select__input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.time-range-select__label {
display: block;
padding: 0.35rem 0.7rem;
border-radius: 5px;
font-size: 0.85rem;
font-weight: 500;
text-align: center;
color: var(--text-tertiary);
white-space: nowrap;
cursor: pointer;
transition: color 0.15s ease, background-color 0.15s ease;
}
.time-range-select__label .fa,
.time-range-select__label .fas,
.time-range-select__label .far {
margin-right: 0.35rem;
opacity: 0.75;
}
.time-range-select__seg:hover .time-range-select__label {
color: var(--text-secondary);
background: var(--surface-2);
}
.time-range-select__input:checked + .time-range-select__label {
color: var(--tab-active-fg);
background: var(--tab-active-bg);
box-shadow: var(--tab-active-shadow);
font-weight: 600;
}
.time-range-select__input:focus-visible + .time-range-select__label {
outline: 2px solid var(--color-blue);
outline-offset: 1px;
}
/* --- Custom face: the inline range editor ------------------------------- */
/* Hidden until Custom is chosen; then it replaces the presets and fills the
full-width track. Wraps only if the two fields genuinely can't share a row. */
.time-range-select__range {
display: none;
flex: 1 1 auto;
flex-wrap: wrap;
align-items: center;
gap: 4px;
}
.time-range-select--custom .time-range-select__presets {
display: none;
}
.time-range-select--custom .time-range-select__range {
display: flex;
}
/* A hairline setting the back arrow off from the range fields. */
.time-range-select__divider {
flex: 0 0 auto;
align-self: stretch;
width: 1px;
margin: 3px 4px;
background: var(--border-normal);
}
/* Each bound and its calendar button as one unit, so the icon hugs the date
rather than drifting to the far edge of a stretched field. */
.time-range-select__pair {
display: inline-flex;
align-items: center;
gap: 2px;
}
/* The bound sits directly on the track: no border, fill or padding of its own,
and `field-sizing: content` shrinks it to the value it holds so the icon
lands right beside it. Not .form-control, deliberately — that carries the
themed box we are avoiding. `color-scheme` still applies via input[type]. */
.time-range-select__field {
/* Sized to the rendered value (`MM/DD/YYYY, HH:MM AM` ≈ 144px), not the
placeholder: the AM/PM text is wider than the "--" placeholder, and
datetime-local won't shrink to content (field-sizing is a no-op on it),
so a width tuned to the placeholder clipped the meridiem. This fits the
value with a small buffer; the empty placeholder shows a little reserved
space, which the control can't avoid while a value might carry AM/PM. */
width: 9.5rem;
min-width: 0;
margin: 0;
padding: 0 !important;
min-height: 0;
font-size: 0.8rem;
line-height: inherit;
color: var(--text-primary);
background: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none;
}
/* Chrome gives the editable text its own inset; drop it so the field is as
tight as the value it holds. */
.time-range-select__field::-webkit-datetime-edit {
padding: 0;
}
/* Hide the native indicator — the picker button beside the field replaces it. */
.time-range-select__field::-webkit-calendar-picker-indicator {
display: none;
}
/* The dash gets equal air on both sides so the two bounds read as a range. */
.time-range-select__sep {
flex: 0 0 auto;
padding: 0 0.6rem;
color: var(--text-muted);
}
/* Quiet icon buttons that land on the track: the back arrow and each field's
calendar picker trigger. */
.time-range-select__back,
.time-range-select__picker {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
height: 30px;
padding: 0 0.4rem;
font-size: 0.8rem;
border: 0;
border-radius: 5px;
background: transparent;
color: var(--text-tertiary);
cursor: pointer;
transition: color 0.15s ease, background-color 0.15s ease;
}
.time-range-select__back:hover,
.time-range-select__picker:hover {
background: var(--surface-2);
color: var(--text-primary);
}