@event-calendar/core/src/styles/sidebar.css

Full-sized drag & drop event calendar with resource & timeline views

.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;
    }
}