73 lines
1.4 KiB
CSS
73 lines
1.4 KiB
CSS
:host {
|
|
display: block;
|
|
}
|
|
|
|
:host(.show-weeks) > .calendar-month {
|
|
grid-template-areas: "no weekdays" "weeks days";
|
|
grid-template-columns: 1fr 7fr;
|
|
}
|
|
|
|
:host(:not(.show-weeks)) > .calendar-month > .no,
|
|
:host(:not(.show-weeks)) > .calendar-month > .weeks {
|
|
display: none;
|
|
}
|
|
|
|
.calendar-month {
|
|
display: grid;
|
|
grid-row-gap: 10px;
|
|
grid-template-areas: "weekdays" "days";
|
|
grid-template-columns: 1fr;
|
|
min-height: 200px;
|
|
}
|
|
|
|
.calendar-month > .weekdays {
|
|
display: grid;
|
|
grid-area: weekdays;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
text-align: center;
|
|
}
|
|
|
|
.calendar-month > .no {
|
|
color: var(--color-line);
|
|
text-align: center;
|
|
}
|
|
|
|
.calendar-month > .weeks {
|
|
color: var(--color-text-shy);
|
|
grid-area: weeks;
|
|
}
|
|
|
|
.calendar-month > .weeks,
|
|
.calendar-month > .days {
|
|
display: grid;
|
|
grid-row-gap: 6px;
|
|
}
|
|
|
|
.calendar-month > .weeks > .week,
|
|
.calendar-month > .days > .day {
|
|
align-items: center;
|
|
aspect-ratio: 1 / 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.calendar-month > .days {
|
|
grid-area: days;
|
|
grid-auto-flow: row;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
width: 100%;
|
|
}
|
|
|
|
.calendar-month > .days > .day.-previous,
|
|
.calendar-month > .days > .day.-next {
|
|
color: var(--color-text-shy);
|
|
}
|
|
|
|
.calendar-month > .days > .day.-today {
|
|
background-color: var(--color-brand);
|
|
background-image: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1));
|
|
border-radius: 50%;
|
|
color: var(--palette-white);
|
|
}
|