web-apps/apps/common/main/resources/less/calendar.less
2019-10-29 13:33:24 +03:00

106 lines
2.1 KiB
Plaintext

@calendar-bg-color: #446995;
.calendar-window {
border-radius: 0;
box-shadow: none;
}
.calendar-box {
width: 198px;
height: 220px;
border: 1px solid @calendar-bg-color;
.btn {
background-color: transparent;
border: none;
height: 24px;
width: 24px;
margin-top: 5px;
.icon {
width: 24px;
height: 24px;
display: block;
position: relative;
}
}
.calendar-header {
height: 50px;
background-color: @calendar-bg-color;
color: #FFFFFF;
.top-row {
display: flex;
justify-content: space-between;
}
.bottom-row {
display: flex;
justify-content: space-around;
padding: 0;
}
.title {
margin-top: 4px;
margin-bottom: 3px;
padding: 2px 10px 0;
font-size: 13px;
label {
font-weight: bold;
&:not(:last-of-type) {
margin-right: 6px;
}
}
&:hover {
background-color: rgba(255,255,255,0.2);
cursor: pointer;
label {
cursor: pointer;
}
}
}
}
.calendar-content {
.item {
margin: 0;
padding: 0;
height: auto;
width: auto;
box-shadow: none;
border: 1px solid #fff;
.name-month, .name-year {
height: 40px;
width: 47px;
background-color: #F1F1F1;
display: flex;
justify-content: center;
align-items: center;
font-size: 13px;
}
.number-day {
height: 26px;
width: 26px;
background-color: #F1F1F1;
display: flex;
justify-content: center;
align-items: center;
}
&.selected {
.number-day, .name-month, .name-year {
color: #fff;
background-color: #7D858C;
}
}
.weekend {
color: #D25252;
}
.no-current-month, .no-cur-year, .no-current-decade {
color: #A5A5A5;
}
&:not(.disabled):not(.selected) {
.number-day, .name-month, .name-year {
&:hover {
background-color: #D9D9D9;
}
}
}
}
}
}