240 lines
4.4 KiB
CSS
240 lines
4.4 KiB
CSS
|
@import '../colors.css';
|
||
|
@import '../variables.css';
|
||
|
@import './config.css';
|
||
|
|
||
|
.input:not(.disabled) > .inputElement {
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
|
||
|
.header {
|
||
|
background-color: var(--datepicker-primary-color);
|
||
|
color: var(--datepicker-primary-contrast-color);
|
||
|
cursor: pointer;
|
||
|
padding: calc(1.6 * var(--unit)) calc(2 * var(--unit));
|
||
|
}
|
||
|
|
||
|
.year {
|
||
|
display: inline-block;
|
||
|
font-size: var(--datepicker-year-font-size);
|
||
|
transition: opacity, font-size var(--animation-duration) var(--animation-curve-default);
|
||
|
}
|
||
|
|
||
|
.date {
|
||
|
display: block;
|
||
|
font-size: calc(3.4 * var(--unit));
|
||
|
font-weight: 400;
|
||
|
font-weight: var(--font-weight-semi-bold);
|
||
|
line-height: calc(4 * var(--unit));
|
||
|
margin: 0;
|
||
|
text-transform: capitalize;
|
||
|
transition: opacity var(--animation-duration) var(--animation-curve-default);
|
||
|
}
|
||
|
|
||
|
.calendarWrapper {
|
||
|
padding: var(--unit) calc(0.5 * var(--unit)) 0;
|
||
|
}
|
||
|
|
||
|
.yearsDisplay {
|
||
|
& .date {
|
||
|
opacity: var(--datepicker-inactive-opacity);
|
||
|
}
|
||
|
|
||
|
& .year {
|
||
|
font-size: var(--font-size-normal);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.monthsDisplay {
|
||
|
& .year {
|
||
|
opacity: var(--datepicker-inactive-opacity);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.dialog {
|
||
|
width: var(--datepicker-dialog-width);
|
||
|
|
||
|
& > [role='body'] {
|
||
|
padding: 0;
|
||
|
}
|
||
|
|
||
|
& > [role='navigation'] > .button {
|
||
|
color: var(--datepicker-primary-color);
|
||
|
|
||
|
&:hover {
|
||
|
background: var(--datepicker-primary-hover-color);
|
||
|
}
|
||
|
|
||
|
&:focus:not(:active) {
|
||
|
background: var(--datepicker-primary-hover-color);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.calendar {
|
||
|
background: var(--calendar-primary-contrast-color);
|
||
|
font-size: var(--font-size-small);
|
||
|
height: var(--calendar-total-height);
|
||
|
line-height: var(--calendar-row-height);
|
||
|
overflow: hidden;
|
||
|
position: relative;
|
||
|
text-align: center;
|
||
|
|
||
|
& .prev,
|
||
|
& .next {
|
||
|
cursor: pointer;
|
||
|
height: calc(3.6 * var(--unit));
|
||
|
opacity: 0.7;
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
z-index: var(--z-index-high);
|
||
|
}
|
||
|
|
||
|
& .prev {
|
||
|
left: 0;
|
||
|
}
|
||
|
|
||
|
& .next {
|
||
|
right: 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.title {
|
||
|
display: inline-block;
|
||
|
font-weight: 500;
|
||
|
line-height: var(--calendar-row-height);
|
||
|
}
|
||
|
|
||
|
.years {
|
||
|
font-size: var(--font-size-big);
|
||
|
height: 100%;
|
||
|
list-style: none;
|
||
|
margin: 0;
|
||
|
overflow-y: auto;
|
||
|
padding: 0;
|
||
|
|
||
|
& > li {
|
||
|
cursor: pointer;
|
||
|
line-height: 2.4;
|
||
|
|
||
|
&.active {
|
||
|
color: var(--calendar-primary-color);
|
||
|
font-size: var(--calendar-year-font-size);
|
||
|
font-weight: var(--font-weight-semi-bold);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.week {
|
||
|
display: flex;
|
||
|
flex-wrap: wrap;
|
||
|
font-size: var(--calendar-day-font-size);
|
||
|
height: var(--calendar-row-height);
|
||
|
line-height: var(--calendar-row-height);
|
||
|
opacity: 0.5;
|
||
|
|
||
|
& > span {
|
||
|
flex: 0 0 calc(100% / 7);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.days {
|
||
|
display: flex;
|
||
|
flex-wrap: wrap;
|
||
|
font-size: var(--calendar-day-font-size);
|
||
|
}
|
||
|
|
||
|
.day {
|
||
|
flex: 0 0 calc(100% / 7);
|
||
|
padding: var(--calendar-day-padding-topbottom) var(--calendar-day-padding-leftright);
|
||
|
|
||
|
& > span {
|
||
|
border-radius: 50%;
|
||
|
display: inline-block;
|
||
|
height: var(--calendar-row-height);
|
||
|
line-height: var(--calendar-row-height);
|
||
|
width: var(--calendar-row-height);
|
||
|
}
|
||
|
|
||
|
&:hover:not(.active):not(.disabled) > span {
|
||
|
background: var(--calendar-primary-hover-color);
|
||
|
color: var(--calendar-primary-contrast-color);
|
||
|
}
|
||
|
|
||
|
&.active > span {
|
||
|
background: var(--calendar-primary-color);
|
||
|
color: var(--calendar-primary-contrast-color);
|
||
|
}
|
||
|
|
||
|
&:hover:not(.disabled) > span {
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
|
||
|
&.disabled {
|
||
|
opacity: var(--calendar-day-disable-opacity);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.month {
|
||
|
background-color: var(--calendar-primary-contrast-color);
|
||
|
}
|
||
|
|
||
|
.slideRightEnter,
|
||
|
.slideRightLeave {
|
||
|
position: absolute;
|
||
|
}
|
||
|
|
||
|
.slideRightEnterActive,
|
||
|
.slideRightLeaveActive {
|
||
|
transition-duration: 350ms;
|
||
|
transition-property: transform, opacity;
|
||
|
transition-timing-function: ease-in-out;
|
||
|
}
|
||
|
|
||
|
.slideRightEnter {
|
||
|
opacity: 0;
|
||
|
transform: translateX(100%);
|
||
|
|
||
|
&.slideRightEnterActive {
|
||
|
opacity: 1;
|
||
|
transform: translateX(0);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.slideRightLeave {
|
||
|
opacity: 1;
|
||
|
transform: translateX(0);
|
||
|
|
||
|
&.slideRightLeaveActive {
|
||
|
opacity: 0;
|
||
|
transform: translateX(-100%);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.slideLeftEnter,
|
||
|
.slideLeftLeave {
|
||
|
position: absolute;
|
||
|
transition-duration: 0.35s;
|
||
|
transition-property: transform, opacity;
|
||
|
transition-timing-function: ease-in-out;
|
||
|
}
|
||
|
|
||
|
.slideLeftEnter {
|
||
|
opacity: 0;
|
||
|
transform: translate3d(-100%, 0, 0);
|
||
|
|
||
|
&.slideLeftEnterActive {
|
||
|
opacity: 1;
|
||
|
transform: translate3d(0, 0, 0);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.slideLeftLeave {
|
||
|
opacity: 1;
|
||
|
transform: translate3d(0, 0, 0);
|
||
|
|
||
|
&.slideLeftLeaveActive {
|
||
|
opacity: 0;
|
||
|
transform: translate3d(100%, 0, 0);
|
||
|
}
|
||
|
}
|