@event-calendar/core
Version:
Full-sized drag & drop event calendar with resource & timeline views
53 lines (44 loc) • 1.4 kB
CSS
.ec-slot {
white-space: nowrap;
.ec-time-grid & {
block-size: calc(var(--ec-slot-height) * var(--ec-slot-label-periodicity));
position: relative;
inset-block-start: -.5lh;
}
.ec-timeline & {
grid-column: span var(--ec-slot-label-periodicity);
font-size: .95em;
padding: .18rem 0;
overflow: clip;
text-overflow: ellipsis;
}
}
.ec-slots {
display: grid;
grid-auto-flow: column;
grid-auto-columns: var(--ec-slot-width);
text-align: center;
--ec-day-bg-color: var(--ec-bg-color);
background-color: var(--ec-day-bg-color);
border-block-end: 1px solid var(--ec-border-color);
&.ec-today {
--ec-day-bg-color: var(--ec-today-bg-color);
}
&.ec-highlight {
--ec-day-bg-color: var(--ec-highlight-color);
}
--ec-last-line-color: transparent;
--ec-direction: to left;
[dir="rtl"] & {
--ec-direction: to right;
}
background-image:
linear-gradient(var(--ec-direction), var(--ec-last-line-color) 1px, transparent 1px),
linear-gradient(var(--ec-direction), var(--ec-border-color) 1px, transparent 1px);
background-size:
100% 100%,
calc(var(--ec-slot-width) * var(--ec-slot-label-periodicity)) 100%;
&:last-child {
--ec-last-line-color: var(--ec-day-bg-color);
}
}