File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
.react-calendar {
width: 350px;
max-width: 100%;
background: white;
border: 1px solid rgb(160, 160, 150);
font-family: Arial, Helvetica, sans-serif;
line-height: 1.125em;
&--doubleView {
width: 700px;
.react-calendar__viewContainer {
display: flex;
margin: -0.5em;
> * {
width: 50%;
margin: 0.5em;
}
}
}
&,
& *,
& *:before,
& *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
button {
margin: 0;
border: 0;
outline: none;
&:enabled {
&:hover {
cursor: pointer;
}
}
}
&__navigation {
display: flex;
height: 44px;
margin-bottom: 1em;
button {
min-width: 44px;
background: none;
&:disabled {
background-color: rgb(240, 240, 240);
}
&:enabled {
&:hover,
&:focus {
background-color: rgb(230, 230, 230);
}
}
}
}
&__month-view {
&__weekdays {
text-align: center;
text-transform: uppercase;
font-weight: bold;
font-size: 0.75em;
&__weekday {
padding: 0.5em;
}
}
&__weekNumbers {
.react-calendar__tile {
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75em;
font-weight: bold;
}
}
&__days {
&__day {
&--weekend {
color: rgb(209, 0, 0);
}
&--neighboringMonth {
color: rgb(117, 117, 117);
}
}
}
}
&__year-view,
&__decade-view,
&__century-view {
.react-calendar__tile {
padding: 2em 0.5em;
}
}
&__tile {
max-width: 100%;
padding: 10px 6.6667px;
background: none;
text-align: center;
line-height: 16px;
&:disabled {
background-color: rgb(240, 240, 240);
}
&:enabled {
&:hover,
&:focus {
background-color: rgb(230, 230, 230);
}
}
&--now {
@bgcolor: lighten(rgb(220, 220, 0), 30%);
background: @bgcolor;
&:enabled {
&:hover,
&:focus {
background: lighten(@bgcolor, 10%);
}
}
}
&--hasActive {
@bgcolor: lighten(rgb(0, 110, 220), 30%);
background: @bgcolor;
&:enabled {
&:hover,
&:focus {
background: lighten(@bgcolor, 10%);
}
}
}
&--active {
@bgcolor: rgb(0, 110, 220);
background: @bgcolor;
color: white;
&:enabled {
&:hover,
&:focus {
background: lighten(@bgcolor, 10%);
}
}
}
}
&--selectRange {
.react-calendar__tile {
&--hover {
background-color: rgb(230, 230, 230);
}
}
}
}