95 lines
1.7 KiB
SCSS
95 lines
1.7 KiB
SCSS
@import "../base";
|
|
@import "./config";
|
|
|
|
.root {
|
|
position: relative;
|
|
height: $calendar-total-height;
|
|
overflow: hidden;
|
|
font-size: $font-size-small;
|
|
line-height: $calendar-row-height;
|
|
text-align: center;
|
|
background: $calendar-primary-contrast-color;
|
|
.prev, .next {
|
|
position: absolute;
|
|
top: 0;
|
|
z-index: $z-index-high;
|
|
height: 3.6 * $unit;
|
|
cursor: pointer;
|
|
opacity: .7;
|
|
}
|
|
.prev {
|
|
left: 0;
|
|
}
|
|
.next {
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
display: inline-block;
|
|
font-weight: 500;
|
|
line-height: $calendar-row-height;
|
|
}
|
|
|
|
.years {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
font-size: $font-size-big;
|
|
> li {
|
|
line-height: 2.4;
|
|
cursor: pointer;
|
|
&.active {
|
|
font-size: $calendar-year-font-size;
|
|
color: $calendar-primary-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.week {
|
|
display: flex;
|
|
height: $calendar-row-height;
|
|
flex-wrap: wrap;
|
|
font-size: $calendar-day-font-size;
|
|
line-height: $calendar-row-height;
|
|
opacity: .5;
|
|
> span {
|
|
flex: 0 0 (100% / 7);
|
|
}
|
|
}
|
|
|
|
.days {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
font-size: $calendar-day-font-size;
|
|
}
|
|
|
|
.day {
|
|
flex: 0 0 (100% / 7);
|
|
padding: $calendar-day-padding;
|
|
> span {
|
|
display: inline-block;
|
|
width: $calendar-row-height;
|
|
height: $calendar-row-height;
|
|
line-height: $calendar-row-height;
|
|
border-radius: 50%;
|
|
}
|
|
&:hover:not(.active):not(.disabled) > span {
|
|
color: $calendar-primary-contrast-color;
|
|
background: $calendar-primary-hover-color;
|
|
}
|
|
&.active > span {
|
|
color: $calendar-primary-contrast-color;
|
|
background: $calendar-primary-color;
|
|
}
|
|
&:hover:not(.disabled) > span {
|
|
cursor: pointer;
|
|
}
|
|
&.disabled {
|
|
opacity: $calendar-day-disable-opacity;
|
|
}
|
|
}
|
|
|
|
.month {
|
|
background-color: $calendar-primary-contrast-color;
|
|
}
|