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

package/src/plus/misc.css

@@ -0,0 +1,194 @@
+/* edit.less, modal-form.less, context-menu.less, router-hash-state.less */
+
+/* #region edit: primary at 60% */
+pacem-edit {
+    display: block;
+}
+
+pacem-dialog pacem-textarea.pacem-edit-text {
+    display: block;
+    margin-bottom: var(--pacem-grid-spacing);
+}
+
+.pacem-editing {
+    border: 1px solid rgb(from var(--pacem-color-primary) r g b / 60%);
+    min-height: var(--pacem-grid-spacing);
+    position: relative;
+
+    pacem-button.pacem-edit-button {
+        position: absolute;
+        background: rgb(from var(--pacem-color-primary) r g b / 60%);
+        right: 0;
+        top: 0;
+        width: var(--pacem-grid-spacing);
+        height: var(--pacem-grid-spacing);
+        min-width: 0;
+        min-height: 0;
+        padding: 0;
+        margin: 0;
+        border: none;
+
+        &::before {
+            /* .Icon(): icons.css */
+            content: 'edit';
+            font-size: var(--pacem-font-icon-size);
+            color: var(--pacem-theme-light);
+        }
+    }
+}
+/* #endregion */
+
+/* #region modal form: the dialog of ui/dialog.css (the classes assign its private properties, --pacem--lb-*) */
+pacem-modal-form {
+    display: block;
+
+    /* .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;
+        }
+    }
+
+    pacem-loader {
+        z-index: var(--pacem-zindex-lightbox);
+    }
+
+    pacem-button[type=submit] {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        align-items: center;
+
+        > * {
+            grid-column: 2;
+        }
+
+        > .submit-spinner {
+            grid-column: 1;
+        }
+    }
+}
+
+/* corners (when the border radius is 0): drawn by layout/corners.css */
+pacem-modal-form: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))));
+}
+
+pacem-modal-form.modal-top { --pacem--lb-justify: start; }
+pacem-modal-form.modal-bottom { --pacem--lb-justify: end; }
+pacem-modal-form.modal-right:dir(ltr), pacem-modal-form.modal-left:dir(rtl), pacem-modal-form.modal-end { --pacem--lb-align: end; }
+pacem-modal-form.modal-left:dir(ltr), pacem-modal-form.modal-right:dir(rtl), pacem-modal-form.modal-start { --pacem--lb-align: start; }
+pacem-modal-form.modal-slim { --pacem--lb-width: 25vw; }
+pacem-modal-form.modal-medium { --pacem--lb-width: 50vw; }
+
+@media (--pacem-below-sm) {
+    pacem-modal-form.modal-xs-slim { --pacem--lb-width: 25vw; }
+    pacem-modal-form.modal-xs-medium { --pacem--lb-width: 50vw; }
+}
+
+@media (--pacem-sm) {
+    pacem-modal-form.modal-sm-slim { --pacem--lb-width: 25vw; }
+    pacem-modal-form.modal-sm-medium { --pacem--lb-width: 50vw; }
+}
+
+@media (--pacem-md) {
+    pacem-modal-form.modal-md-slim { --pacem--lb-width: 25vw; }
+    pacem-modal-form.modal-md-medium { --pacem--lb-width: 50vw; }
+}
+
+@media (--pacem-lg) {
+    pacem-modal-form.modal-lg-slim { --pacem--lb-width: 25vw; }
+    pacem-modal-form.modal-lg-medium { --pacem--lb-width: 50vw; }
+}
+
+@media (--pacem-xl) {
+    pacem-modal-form.modal-xl-slim { --pacem--lb-width: 25vw; }
+    pacem-modal-form.modal-xl-medium { --pacem--lb-width: 50vw; }
+}
+
+@media (--pacem-hd) {
+    pacem-modal-form.modal-hd-slim { --pacem--lb-width: 25vw; }
+    pacem-modal-form.modal-hd-medium { --pacem--lb-width: 50vw; }
+}
+
+@media (--pacem-2k) {
+    pacem-modal-form.modal-2k-slim { --pacem--lb-width: 25vw; }
+    pacem-modal-form.modal-2k-medium { --pacem--lb-width: 50vw; }
+}
+
+@media (--pacem-4k) {
+    pacem-modal-form.modal-4k-slim { --pacem--lb-width: 25vw; }
+    pacem-modal-form.modal-4k-medium { --pacem--lb-width: 50vw; }
+}
+
+@media (orientation: portrait) {
+    pacem-modal-form.modal-v-slim { --pacem--lb-width: 25vw; }
+    pacem-modal-form.modal-v-medium { --pacem--lb-width: 50vw; }
+}
+/* #endregion */
+
+/* #region context menu */
+pacem-context-menu {
+    display: inline-block;
+
+    &::part(trigger),
+    pacem-button {
+        color: inherit;
+
+        &:hover {
+            color: inherit;
+        }
+    }
+
+    &::part(trigger) {
+        margin: 0;
+        cursor: pointer;
+    }
+
+    &::part(icon) {
+        line-height: 1;
+        text-align: center;
+        /* .IconCore() */
+        font-family: var(--pacem-font-icons);
+        text-transform: none;
+        letter-spacing: normal;
+        word-wrap: normal;
+        white-space: nowrap;
+        direction: ltr;
+        -webkit-font-smoothing: antialiased;
+        text-rendering: optimizeLegibility;
+        -moz-osx-font-smoothing: grayscale;
+        font-feature-settings: 'liga';
+        transition: font-variation-settings .25s var(--pacem-easing-in-out-sine);
+        font-variation-settings: 'FILL' var(--pacem-font-icon-fill), 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        font-size: var(--pacem-grid-spacing);
+    }
+}
+
+.pacem-context-menuitem,
+pacem-router-hash-state {
+    pointer-events: none !important;
+    display: none !important;
+}
+/* #endregion */

package/src/scaffolding/calendar-picker.css

@@ -0,0 +1,291 @@
+/* Calendar picker. The grid placements of headings, months and years (the .Day/.Month/.Year recursive mixins)
+   are generated: see generated/calendar-picker.css, imported before this file.
+   Sizes: days 1.5 * spacing; months and years 7/4 by 2 days. */
+pacem-calendar-month-picker,
+pacem-calendar-year-picker {
+    display: block;
+}
+
+/* .FormFieldIcon() */
+pacem-calendar-picker {
+    position: relative;
+
+    .pacem-input {
+        padding-left: var(--pacem-field-height);
+        box-sizing: border-box;
+    }
+
+    &::before {
+        /* .Icon(): icons.css */
+        content: 'today';
+        font-size: calc(1.1rem * var(--pacem-font-rem-factor));
+        line-height: var(--pacem-field-height);
+        left: calc(var(--pacem-grid-spacing) / 3);
+        top: 1px;
+    }
+
+    &.pacem-invalid::before {
+        color: var(--pacem-color-field-fore-error);
+    }
+
+    /* .FormFieldLabelIcon() */
+    &.pacem-readonly {
+        padding-left: var(--pacem-grid-spacing);
+
+        &::before {
+            /* .Icon(): icons.css */
+            content: 'today';
+            font-size: calc(1.1rem * var(--pacem-font-rem-factor));
+            line-height: calc(1.5 * 1.1 * var(--pacem-font-rem-factor));
+            color: var(--pacem-color-input-toggle);
+            left: 0;
+            top: 0;
+        }
+    }
+
+    &::before {
+        pointer-events: none;
+    }
+
+    /* clear button */
+    pacem-button[clear] {
+        width: var(--pacem-field-height);
+        height: var(--pacem-field-height);
+
+        &::before {
+            line-height: var(--pacem-field-height);
+            font-size: calc(var(--pacem-grid-spacing) / 2);
+        }
+    }
+}
+
+.pacem-calendar-picker-dropdown {
+    z-index: var(--pacem-zindex-balloon);
+    position: absolute;
+    background: var(--pacem-color-suggest-back);
+
+    .dropdown-grid {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        grid-template-rows: auto auto auto;
+        grid-template-areas: "title buttons" "weekdays weekdays" "calendar calendar";
+        align-items: center;
+
+        > .calendar-title {
+            grid-area: title;
+            padding: calc(var(--pacem-grid-spacing) / 3) 0 calc(var(--pacem-grid-spacing) / 3) calc(var(--pacem-grid-spacing) / 3);
+
+            > pacem-span {
+                display: block;
+                font-weight: 700;
+                border: 1px solid transparent;
+                padding: 0 var(--pacem-grid-spacing) 0 calc(var(--pacem-grid-spacing) / 6);
+
+                &.calendar-zoom {
+                    position: relative;
+                    cursor: pointer;
+
+                    &:hover {
+                        border-color: var(--pacem-color-border);
+
+                        &::after {
+                            /* .Icon(): icons.css */
+                            content: 'unfold_more';
+                            color: var(--pacem-color-border);
+                            font-size: calc(var(--pacem-grid-spacing) * .75);
+                            line-height: 1.333;
+                            right: 0;
+                        }
+                    }
+                }
+            }
+        }
+
+        > .calendar-header {
+            grid-area: weekdays;
+            display: grid;
+            grid-template-columns: repeat(7, 1fr);
+            pointer-events: none;
+            background: var(--pacem-color-background);
+            color: var(--pacem-color-disabled);
+
+            > .calendar-heading {
+                text-align: center;
+                display: block;
+                padding: calc(var(--pacem-grid-spacing) / 6) 0;
+            }
+        }
+
+        > .calendar-month-nav {
+            grid-area: buttons;
+            padding: calc(var(--pacem-grid-spacing) / 3);
+        }
+
+        > pacem-calendar {
+            grid-area: calendar;
+
+            .pacem-calendar.calendar-grid {
+                grid-template-columns: repeat(7, calc(var(--pacem-grid-spacing) * 1.5));
+                grid-template-rows: repeat(6, calc(var(--pacem-grid-spacing) * 1.5));
+
+                .calendar-day {
+                    margin: calc(var(--pacem-grid-spacing) / 6);
+                    padding: 0;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+                    border: none;
+                    border-radius: 50%;
+
+                    &.day-1 {
+                        border-left: none;
+                    }
+
+                    &.week-1 {
+                        border-top: none;
+                    }
+
+                    &.pacem-disabled {
+                        background-color: rgb(from var(--pacem-color-default) r g b / 5%);
+                        margin-left: 0;
+                        margin-right: 0;
+                        cursor: default;
+                        border-radius: 0;
+
+                        :--dark-scheme & {
+                            color: rgb(from var(--pacem-color-default) r g b / 15%);
+                        }
+
+                        :--light-scheme & {
+                            color: rgb(from var(--pacem-color-default) r g b / 25%);
+                        }
+                    }
+
+                    &.today {
+                        background-color: rgb(from var(--pacem-color-default) r g b / 20%);
+                    }
+
+                    &.selected-date {
+                        background-color: var(--pacem-color-primary);
+                        color: var(--pacem-color-primary-inverse);
+                    }
+                }
+            }
+        }
+
+        /* month and year pickers */
+        > pacem-calendar-month-picker,
+        > pacem-calendar-year-picker {
+            grid-area: calendar;
+        }
+
+        > pacem-calendar-month-picker .pacem-month-picker,
+        > pacem-calendar-year-picker .pacem-year-picker {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            grid-template-rows: repeat(3, 1fr);
+        }
+
+        > pacem-calendar-month-picker .pacem-month-picker > .calendar-month,
+        > pacem-calendar-year-picker .pacem-year-picker > .calendar-year {
+            width: calc(var(--pacem-grid-spacing) * 1.5 * 7 / 4);
+            height: calc(var(--pacem-grid-spacing) * 1.5 * 2);
+            padding: calc(var(--pacem-grid-spacing) / 3);
+            box-sizing: border-box;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        > pacem-calendar-month-picker .pacem-month-picker > .calendar-month > .month-button,
+        > pacem-calendar-year-picker .pacem-year-picker > .calendar-year > .year-button {
+            cursor: pointer;
+            border: none;
+            border-radius: 50%;
+            width: calc(min(var(--pacem-grid-spacing) * 1.5 * 7 / 4, var(--pacem-grid-spacing) * 1.5 * 2) - 2 * var(--pacem-grid-spacing) / 3);
+            height: calc(min(var(--pacem-grid-spacing) * 1.5 * 7 / 4, var(--pacem-grid-spacing) * 1.5 * 2) - 2 * var(--pacem-grid-spacing) / 3);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            &:hover {
+                background-color: var(--pacem-color-calendarday-hover);
+            }
+        }
+
+        > pacem-calendar-month-picker .pacem-month-picker > .calendar-month > .month-button.selected-month,
+        > pacem-calendar-year-picker .pacem-year-picker > .calendar-year > .year-button.selected-year {
+            background-color: rgb(from var(--pacem-color-default) r g b / 20%);
+        }
+    }
+}
+
+:--shadows .pacem-calendar-picker-dropdown {
+    box-shadow: 0 calc(var(--pacem-grid-spacing) / 6) calc(var(--pacem-grid-spacing) / 2) rgba(0,0,0,.25);
+}
+
+:--no-shadows .pacem-calendar-picker-dropdown {
+    box-shadow: 0 calc(var(--pacem-grid-spacing) / 6) calc(var(--pacem-grid-spacing) / 3) rgba(0,0,0,.1);
+}
+
+/* (with shadows or a dark scheme) */
+:--shadows .pacem-calendar-picker-dropdown .dropdown-grid > .calendar-header,
+:--dark-scheme .pacem-calendar-picker-dropdown .dropdown-grid > .calendar-header {
+    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
+}
+
+@keyframes calendar-header {
+    0% {
+        transform: translateY(calc(var(--pacem-grid-spacing) / -3));
+        opacity: 0;
+    }
+
+    75% {
+        transform: none;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+.pacem-body.pacem-animations .pacem-calendar-picker-dropdown {
+    transition: transform var(--pacem-easing-out-sine) .15s, opacity linear .1s;
+    transition-delay: .1s;
+    transform: translateY(calc(var(--pacem-grid-spacing) / 3));
+    opacity: 0;
+
+    &.dropdown-in {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    .calendar-day {
+        transition: background-color var(--pacem-easing-out-sine) .1s, color var(--pacem-easing-out-sine) .1s;
+    }
+
+    .calendar-header {
+        animation: calendar-header .1s var(--pacem-easing-out-sine) both;
+    }
+
+    .calendar-header > .calendar-heading {
+        animation: calendar-header .15s var(--pacem-easing-out-sine) both;
+    }
+
+    :is(pacem-calendar, pacem-calendar-month-picker, pacem-calendar-year-picker) {
+        animation: default-anim .2s var(--pacem-easing-in-out-sine) both;
+    }
+
+    :is(pacem-calendar.viewdate-next, pacem-calendar-month-picker.viewyear-next, pacem-calendar-year-picker.viewyear-next) {
+        animation-name: list-item-right;
+    }
+
+    :is(pacem-calendar.viewdate-previous, pacem-calendar-month-picker.viewyear-previous, pacem-calendar-year-picker.viewyear-previous) {
+        animation-name: list-item-left;
+    }
+
+    &.dropdown-select * {
+        animation: none !important;
+    }
+}

package/src/scaffolding/checkbox-radio.css

@@ -0,0 +1,118 @@
+/* checkbox-radio-shared.less (the .FormFieldItemWrapper() of these elements and lists: input.css).
+   The paddings are 8px (@_pad: the input horizontal padding). */
+:is(pacem-radio-list, pacem-checkbox-list) ol {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-content: flex-start;
+
+    > li {
+        flex: 0 1 auto;
+        display: inline-block;
+        padding: 0 calc(2 * var(--pacem-grid-spacing) / 3) 0 0;
+
+        &:last-child {
+            padding-right: 0;
+        }
+    }
+}
+
+:is(pacem-radio, pacem-checkbox) {
+    .pacem-input {
+        display: inline;
+        opacity: 0;
+        width: 0;
+        height: 0;
+        border: 0;
+        margin: 0;
+        padding: 0;
+        min-width: 0;
+        min-height: 0;
+        pointer-events: none;
+        /* (needed in Firefox for proper rendering) */
+        position: absolute;
+    }
+
+    label.pacem-label {
+        /* .FormFieldItem() */
+        font-family: var(--pacem-font-std);
+        box-sizing: border-box;
+        color: var(--pacem-color-field-fore);
+        cursor: pointer;
+        display: inline-block;
+        padding: 0 calc(var(--pacem-grid-spacing) / 3) 0 calc(var(--pacem-grid-spacing) + var(--pacem-grid-spacing) / 3);
+        position: relative;
+        font-size: 1.1em;
+        line-height: var(--pacem-field-height);
+
+        &::placeholder {
+            color: var(--pacem-color-watermark);
+            font-style: italic;
+            font-family: var(--pacem-font-std);
+        }
+    }
+
+    &.pacem-disabled label.pacem-label {
+        cursor: default;
+    }
+
+    &.pacem-focus label.pacem-label::before {
+        color: var(--pacem-color-default);
+    }
+
+    &.pacem-selected .pacem-readonly::before {
+        color: var(--pacem-color-primary);
+    }
+}
+
+:--field-underline :is(pacem-radio, pacem-checkbox) label.pacem-label {
+    min-height: calc(var(--pacem-field-height) + var(--pacem-border-field-size));
+}
+
+:--field-box :is(pacem-radio, pacem-checkbox) label.pacem-label {
+    min-height: calc(var(--pacem-field-height) + 2 * var(--pacem-border-field-size));
+}
+
+pacem-checkbox .pacem-label.pacem-checkbox {
+    box-sizing: border-box;
+    width: 100%;
+}
+
+@media (--pacem-lg) {
+    pacem-checkbox-list pacem-checkbox,
+    pacem-checkbox-list pacem-checkbox:not(.field-stretch),
+    pacem-radio-list pacem-radio,
+    pacem-radio-list pacem-radio:not(.field-stretch) {
+        min-width: 0;
+    }
+}
+
+/* nowrap lists */
+pacem-form-field.field-nowrap :is(pacem-radio-list, pacem-checkbox-list) ol {
+    flex-wrap: nowrap;
+
+    > li {
+        flex-grow: 0;
+        flex-shrink: 1;
+
+        pacem-radio > label {
+            white-space: nowrap;
+        }
+    }
+}
+
+pacem-form-field.field-outline :is(pacem-radio-list.pacem-focus pacem-radio, pacem-checkbox-list.pacem-focus pacem-checkbox) :is(.pacem-viewfinder, .pacem-input) {
+    box-shadow: none !important;
+}
+
+/* fieldgroups */
+.pacem-fieldset .pacem-fieldgroup pacem-radio-list pacem-radio label.pacem-label,
+.pacem-fieldset .pacem-fieldgroup pacem-checkbox-list pacem-checkbox.pacem-label,
+.pacem-fieldset input-group pacem-radio-list pacem-radio label.pacem-label,
+.pacem-fieldset input-group pacem-checkbox-list pacem-checkbox.pacem-label {
+    min-height: var(--pacem-field-height);
+}