react-flex-picker
Version:
Helps to build your own calendar by using prepared components and api to control them
105 lines (104 loc) • 2.15 kB
CSS
.day-module___day--3-1tp {
cursor: pointer;
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
}
.day-module___dayDisabled--2cMco {
opacity: 0.5;
cursor: default;
}
.day-module___dayOff--3JvNx {
color: #f00;
}
.day-module___daySelected--Srbbc {
color: #fff;
background-color: #87cefa;
opacity: 1;
}
.day-module___dayFirstSelected--_-5Zf {
color: #fff;
background-color: #00f;
}
.day-module___dayLastSelected--3UpPZ {
color: #fff;
background-color: #00f;
}
.day-module___dayClickable--JfOnh:hover {
color: #fff;
background-color: #00008b;
}
.day-module___dayHovered--2aKsi {
background-color: #add8e6;
}
.month-module___month--3-G0C {
margin: 0 10px;
width: 210px;
display: inline-block;
vertical-align: top;
white-space: normal;
}
.month-module___headerMonth--3dLLP {
height: 30px;
line-height: 30px;
text-align: center;
display: inline-block;
width: 100%;
cursor: default;
}
.month-module___headerWeekDays--35FAE {
border-bottom: 1px #808080 solid;
}
.month-module___headerWeekDays--35FAE span {
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
cursor: default;
}
.month-module___headerClickable--18krZ {
cursor: pointer;
background-color: #fff1ba;
}
.wrapper-module___wrapper--2w65P {
overflow: hidden;
display: inline-block;
user-select: none;
}
.wrapper-module___wrapper--2w65P > div {
white-space: nowrap;
}
.wrapper-module___transition--1ufHD {
transition: all 0.2s ease-in-out;
}
.year-module___year--vO_pS {
margin: 0 10px;
width: 220px;
display: inline-block;
vertical-align: top;
white-space: normal;
}
.year-module___year--vO_pS .year-module___day--1U4JJ {
cursor: pointer;
display: inline-block;
width: 55px;
height: 55px;
text-align: center;
line-height: 55px;
}
.year-module___headerYear--4V7Ir {
height: 30px;
line-height: 30px;
text-align: center;
display: inline-block;
width: 100%;
cursor: default;
border-bottom: 1px #808080 solid;
}
.year-module___headerClickable--25MCU {
cursor: pointer;
background-color: #fff1ba;
}