/* ========================================================================= Date range picker ------------------------------------------------------------------------- One picker for every date-window filter in the product. Before this, each filter screen shipped a bare pair of `` boxes, so the same question -- "which days am I looking at?" -- was asked with a different native widget on every browser and needed two separate calendar trips to answer. This replaces the pair with a single control: one trigger that reads the window back in words, and a two-month panel with the windows people actually ask for (today, last 7 days, this month) as one click. Everything is prefixed `drp-`. The codebase already carries three unrelated `.field` / `.filters` systems; an unprefixed name here would inherit padding and borders from whichever one loaded last. ========================================================================= */ /* `min-width` rather than a width on the trigger: the control has to sit in a flex filter row, in a six-column grid and in a full-width mobile stack, and only the wrapper can be told to shrink by all three. */ .drp { display: flex; flex-direction: column; gap: 4px; position: relative; min-width: 200px; } .drp[hidden] { display: none; } .drp-label { font-size: 12px; color: #475569; font-weight: 500; } /* --- The trigger -------------------------------------------------------- Sized and bordered to match `.field input` in diagnostics.css so it sits in an existing filter row without looking bolted on. */ .drp-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; width: 100%; min-width: 0; min-height: 38px; border: 1px solid #d7dee7; border-radius: 10px; background: #fff; font-size: 14px; font-family: inherit; color: #1f2937; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; } .drp-trigger:hover { border-color: #b9c4d1; } .drp-trigger:focus-visible, .drp-trigger.is-open { outline: none; border-color: #0891b2; box-shadow: 0 0 0 3px rgba(8,145,178,.12); } .drp-ico { flex: none; font-size: 14px; line-height: 1; opacity: .75; } .drp-text { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .drp-text.is-empty { color: #9aa6b4; } .drp-caret { flex: none; font-size: 10px; color: #94a3b8; } /* --- The panel ---------------------------------------------------------- Appended to and positioned in script rather than nested in the trigger: filter bars on several screens sit inside cards with `overflow: hidden`, which would clip a panel positioned inside them. */ .drp-pop { position: absolute; z-index: 4000; display: none; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 48px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .08); font-family: inherit; color: #1f2937; -webkit-user-select: none; user-select: none; } .drp-pop.is-open { display: block; } /* Top bar: month stepping on the left, the range switch on the right. */ .drp-top { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #fff; } .drp-nav { flex: none; width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; font-size: 18px; line-height: 1; color: #475569; cursor: pointer; transition: background .15s; } .drp-nav:hover { background: #eef2f7; } .drp-nav-next { margin-left: auto; } /* The range switch. On = a window of days, off = a single day, and the knob says which without needing a second label. */ .drp-switch { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 14px; border: 0; border-radius: 999px; background: #94a3b8; color: #fff; cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; transition: background .18s; } .drp-switch[aria-checked="true"] { background: #22c55e; } .drp-knob { width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); } .drp-pop.is-single .drp-switch { display: none; } /* Which months, and what the columns mean, read as one tinted band across the top of both grids -- so the two questions a reader asks before looking at any number are answered in one place instead of straddling the fold. */ .drp-head { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; padding: 8px 16px 8px; background: #e9edf3; } .drp-hcol + .drp-hcol { border-left: 1px solid #dbe1ea; padding-left: 24px; margin-left: -24px; } .drp-head-row { display: grid; grid-template-columns: repeat(7, 1fr); } .drp-head-row span { text-align: center; font-size: 12px; font-weight: 600; color: #7c8cf8; padding: 2px 0; } .drp-mtitle { text-align: center; font-size: 15px; color: #64748b; padding: 4px 0 10px; } .drp-mtitle b { font-weight: 700; color: #0f172a; } .drp-months { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; padding: 8px 16px 4px; } .drp-month + .drp-month { border-left: 1px solid #e8ecf2; padding-left: 24px; margin-left: -24px; } .drp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; } /* --- Days --------------------------------------------------------------- The cell is the hit area and carries the in-range band; the circle inside carries the selection. Keeping the two separate is what lets an endpoint sit as a filled circle on top of a continuous band. */ .drp-cell { position: relative; padding: 1px 0; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; font: inherit; font-size: 13.5px; color: #334155; cursor: pointer; min-width: 34px; height: 34px; } .drp-cell::before { content: ""; position: absolute; inset: 3px 0; background: transparent; } .drp-cell > i { position: relative; font-style: normal; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: background .12s, color .12s; } .drp-cell.is-blank { visibility: hidden; cursor: default; } .drp-cell:not([disabled]):hover > i { background: #eef2f7; } .drp-cell.is-today > i { box-shadow: inset 0 0 0 1px #94a3b8; } .drp-cell.is-in::before { background: #e0ebfd; } .drp-cell.is-start::before { left: 50%; border-radius: 999px 0 0 999px; } .drp-cell.is-end::before { right: 50%; border-radius: 0 999px 999px 0; } .drp-cell.is-start.is-end::before { background: transparent; } .drp-cell.is-sel > i { background: #2563eb; color: #fff; box-shadow: none; } .drp-cell.is-sel:hover > i { background: #1d4ed8; } .drp-cell[disabled] { cursor: default; } .drp-cell[disabled] > i { color: #d7dee7; } .drp-cell[disabled]:hover > i { background: transparent; } /* --- Presets ------------------------------------------------------------ The windows people actually ask for, colour-coded so the one you want is found by shape rather than by reading all six. */ .drp-presets { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 12px 16px 14px; background: #fff; } .drp-chip { border: 0; border-radius: 999px; padding: 7px 15px; font-size: 12.5px; font-weight: 600; font-family: inherit; color: #fff; cursor: pointer; transition: filter .15s, transform .05s; } .drp-chip:hover { filter: brightness(1.07); } .drp-chip:active { transform: translateY(1px); } .drp-chip[data-preset="today"] { background: #6d7bf0; } .drp-chip[data-preset="yesterday"] { background: #22c55e; } .drp-chip[data-preset="last7"] { background: #a78bfa; } .drp-chip[data-preset="month"] { background: #4b5563; } .drp-chip[data-preset="lastmonth"] { background: #f43f5e; } .drp-chip[data-preset="clear"] { background: #e5e7eb; color: #4b5563; } /* --- Narrow screens ----------------------------------------------------- Two months side by side needs ~600px. Below that the panel takes the width it is given and shows one month, stepped with the same arrows. */ @media (max-width: 640px) { .drp-head { grid-template-columns: 1fr; gap: 0; } .drp-hcol + .drp-hcol { display: none; } .drp-months { grid-template-columns: 1fr; } .drp-month + .drp-month { display: none; } .drp { min-width: 0; } }