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

package/src/scaffolding/generated/formfield.css

@@ -0,0 +1,500 @@
+/* Generated by theme/css/tools/generate.ts: do not edit, edit the generator instead. */
+@media (--pacem-below-sm) {
+    pacem-form-field.field-xs-inline > .pacem-field {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-start;
+        align-content: stretch;
+
+        > label.pacem-label {
+            flex: 0 0 calc(var(--pacem-grid-spacing) * 4);
+        }
+
+        > .pacem-input-container {
+            flex: 1 1 auto;
+        }
+
+        &.pacem-editable > label.pacem-label::before {
+            /* .Icon(): icons.css */
+            content: 'keyboard_arrow_right';
+            font-size: calc(var(--pacem-grid-spacing) / 1.5);
+            top: 3px;
+            left: 3px;
+            animation: pacem-label-before-anim-inline .3s ease-in .5s both;
+        }
+
+        &.pacem-readonly {
+            > label.pacem-label {
+                flex-basis: calc(var(--pacem-grid-spacing) * 5);
+                margin-left: 0;
+            }
+
+            :--field-box & > .pacem-input-container {
+                margin-top: calc(.2 * (var(--pacem-field-height) / 1.5) + var(--pacem-border-field-size));
+            }
+
+            :--field-underline & > .pacem-input-container {
+                margin-top: calc(.2 * (var(--pacem-field-height) / 1.5));
+            }
+        }
+    }
+
+    .form-xs-nolabels > pacem-form-field:not(.field-label) > .pacem-field > label.pacem-label,
+    pacem-form-field.field-xs-nolabel > .pacem-field > label.pacem-label {
+        display: none;
+    }
+
+    pacem-form-field.field-xs-label > .pacem-field > label.pacem-label {
+        display: inherit;
+    }
+}
+
+@media (--pacem-sm) {
+    pacem-form-field.field-sm-inline > .pacem-field {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-start;
+        align-content: stretch;
+
+        > label.pacem-label {
+            flex: 0 0 calc(var(--pacem-grid-spacing) * 4);
+        }
+
+        > .pacem-input-container {
+            flex: 1 1 auto;
+        }
+
+        &.pacem-editable > label.pacem-label::before {
+            /* .Icon(): icons.css */
+            content: 'keyboard_arrow_right';
+            font-size: calc(var(--pacem-grid-spacing) / 1.5);
+            top: 3px;
+            left: 3px;
+            animation: pacem-label-before-anim-inline .3s ease-in .5s both;
+        }
+
+        &.pacem-readonly {
+            > label.pacem-label {
+                flex-basis: calc(var(--pacem-grid-spacing) * 5);
+                margin-left: 0;
+            }
+
+            :--field-box & > .pacem-input-container {
+                margin-top: calc(.2 * (var(--pacem-field-height) / 1.5) + var(--pacem-border-field-size));
+            }
+
+            :--field-underline & > .pacem-input-container {
+                margin-top: calc(.2 * (var(--pacem-field-height) / 1.5));
+            }
+        }
+    }
+
+    .form-sm-nolabels > pacem-form-field:not(.field-label) > .pacem-field > label.pacem-label,
+    pacem-form-field.field-sm-nolabel > .pacem-field > label.pacem-label {
+        display: none;
+    }
+
+    pacem-form-field.field-sm-label > .pacem-field > label.pacem-label {
+        display: inherit;
+    }
+}
+
+@media (--pacem-md) {
+    pacem-form-field.field-md-inline > .pacem-field {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-start;
+        align-content: stretch;
+
+        > label.pacem-label {
+            flex: 0 0 calc(var(--pacem-grid-spacing) * 4);
+        }
+
+        > .pacem-input-container {
+            flex: 1 1 auto;
+        }
+
+        &.pacem-editable > label.pacem-label::before {
+            /* .Icon(): icons.css */
+            content: 'keyboard_arrow_right';
+            font-size: calc(var(--pacem-grid-spacing) / 1.5);
+            top: 3px;
+            left: 3px;
+            animation: pacem-label-before-anim-inline .3s ease-in .5s both;
+        }
+
+        &.pacem-readonly {
+            > label.pacem-label {
+                flex-basis: calc(var(--pacem-grid-spacing) * 5);
+                margin-left: 0;
+            }
+
+            :--field-box & > .pacem-input-container {
+                margin-top: calc(.2 * (var(--pacem-field-height) / 1.5) + var(--pacem-border-field-size));
+            }
+
+            :--field-underline & > .pacem-input-container {
+                margin-top: calc(.2 * (var(--pacem-field-height) / 1.5));
+            }
+        }
+    }
+
+    .form-md-nolabels > pacem-form-field:not(.field-label) > .pacem-field > label.pacem-label,
+    pacem-form-field.field-md-nolabel > .pacem-field > label.pacem-label {
+        display: none;
+    }
+
+    pacem-form-field.field-md-label > .pacem-field > label.pacem-label {
+        display: inherit;
+    }
+}
+
+@media (--pacem-lg) {
+    pacem-form-field.field-lg-inline > .pacem-field {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-start;
+        align-content: stretch;
+
+        > label.pacem-label {
+            flex: 0 0 calc(var(--pacem-grid-spacing) * 4);
+        }
+
+        > .pacem-input-container {
+            flex: 1 1 auto;
+        }
+
+        &.pacem-editable > label.pacem-label::before {
+            /* .Icon(): icons.css */
+            content: 'keyboard_arrow_right';
+            font-size: calc(var(--pacem-grid-spacing) / 1.5);
+            top: 3px;
+            left: 3px;
+            animation: pacem-label-before-anim-inline .3s ease-in .5s both;
+        }
+
+        &.pacem-readonly {
+            > label.pacem-label {
+                flex-basis: calc(var(--pacem-grid-spacing) * 5);
+                margin-left: 0;
+            }
+
+            :--field-box & > .pacem-input-container {
+                margin-top: calc(.2 * (var(--pacem-field-height) / 1.5) + var(--pacem-border-field-size));
+            }
+
+            :--field-underline & > .pacem-input-container {
+                margin-top: calc(.2 * (var(--pacem-field-height) / 1.5));
+            }
+        }
+    }
+
+    .form-lg-nolabels > pacem-form-field:not(.field-label) > .pacem-field > label.pacem-label,
+    pacem-form-field.field-lg-nolabel > .pacem-field > label.pacem-label {
+        display: none;
+    }
+
+    pacem-form-field.field-lg-label > .pacem-field > label.pacem-label {
+        display: inherit;
+    }
+}
+
+@media (--pacem-xl) {
+    pacem-form-field.field-xl-inline > .pacem-field {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-start;
+        align-content: stretch;
+
+        > label.pacem-label {
+            flex: 0 0 calc(var(--pacem-grid-spacing) * 4);
+        }
+
+        > .pacem-input-container {
+            flex: 1 1 auto;
+        }
+
+        &.pacem-editable > label.pacem-label::before {
+            /* .Icon(): icons.css */
+            content: 'keyboard_arrow_right';
+            font-size: calc(var(--pacem-grid-spacing) / 1.5);
+            top: 3px;
+            left: 3px;
+            animation: pacem-label-before-anim-inline .3s ease-in .5s both;
+        }
+
+        &.pacem-readonly {
+            > label.pacem-label {
+                flex-basis: calc(var(--pacem-grid-spacing) * 5);
+                margin-left: 0;
+            }
+
+            :--field-box & > .pacem-input-container {
+                margin-top: calc(.2 * (var(--pacem-field-height) / 1.5) + var(--pacem-border-field-size));
+            }
+
+            :--field-underline & > .pacem-input-container {
+                margin-top: calc(.2 * (var(--pacem-field-height) / 1.5));
+            }
+        }
+    }
+
+    .form-xl-nolabels > pacem-form-field:not(.field-label) > .pacem-field > label.pacem-label,
+    pacem-form-field.field-xl-nolabel > .pacem-field > label.pacem-label {
+        display: none;
+    }
+
+    pacem-form-field.field-xl-label > .pacem-field > label.pacem-label {
+        display: inherit;
+    }
+}
+
+@media (--pacem-hd) {
+    pacem-form-field.field-hd-inline > .pacem-field {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-start;
+        align-content: stretch;
+
+        > label.pacem-label {
+            flex: 0 0 calc(var(--pacem-grid-spacing) * 4);
+        }
+
+        > .pacem-input-container {
+            flex: 1 1 auto;
+        }
+
+        &.pacem-editable > label.pacem-label::before {
+            /* .Icon(): icons.css */
+            content: 'keyboard_arrow_right';
+            font-size: calc(var(--pacem-grid-spacing) / 1.5);
+            top: 3px;
+            left: 3px;
+            animation: pacem-label-before-anim-inline .3s ease-in .5s both;
+        }
+
+        &.pacem-readonly {
+            > label.pacem-label {
+                flex-basis: calc(var(--pacem-grid-spacing) * 5);
+                margin-left: 0;
+            }
+
+            :--field-box & > .pacem-input-container {
+                margin-top: calc(.2 * (var(--pacem-field-height) / 1.5) + var(--pacem-border-field-size));
+            }
+
+            :--field-underline & > .pacem-input-container {
+                margin-top: calc(.2 * (var(--pacem-field-height) / 1.5));
+            }
+        }
+    }
+
+    .form-hd-nolabels > pacem-form-field:not(.field-label) > .pacem-field > label.pacem-label,
+    pacem-form-field.field-hd-nolabel > .pacem-field > label.pacem-label {
+        display: none;
+    }
+
+    pacem-form-field.field-hd-label > .pacem-field > label.pacem-label {
+        display: inherit;
+    }
+}
+
+@media (--pacem-2k) {
+    pacem-form-field.field-2k-inline > .pacem-field {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-start;
+        align-content: stretch;
+
+        > label.pacem-label {
+            flex: 0 0 calc(var(--pacem-grid-spacing) * 4);
+        }
+
+        > .pacem-input-container {
+            flex: 1 1 auto;
+        }
+
+        &.pacem-editable > label.pacem-label::before {
+            /* .Icon(): icons.css */
+            content: 'keyboard_arrow_right';
+            font-size: calc(var(--pacem-grid-spacing) / 1.5);
+            top: 3px;
+            left: 3px;
+            animation: pacem-label-before-anim-inline .3s ease-in .5s both;
+        }
+
+        &.pacem-readonly {
+            > label.pacem-label {
+                flex-basis: calc(var(--pacem-grid-spacing) * 5);
+                margin-left: 0;
+            }
+
+            :--field-box & > .pacem-input-container {
+                margin-top: calc(.2 * (var(--pacem-field-height) / 1.5) + var(--pacem-border-field-size));
+            }
+
+            :--field-underline & > .pacem-input-container {
+                margin-top: calc(.2 * (var(--pacem-field-height) / 1.5));
+            }
+        }
+    }
+
+    .form-2k-nolabels > pacem-form-field:not(.field-label) > .pacem-field > label.pacem-label,
+    pacem-form-field.field-2k-nolabel > .pacem-field > label.pacem-label {
+        display: none;
+    }
+
+    pacem-form-field.field-2k-label > .pacem-field > label.pacem-label {
+        display: inherit;
+    }
+}
+
+@media (--pacem-4k) {
+    pacem-form-field.field-4k-inline > .pacem-field {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-start;
+        align-content: stretch;
+
+        > label.pacem-label {
+            flex: 0 0 calc(var(--pacem-grid-spacing) * 4);
+        }
+
+        > .pacem-input-container {
+            flex: 1 1 auto;
+        }
+
+        &.pacem-editable > label.pacem-label::before {
+            /* .Icon(): icons.css */
+            content: 'keyboard_arrow_right';
+            font-size: calc(var(--pacem-grid-spacing) / 1.5);
+            top: 3px;
+            left: 3px;
+            animation: pacem-label-before-anim-inline .3s ease-in .5s both;
+        }
+
+        &.pacem-readonly {
+            > label.pacem-label {
+                flex-basis: calc(var(--pacem-grid-spacing) * 5);
+                margin-left: 0;
+            }
+
+            :--field-box & > .pacem-input-container {
+                margin-top: calc(.2 * (var(--pacem-field-height) / 1.5) + var(--pacem-border-field-size));
+            }
+
+            :--field-underline & > .pacem-input-container {
+                margin-top: calc(.2 * (var(--pacem-field-height) / 1.5));
+            }
+        }
+    }
+
+    .form-4k-nolabels > pacem-form-field:not(.field-label) > .pacem-field > label.pacem-label,
+    pacem-form-field.field-4k-nolabel > .pacem-field > label.pacem-label {
+        display: none;
+    }
+
+    pacem-form-field.field-4k-label > .pacem-field > label.pacem-label {
+        display: inherit;
+    }
+}
+
+@media (orientation: landscape) {
+    pacem-form-field.field-h-inline > .pacem-field {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-start;
+        align-content: stretch;
+
+        > label.pacem-label {
+            flex: 0 0 calc(var(--pacem-grid-spacing) * 4);
+        }
+
+        > .pacem-input-container {
+            flex: 1 1 auto;
+        }
+
+        &.pacem-editable > label.pacem-label::before {
+            /* .Icon(): icons.css */
+            content: 'keyboard_arrow_right';
+            font-size: calc(var(--pacem-grid-spacing) / 1.5);
+            top: 3px;
+            left: 3px;
+            animation: pacem-label-before-anim-inline .3s ease-in .5s both;
+        }
+
+        &.pacem-readonly {
+            > label.pacem-label {
+                flex-basis: calc(var(--pacem-grid-spacing) * 5);
+                margin-left: 0;
+            }
+
+            :--field-box & > .pacem-input-container {
+                margin-top: calc(.2 * (var(--pacem-field-height) / 1.5) + var(--pacem-border-field-size));
+            }
+
+            :--field-underline & > .pacem-input-container {
+                margin-top: calc(.2 * (var(--pacem-field-height) / 1.5));
+            }
+        }
+    }
+
+    .form-h-nolabels > pacem-form-field:not(.field-label) > .pacem-field > label.pacem-label,
+    pacem-form-field.field-h-nolabel > .pacem-field > label.pacem-label {
+        display: none;
+    }
+
+    pacem-form-field.field-h-label > .pacem-field > label.pacem-label {
+        display: inherit;
+    }
+}
+
+@media (orientation: portrait) {
+    pacem-form-field.field-v-inline > .pacem-field {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-start;
+        align-content: stretch;
+
+        > label.pacem-label {
+            flex: 0 0 calc(var(--pacem-grid-spacing) * 4);
+        }
+
+        > .pacem-input-container {
+            flex: 1 1 auto;
+        }
+
+        &.pacem-editable > label.pacem-label::before {
+            /* .Icon(): icons.css */
+            content: 'keyboard_arrow_right';
+            font-size: calc(var(--pacem-grid-spacing) / 1.5);
+            top: 3px;
+            left: 3px;
+            animation: pacem-label-before-anim-inline .3s ease-in .5s both;
+        }
+
+        &.pacem-readonly {
+            > label.pacem-label {
+                flex-basis: calc(var(--pacem-grid-spacing) * 5);
+                margin-left: 0;
+            }
+
+            :--field-box & > .pacem-input-container {
+                margin-top: calc(.2 * (var(--pacem-field-height) / 1.5) + var(--pacem-border-field-size));
+            }
+
+            :--field-underline & > .pacem-input-container {
+                margin-top: calc(.2 * (var(--pacem-field-height) / 1.5));
+            }
+        }
+    }
+
+    .form-v-nolabels > pacem-form-field:not(.field-label) > .pacem-field > label.pacem-label,
+    pacem-form-field.field-v-nolabel > .pacem-field > label.pacem-label {
+        display: none;
+    }
+
+    pacem-form-field.field-v-label > .pacem-field > label.pacem-label {
+        display: inherit;
+    }
+}

package/src/scaffolding/hierarchy.css

@@ -0,0 +1,76 @@
+pacem-hierarchy {
+    .hierarchy-level {
+        margin-bottom: var(--pacem-grid-spacing);
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: flex-start;
+        flex-wrap: wrap;
+
+        > .hierarchy-item {
+            display: grid;
+            grid-template-columns: auto 1fr auto;
+            column-gap: calc(var(--pacem-grid-spacing) / 3);
+            margin: calc(var(--pacem-grid-spacing) / 3);
+            flex: 0 0 auto;
+            border: 2px solid var(--pacem-color-border);
+            cursor: default;
+            user-select: none;
+            background-color: var(--pacem-color-background);
+            border-radius: var(--pacem-border-radius);
+
+            &.pacem-dragging.item-drag {
+                border-color: var(--pacem-color-accent);
+            }
+
+            &.pacem-dropping {
+                border-color: var(--pacem-color-success);
+            }
+
+            &.item-disabled {
+                background-color: var(--pacem-color-disabled);
+                color: var(--pacem-color-disabled-inverse);
+            }
+
+            > * {
+                align-self: center;
+            }
+
+            > .item-content {
+                grid-column: 2;
+            }
+
+            > .item-move {
+                grid-column: 1;
+                cursor: move;
+            }
+
+            > .item-link {
+                grid-column: 3;
+                cursor: pointer;
+            }
+
+            > pacem-icon > i {
+                pointer-events: none;
+            }
+        }
+    }
+
+    &.pacem-readonly .hierarchy-level > .hierarchy-item > .item-link,
+    .hierarchy-level > .hierarchy-item.item-disabled > .item-link {
+        pointer-events: none !important;
+        display: none !important;
+    }
+}
+
+:--shadows pacem-hierarchy .hierarchy-level > .hierarchy-item {
+    box-shadow: 0 2px calc(var(--pacem-grid-spacing) / 2) rgba(0,0,0,0.25);
+}
+
+svg.pacem-binder.hierarchy-binder path {
+    cursor: pointer;
+
+    &:hover {
+        opacity: 1;
+    }
+}

package/src/scaffolding/icons.css

@@ -0,0 +1,64 @@
+/* .Icon() (theme-dark.less): the declarations shared by every icon of the folder, written once for all of them,
+   before the other rules. Each site (marked `.Icon(): icons.css`) declares the glyph (content), its size and its
+   own overrides. The selectors are those of the sites, so that specificities are kept: keep them in sync.
+   (generated/formfield.css re-applies its icons to labels that already match `.pacem-field.pacem-editable > label`.) */
+.pacem-validator::before,
+pacem-select::after,
+pacem-datetime-picker .pacem-datetime-picker-fields .pacem-datetime-picker-hours::before,
+pacem-datetime-picker dl dt:nth-of-type(2)::before,
+pacem-datetime-picker dl dt:nth-of-type(1)::before,
+pacem-datetime-picker .pacem-readonly::before,
+pacem-latlng .pacem-latlng .pacem-latlng-fields pacem-input-number.pacem-lat::before,
+pacem-latlng .pacem-latlng .pacem-latlng-fields pacem-input-number.pacem-lng::before,
+pacem-latlng .pacem-latlng dl dt:nth-of-type(3)::before,
+pacem-latlng .pacem-latlng dl dt:nth-of-type(2)::before,
+pacem-latlng .pacem-latlng dl dt:nth-of-type(1)::before,
+pacem-latlng .pacem-readonly::before,
+pacem-checkbox .pacem-readonly.pacem-checkbox::before,
+pacem-checkbox label.pacem-label.pacem-checkbox::before,
+pacem-form-field.pacem-switcher pacem-checkbox label.pacem-label.pacem-checkbox::before,
+pacem-checkbox.checkbox-toggle label.pacem-label.pacem-checkbox::before,
+pacem-checkbox.checkbox-switch label.pacem-label.pacem-checkbox::before,
+.pacem-readonly.pacem-radio::before,
+label.pacem-label.pacem-radio::before,
+pacem-radio-list .pacem-readonly.pacem-radio::before,
+pacem-radio .pacem-readonly.pacem-radio::before,
+pacem-input-search::before,
+pacem-input-url::before,
+pacem-input-tel::before,
+pacem-input-tel.pacem-readonly::before,
+pacem-input-color .pacem-viewfinder::before,
+pacem-tags ul.pacem-tags li.pacem-tag pacem-tag pacem-button::before,
+pacem-dialog pacem-edit-image .pacem-edit-image pacem-upload .pacem-upload-filewrapper::before,
+pacem-dialog pacem-edit-image .pacem-edit-image pacem-button.pacem-snapshot::before,
+pacem-input-image .pacem-input-image .pacem-input-image-dashboard pacem-button.pacem-edit::before,
+pacem-input-image .pacem-input-image .pacem-input-image-dashboard pacem-button.pacem-clear::before,
+pacem-input-image dl dt:nth-of-type(2)::before,
+pacem-input-image dl dt:nth-of-type(1)::before,
+pacem-form-field:not(.slider-nofooter) pacem-slider > .pacem-slider .slider-footer::before,
+pacem-calendar-picker::before,
+pacem-calendar-picker.pacem-readonly::before,
+.pacem-calendar-picker-dropdown .dropdown-grid > .calendar-title > pacem-span.calendar-zoom:hover::after,
+pacem-char-count .pacem-char-count::after,
+pacem-form-field.field-inline > .pacem-field.pacem-editable > label.pacem-label::before,
+.pacem-field.pacem-editable > label.pacem-label::before,
+.pacem-field.pacem-editable.pacem-fetching label.pacem-label::before,
+.form-minimal > pacem-form-field:not(.field-full) > pacem-form.pacem-field.pacem-editable.pacem-fetching label.pacem-label::after,
+pacem-form-field.field-minimal > pacem-form.pacem-field.pacem-editable.pacem-fetching label.pacem-label::after {
+    position: absolute;
+    display: inline-block;
+    line-height: 1;
+    text-align: center;
+    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;
+}