@event-calendar/core
Version:
Full-sized drag & drop event calendar with resource & timeline views
67 lines (59 loc) • 1.8 kB
CSS
.ec-sidebar {
position: sticky;
inset-inline-start: 0;
z-index: 1;
background-color: var(--ec-bg-color);
border-inline-end: 1px solid var(--ec-border-color);
text-align: end;
overflow: clip;
.ec-header & {
border-block-end: 1px solid var(--ec-border-color);
padding-block: .375rem;
}
.ec-time-grid & {
padding-inline: .75rem;
}
.ec-time-grid .ec-body & {
--ec-direction: to left;
[dir="rtl"] & {
--ec-direction: to right;
}
background-image:
linear-gradient(var(--ec-direction), transparent .375rem, var(--ec-bg-color) .375rem),
linear-gradient(to top, var(--ec-bg-color) 1px, transparent 1px),
linear-gradient(to top, var(--ec-border-color) 1px, transparent 1px),
linear-gradient(to right, var(--ec-bg-color) 1px, transparent 1px),
linear-gradient(to top, var(--ec-border-color) 1px, transparent 1px);
background-size:
100% 100%,
100% 100%,
100% calc(var(--ec-slot-height) * var(--ec-slot-label-periodicity)),
2px 100%,
100% var(--ec-slot-height);
}
.ec-timeline .ec-body & {
grid-area: 1 / 1 / -1 / 2;
display: grid;
grid-template-rows: subgrid;
}
}
.ec-row-head {
display: flex;
border-block-end: 1px solid var(--ec-border-color);
padding: .375em .75rem;
min-block-size: 1.5em;
&:last-child {
border: none;
}
}
.ec-expander {
inline-size: 1.25em;
margin-inline-end: .25em;
margin-block-start: -1px;
.ec-button {
line-height: normal;
padding: 0;
aspect-ratio: 1;
block-size: 1.25em;
}
}