react-year-date-picker
Version:
React year month picker
123 lines (110 loc) • 2.26 kB
CSS
:root {
--hover-color: #f1f5f9;
--border-color: #e4e4e7;
--pressed-color: #bfdbfe;
--background-color: #fff;
}
.pickerButton {
box-sizing: border-box;
cursor: pointer;
border: 1px solid var(--border-color);
background-color: #fff;
border-radius: .25rem;
align-items: center;
gap: .5rem;
min-width: 10rem;
margin: 0;
padding: .5rem;
transition-duration: .15s;
display: flex;
}
.dateLeftButton:hover, .pickerButton:hover {
background-color: var(--hover-color);
}
.round-shadow {
border: 1px solid var(--border-color);
border-radius: .25rem;
}
.calendar {
background-color: var(--background-color);
box-sizing: border-box;
flex-direction: column;
justify-content: space-between;
width: 20rem;
height: 15rem;
margin: 0;
padding: .25rem;
display: flex;
position: absolute;
}
.calendar2 {
background-color: var(--background-color);
box-sizing: border-box;
flex-direction: column;
justify-content: space-between;
width: 20rem;
height: 18rem;
margin: 0;
padding: 0;
display: flex;
position: absolute;
overflow: hidden;
}
.calendarHeader {
box-sizing: border-box;
border-bottom: 1px solid var(--border-color);
justify-content: space-between;
align-items: center;
width: 100%;
height: 3rem;
margin: 0;
padding: 0 1rem;
display: flex;
}
.calendarWrapper {
box-sizing: border-box;
width: 40rem;
height: 15rem;
margin: 0;
padding: 0;
transition-duration: .5s;
position: relative;
}
.calendar-row {
box-sizing: border-box;
justify-content: space-between;
margin: 0;
padding: 0;
display: flex;
}
.calendar-button {
box-sizing: border-box;
cursor: pointer;
border-radius: 100%;
justify-content: center;
align-items: center;
width: 3.5rem;
height: 3.5rem;
margin: 0;
padding: 0;
transition-duration: .15s;
display: flex;
}
.calendar-button:hover {
background-color: var(--hover-color);
}
.calendar-button[aria-pressed="true"] {
background-color: var(--pressed-color);
font-weight: 500;
}
.dateLeftButton {
box-sizing: border-box;
cursor: pointer;
background-color: #0000;
border: none;
border-radius: .25rem;
margin: 0;
padding: 0;
transition-duration: .15s;
}
/*# sourceMappingURL=main.css.map */