vuetify
Version:
Vue Material Component Framework
76 lines (65 loc) • 2.16 kB
CSS
.v-date-picker-month {
display: flex;
justify-content: center;
min-width: 328px;
--v-date-picker-month-day-diff: 4px;
}
.v-date-picker-month__weeks {
display: grid;
grid-template-rows: min-content min-content min-content min-content min-content min-content min-content;
grid-row-gap: 4px;
}
.v-date-picker-month__weekday {
font-size: 0.875rem;
}
.v-date-picker-month__days {
display: grid;
grid-template-columns: min-content min-content min-content min-content min-content min-content min-content;
grid-row-gap: 4px;
flex: 1 1;
justify-content: space-around;
}
.v-date-picker-month__day {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.v-date-picker-month__day--adjacent {
opacity: 0.5;
}
.v-date-picker-month__day--hide-adjacent {
opacity: 0;
}
.v-date-picker-month__day--range {
position: absolute;
width: 100%;
height: calc(100% - var(--v-date-picker-month-day-diff) * 2);
opacity: 0.5;
}
.v-date-picker-month__day--hover {
position: absolute;
width: 100%;
height: calc(100% - var(--v-date-picker-month-day-diff) * 2);
border-style: dashed;
border-top-width: 1px;
border-bottom-width: 1px;
border-left: none;
border-right: none;
}
.v-date-picker-month__day--start .v-date-picker-month__day--range, .v-date-picker-month__day--week-start .v-date-picker-month__day--range {
border-bottom-left-radius: 50%;
border-top-left-radius: 50%;
left: var(--v-date-picker-month-day-diff);
width: calc(100% - var(--v-date-picker-month-day-diff));
}
.v-date-picker-month__day--end .v-date-picker-month__day--range, .v-date-picker-month__day--week-end .v-date-picker-month__day--range {
border-bottom-right-radius: 50%;
border-top-right-radius: 50%;
right: var(--v-date-picker-month-day-diff);
width: calc(100% - var(--v-date-picker-month-day-diff));
}
.v-date-picker-month__day--selected.v-date-picker-month__day--end.v-date-picker-month__day--week-start .v-date-picker-month__day--range,
.v-date-picker-month__day--selected.v-date-picker-month__day--start.v-date-picker-month__day--week-end .v-date-picker-month__day--range {
display: none;
}