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.
146 lines
5.0 KiB
146 lines
5.0 KiB
[data-date-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);
|
|
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
gap: var(--date-field-stack-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-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);
|
|
}
|
|
|
|
[data-date-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);
|
|
}
|
|
|
|
[data-date-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);
|
|
}
|
|
|
|
[data-date-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);
|
|
}
|
|
|
|
[data-date-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);
|
|
}
|
|
|
|
[data-date-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);
|
|
}
|
|
|
|
[data-date-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);
|
|
}
|
|
|
|
[data-date-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);
|
|
}
|
|
|
|
[data-date-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);
|
|
}
|
|
|
|
[data-date-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);
|
|
}
|
|
|
|
[data-date-picker][data-variant='outline'] [data-date-field-input] {
|
|
background: transparent;
|
|
}
|
|
|
|
[data-date-picker][data-variant='ghost'] [data-date-field-input] {
|
|
border-color: transparent;
|
|
background: transparent;
|
|
padding-inline: 0;
|
|
}
|
|
|
|
[data-date-picker][data-invalid] [data-date-field-input] {
|
|
border-color: var(--date-field-border-invalid);
|
|
}
|
|
|
|
[data-date-picker][data-disabled] {
|
|
opacity: var(--date-field-disabled-opacity);
|
|
}
|
|
|
|
/* Trigger chrome (flush affordance, hover / focus states, size) is shared —
|
|
see field/field-control-trigger.css (`[data-field-control-trigger]`, the
|
|
eidos marker on the trigger). */
|
|
|
|
[data-popover-content]:has([data-date-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-picker-calendar][data-calendar] {
|
|
padding: 0;
|
|
border-color: transparent;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
[data-date-picker-calendar][data-calendar][data-invalid] {
|
|
border-color: transparent;
|
|
}
|
|
|
|
|
|
/* ── Year-view + Month-view (kind='year' / 'month') ──────────────────────── */
|
|
/* DatePicker.MonthView and DatePicker.YearView now delegate to the
|
|
standalone MonthGrid / YearGrid primitives, so their visuals come from
|
|
`month-grid.css` and `year-grid.css`. */
|
|
|
|
/* The popover content uses a size-based base width (popover-min-width-{sm,md,…})
|
|
that can be narrower than the picker-shell footer's intrinsic content
|
|
(Clear / Cancel / Save buttons + gaps). Let the popover grow to max-content
|
|
when it hosts a date-picker calendar / grid so the inner row never overflows
|
|
and produces a horizontal scrollbar. */
|
|
[data-popover-content]:has(
|
|
> [data-date-picker-calendar],
|
|
> [data-month-grid],
|
|
> [data-year-grid]
|
|
) {
|
|
inline-size: max-content;
|
|
min-inline-size: max-content;
|
|
}
|