forked from cerc-io/snowballtools-base
129 lines
3.2 KiB
CSS
129 lines
3.2 KiB
CSS
/* React Calendar */
|
|
.react-calendar {
|
|
@apply border-none font-sans;
|
|
}
|
|
|
|
/* Weekdays -- START */
|
|
.react-calendar__month-view__weekdays {
|
|
@apply p-0 flex items-center justify-center;
|
|
}
|
|
|
|
.react-calendar__month-view__weekdays__weekday {
|
|
@apply h-8 w-12 flex items-center justify-center p-0 font-medium text-xs text-elements-disabled mb-2;
|
|
}
|
|
|
|
abbr[title] {
|
|
text-decoration: none;
|
|
}
|
|
/* Weekdays -- END */
|
|
|
|
/* Days -- START */
|
|
.react-calendar__month-view__days {
|
|
@apply p-0 gap-0;
|
|
}
|
|
|
|
.react-calendar__month-view__days__day--neighboringMonth {
|
|
@apply !text-elements-disabled;
|
|
}
|
|
|
|
.react-calendar__month-view__days__day--neighboringMonth:hover {
|
|
@apply !text-elements-disabled !bg-transparent;
|
|
}
|
|
|
|
.react-calendar__month-view__days__day--neighboringMonth {
|
|
@apply !text-elements-disabled !bg-transparent;
|
|
}
|
|
|
|
/* For weekend days */
|
|
.react-calendar__month-view__days__day--weekend {
|
|
/* color: ${colors.grey[950]} !important; */
|
|
}
|
|
|
|
.react-calendar__tile {
|
|
@apply h-12 w-12 text-elements-high-em;
|
|
}
|
|
|
|
.react-calendar__tile:hover {
|
|
@apply bg-base-bg-emphasized rounded-lg;
|
|
}
|
|
|
|
.react-calendar__tile:focus-visible {
|
|
@apply bg-base-bg-emphasized rounded-lg focus-ring z-10;
|
|
}
|
|
|
|
.react-calendar__tile--now {
|
|
@apply bg-base-bg-emphasized text-elements-high-em rounded-lg;
|
|
}
|
|
|
|
.react-calendar__tile--now:hover {
|
|
@apply bg-base-bg-emphasized text-elements-high-em rounded-lg;
|
|
}
|
|
|
|
.react-calendar__tile--now:focus-visible {
|
|
@apply bg-base-bg-emphasized text-elements-high-em rounded-lg focus-ring;
|
|
}
|
|
|
|
.react-calendar__tile--active {
|
|
@apply bg-controls-primary text-elements-on-primary rounded-lg;
|
|
}
|
|
|
|
.react-calendar__tile--active:hover {
|
|
@apply bg-controls-primary-hovered;
|
|
}
|
|
|
|
.react-calendar__tile--active:focus-visible {
|
|
@apply bg-controls-primary-hovered focus-ring;
|
|
}
|
|
|
|
/* Range -- START */
|
|
.react-calendar__tile--range {
|
|
@apply bg-controls-secondary text-elements-on-secondary rounded-none;
|
|
}
|
|
|
|
.react-calendar__tile--range:hover {
|
|
@apply bg-controls-secondary-hovered text-elements-on-secondary rounded-none;
|
|
}
|
|
|
|
.react-calendar__tile--range:focus-visible {
|
|
@apply bg-controls-secondary-hovered text-elements-on-secondary rounded-lg;
|
|
}
|
|
|
|
.react-calendar__tile--rangeStart {
|
|
@apply bg-controls-primary text-elements-on-primary rounded-lg;
|
|
}
|
|
|
|
.react-calendar__tile--rangeStart:hover {
|
|
@apply bg-controls-primary-hovered text-elements-on-primary rounded-lg;
|
|
}
|
|
|
|
.react-calendar__tile--rangeStart:focus-visible {
|
|
@apply bg-controls-primary-hovered text-elements-on-primary rounded-lg focus-ring;
|
|
}
|
|
|
|
.react-calendar__tile--rangeEnd {
|
|
@apply bg-controls-primary text-elements-on-primary rounded-lg;
|
|
}
|
|
|
|
.react-calendar__tile--rangeEnd:hover {
|
|
@apply bg-controls-primary-hovered text-elements-on-primary rounded-lg;
|
|
}
|
|
|
|
.react-calendar__tile--rangeEnd:focus-visible {
|
|
@apply bg-controls-primary-hovered text-elements-on-primary rounded-lg focus-ring;
|
|
}
|
|
/* Range -- END */
|
|
/* Days -- END */
|
|
|
|
/* Months -- START */
|
|
.react-calendar__tile--hasActive {
|
|
@apply bg-controls-primary text-elements-on-primary rounded-lg;
|
|
}
|
|
|
|
.react-calendar__tile--hasActive:hover {
|
|
@apply bg-controls-primary-hovered text-elements-on-primary rounded-lg;
|
|
}
|
|
|
|
.react-calendar__tile--hasActive:focus-visible {
|
|
@apply bg-controls-primary-hovered text-elements-on-primary rounded-lg focus-ring;
|
|
}
|