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

package/src/scaffolding/checkbox.css

@@ -0,0 +1,200 @@
+/* Checkbox, naked checkbox and switcher.
+   Colors (each(@all_colors) in Less): the rules are written once against private properties, which the color
+   classes assign (generated/colors.css):
+     --pacem--chk, --pacem--chk-ink              .checkbox-{color} (checkbox, toggle and switch)
+     --pacem--switcher, --pacem--switcher-ink    pacem-form-field.switcher-{color}
+   They inherit down to the label and its ::before. */
+@custom-selector :--checks .pacem-readonly.pacem-checkbox, label.pacem-label.pacem-checkbox;
+@custom-selector :--naked .form-minimal > pacem-form-field:not(.field-full):not(.pacem-switcher) pacem-checkbox,
+    pacem-form-field.field-minimal pacem-checkbox, pacem-checkbox.checkbox-naked;
+@custom-selector :--switchers pacem-form-field.pacem-switcher pacem-checkbox, pacem-checkbox.checkbox-toggle, pacem-checkbox.checkbox-switch;
+@custom-selector :--chk-colors :is(.checkbox-root, .checkbox-background, .checkbox-default, .checkbox-invert, .checkbox-primary,
+    .checkbox-secondary, .checkbox-accent, .checkbox-info, .checkbox-success, .checkbox-warning, .checkbox-danger, .checkbox-error,
+    .checkbox-disabled, .checkbox-green, .checkbox-yellow, .checkbox-brown, .checkbox-red, .checkbox-pink, .checkbox-blue,
+    .checkbox-orange, .checkbox-purple, .checkbox-teal, .checkbox-gray);
+@custom-selector :--switcher-colors :is(.switcher-root, .switcher-background, .switcher-default, .switcher-invert, .switcher-primary,
+    .switcher-secondary, .switcher-accent, .switcher-info, .switcher-success, .switcher-warning, .switcher-danger, .switcher-error,
+    .switcher-disabled, .switcher-green, .switcher-yellow, .switcher-brown, .switcher-red, .switcher-pink, .switcher-blue,
+    .switcher-orange, .switcher-purple, .switcher-teal, .switcher-gray);
+
+pacem-checkbox :--checks::before {
+    /* .Icon(): icons.css */
+    content: 'check_box_outline_blank';
+    font-size: calc(1.1rem * var(--pacem-font-rem-factor));
+    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+    left: calc(var(--pacem-grid-spacing) / 3);
+    line-height: var(--pacem-field-height);
+    color: var(--pacem-color-input-toggle);
+}
+
+pacem-checkbox.pacem-selected label.pacem-label.pacem-checkbox::before {
+    content: 'check_box';
+    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+}
+
+/* .FormFieldLabelIcon() */
+pacem-checkbox .pacem-readonly.pacem-checkbox {
+    padding-left: var(--pacem-grid-spacing);
+    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+
+    &::before {
+        /* .Icon(): icons.css */
+        content: 'check_box_outline_blank';
+        font-size: calc(1.1rem * var(--pacem-font-rem-factor));
+        /* (the second .Icon() restores the fill) */
+        font-variation-settings: 'FILL' var(--pacem-font-icon-fill), 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        line-height: calc(1.5 * 1.1 * var(--pacem-font-rem-factor));
+        color: var(--pacem-color-input-toggle);
+        left: 0;
+        top: 0;
+    }
+}
+
+pacem-checkbox.pacem-selected .pacem-readonly.pacem-checkbox::before {
+    content: 'check_box';
+    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+}
+
+/* #region just the checkbox (avoiding conflicts with the switchers) */
+:--naked:not(.checkbox-toggle):not(.checkbox-switch) {
+    min-width: 0;
+}
+
+:--naked:not(.checkbox-toggle):not(.checkbox-switch) label.pacem-checkbox {
+    border: 0;
+    padding-left: calc(var(--pacem-grid-spacing) / 3);
+    background: none;
+    position: static;
+    line-height: 1.5;
+    min-width: 0;
+    min-height: 0;
+    vertical-align: middle;
+    font-size: calc(1rem * var(--pacem-field-minimal-fontsize) * var(--pacem-font-std-rem-factor));
+}
+
+:--naked:not(.checkbox-toggle):not(.checkbox-switch) label.pacem-checkbox::before {
+    position: static;
+    vertical-align: middle;
+    margin-right: calc(var(--pacem-grid-spacing) / 4);
+}
+/* #endregion */
+
+/* #region switcher: height (field height - spacing / 6) and twice as wide */
+:--switchers label.pacem-label.pacem-checkbox {
+    min-width: 0;
+    min-height: 0;
+    font-size: 0;
+    height: calc(var(--pacem-field-height) - var(--pacem-grid-spacing) / 6);
+    border-radius: calc((var(--pacem-field-height) - var(--pacem-grid-spacing) / 6) / 2);
+    width: calc((var(--pacem-field-height) - var(--pacem-grid-spacing) / 6) * 2);
+    margin-bottom: calc(var(--pacem-grid-spacing) / 6);
+    /* (removes the viewfinder border) */
+    border-color: transparent !important;
+    background: var(--pacem-color-disabled);
+    padding: 0;
+    transition: background linear .25s;
+    border: 0;
+}
+
+:--switchers label.pacem-label.pacem-checkbox::before {
+    /* .Icon(): icons.css */
+    content: 'check';
+    font-size: calc(var(--pacem-field-height) - var(--pacem-grid-spacing) / 6);
+    width: calc(var(--pacem-field-height) - var(--pacem-grid-spacing) / 6);
+    height: calc(var(--pacem-field-height) - var(--pacem-grid-spacing) / 6);
+    left: calc(var(--pacem-field-height) - var(--pacem-grid-spacing) / 6);
+    top: 0;
+    opacity: 0;
+    transition: transform var(--pacem-easing-in-out-sine) .2s, opacity linear .1s;
+}
+
+:--switchers label.pacem-label.pacem-checkbox::after {
+    content: '';
+    position: absolute;
+    left: 2px;
+    top: 2px;
+    height: calc(var(--pacem-field-height) - var(--pacem-grid-spacing) / 6 - 4px);
+    width: calc(var(--pacem-field-height) - var(--pacem-grid-spacing) / 6 - 4px);
+    transition: transform var(--pacem-easing-in-out-sine) .2s;
+    background-color: #fff;
+    border-radius: 50%;
+}
+
+:--shadows :--switchers label.pacem-label.pacem-checkbox::after {
+    box-shadow: 1px 1px var(--pacem-border-field-size) rgba(0,0,0,1);
+}
+
+:--shadows :--switchers label.pacem-label.pacem-checkbox {
+    box-shadow: inset 0 2px 2px rgba(0,0,0,0.3333);
+}
+
+:--switchers.pacem-selected label.pacem-label.pacem-checkbox::before {
+    opacity: 1;
+    transform: translateX(calc(var(--pacem-grid-spacing) / 6 - var(--pacem-field-height))) translateZ(0);
+}
+
+:--switchers.pacem-selected label.pacem-label.pacem-checkbox::after {
+    transform: translateX(calc(var(--pacem-field-height) - var(--pacem-grid-spacing) / 6)) translateZ(0);
+}
+
+/* .SwitcherColoring() */
+:--switchers label.pacem-label.pacem-checkbox::before {
+    color: var(--pacem-color-primary-inverse);
+}
+
+:--switchers.pacem-selected label.pacem-label.pacem-checkbox {
+    background: var(--pacem-color-primary);
+}
+
+:--glows :--switchers.pacem-selected label.pacem-label.pacem-checkbox {
+    box-shadow: 0 0 8px var(--pacem-color-primary);
+}
+
+/* colors */
+pacem-form-field.pacem-switcher:--switcher-colors pacem-checkbox label.pacem-label.pacem-checkbox::before {
+    color: var(--pacem--switcher-ink);
+}
+
+pacem-checkbox:is(.checkbox-toggle, .checkbox-switch):--chk-colors label.pacem-label.pacem-checkbox::before {
+    color: var(--pacem--chk-ink);
+}
+
+pacem-form-field.pacem-switcher:--switcher-colors pacem-checkbox.pacem-selected label.pacem-label.pacem-checkbox {
+    background: var(--pacem--switcher);
+}
+
+pacem-checkbox:is(.checkbox-toggle, .checkbox-switch):--chk-colors.pacem-selected label.pacem-label.pacem-checkbox {
+    background: var(--pacem--chk);
+}
+
+:--glows pacem-form-field.pacem-switcher:--switcher-colors pacem-checkbox.pacem-selected label.pacem-label.pacem-checkbox {
+    box-shadow: 0 0 8px var(--pacem--switcher);
+}
+
+:--glows pacem-checkbox:is(.checkbox-toggle, .checkbox-switch):--chk-colors.pacem-selected label.pacem-label.pacem-checkbox {
+    box-shadow: 0 0 8px var(--pacem--chk);
+}
+/* #endregion */
+
+/* #region coloring (.CheckboxColoring()) */
+pacem-checkbox:--chk-colors :--checks::before {
+    color: var(--pacem--chk);
+}
+
+pacem-checkbox.pacem-disabled :--checks::before {
+    color: var(--pacem-color-disabled);
+}
+
+pacem-checkbox.pacem-disabled :--checks {
+    color: var(--pacem-color-disabled);
+}
+/* #endregion */
+
+@media (--pacem-lg) {
+    pacem-form-field.field-minimal pacem-checkbox,
+    pacem-checkbox.checkbox-naked,
+    pacem-checkbox.checkbox-toggle,
+    pacem-checkbox.checkbox-switch {
+        min-width: 0;
+    }
+}

package/src/scaffolding/childform.css

@@ -0,0 +1,156 @@
+/* Child forms. Colored indexes (.ChildFormColored()): background and foreground in private properties, assigned
+   by the color classes (generated/colors.css) and inherited by the index: --pacem--cf, --pacem--cf-ink
+   (pacem-childform.childform-{color}), --pacem--cf-field, --pacem--cf-field-ink (pacem-form-field.childform-{color}). */
+@custom-selector :--ordered pacem-form-field.childform-ordered pacem-childform, pacem-childform.childform-ordered;
+@custom-selector :--cf-colors :is(.childform-accent, .childform-primary, .childform-success, .childform-danger, .childform-error, .childform-warning, .childform-disabled);
+@custom-selector :--minimal pacem-form-field.childform-minimal pacem-childform, pacem-childform.childform-minimal;
+@custom-selector :--full pacem-childform .pacem-childform > .pacem-childform-item > pacem-form > form.pacem-form .childform-full;
+
+pacem-childform-propagator {
+    pointer-events: none !important;
+    display: none !important;
+}
+
+pacem-childform {
+    display: block;
+
+    /* remove animations */
+    pacem-repeater:is(.pacem-animatable-list, .pacem-anim-list).pacem-list-bottom > * {
+        animation: none !important;
+    }
+
+    .pacem-childform-item {
+        display: grid;
+        grid-template-columns: auto 1fr auto;
+        align-items: start;
+
+        > :is(.childform-item-index, .childform-item-handle) {
+            grid-column: 1;
+            grid-row: 1;
+        }
+
+        /* hidden by default, shown with .childform-ordered */
+        > .childform-item-index {
+            display: none;
+            margin-top: calc(var(--pacem-grid-spacing) / 3);
+
+            > * {
+                display: block;
+                background-color: transparent;
+                padding: 0 .5em;
+
+                &::after {
+                    content: '.';
+                }
+            }
+        }
+
+        > pacem-button {
+            grid-row: 1;
+            grid-column: 3;
+        }
+
+        > pacem-form {
+            grid-row: 1;
+            grid-column: 2;
+        }
+    }
+
+    pacem-button.circular:hover {
+        background-color: rgb(from var(--pacem-color-default) r g b / 10%);
+    }
+}
+
+/* .LabelTopMargin() */
+:--field-box pacem-childform .pacem-childform-item > .childform-item-index > * {
+    margin-top: calc(var(--pacem-grid-spacing) / 3 + .2 * (var(--pacem-field-height) / 1.5) + var(--pacem-border-field-size));
+}
+
+:--field-underline pacem-childform .pacem-childform-item > .childform-item-index > * {
+    margin-top: calc(var(--pacem-grid-spacing) / 3 + .2 * (var(--pacem-field-height) / 1.5));
+}
+
+/* (when the radius is not 0) */
+pacem-childform .pacem-childform-item > .childform-item-index > * {
+    border-radius: calc(.3333em * sign(var(--pacem-border-radius)));
+}
+
+.pacem-childform-item-floater {
+    pointer-events: none;
+    opacity: 0;
+    background-color: var(--pacem-color-field-back);
+
+    &.pacem-drag-floater {
+        opacity: 1;
+    }
+}
+
+/* form-field & co. */
+:--ordered *:not(pacem-childform) .pacem-childform-item > .childform-item-index {
+    display: block;
+}
+
+pacem-form-field:--cf-colors pacem-childform *:not(pacem-childform) .pacem-childform-item > .childform-item-index > * {
+    background-color: var(--pacem--cf-field);
+    color: var(--pacem--cf-field-ink);
+}
+
+pacem-childform:--cf-colors *:not(pacem-childform) .pacem-childform-item > .childform-item-index > * {
+    background-color: var(--pacem--cf);
+    color: var(--pacem--cf-ink);
+}
+
+pacem-form-field:--cf-colors pacem-childform *:not(pacem-childform) .pacem-childform-item > .childform-item-index > *::after,
+pacem-childform:--cf-colors *:not(pacem-childform) .pacem-childform-item > .childform-item-index > *::after {
+    content: none;
+}
+
+:--shadows pacem-form-field:--cf-colors pacem-childform *:not(pacem-childform) .pacem-childform-item > .childform-item-index > *,
+:--shadows pacem-childform:--cf-colors *:not(pacem-childform) .pacem-childform-item > .childform-item-index > * {
+    box-shadow: 0 calc(var(--pacem-grid-spacing) / 6) calc(var(--pacem-grid-spacing) / 2) rgba(0,0,0,0.25);
+}
+
+:--minimal *:not(pacem-childform) .pacem-childform-item > .childform-item-index {
+    margin-top: 0;
+}
+
+:--minimal *:not(pacem-childform) .pacem-childform-item > .childform-item-index > * {
+    margin-top: 0;
+    line-height: calc(var(--pacem-field-minimal-fontsize) * var(--pacem-font-size) * 1.5625);
+    font-size: var(--pacem-field-minimal-fontsize) !important;
+}
+
+/* childform "full": copies the .pacem-field style (formfield.css) */
+:--full {
+    padding: calc(var(--pacem-grid-spacing) / 3) calc(var(--pacem-grid-spacing) * 5 / 6);
+    margin-bottom: calc(var(--pacem-grid-spacing) / 3);
+    border-radius: var(--pacem-border-field-radius);
+    transition: background linear .3s, border linear .3s;
+}
+
+:--field-box :--full {
+    border: var(--pacem-border-field-size) solid transparent;
+}
+
+:--field-underline :--full {
+    border-bottom: var(--pacem-border-field-size) solid transparent;
+}
+
+.pacem-field.pacem-editable > .pacem-input-container > :--full {
+    background-color: var(--pacem-color-field-back);
+    border-color: transparent;
+}
+
+:--shadows .pacem-field.pacem-editable > .pacem-input-container > :--full {
+    box-shadow: 0 2px calc(var(--pacem-grid-spacing) / 3) rgba(0,0,0,0.25);
+}
+
+:--no-shadows .pacem-field.pacem-editable > .pacem-input-container > :--full {
+    box-shadow: 0 2px calc(var(--pacem-grid-spacing) / 8) rgba(0,0,0,0.05);
+}
+
+.pacem-field.pacem-readonly > .pacem-input-container > :--full {
+    background-color: transparent;
+    box-shadow: none;
+    border-color: rgb(from var(--pacem-color-default) r g b / 5%);
+}

package/src/scaffolding/color.css

@@ -0,0 +1,129 @@
+/* Color input (.FormFieldItemWrapper(): input.css). Measures:
+     swatch size  field height - spacing / 3 (a gap of spacing / 6 below, spacing / 6 above)
+     right space  2 * spacing - spacing / 3 (room for the opacity icon) */
+pacem-input-color {
+    display: block;
+
+    .pacem-viewfinder {
+        max-width: 199px;
+        display: flex;
+        justify-content: flex-start;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        position: relative;
+
+        &::before {
+            /* .Icon(): icons.css */
+            content: 'opacity';
+            font-size: calc(var(--pacem-grid-spacing) * 5 / 6);
+            left: calc(2 * var(--pacem-grid-spacing) - var(--pacem-grid-spacing) / 3 + var(--pacem-grid-spacing) * 5 / 6);
+            top: calc(var(--pacem-grid-spacing) / 6);
+        }
+    }
+
+    input[type=number].pacem-input {
+        /* .FormFieldItem() */
+        padding: 0 calc(var(--pacem-grid-spacing) / 3);
+        font-family: var(--pacem-font-std);
+        font-size: calc(1.1rem * var(--pacem-font-std-rem-factor));
+        box-sizing: border-box;
+        color: var(--pacem-color-field-fore);
+        min-height: auto;
+        text-align: right;
+        width: calc(42px + 2 * var(--pacem-grid-spacing) / 3);
+
+        &::placeholder {
+            color: var(--pacem-color-watermark);
+            font-style: italic;
+            font-family: var(--pacem-font-std);
+        }
+
+        &::after {
+            content: ' ';
+        }
+    }
+
+    .pacem-input-color {
+        width: calc(var(--pacem-field-height) - var(--pacem-grid-spacing) / 3);
+        height: calc(var(--pacem-field-height) - var(--pacem-grid-spacing) / 3);
+        overflow: hidden;
+        border-radius: 50%;
+        margin-bottom: calc(var(--pacem-grid-spacing) / 6);
+        margin-right: calc(2 * var(--pacem-grid-spacing) - var(--pacem-grid-spacing) / 3);
+        margin-left: calc(var(--pacem-grid-spacing) / 3);
+        margin-top: calc(var(--pacem-grid-spacing) / 6);
+
+        input.pacem-input[type=color] {
+            /* .FormFieldItemInline() */
+            min-width: 0;
+            line-height: var(--pacem-field-height);
+            cursor: pointer;
+            padding: 0;
+            height: calc(var(--pacem-field-height) - var(--pacem-grid-spacing) / 3);
+            opacity: 0;
+            display: block;
+            width: calc(var(--pacem-field-height) - var(--pacem-grid-spacing) / 3);
+        }
+    }
+
+    /* (the same with or without shadows) */
+    .pacem-input-color {
+        box-shadow: inset 0 calc((var(--pacem-field-height) - var(--pacem-grid-spacing) / 3) / 12) calc((var(--pacem-field-height) - var(--pacem-grid-spacing) / 3) / 4) rgba(0,0,0,0.25);
+    }
+
+    .pacem-readonly {
+        height: var(--pacem-field-height);
+    }
+}
+
+@media (--pacem-lg) {
+    pacem-input-color .pacem-readonly {
+        width: 199px;
+    }
+}
+
+/* .FormFieldStretch() */
+:is(.field-stretch pacem-input-color, pacem-input-color.field-stretch) {
+    display: flex;
+    align-content: stretch;
+    align-items: stretch;
+
+    > [pacem] {
+        flex: 1 0 100%;
+    }
+
+    .pacem-viewfinder {
+        max-width: none;
+        flex: 1 0 100%;
+    }
+}
+
+:is(.field-minimal pacem-input-color, pacem-input-color.color-naked) {
+    .pacem-viewfinder {
+        display: block;
+
+        &::before {
+            display: none;
+            content: '';
+        }
+    }
+
+    input[type=number].pacem-input {
+        pointer-events: none !important;
+        display: none !important;
+    }
+
+    .pacem-input-color {
+        width: auto;
+        height: var(--pacem-field-height);
+        border-radius: var(--pacem-border-field-radius);
+        margin: 0;
+
+        input.pacem-input[type=color] {
+            height: 100%;
+            opacity: 0;
+            display: block;
+            width: 100%;
+        }
+    }
+}