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.
363 lines
11 KiB
363 lines
11 KiB
[data-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);
|
|
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
gap: var(--calendar-gap);
|
|
inline-size: max-content;
|
|
max-inline-size: 100%;
|
|
padding: var(--_calendar-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(--_calendar-font-size);
|
|
line-height: var(--calendar-line-height);
|
|
}
|
|
|
|
[data-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-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-calendar][data-variant='outline'] {
|
|
background: var(--calendar-outline-bg);
|
|
box-shadow: var(--calendar-outline-shadow);
|
|
}
|
|
|
|
[data-calendar][data-variant='ghost'] {
|
|
padding: 0;
|
|
border-color: transparent;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
[data-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-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-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);
|
|
}
|
|
|
|
[data-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);
|
|
}
|
|
|
|
[data-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-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-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-calendar-header] {
|
|
display: grid;
|
|
grid-template-columns: var(--_calendar-control-size) minmax(0, 1fr) var(--_calendar-control-size);
|
|
align-items: center;
|
|
gap: var(--calendar-header-gap);
|
|
inline-size: 100%;
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
[data-calendar-header-controls] {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--calendar-header-gap);
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
[data-calendar-heading] {
|
|
flex: 1 1 auto;
|
|
min-inline-size: 0;
|
|
color: var(--calendar-heading-color);
|
|
font-weight: var(--calendar-heading-font-weight);
|
|
text-align: center;
|
|
}
|
|
|
|
[data-calendar-month-panel] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--calendar-grid-gap);
|
|
min-inline-size: max-content;
|
|
}
|
|
|
|
[data-calendar-month-panel] > [data-calendar-heading] {
|
|
flex: 0 0 auto;
|
|
font-size: var(--calendar-heading-font-size, 0.95em);
|
|
text-align: center;
|
|
}
|
|
|
|
[data-calendar-prev-button],
|
|
[data-calendar-next-button] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 0 0 auto;
|
|
inline-size: var(--_calendar-control-size);
|
|
block-size: var(--_calendar-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-calendar-prev-button]:hover,
|
|
[data-calendar-next-button]:hover {
|
|
border-color: var(--calendar-control-border-hover);
|
|
background: var(--calendar-control-bg-hover);
|
|
color: var(--calendar-control-color-hover);
|
|
}
|
|
|
|
[data-calendar-prev-button]:focus-visible,
|
|
[data-calendar-next-button]:focus-visible,
|
|
[data-calendar-month-select]:focus-visible,
|
|
[data-calendar-year-select]:focus-visible,
|
|
[data-calendar-day]:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--calendar-focus-shadow);
|
|
}
|
|
|
|
[data-calendar-prev-button][data-disabled],
|
|
[data-calendar-next-button][data-disabled],
|
|
[data-calendar-month-select][data-disabled],
|
|
[data-calendar-year-select][data-disabled] {
|
|
cursor: not-allowed;
|
|
opacity: var(--calendar-disabled-opacity);
|
|
}
|
|
|
|
[data-calendar-month-select],
|
|
[data-calendar-year-select] {
|
|
min-inline-size: 0;
|
|
block-size: var(--_calendar-control-size);
|
|
padding-inline: var(--calendar-select-px);
|
|
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);
|
|
font: inherit;
|
|
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-calendar-month-select] {
|
|
inline-size: calc(var(--_calendar-day-size) * 2.35);
|
|
}
|
|
|
|
[data-calendar-year-select] {
|
|
inline-size: calc(var(--_calendar-day-size) * 2.15);
|
|
}
|
|
|
|
[data-calendar-month-select]:hover,
|
|
[data-calendar-year-select]:hover {
|
|
border-color: var(--calendar-control-border-hover);
|
|
background: var(--calendar-control-bg-hover);
|
|
color: var(--calendar-control-color-hover);
|
|
}
|
|
|
|
[data-calendar-grid] {
|
|
inline-size: max-content;
|
|
max-inline-size: 100%;
|
|
margin-inline: auto;
|
|
border-collapse: separate;
|
|
border-spacing: var(--calendar-grid-gap);
|
|
table-layout: fixed;
|
|
}
|
|
|
|
[data-calendar-head-cell] {
|
|
inline-size: var(--_calendar-day-size);
|
|
block-size: var(--calendar-weekday-size);
|
|
color: var(--calendar-weekday-color);
|
|
font-size: var(--calendar-weekday-font-size);
|
|
font-weight: var(--calendar-weekday-font-weight);
|
|
text-align: center;
|
|
}
|
|
|
|
[data-calendar-week-number] {
|
|
color: var(--calendar-weekday-color);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
[data-calendar-week-number][scope='row'] {
|
|
block-size: var(--_calendar-day-size);
|
|
font-size: var(--calendar-weekday-font-size);
|
|
font-weight: var(--calendar-weekday-font-weight);
|
|
}
|
|
|
|
[data-calendar-cell] {
|
|
padding: 0;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
[data-calendar-day] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
inline-size: var(--_calendar-day-size);
|
|
block-size: var(--_calendar-day-size);
|
|
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-calendar-day]:hover {
|
|
border-color: var(--calendar-day-border-hover);
|
|
background: var(--calendar-day-bg-hover);
|
|
color: var(--calendar-day-color-hover);
|
|
}
|
|
|
|
[data-calendar-day][data-selected] {
|
|
border-color: var(--_calendar-accent-solid);
|
|
background: var(--_calendar-accent-solid);
|
|
color: var(--calendar-day-selected-color);
|
|
}
|
|
|
|
[data-calendar-day][data-selected]:hover {
|
|
border-color: var(--_calendar-accent-solid-hover);
|
|
background: var(--_calendar-accent-solid-hover);
|
|
}
|
|
|
|
[data-calendar-day][data-focused]:not([data-selected]) {
|
|
border-color: var(--_calendar-accent-border);
|
|
background: var(--_calendar-accent-track);
|
|
color: var(--_calendar-accent-text);
|
|
}
|
|
|
|
[data-calendar-day][data-today]: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-calendar-day][data-outside-month] {
|
|
color: var(--calendar-day-outside-color);
|
|
opacity: var(--calendar-day-outside-opacity);
|
|
}
|
|
|
|
[data-calendar-day][data-weekend]:not([data-selected]) {
|
|
color: var(--calendar-day-weekend-color);
|
|
}
|
|
|
|
[data-calendar-day][data-holiday]:not([data-selected]) {
|
|
box-shadow: var(--calendar-day-holiday-shadow);
|
|
}
|
|
|
|
[data-calendar-day][data-unavailable] {
|
|
text-decoration-line: line-through;
|
|
text-decoration-color: var(--calendar-day-unavailable-decoration);
|
|
}
|
|
|
|
[data-calendar-day][data-disabled],
|
|
[data-calendar-day][data-unavailable] {
|
|
cursor: not-allowed;
|
|
opacity: var(--calendar-disabled-opacity);
|
|
}
|
|
|
|
[data-calendar][data-invalid] {
|
|
border-color: var(--calendar-invalid-border);
|
|
}
|
|
|
|
[data-calendar][data-disabled] {
|
|
opacity: var(--calendar-disabled-opacity);
|
|
}
|
|
|
|
[data-calendar][data-event],
|
|
[data-calendar-day][data-event],
|
|
[data-calendar-prev-button][data-event],
|
|
[data-calendar-next-button][data-event],
|
|
[data-calendar-month-select][data-event],
|
|
[data-calendar-year-select][data-event] {
|
|
box-shadow: var(--calendar-event-shadow);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
[data-calendar-prev-button],
|
|
[data-calendar-next-button],
|
|
[data-calendar-month-select],
|
|
[data-calendar-year-select],
|
|
[data-calendar-day] {
|
|
transition: none;
|
|
}
|
|
}
|