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.
679 lines
26 KiB
679 lines
26 KiB
[data-date-range-picker] {
|
|
--_date-field-height: var(--date-field-height-md);
|
|
--_date-field-px: var(--date-field-px-md);
|
|
--_date-field-gap: var(--date-field-gap-md);
|
|
--_date-field-segment-px: var(--date-field-segment-px-md);
|
|
--_date-field-font-size: var(--date-field-font-size-md);
|
|
--_date-field-accent-border: var(--color-primary-border);
|
|
--_date-field-accent-track: var(--color-primary-track);
|
|
--_date-field-accent-text: var(--color-primary-text);
|
|
--_calendar-padding: var(--calendar-padding-md);
|
|
--_calendar-control-size: var(--calendar-control-size-md);
|
|
--_calendar-day-size: var(--calendar-day-size-md);
|
|
--_calendar-font-size: var(--calendar-font-size-md);
|
|
--_calendar-accent-solid: var(--color-primary-solid);
|
|
--_calendar-accent-solid-hover: var(--color-primary-solid-hover);
|
|
--_calendar-accent-track: var(--color-primary-track);
|
|
--_calendar-accent-border: var(--color-primary-border);
|
|
--_calendar-accent-text: var(--color-primary-text);
|
|
/* Start endpoint uses the `affirm` family by default (semantically: the
|
|
range opens). End endpoint follows the picker's `data-color` accent. */
|
|
--_calendar-range-start-solid: var(--color-affirm-solid);
|
|
--_calendar-range-start-solid-hover: var(--color-affirm-solid-hover);
|
|
--_calendar-range-start-border: var(--color-affirm-border);
|
|
--_calendar-range-start-text: var(--color-affirm-contrast);
|
|
--_calendar-range-end-solid: var(--_calendar-accent-solid);
|
|
--_calendar-range-end-solid-hover: var(--_calendar-accent-solid-hover);
|
|
--_calendar-range-end-border: var(--_calendar-accent-solid);
|
|
--_calendar-range-end-text: var(--calendar-day-selected-color);
|
|
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: end;
|
|
gap: var(--date-field-stack-gap) var(--_date-field-gap);
|
|
inline-size: 100%;
|
|
min-inline-size: 0;
|
|
color: var(--date-field-color);
|
|
font-family: var(--date-field-font-family);
|
|
font-size: var(--_date-field-font-size);
|
|
line-height: var(--date-field-line-height);
|
|
}
|
|
|
|
[data-date-range-picker][data-size='xs'] {
|
|
--_date-field-height: var(--date-field-height-xs);
|
|
--_date-field-px: var(--date-field-px-xs);
|
|
--_date-field-gap: var(--date-field-gap-xs);
|
|
--_date-field-segment-px: var(--date-field-segment-px-xs);
|
|
--_date-field-font-size: var(--date-field-font-size-xs);
|
|
--_calendar-padding: var(--calendar-padding-xs);
|
|
--_calendar-control-size: var(--calendar-control-size-xs);
|
|
--_calendar-day-size: var(--calendar-day-size-xs);
|
|
--_calendar-font-size: var(--calendar-font-size-xs);
|
|
}
|
|
|
|
[data-date-range-picker][data-size='sm'] {
|
|
--_date-field-height: var(--date-field-height-sm);
|
|
--_date-field-px: var(--date-field-px-sm);
|
|
--_date-field-gap: var(--date-field-gap-sm);
|
|
--_date-field-segment-px: var(--date-field-segment-px-sm);
|
|
--_date-field-font-size: var(--date-field-font-size-sm);
|
|
--_calendar-padding: var(--calendar-padding-sm);
|
|
--_calendar-control-size: var(--calendar-control-size-sm);
|
|
--_calendar-day-size: var(--calendar-day-size-sm);
|
|
--_calendar-font-size: var(--calendar-font-size-sm);
|
|
}
|
|
|
|
[data-date-range-picker][data-size='lg'] {
|
|
--_date-field-height: var(--date-field-height-lg);
|
|
--_date-field-px: var(--date-field-px-lg);
|
|
--_date-field-gap: var(--date-field-gap-lg);
|
|
--_date-field-segment-px: var(--date-field-segment-px-lg);
|
|
--_date-field-font-size: var(--date-field-font-size-lg);
|
|
--_calendar-padding: var(--calendar-padding-lg);
|
|
--_calendar-control-size: var(--calendar-control-size-lg);
|
|
--_calendar-day-size: var(--calendar-day-size-lg);
|
|
--_calendar-font-size: var(--calendar-font-size-lg);
|
|
}
|
|
|
|
[data-date-range-picker][data-color='secondary'] {
|
|
--_date-field-accent-border: var(--color-secondary-border);
|
|
--_date-field-accent-track: var(--color-secondary-track);
|
|
--_date-field-accent-text: var(--color-secondary-text);
|
|
--_calendar-accent-solid: var(--color-secondary-solid);
|
|
--_calendar-accent-solid-hover: var(--color-secondary-solid-hover);
|
|
--_calendar-accent-track: var(--color-secondary-track);
|
|
--_calendar-accent-border: var(--color-secondary-border);
|
|
--_calendar-accent-text: var(--color-secondary-text);
|
|
}
|
|
|
|
[data-date-range-picker][data-color='neutral'] {
|
|
--_date-field-accent-border: var(--color-neutral-border);
|
|
--_date-field-accent-track: var(--color-neutral-track);
|
|
--_date-field-accent-text: var(--color-neutral-text);
|
|
--_calendar-accent-solid: var(--color-neutral-solid);
|
|
--_calendar-accent-solid-hover: var(--color-neutral-solid-hover);
|
|
--_calendar-accent-track: var(--color-neutral-track);
|
|
--_calendar-accent-border: var(--color-neutral-border);
|
|
--_calendar-accent-text: var(--color-neutral-text);
|
|
}
|
|
|
|
[data-date-range-picker][data-color='affirm'] {
|
|
--_date-field-accent-border: var(--color-affirm-border);
|
|
--_date-field-accent-track: var(--color-affirm-track);
|
|
--_date-field-accent-text: var(--color-affirm-text);
|
|
--_calendar-accent-solid: var(--color-affirm-solid);
|
|
--_calendar-accent-solid-hover: var(--color-affirm-solid-hover);
|
|
--_calendar-accent-track: var(--color-affirm-track);
|
|
--_calendar-accent-border: var(--color-affirm-border);
|
|
--_calendar-accent-text: var(--color-affirm-text);
|
|
/* End uses affirm — swap start to secondary so the two endpoints
|
|
stay perceptually distinct. */
|
|
--_calendar-range-start-solid: var(--color-secondary-solid);
|
|
--_calendar-range-start-solid-hover: var(--color-secondary-solid-hover);
|
|
--_calendar-range-start-border: var(--color-secondary-border);
|
|
--_calendar-range-start-text: var(--color-secondary-contrast);
|
|
}
|
|
|
|
[data-date-range-picker][data-color='fulfill'] {
|
|
--_date-field-accent-border: var(--color-fulfill-border);
|
|
--_date-field-accent-track: var(--color-fulfill-track);
|
|
--_date-field-accent-text: var(--color-fulfill-text);
|
|
--_calendar-accent-solid: var(--color-fulfill-solid);
|
|
--_calendar-accent-solid-hover: var(--color-fulfill-solid-hover);
|
|
--_calendar-accent-track: var(--color-fulfill-track);
|
|
--_calendar-accent-border: var(--color-fulfill-border);
|
|
--_calendar-accent-text: var(--color-fulfill-text);
|
|
/* End uses fulfill (close in hue to affirm) — swap start to secondary. */
|
|
--_calendar-range-start-solid: var(--color-secondary-solid);
|
|
--_calendar-range-start-solid-hover: var(--color-secondary-solid-hover);
|
|
--_calendar-range-start-border: var(--color-secondary-border);
|
|
--_calendar-range-start-text: var(--color-secondary-contrast);
|
|
}
|
|
|
|
[data-date-range-picker][data-color='risk'] {
|
|
--_date-field-accent-border: var(--color-risk-border);
|
|
--_date-field-accent-track: var(--color-risk-track);
|
|
--_date-field-accent-text: var(--color-risk-text);
|
|
--_calendar-accent-solid: var(--color-risk-solid);
|
|
--_calendar-accent-solid-hover: var(--color-risk-solid-hover);
|
|
--_calendar-accent-track: var(--color-risk-track);
|
|
--_calendar-accent-border: var(--color-risk-border);
|
|
--_calendar-accent-text: var(--color-risk-text);
|
|
}
|
|
|
|
[data-date-range-picker][data-color='threat'] {
|
|
--_date-field-accent-border: var(--color-threat-border);
|
|
--_date-field-accent-track: var(--color-threat-track);
|
|
--_date-field-accent-text: var(--color-threat-text);
|
|
--_calendar-accent-solid: var(--color-threat-solid);
|
|
--_calendar-accent-solid-hover: var(--color-threat-solid-hover);
|
|
--_calendar-accent-track: var(--color-threat-track);
|
|
--_calendar-accent-border: var(--color-threat-border);
|
|
--_calendar-accent-text: var(--color-threat-text);
|
|
}
|
|
|
|
[data-date-range-picker][data-color='loss'] {
|
|
--_date-field-accent-border: var(--color-loss-border);
|
|
--_date-field-accent-track: var(--color-loss-track);
|
|
--_date-field-accent-text: var(--color-loss-text);
|
|
--_calendar-accent-solid: var(--color-loss-solid);
|
|
--_calendar-accent-solid-hover: var(--color-loss-solid-hover);
|
|
--_calendar-accent-track: var(--color-loss-track);
|
|
--_calendar-accent-border: var(--color-loss-border);
|
|
--_calendar-accent-text: var(--color-loss-text);
|
|
}
|
|
|
|
[data-date-range-field-label] {
|
|
flex: 1 0 100%;
|
|
color: var(--date-field-label-color);
|
|
font: inherit;
|
|
font-weight: var(--date-field-label-font-weight);
|
|
}
|
|
|
|
[data-date-range-field-input] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--_date-field-gap);
|
|
flex: 1 1 12rem;
|
|
min-inline-size: 0;
|
|
min-block-size: var(--_date-field-height);
|
|
padding-inline: var(--_date-field-px);
|
|
border: var(--date-field-border-width) solid var(--date-field-border);
|
|
border-radius: var(--date-field-radius);
|
|
background: var(--date-field-bg);
|
|
color: inherit;
|
|
transition:
|
|
background var(--date-field-transition-duration) var(--date-field-transition-ease),
|
|
border-color var(--date-field-transition-duration) var(--date-field-transition-ease),
|
|
box-shadow var(--date-field-transition-duration) var(--date-field-transition-ease);
|
|
}
|
|
|
|
[data-date-range-picker][data-variant='outline'] [data-date-range-field-input] {
|
|
background: transparent;
|
|
}
|
|
|
|
[data-date-range-picker][data-variant='ghost'] [data-date-range-field-input] {
|
|
border-color: transparent;
|
|
background: transparent;
|
|
padding-inline: 0;
|
|
}
|
|
|
|
[data-date-range-field-input]:has([data-date-field-segment]:focus-visible) {
|
|
border-color: var(--_date-field-accent-border);
|
|
box-shadow: var(--date-field-focus-shadow);
|
|
}
|
|
|
|
/* ── Group treatment: single input chrome around start + end ────────────────
|
|
* When the consumer wraps both endpoints (and optional separator + trigger)
|
|
* in `<div data-date-range-field-group>`, the chrome moves to the group:
|
|
* a single border, a single focus ring, a single background. Each endpoint
|
|
* input loses its own box and the trigger lives flush inside. */
|
|
|
|
[data-date-range-field-group] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--_date-field-gap);
|
|
flex: 1 1 24rem;
|
|
min-inline-size: 0;
|
|
min-block-size: var(--_date-field-height);
|
|
padding-inline: var(--_date-field-px);
|
|
border: var(--date-field-border-width) solid var(--date-field-border);
|
|
border-radius: var(--date-field-radius);
|
|
background: var(--date-field-bg);
|
|
color: inherit;
|
|
transition:
|
|
background var(--date-field-transition-duration) var(--date-field-transition-ease),
|
|
border-color var(--date-field-transition-duration) var(--date-field-transition-ease),
|
|
box-shadow var(--date-field-transition-duration) var(--date-field-transition-ease);
|
|
}
|
|
|
|
[data-date-range-field-group]:has([data-date-field-segment]:focus-visible) {
|
|
border-color: var(--_date-field-accent-border);
|
|
box-shadow: var(--date-field-focus-shadow);
|
|
}
|
|
|
|
[data-date-range-picker][data-variant='outline'] [data-date-range-field-group] {
|
|
background: transparent;
|
|
}
|
|
|
|
[data-date-range-picker][data-variant='ghost'] [data-date-range-field-group] {
|
|
border-color: transparent;
|
|
background: transparent;
|
|
padding-inline: 0;
|
|
}
|
|
|
|
[data-date-range-picker][data-invalid] [data-date-range-field-group] {
|
|
border-color: var(--date-field-border-invalid);
|
|
}
|
|
|
|
[data-date-range-field-group] [data-date-range-field-input] {
|
|
flex: 0 1 auto;
|
|
min-block-size: auto;
|
|
padding-inline: 0;
|
|
border: none;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
[data-date-range-field-group] [data-date-range-field-input]:has([data-date-field-segment]:focus-visible) {
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Separator span ("to", "/", "→") inside the group inherits the field tone
|
|
and stays vertically aligned. */
|
|
[data-date-range-field-group] > .range-separator,
|
|
[data-date-range-field-group] [data-range-separator] {
|
|
color: var(--date-field-literal-color);
|
|
flex: 0 0 auto;
|
|
user-select: none;
|
|
}
|
|
|
|
[data-date-range-picker][data-invalid] [data-date-range-field-input],
|
|
[data-date-range-field-input][data-invalid] {
|
|
border-color: var(--date-field-border-invalid);
|
|
}
|
|
|
|
[data-date-range-picker][data-disabled],
|
|
[data-date-range-field-input][data-disabled] {
|
|
opacity: var(--date-field-disabled-opacity);
|
|
}
|
|
|
|
[data-date-range-picker] [data-date-field-segment] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-inline-size: var(--date-field-segment-min-width);
|
|
block-size: var(--date-field-segment-height);
|
|
padding-inline: var(--_date-field-segment-px);
|
|
border-radius: var(--date-field-segment-radius);
|
|
color: var(--date-field-segment-color);
|
|
font: inherit;
|
|
outline: none;
|
|
white-space: nowrap;
|
|
transition:
|
|
background var(--date-field-transition-duration) var(--date-field-transition-ease),
|
|
color var(--date-field-transition-duration) var(--date-field-transition-ease),
|
|
box-shadow var(--date-field-transition-duration) var(--date-field-transition-ease);
|
|
}
|
|
|
|
[data-date-range-picker] [data-date-field-segment][data-segment='literal'] {
|
|
min-inline-size: auto;
|
|
padding-inline: 0;
|
|
color: var(--date-field-literal-color);
|
|
}
|
|
|
|
[data-date-range-picker] [data-date-field-segment][data-placeholder] {
|
|
color: var(--date-field-placeholder-color);
|
|
}
|
|
|
|
[data-date-range-picker] [data-date-field-segment]:focus-visible {
|
|
background: var(--_date-field-accent-track);
|
|
color: var(--_date-field-accent-text);
|
|
box-shadow: var(--date-field-segment-focus-shadow);
|
|
}
|
|
|
|
[data-date-range-picker] [data-date-field-segment][data-invalid] {
|
|
color: var(--date-field-segment-invalid-color);
|
|
}
|
|
|
|
[data-date-range-picker] [data-date-field-segment][data-readonly] {
|
|
background: var(--date-field-segment-readonly-bg);
|
|
color: var(--date-field-segment-readonly-color);
|
|
text-decoration: var(--date-field-segment-readonly-decoration);
|
|
text-underline-offset: 2px;
|
|
cursor: default;
|
|
}
|
|
|
|
[data-date-range-picker] [data-date-field-segment][data-disabled] {
|
|
cursor: not-allowed;
|
|
opacity: var(--date-field-disabled-opacity);
|
|
}
|
|
|
|
[data-date-range-picker-trigger] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 0 0 auto;
|
|
inline-size: var(--_date-field-height);
|
|
block-size: var(--_date-field-height);
|
|
padding: 0;
|
|
border: var(--date-field-border-width) solid var(--date-field-border);
|
|
border-radius: var(--date-field-radius);
|
|
background: var(--date-field-bg);
|
|
color: inherit;
|
|
cursor: pointer;
|
|
transition:
|
|
background var(--date-field-transition-duration) var(--date-field-transition-ease),
|
|
border-color var(--date-field-transition-duration) var(--date-field-transition-ease),
|
|
box-shadow var(--date-field-transition-duration) var(--date-field-transition-ease),
|
|
color var(--date-field-transition-duration) var(--date-field-transition-ease);
|
|
}
|
|
|
|
[data-date-range-picker-trigger]:hover {
|
|
border-color: var(--_date-field-accent-border);
|
|
background: var(--_date-field-accent-track);
|
|
color: var(--_date-field-accent-text);
|
|
}
|
|
|
|
[data-date-range-picker-trigger]:focus-visible {
|
|
outline: none;
|
|
border-color: var(--_date-field-accent-border);
|
|
box-shadow: var(--date-field-focus-shadow);
|
|
}
|
|
|
|
[data-date-range-picker-trigger][data-disabled],
|
|
[data-date-range-picker-trigger]:disabled {
|
|
cursor: not-allowed;
|
|
opacity: var(--date-field-disabled-opacity);
|
|
}
|
|
|
|
/* ── Trigger embedded inside the input ──────────────────────────────────────
|
|
* Same pattern as date-picker: when the consumer places the trigger as a
|
|
* descendant of one of the range inputs (usually the `end` input, as the
|
|
* trailing affordance of the whole range), the icon button becomes flush
|
|
* inside the input chrome. */
|
|
|
|
[data-date-range-field-input] [data-date-range-picker-trigger] {
|
|
flex: 0 0 auto;
|
|
inline-size: var(--date-field-segment-height);
|
|
block-size: var(--date-field-segment-height);
|
|
margin-inline-start: auto;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: var(--date-field-segment-radius);
|
|
background: transparent;
|
|
color: var(--date-field-segment-color);
|
|
box-shadow: none;
|
|
}
|
|
|
|
[data-date-range-field-input] [data-date-range-picker-trigger]:hover {
|
|
border: none;
|
|
background: var(--_date-field-accent-track);
|
|
color: var(--_date-field-accent-text);
|
|
}
|
|
|
|
[data-date-range-field-input] [data-date-range-picker-trigger]:focus-visible {
|
|
outline: none;
|
|
border: none;
|
|
background: var(--_date-field-accent-track);
|
|
color: var(--_date-field-accent-text);
|
|
box-shadow: var(--date-field-segment-focus-shadow);
|
|
}
|
|
|
|
[data-popover-content]:has([data-date-range-picker-calendar]) {
|
|
--_popover-content-width-override: max-content;
|
|
--_popover-content-min-width-override: max-content;
|
|
--_popover-content-max-width-override: calc(100vw - var(--space-4));
|
|
}
|
|
|
|
[data-date-range-picker-calendar][data-range-calendar] {
|
|
--_calendar-padding: var(--calendar-padding-md);
|
|
--_calendar-control-size: var(--calendar-control-size-md);
|
|
--_calendar-day-size: var(--calendar-day-size-md);
|
|
--_calendar-font-size: var(--calendar-font-size-md);
|
|
--_calendar-accent-solid: var(--color-primary-solid);
|
|
--_calendar-accent-solid-hover: var(--color-primary-solid-hover);
|
|
--_calendar-accent-track: var(--color-primary-track);
|
|
--_calendar-accent-border: var(--color-primary-border);
|
|
--_calendar-accent-text: var(--color-primary-text);
|
|
/* Start endpoint uses the `affirm` family by default (semantically: the
|
|
range opens). End endpoint follows the picker's `data-color` accent. */
|
|
--_calendar-range-start-solid: var(--color-affirm-solid);
|
|
--_calendar-range-start-solid-hover: var(--color-affirm-solid-hover);
|
|
--_calendar-range-start-border: var(--color-affirm-border);
|
|
--_calendar-range-start-text: var(--color-affirm-contrast);
|
|
--_calendar-range-end-solid: var(--_calendar-accent-solid);
|
|
--_calendar-range-end-solid-hover: var(--_calendar-accent-solid-hover);
|
|
--_calendar-range-end-border: var(--_calendar-accent-solid);
|
|
--_calendar-range-end-text: var(--calendar-day-selected-color);
|
|
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
gap: var(--calendar-gap);
|
|
inline-size: max-content;
|
|
max-inline-size: calc(100vw - var(--space-6));
|
|
overflow-x: auto;
|
|
padding: 0;
|
|
border-color: transparent;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
color: var(--calendar-color);
|
|
font-family: var(--calendar-font-family);
|
|
font-size: var(--_calendar-font-size);
|
|
line-height: var(--calendar-line-height);
|
|
}
|
|
|
|
[data-date-range-picker-calendar][data-range-calendar][data-size='xs'] {
|
|
--_calendar-padding: var(--calendar-padding-xs);
|
|
--_calendar-control-size: var(--calendar-control-size-xs);
|
|
--_calendar-day-size: var(--calendar-day-size-xs);
|
|
--_calendar-font-size: var(--calendar-font-size-xs);
|
|
}
|
|
|
|
[data-date-range-picker-calendar][data-range-calendar][data-size='sm'] {
|
|
--_calendar-padding: var(--calendar-padding-sm);
|
|
--_calendar-control-size: var(--calendar-control-size-sm);
|
|
--_calendar-day-size: var(--calendar-day-size-sm);
|
|
--_calendar-font-size: var(--calendar-font-size-sm);
|
|
}
|
|
|
|
[data-date-range-picker-calendar][data-range-calendar][data-size='lg'] {
|
|
--_calendar-padding: var(--calendar-padding-lg);
|
|
--_calendar-control-size: var(--calendar-control-size-lg);
|
|
--_calendar-day-size: var(--calendar-day-size-lg);
|
|
--_calendar-font-size: var(--calendar-font-size-lg);
|
|
}
|
|
|
|
[data-date-range-picker-calendar][data-range-calendar][data-color='secondary'] {
|
|
--_calendar-accent-solid: var(--color-secondary-solid);
|
|
--_calendar-accent-solid-hover: var(--color-secondary-solid-hover);
|
|
--_calendar-accent-track: var(--color-secondary-track);
|
|
--_calendar-accent-border: var(--color-secondary-border);
|
|
--_calendar-accent-text: var(--color-secondary-text);
|
|
}
|
|
|
|
[data-date-range-picker-calendar][data-range-calendar][data-color='neutral'] {
|
|
--_calendar-accent-solid: var(--color-neutral-solid);
|
|
--_calendar-accent-solid-hover: var(--color-neutral-solid-hover);
|
|
--_calendar-accent-track: var(--color-neutral-track);
|
|
--_calendar-accent-border: var(--color-neutral-border);
|
|
--_calendar-accent-text: var(--color-neutral-text);
|
|
}
|
|
|
|
[data-date-range-picker-calendar][data-range-calendar][data-color='affirm'] {
|
|
--_calendar-accent-solid: var(--color-affirm-solid);
|
|
--_calendar-accent-solid-hover: var(--color-affirm-solid-hover);
|
|
--_calendar-accent-track: var(--color-affirm-track);
|
|
--_calendar-accent-border: var(--color-affirm-border);
|
|
--_calendar-accent-text: var(--color-affirm-text);
|
|
--_calendar-range-start-solid: var(--color-secondary-solid);
|
|
--_calendar-range-start-solid-hover: var(--color-secondary-solid-hover);
|
|
--_calendar-range-start-border: var(--color-secondary-border);
|
|
--_calendar-range-start-text: var(--color-secondary-contrast);
|
|
}
|
|
|
|
[data-date-range-picker-calendar][data-range-calendar][data-color='fulfill'] {
|
|
--_calendar-accent-solid: var(--color-fulfill-solid);
|
|
--_calendar-accent-solid-hover: var(--color-fulfill-solid-hover);
|
|
--_calendar-accent-track: var(--color-fulfill-track);
|
|
--_calendar-accent-border: var(--color-fulfill-border);
|
|
--_calendar-accent-text: var(--color-fulfill-text);
|
|
--_calendar-range-start-solid: var(--color-secondary-solid);
|
|
--_calendar-range-start-solid-hover: var(--color-secondary-solid-hover);
|
|
--_calendar-range-start-border: var(--color-secondary-border);
|
|
--_calendar-range-start-text: var(--color-secondary-contrast);
|
|
}
|
|
|
|
[data-date-range-picker-calendar][data-range-calendar][data-color='risk'] {
|
|
--_calendar-accent-solid: var(--color-risk-solid);
|
|
--_calendar-accent-solid-hover: var(--color-risk-solid-hover);
|
|
--_calendar-accent-track: var(--color-risk-track);
|
|
--_calendar-accent-border: var(--color-risk-border);
|
|
--_calendar-accent-text: var(--color-risk-text);
|
|
}
|
|
|
|
[data-date-range-picker-calendar][data-range-calendar][data-color='threat'] {
|
|
--_calendar-accent-solid: var(--color-threat-solid);
|
|
--_calendar-accent-solid-hover: var(--color-threat-solid-hover);
|
|
--_calendar-accent-track: var(--color-threat-track);
|
|
--_calendar-accent-border: var(--color-threat-border);
|
|
--_calendar-accent-text: var(--color-threat-text);
|
|
}
|
|
|
|
[data-date-range-picker-calendar][data-range-calendar][data-color='loss'] {
|
|
--_calendar-accent-solid: var(--color-loss-solid);
|
|
--_calendar-accent-solid-hover: var(--color-loss-solid-hover);
|
|
--_calendar-accent-track: var(--color-loss-track);
|
|
--_calendar-accent-border: var(--color-loss-border);
|
|
--_calendar-accent-text: var(--color-loss-text);
|
|
}
|
|
|
|
[data-date-range-picker-calendar][data-range-calendar][data-invalid] {
|
|
border-color: transparent;
|
|
}
|
|
|
|
|
|
@media (max-width: 42rem) {
|
|
[data-date-range-field-input] {
|
|
flex-basis: 100%;
|
|
}
|
|
|
|
[data-date-range-picker-trigger] {
|
|
margin-inline-start: auto;
|
|
}
|
|
}
|
|
|
|
/* ── Range Year-view + Month-view (kind='year' / 'month') ────────────────── */
|
|
|
|
[data-date-range-picker-year-view],
|
|
[data-date-range-picker-month-view] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
inline-size: min(20rem, 100%);
|
|
}
|
|
|
|
[data-date-range-picker-year-view-header],
|
|
[data-date-range-picker-month-view-header] {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
[data-date-range-picker-year-view-heading],
|
|
[data-date-range-picker-month-view-heading] {
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-content-primary);
|
|
}
|
|
|
|
[data-date-range-picker-year-view-prev],
|
|
[data-date-range-picker-year-view-next],
|
|
[data-date-range-picker-month-view-prev],
|
|
[data-date-range-picker-month-view-next] {
|
|
min-block-size: var(--control-height-sm);
|
|
min-inline-size: var(--control-height-sm);
|
|
border-radius: var(--radius-md);
|
|
border: var(--border-width) solid transparent;
|
|
background: transparent;
|
|
color: var(--color-content-primary);
|
|
cursor: pointer;
|
|
font: inherit;
|
|
font-size: var(--font-size-md);
|
|
}
|
|
|
|
[data-date-range-picker-year-view-prev]:hover,
|
|
[data-date-range-picker-year-view-next]:hover,
|
|
[data-date-range-picker-month-view-prev]:hover,
|
|
[data-date-range-picker-month-view-next]:hover {
|
|
background: var(--color-surface-overlay);
|
|
}
|
|
|
|
[data-date-range-picker-year-view-grid],
|
|
[data-date-range-picker-month-view-grid] {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
[data-date-range-picker-year-view-cell],
|
|
[data-date-range-picker-month-view-cell] {
|
|
min-block-size: var(--control-height-md);
|
|
border-radius: var(--radius-md);
|
|
border: var(--border-width) solid transparent;
|
|
background: transparent;
|
|
color: var(--color-content-primary);
|
|
cursor: pointer;
|
|
font: inherit;
|
|
font-size: var(--font-size-sm);
|
|
transition:
|
|
background var(--duration-fast) var(--ease-default),
|
|
color var(--duration-fast) var(--ease-default);
|
|
}
|
|
|
|
[data-date-range-picker-year-view-cell]:hover,
|
|
[data-date-range-picker-month-view-cell]:hover {
|
|
background: var(--color-surface-overlay);
|
|
}
|
|
|
|
/* Range stripe: in-range cells get a tinted background matching the
|
|
* day-grid pattern (track scale, scale-3). Start and end cells overlay
|
|
* it with the solid primary fill — much higher contrast — so the
|
|
* endpoints stand out clearly from the in-range middle.
|
|
*
|
|
* Color choice: `--color-primary-track` is scale-3 of the primary scale
|
|
* (the canonical "subtle wash" step). Using it directly — instead of a
|
|
* percentage-mixed primary-solid — keeps the tone consistent with the
|
|
* day-grid range visual and avoids the over-saturated mid that
|
|
* 22% of solid produced. */
|
|
[data-date-range-picker-year-view-cell][data-in-range],
|
|
[data-date-range-picker-month-view-cell][data-in-range] {
|
|
background: var(--color-primary-track);
|
|
color: var(--color-primary-text);
|
|
border-radius: 0;
|
|
}
|
|
|
|
[data-date-range-picker-year-view-cell][data-range-start],
|
|
[data-date-range-picker-year-view-cell][data-range-end],
|
|
[data-date-range-picker-month-view-cell][data-range-start],
|
|
[data-date-range-picker-month-view-cell][data-range-end] {
|
|
background: var(--color-primary-solid);
|
|
color: var(--color-content-on-solid);
|
|
border-color: var(--color-primary-border);
|
|
}
|
|
|
|
/* Round the open edge of the range strip on start / end cells. */
|
|
[data-date-range-picker-year-view-cell][data-range-start],
|
|
[data-date-range-picker-month-view-cell][data-range-start] {
|
|
border-start-start-radius: var(--radius-md);
|
|
border-end-start-radius: var(--radius-md);
|
|
}
|
|
|
|
[data-date-range-picker-year-view-cell][data-range-end],
|
|
[data-date-range-picker-month-view-cell][data-range-end] {
|
|
border-start-end-radius: var(--radius-md);
|
|
border-end-end-radius: var(--radius-md);
|
|
}
|
|
|
|
[data-date-range-picker-year-view-cell]:focus-visible,
|
|
[data-date-range-picker-month-view-cell]:focus-visible {
|
|
outline: var(--focus-ring-width) solid var(--color-primary-border);
|
|
outline-offset: var(--focus-ring-offset);
|
|
}
|
|
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
[data-date-range-picker-trigger],
|
|
[data-date-range-field-input],
|
|
[data-date-range-picker] [data-date-field-segment],
|
|
[data-range-calendar-prev-button],
|
|
[data-range-calendar-next-button],
|
|
[data-range-calendar-month-select],
|
|
[data-range-calendar-year-select],
|
|
[data-range-calendar-day] {
|
|
transition: none;
|
|
}
|
|
}
|