@pacem/pacem-theme-css 0.0.0-stage → 2.0.0-abel

package/src/ui/calendar.css

@@ -0,0 +1,415 @@
+/* Calendar, agenda and schedule. (The paddings and gaps are 8px: calendar.less declared @_pad: 2px, but Less
+   variables are global and lazy, and scaffolding/checkbox-radio-shared.less redefined it: the shipped theme uses 8px.)
+    The grid placements of days, weeks, hours and minutes (the recursive
+   mixins of the Less theme) are generated: see generated/calendar.css, imported before this file. */
+pacem-calendar-event {
+    pointer-events: none !important;
+    display: none !important;
+}
+
+/* .EventItem() */
+pacem-calendar .pacem-calendar.calendar-grid .calendar-week .calendar-event,
+pacem-agenda .pacem-agenda.agenda-grid .agenda-allday .agenda-event,
+pacem-agenda .pacem-agenda.agenda-grid .agenda-day .agenda-event-wrapper .agenda-event {
+    display: block;
+    background: var(--pacem-color-event-back);
+    box-sizing: border-box;
+    border: 1px solid transparent;
+    padding: 0 16px;
+    font-size: .9em;
+    pointer-events: auto;
+
+    &:focus {
+        border-color: var(--pacem-color-border);
+    }
+
+    .event-caption,
+    .event-startdate {
+        display: inline-block;
+        pointer-events: none;
+    }
+
+    .event-startdate {
+        margin-right: 8px;
+    }
+
+    .event-caption {
+        color: var(--pacem-color-event-fore);
+        font-weight: 700;
+    }
+}
+
+/* #region calendar */
+pacem-calendar {
+    display: block;
+
+    .pacem-calendar.calendar-grid {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        grid-template-rows: repeat(6, auto);
+
+        .calendar-day {
+            padding: calc(var(--pacem-grid-spacing) / 3);
+            margin: 0;
+            border: 0;
+            border-right: 1px solid var(--pacem-color-border);
+            border-bottom: 1px solid var(--pacem-color-border);
+            box-sizing: border-box;
+
+            &.today {
+                background-color: var(--pacem-color-calendarday-today);
+            }
+
+            &:not(.viewmonth) {
+                color: var(--pacem-color-disabled);
+            }
+
+            &::before {
+                content: '';
+                float: left;
+                padding-top: 100%;
+            }
+
+            &.week-1 {
+                border-top: 1px solid var(--pacem-color-border);
+            }
+
+            &.day-1 {
+                border-left: 1px solid var(--pacem-color-border);
+            }
+        }
+
+        /* events */
+        .calendar-week {
+            box-sizing: border-box;
+            padding: calc(var(--pacem-grid-spacing) * 1.5) 8px 8px 8px;
+            overflow: hidden;
+            grid-column: 1/8;
+            display: grid;
+            grid-auto-rows: min-content;
+            grid-template-columns: repeat(7, 1fr);
+            grid-gap: 8px 16px;
+            grid-auto-flow: dense;
+            pointer-events: none;
+
+            &:nth-child(43) { grid-row: 1; }
+            &:nth-child(44) { grid-row: 2; }
+            &:nth-child(45) { grid-row: 3; }
+            &:nth-child(46) { grid-row: 4; }
+            &:nth-child(47) { grid-row: 5; }
+            &:nth-child(48) { grid-row: 6; }
+
+            .calendar-event {
+                height: var(--pacem-grid-spacing);
+                line-height: var(--pacem-grid-spacing);
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+}
+/* #endregion */
+
+/* #region agenda (slot size: 1.5 grid spacing) */
+pacem-clock {
+    display: block;
+}
+
+pacem-agenda {
+    font-size: .76em;
+    display: block;
+
+    .pacem-agenda.agenda-grid {
+        display: grid;
+        grid-template-columns: calc(1.5 * var(--pacem-grid-spacing)) repeat(7, 1fr);
+        grid-template-rows: repeat(49, auto);
+        transition: grid-template-columns var(--pacem-easing-out-sine) .2s;
+
+        .agenda-slot {
+            height: calc(1.5 * var(--pacem-grid-spacing));
+            box-sizing: border-box;
+            font-family: var(--pacem-font-tech);
+            border-left: 1px solid var(--pacem-color-border);
+            border-bottom: 1px solid var(--pacem-color-border);
+
+            &.hour-whole {
+                border-bottom-style: dashed;
+            }
+        }
+
+        .agenda-left {
+            grid-column: 1;
+            grid-row: span 2;
+
+            &.hour-half {
+                border-bottom: 1px solid var(--pacem-color-border);
+            }
+        }
+
+        .all-day {
+            border-bottom: calc(var(--pacem-grid-spacing) / 8) solid var(--pacem-color-border);
+            grid-row: 1;
+            height: auto;
+        }
+
+        .today {
+            background-color: var(--pacem-color-calendarday-today);
+        }
+
+        pacem-clock {
+            pointer-events: none;
+            border-top: 2px dotted var(--pacem-color-agenda-clock);
+            grid-column: 2/9;
+
+            /* minutes: --pacem--min (generated) */
+            &[class*="minute-"] {
+                transform: translateY(round(calc(1.5 * var(--pacem-grid-spacing) * var(--pacem--min) / 30), 1px));
+            }
+        }
+
+        .agenda-allday {
+            box-sizing: border-box;
+            padding: 8px 8px calc(1.5 * var(--pacem-grid-spacing)) 8px;
+            overflow: hidden;
+            grid-column: 2/9;
+            grid-row: 1;
+            grid-template-columns: repeat(7, 1fr);
+            grid-gap: 8px 16px;
+            grid-auto-flow: dense;
+            pointer-events: none;
+            display: grid;
+
+            .agenda-event {
+                height: var(--pacem-grid-spacing);
+                line-height: var(--pacem-grid-spacing);
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+        }
+
+        /* events */
+        .agenda-day {
+            box-sizing: border-box;
+            padding: 8px calc(var(--pacem-grid-spacing) / 2) 8px 8px;
+            overflow: hidden;
+            grid-row: 2/50;
+            display: grid;
+            grid-template-rows: repeat(48, 1fr);
+            grid-template-columns: min-content;
+            grid-gap: 8px 16px;
+            grid-auto-flow: dense;
+            pointer-events: none;
+
+            &:nth-child(370) { grid-column: 2; }
+            &:nth-child(371) { grid-column: 3; }
+            &:nth-child(372) { grid-column: 4; }
+            &:nth-child(373) { grid-column: 5; }
+            &:nth-child(374) { grid-column: 6; }
+            &:nth-child(375) { grid-column: 7; }
+            &:nth-child(376) { grid-column: 8; }
+
+            .agenda-event-wrapper {
+                position: relative;
+
+                .agenda-event {
+                    position: absolute;
+                    width: 100%;
+                }
+
+                &.day-start-false,
+                &.day-end-false {
+                    width: round(calc(var(--pacem-grid-spacing) * .3333), 1px);
+
+                    .agenda-event {
+                        font-size: 0;
+                        opacity: .5;
+                    }
+                }
+            }
+        }
+    }
+}
+/* #endregion */
+
+/* .InteractiveTile() (after the .today rules, as in Less) */
+pacem-calendar .pacem-calendar.calendar-grid .calendar-day,
+pacem-agenda .pacem-agenda.agenda-grid .agenda-slot {
+    &:hover {
+        background-color: var(--pacem-color-calendarday-hover);
+    }
+
+    &.pacem-disabled,
+    &.pacem-disabled:hover {
+        background-color: var(--pacem-color-calendarday-hover);
+        opacity: 0.5;
+    }
+}
+
+/* #region schedule (header height: 1.5 grid spacing) */
+pacem-schedule {
+    display: block;
+
+    .pacem-schedule {
+        .schedule-header {
+            background-color: var(--pacem-color-schedule-header);
+            position: sticky;
+            top: 0;
+            z-index: 2;
+
+            &.schedule-grid {
+                display: grid;
+                grid-template-columns: calc(1.5 * var(--pacem-grid-spacing)) repeat(7, 1fr);
+
+                .schedule-left {
+                    grid-column: 1;
+                }
+
+                .schedule-heading {
+                    text-align: center;
+                    line-height: calc(1.5 * var(--pacem-grid-spacing));
+                }
+            }
+        }
+
+        pacem-agenda {
+            .agenda-allday,
+            .all-day {
+                position: sticky;
+                top: calc(1.5 * var(--pacem-grid-spacing));
+                z-index: 1;
+            }
+
+            .all-day,
+            .all-day.today {
+                background-color: var(--pacem-color-schedule-subheader);
+            }
+        }
+
+        &.schedule-month {
+            pacem-agenda {
+                display: none;
+            }
+
+            .schedule-header.schedule-grid {
+                grid-template-columns: 0 repeat(7, 1fr);
+            }
+        }
+
+        &:not(.schedule-month) pacem-calendar {
+            display: none;
+        }
+
+        &.schedule-day {
+            pacem-agenda .pacem-agenda.agenda-grid {
+                grid-template-columns: calc(var(--pacem-grid-spacing) * 1.5) 1fr;
+
+                .agenda-slot {
+                    grid-column: 2;
+
+                    &:not(.viewday) {
+                        display: none;
+                    }
+                }
+
+                .agenda-allday {
+                    grid-template-columns: 1fr;
+                }
+
+                pacem-clock {
+                    grid-column-end: 3;
+                }
+            }
+
+            .schedule-header.schedule-grid {
+                grid-template-columns: calc(var(--pacem-grid-spacing) * 1.5) 1fr;
+
+                .schedule-heading {
+                    grid-column: 2;
+
+                    &:not(.viewday) {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+}
+/* #endregion */
+
+@keyframes schedule-month {
+    0% { transform: translateX(var(--pacem-grid-spacing)); opacity: 0; }
+    100% { opacity: 1; transform: none; }
+}
+
+@keyframes schedule-week {
+    0% { transform: translateX(var(--pacem-grid-spacing)); opacity: 0; }
+    100% { opacity: 1; transform: none; }
+}
+
+@keyframes schedule-day {
+    0% { transform: translateX(var(--pacem-grid-spacing)); opacity: 0; }
+    100% { opacity: 1; transform: none; }
+}
+
+@keyframes schedule-events {
+    0% { transform: translateY(var(--pacem-grid-spacing)); opacity: 0; }
+    100% { opacity: 1; transform: none; }
+}
+
+.pacem-animations {
+    pacem-schedule:is(.pacem-animatable, .pacem-anim) {
+        pacem-calendar, pacem-agenda {
+            animation: default-anim .2s var(--pacem-easing-in-out-sine) both;
+
+            .agenda-day,
+            .agenda-allday,
+            .calendar-week {
+                animation: default-anim .125s var(--pacem-easing-in-out-sine) both .1s;
+            }
+        }
+
+        .schedule-month pacem-calendar {
+            animation-name: schedule-month;
+        }
+
+        .schedule-week pacem-agenda {
+            animation-name: schedule-week;
+        }
+
+        .schedule-day pacem-agenda {
+            animation-name: schedule-day;
+
+            .agenda-day,
+            .agenda-allday,
+            .calendar-week {
+                animation-name: schedule-events;
+            }
+        }
+
+        :is(pacem-calendar, pacem-agenda).viewdate-next {
+            animation-name: list-item-right;
+        }
+
+        :is(pacem-calendar, pacem-agenda).viewdate-previous {
+            animation-name: list-item-left;
+        }
+    }
+
+    :is(pacem-calendar, pacem-agenda):is(.pacem-animatable, .pacem-anim) {
+        &.viewdate-next {
+            animation: list-item-right .2s var(--pacem-easing-out-sine) both;
+        }
+
+        &.viewdate-previous {
+            animation: list-item-left .2s var(--pacem-easing-out-sine) both;
+        }
+
+        .agenda-day,
+        .agenda-allday,
+        .calendar-week {
+            animation: default-anim .125s var(--pacem-easing-in-out-sine) both .1s;
+        }
+    }
+}

package/src/ui/collapse.css

@@ -0,0 +1,25 @@
+pacem-collapse {
+    display: block;
+    overflow: hidden !important;
+    transition: height .35s var(--pacem-easing-in-out-sine);
+
+    &::part(container) {
+        position: relative;
+    }
+
+    &::part(content) {
+        position: static;
+    }
+
+    &.pacem-horizontal {
+        transition: width .35s var(--pacem-easing-in-out-sine);
+
+        &::part(content) {
+            position: absolute;
+        }
+    }
+}
+
+pacem-infinite-scroller {
+    display: block;
+}

package/src/ui/dialog.css

@@ -0,0 +1,230 @@
+/* Dialogs and lightboxes.
+   Positioning, alignment and size classes (.DialogPositioning/Alignment/Size of the Less theme, for both the
+   dialog- and the lightbox- prefix) only assign private properties on the host, which its lightbox parts inherit
+   (also the ones of the lightboxes it contains, like Less' descendant selectors did):
+     --pacem--lb-justify  vertical position of the lightbox (justify-content of the wrapper)
+     --pacem--lb-align    horizontal alignment (align-items of the wrapper)
+     --pacem--lb-width    max-width of the lightbox
+   (Less also emitted `::part(lightbox) > .pacem-dialog-heading`-like selectors, which are invalid: dropped.) */
+
+/* #region DIALOG */
+pacem-dialog {
+    display: none;
+
+    &[pacem] {
+        display: block;
+    }
+
+    &[pacem][cloak] {
+        display: none !important;
+    }
+
+    /* .DialogWithFixedButtons() */
+    pacem-lightbox {
+        > .pacem-dialog-buttons {
+            padding: 0 1em 1em 1em;
+            box-sizing: border-box;
+            z-index: var(--pacem-zindex-lightbox);
+            border-bottom-left-radius: var(--pacem-border-radius);
+            border-bottom-right-radius: var(--pacem-border-radius);
+        }
+
+        > .pacem-dialog-heading {
+            overflow: hidden;
+
+            > * {
+                margin: 0 1em;
+
+                &:first-child {
+                    margin-top: 1em;
+                }
+            }
+        }
+
+        > .pacem-dialog-heading,
+        &::part(scrollable),
+        > .pacem-dialog-buttons {
+            max-width: 80vw;
+        }
+    }
+}
+/* #endregion */
+
+/* #region LIGHTBOX */
+pacem-lightbox {
+    pointer-events: none;
+
+    &::part(close) {
+        position: absolute;
+        top: 0;
+        right: 0;
+        margin: var(--pacem-size-1);
+        z-index: 2;
+    }
+
+    &::part(lightbox-wrapper) {
+        z-index: var(--pacem-zindex-lightbox);
+        box-sizing: border-box;
+        background-color: transparent;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        padding: var(--pacem-grid-spacing);
+        display: flex;
+        flex-direction: column;
+        align-items: var(--pacem--lb-align, center);
+        justify-content: var(--pacem--lb-justify, center);
+    }
+
+    &::part(lightbox-wrapper-shown) {
+        background-color: var(--pacem-color-lightbox-back);
+        pointer-events: auto;
+    }
+
+    &::part(lightbox) {
+        width: 100%;
+        position: relative;
+        display: grid;
+        grid-template-rows: auto 1fr auto;
+        color: var(--pacem-color-default);
+        max-width: var(--pacem--lb-width, 80vw);
+        max-height: calc(100vh - 2 * var(--pacem-grid-spacing));
+        box-sizing: border-box;
+        border-radius: var(--pacem-border-radius);
+        background-color: var(--pacem-color-lightbox);
+    }
+
+    &::part(top) {
+        grid-row: 1;
+        overflow: hidden;
+    }
+
+    &::part(scrollable) {
+        grid-row: 2;
+        position: relative;
+        max-width: 80vw;
+        height: 100%;
+        box-sizing: border-box;
+        border: 1em solid transparent;
+        border-top-left-radius: var(--pacem-border-radius);
+        border-top-right-radius: var(--pacem-border-radius);
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+
+    &::part(bottom) {
+        grid-row: 3;
+        overflow: hidden;
+    }
+}
+
+/* corners (when the border radius is 0): drawn by layout/corners.css */
+pacem-lightbox.lightbox-corners::part(lightbox),
+pacem-dialog:is(.modal-corners, .dialog-corners)::part(lightbox) {
+    --pacem--corners-color: rgb(from var(--pacem-color-border) r g b / calc(1 - sign(var(--pacem-border-radius))));
+}
+
+:--blur pacem-lightbox::part(lightbox) {
+    background-color: rgb(from var(--pacem-color-lightbox) r g b / 50%);
+    backdrop-filter: blur(6px);
+}
+
+:--light-scheme pacem-lightbox::part(lightbox) {
+    box-shadow: 0 calc(var(--pacem-grid-spacing) / 4) calc(3 * var(--pacem-grid-spacing) / 4) rgba(0,0,0,0.2);
+}
+
+:--dark-scheme pacem-lightbox::part(lightbox) {
+    box-shadow: 0 calc(var(--pacem-grid-spacing) / 4) var(--pacem-grid-spacing) rgba(0,0,0,0.75);
+}
+/* #endregion */
+
+/* #region POSITIONING, ALIGNMENT, SIZE */
+pacem-dialog.dialog-top, pacem-lightbox.lightbox-top { --pacem--lb-justify: start; }
+pacem-dialog.dialog-bottom, pacem-lightbox.lightbox-bottom { --pacem--lb-justify: end; }
+
+pacem-dialog.dialog-right:dir(ltr), pacem-dialog.dialog-left:dir(rtl), pacem-dialog.dialog-end,
+pacem-lightbox.lightbox-right:dir(ltr), pacem-lightbox.lightbox-left:dir(rtl), pacem-lightbox.lightbox-end {
+    --pacem--lb-align: end;
+}
+
+pacem-dialog.dialog-left:dir(ltr), pacem-dialog.dialog-right:dir(rtl), pacem-dialog.dialog-start,
+pacem-lightbox.lightbox-left:dir(ltr), pacem-lightbox.lightbox-right:dir(rtl), pacem-lightbox.lightbox-start {
+    --pacem--lb-align: start;
+}
+
+pacem-dialog.dialog-slim, pacem-lightbox.lightbox-slim { --pacem--lb-width: 25vw; }
+pacem-dialog.dialog-medium, pacem-lightbox.lightbox-medium { --pacem--lb-width: 50vw; }
+
+@media (--pacem-below-sm) {
+    pacem-dialog.dialog-xs-slim, pacem-lightbox.lightbox-xs-slim { --pacem--lb-width: 25vw; }
+    pacem-dialog.dialog-xs-medium, pacem-lightbox.lightbox-xs-medium { --pacem--lb-width: 50vw; }
+}
+
+@media (--pacem-sm) {
+    pacem-dialog.dialog-sm-slim, pacem-lightbox.lightbox-sm-slim { --pacem--lb-width: 25vw; }
+    pacem-dialog.dialog-sm-medium, pacem-lightbox.lightbox-sm-medium { --pacem--lb-width: 50vw; }
+}
+
+@media (--pacem-md) {
+    pacem-dialog.dialog-md-slim, pacem-lightbox.lightbox-md-slim { --pacem--lb-width: 25vw; }
+    pacem-dialog.dialog-md-medium, pacem-lightbox.lightbox-md-medium { --pacem--lb-width: 50vw; }
+}
+
+@media (--pacem-lg) {
+    pacem-dialog.dialog-lg-slim, pacem-lightbox.lightbox-lg-slim { --pacem--lb-width: 25vw; }
+    pacem-dialog.dialog-lg-medium, pacem-lightbox.lightbox-lg-medium { --pacem--lb-width: 50vw; }
+}
+
+@media (--pacem-xl) {
+    pacem-dialog.dialog-xl-slim, pacem-lightbox.lightbox-xl-slim { --pacem--lb-width: 25vw; }
+    pacem-dialog.dialog-xl-medium, pacem-lightbox.lightbox-xl-medium { --pacem--lb-width: 50vw; }
+}
+
+@media (--pacem-hd) {
+    pacem-dialog.dialog-hd-slim, pacem-lightbox.lightbox-hd-slim { --pacem--lb-width: 25vw; }
+    pacem-dialog.dialog-hd-medium, pacem-lightbox.lightbox-hd-medium { --pacem--lb-width: 50vw; }
+}
+
+@media (--pacem-2k) {
+    pacem-dialog.dialog-2k-slim, pacem-lightbox.lightbox-2k-slim { --pacem--lb-width: 25vw; }
+    pacem-dialog.dialog-2k-medium, pacem-lightbox.lightbox-2k-medium { --pacem--lb-width: 50vw; }
+}
+
+@media (--pacem-4k) {
+    pacem-dialog.dialog-4k-slim, pacem-lightbox.lightbox-4k-slim { --pacem--lb-width: 25vw; }
+    pacem-dialog.dialog-4k-medium, pacem-lightbox.lightbox-4k-medium { --pacem--lb-width: 50vw; }
+}
+
+@media (orientation: portrait) {
+    pacem-dialog.dialog-v-slim, pacem-lightbox.lightbox-v-slim { --pacem--lb-width: 25vw; }
+    pacem-dialog.dialog-v-medium, pacem-lightbox.lightbox-v-medium { --pacem--lb-width: 50vw; }
+}
+/* #endregion */
+
+.pacem-animations pacem-lightbox {
+    &::part(lightbox-wrapper) {
+        transition: background-color .25s;
+    }
+
+    &::part(lightbox) {
+        opacity: 0;
+        transform: translateY(var(--pacem-grid-spacing));
+    }
+
+    &.lightbox-top::part(lightbox) {
+        transform: translateY(calc(-1 * var(--pacem-grid-spacing)));
+    }
+
+    &::part(lightbox-wrapper-shown) {
+        transition: background-color .4s .15s;
+    }
+
+    &.lightbox-top::part(lightbox-shown),
+    &::part(lightbox-shown) {
+        transition: opacity .2s, transform .35s ease-out;
+        opacity: 1;
+        transform: none;
+    }
+}

package/src/ui/divider.css

@@ -0,0 +1,42 @@
+pacem-divider {
+    display: block;
+
+    &::part(divider) {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+    }
+
+    &::part(content) {
+        flex: 0 1 auto;
+    }
+
+    &::part(append),
+    &::part(prepend) {
+        flex: 1 1 100%;
+        display: block;
+        height: 0;
+        border-left: 0;
+        border-right: 0;
+        border-top: 1px solid var(--pacem-color-border-dark);
+        border-bottom: 1px solid var(--pacem-color-border-light);
+    }
+
+    &.divider-vertical {
+        &::part(divider) {
+            height: 100%;
+            flex-direction: column;
+        }
+
+        &::part(append),
+        &::part(prepend) {
+            width: 0;
+            height: 100%;
+            border-top: 0;
+            border-bottom: 0;
+            border-left: 1px solid var(--pacem-color-border-dark);
+            border-right: 1px solid var(--pacem-color-border-light);
+        }
+    }
+}