date-picker-np
Version:
Nepali Date Picker for React
50 lines (42 loc) • 977 B
CSS
:root {
--date-picker-np-hover-color: rgb(218, 218, 218);
}
.date-picker-body-container {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
}
.date-picker-week-days-container > div {
line-height: 14px;
padding: 4px 0 8px;
}
.date-picker-dates-container > div {
/* padding: 8px 0; */
line-height: 30px;
height: 30px;
cursor: pointer;
}
.date-picker-dates-container .prev-month-days,
.date-picker-dates-container .next-month-days {
opacity: 0.4;
cursor: default;
}
.date-picker-dates-container
> div:not(
.prev-month-days,
.next-month-days,
.date-picker-date-disabled,
.date-picker-selected-date
):hover {
background: var(--date-picker-np-hover-color);
}
/* For today date */
.date-picker-dates-container .date-picker-selected-date {
background: rgb(0, 133, 177);
color: white;
}
.date-picker-dates-container > .date-picker-date-disabled {
background: white;
opacity: 0.4;
cursor: default;
}