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.
284 lines
9.4 KiB
284 lines
9.4 KiB
/* MonthGrid — reuses calendar tokens for visual consistency. */
|
|
|
|
[data-month-grid] {
|
|
--_month-grid-padding: var(--calendar-padding-md);
|
|
--_month-grid-control-size: var(--calendar-control-size-md);
|
|
--_month-grid-cell-size: var(--calendar-day-size-md);
|
|
--_month-grid-font-size: var(--calendar-font-size-md);
|
|
--_month-grid-accent-solid: var(--color-primary-solid);
|
|
--_month-grid-accent-solid-hover: var(--color-primary-solid-hover);
|
|
--_month-grid-accent-track: var(--color-primary-track);
|
|
--_month-grid-accent-border: var(--color-primary-border);
|
|
--_month-grid-accent-text: var(--color-primary-text);
|
|
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
gap: var(--calendar-gap);
|
|
inline-size: max-content;
|
|
max-inline-size: 100%;
|
|
box-sizing: border-box;
|
|
padding: var(--_month-grid-padding);
|
|
border: var(--calendar-border-width) solid var(--calendar-border);
|
|
border-radius: var(--calendar-radius);
|
|
background: var(--calendar-bg);
|
|
box-shadow: var(--calendar-shadow);
|
|
color: var(--calendar-color);
|
|
font-family: var(--calendar-font-family);
|
|
font-size: var(--_month-grid-font-size);
|
|
line-height: var(--calendar-line-height);
|
|
}
|
|
|
|
[data-month-grid][data-size='xs'] {
|
|
--_month-grid-padding: var(--calendar-padding-xs);
|
|
--_month-grid-control-size: var(--calendar-control-size-xs);
|
|
--_month-grid-cell-size: var(--calendar-day-size-xs);
|
|
--_month-grid-font-size: var(--calendar-font-size-xs);
|
|
}
|
|
|
|
[data-month-grid][data-size='sm'] {
|
|
--_month-grid-padding: var(--calendar-padding-sm);
|
|
--_month-grid-control-size: var(--calendar-control-size-sm);
|
|
--_month-grid-cell-size: var(--calendar-day-size-sm);
|
|
--_month-grid-font-size: var(--calendar-font-size-sm);
|
|
}
|
|
|
|
[data-month-grid][data-size='lg'] {
|
|
--_month-grid-padding: var(--calendar-padding-lg);
|
|
--_month-grid-control-size: var(--calendar-control-size-lg);
|
|
--_month-grid-cell-size: var(--calendar-day-size-lg);
|
|
--_month-grid-font-size: var(--calendar-font-size-lg);
|
|
}
|
|
|
|
[data-month-grid][data-variant='outline'] {
|
|
background: var(--calendar-outline-bg);
|
|
box-shadow: var(--calendar-outline-shadow);
|
|
}
|
|
|
|
[data-month-grid][data-variant='ghost'] {
|
|
padding: 0;
|
|
border-color: transparent;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
[data-month-grid][data-color='secondary'] {
|
|
--_month-grid-accent-solid: var(--color-secondary-solid);
|
|
--_month-grid-accent-solid-hover: var(--color-secondary-solid-hover);
|
|
--_month-grid-accent-track: var(--color-secondary-track);
|
|
--_month-grid-accent-border: var(--color-secondary-border);
|
|
--_month-grid-accent-text: var(--color-secondary-text);
|
|
}
|
|
|
|
[data-month-grid][data-color='neutral'] {
|
|
--_month-grid-accent-solid: var(--color-neutral-solid);
|
|
--_month-grid-accent-solid-hover: var(--color-neutral-solid-hover);
|
|
--_month-grid-accent-track: var(--color-neutral-track);
|
|
--_month-grid-accent-border: var(--color-neutral-border);
|
|
--_month-grid-accent-text: var(--color-neutral-text);
|
|
}
|
|
|
|
[data-month-grid][data-color='affirm'] {
|
|
--_month-grid-accent-solid: var(--color-affirm-solid);
|
|
--_month-grid-accent-solid-hover: var(--color-affirm-solid-hover);
|
|
--_month-grid-accent-track: var(--color-affirm-track);
|
|
--_month-grid-accent-border: var(--color-affirm-border);
|
|
--_month-grid-accent-text: var(--color-affirm-text);
|
|
}
|
|
|
|
[data-month-grid][data-color='fulfill'] {
|
|
--_month-grid-accent-solid: var(--color-fulfill-solid);
|
|
--_month-grid-accent-solid-hover: var(--color-fulfill-solid-hover);
|
|
--_month-grid-accent-track: var(--color-fulfill-track);
|
|
--_month-grid-accent-border: var(--color-fulfill-border);
|
|
--_month-grid-accent-text: var(--color-fulfill-text);
|
|
}
|
|
|
|
[data-month-grid][data-color='risk'] {
|
|
--_month-grid-accent-solid: var(--color-risk-solid);
|
|
--_month-grid-accent-solid-hover: var(--color-risk-solid-hover);
|
|
--_month-grid-accent-track: var(--color-risk-track);
|
|
--_month-grid-accent-border: var(--color-risk-border);
|
|
--_month-grid-accent-text: var(--color-risk-text);
|
|
}
|
|
|
|
[data-month-grid][data-color='threat'] {
|
|
--_month-grid-accent-solid: var(--color-threat-solid);
|
|
--_month-grid-accent-solid-hover: var(--color-threat-solid-hover);
|
|
--_month-grid-accent-track: var(--color-threat-track);
|
|
--_month-grid-accent-border: var(--color-threat-border);
|
|
--_month-grid-accent-text: var(--color-threat-text);
|
|
}
|
|
|
|
[data-month-grid][data-color='loss'] {
|
|
--_month-grid-accent-solid: var(--color-loss-solid);
|
|
--_month-grid-accent-solid-hover: var(--color-loss-solid-hover);
|
|
--_month-grid-accent-track: var(--color-loss-track);
|
|
--_month-grid-accent-border: var(--color-loss-border);
|
|
--_month-grid-accent-text: var(--color-loss-text);
|
|
}
|
|
|
|
[data-month-grid-header] {
|
|
display: grid;
|
|
grid-template-columns:
|
|
var(--_month-grid-control-size)
|
|
minmax(0, 1fr)
|
|
var(--_month-grid-control-size);
|
|
align-items: center;
|
|
gap: var(--calendar-header-gap);
|
|
inline-size: 100%;
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
[data-month-grid-heading] {
|
|
min-inline-size: 0;
|
|
color: var(--calendar-heading-color);
|
|
font-size: var(--calendar-heading-font-size);
|
|
font-weight: var(--calendar-heading-font-weight);
|
|
text-align: center;
|
|
}
|
|
|
|
[data-month-grid-prev-button],
|
|
[data-month-grid-next-button] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 0 0 auto;
|
|
inline-size: var(--_month-grid-control-size);
|
|
block-size: var(--_month-grid-control-size);
|
|
padding: 0;
|
|
border: var(--calendar-control-border-width) solid var(--calendar-control-border);
|
|
border-radius: var(--calendar-control-radius);
|
|
background: var(--calendar-control-bg);
|
|
color: var(--calendar-control-color);
|
|
cursor: pointer;
|
|
transition:
|
|
background var(--calendar-transition-duration) var(--calendar-transition-ease),
|
|
border-color var(--calendar-transition-duration) var(--calendar-transition-ease),
|
|
color var(--calendar-transition-duration) var(--calendar-transition-ease),
|
|
box-shadow var(--calendar-transition-duration) var(--calendar-transition-ease);
|
|
}
|
|
|
|
[data-month-grid-prev-button]:hover,
|
|
[data-month-grid-next-button]:hover {
|
|
border-color: var(--calendar-control-border-hover);
|
|
background: var(--calendar-control-bg-hover);
|
|
color: var(--calendar-control-color-hover);
|
|
}
|
|
|
|
[data-month-grid-prev-button]:focus-visible,
|
|
[data-month-grid-next-button]:focus-visible,
|
|
[data-month-grid-cell]:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--calendar-focus-shadow);
|
|
}
|
|
|
|
[data-month-grid-prev-button][data-disabled],
|
|
[data-month-grid-next-button][data-disabled] {
|
|
cursor: not-allowed;
|
|
opacity: var(--calendar-disabled-opacity);
|
|
}
|
|
|
|
[data-month-grid-grid] {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: var(--calendar-grid-gap);
|
|
inline-size: max-content;
|
|
max-inline-size: 100%;
|
|
}
|
|
|
|
/* When the month-grid sits inside a popover (DatePicker.MonthView), stretch
|
|
to the popover's content width so the cells distribute across the same
|
|
inline size as the picker-shell footer. */
|
|
[data-popover-content] [data-month-grid] {
|
|
inline-size: 100%;
|
|
}
|
|
[data-popover-content] [data-month-grid-grid] {
|
|
inline-size: 100%;
|
|
}
|
|
|
|
[data-month-grid-cell] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-inline-size: calc(var(--_month-grid-cell-size) * 2);
|
|
block-size: var(--_month-grid-cell-size);
|
|
padding-inline: var(--calendar-select-px, 8px);
|
|
border: var(--calendar-day-border-width) solid var(--calendar-day-border);
|
|
border-radius: var(--calendar-day-radius);
|
|
background: var(--calendar-day-bg);
|
|
color: var(--calendar-day-color);
|
|
font: inherit;
|
|
font-weight: var(--calendar-day-font-weight);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
transition:
|
|
background var(--calendar-transition-duration) var(--calendar-transition-ease),
|
|
border-color var(--calendar-transition-duration) var(--calendar-transition-ease),
|
|
color var(--calendar-transition-duration) var(--calendar-transition-ease),
|
|
box-shadow var(--calendar-transition-duration) var(--calendar-transition-ease),
|
|
opacity var(--calendar-transition-duration) var(--calendar-transition-ease);
|
|
}
|
|
|
|
[data-month-grid-cell]:hover {
|
|
border-color: var(--calendar-day-border-hover);
|
|
background: var(--calendar-day-bg-hover);
|
|
color: var(--calendar-day-color-hover);
|
|
}
|
|
|
|
[data-month-grid-cell][data-selected] {
|
|
border-color: var(--_month-grid-accent-solid);
|
|
background: var(--_month-grid-accent-solid);
|
|
color: var(--calendar-day-selected-color);
|
|
}
|
|
|
|
[data-month-grid-cell][data-selected]:hover {
|
|
border-color: var(--_month-grid-accent-solid-hover);
|
|
background: var(--_month-grid-accent-solid-hover);
|
|
}
|
|
|
|
[data-month-grid-cell][data-focused]:not([data-selected]) {
|
|
border-color: var(--_month-grid-accent-border);
|
|
background: var(--_month-grid-accent-track);
|
|
color: var(--_month-grid-accent-text);
|
|
}
|
|
|
|
[data-month-grid-cell][data-current]:not([data-selected]) {
|
|
border-color: var(--calendar-day-today-border);
|
|
color: var(--calendar-day-today-color);
|
|
font-weight: var(--calendar-day-today-font-weight);
|
|
}
|
|
|
|
[data-month-grid-cell][data-disabled] {
|
|
cursor: not-allowed;
|
|
opacity: var(--calendar-disabled-opacity);
|
|
}
|
|
|
|
[data-month-grid][data-disabled] {
|
|
opacity: var(--calendar-disabled-opacity);
|
|
}
|
|
|
|
[data-month-grid][data-readonly] [data-month-grid-cell]:not([data-selected]) {
|
|
cursor: default;
|
|
}
|
|
|
|
[data-month-grid][data-readonly] [data-month-grid-cell]:not([data-selected]):hover {
|
|
background: var(--calendar-day-bg);
|
|
border-color: var(--calendar-day-border);
|
|
color: var(--calendar-day-color);
|
|
}
|
|
|
|
[data-month-grid][data-event],
|
|
[data-month-grid-cell][data-event],
|
|
[data-month-grid-prev-button][data-event],
|
|
[data-month-grid-next-button][data-event] {
|
|
box-shadow: var(--calendar-event-shadow);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
[data-month-grid-prev-button],
|
|
[data-month-grid-next-button],
|
|
[data-month-grid-cell] {
|
|
transition: none;
|
|
}
|
|
}
|