@pacem/pacem-theme-less 1.0.0-amaldi

package/pacem/scaffolding/dark/checkbox.less

@@ -0,0 +1,232 @@
+@import "../../../shared";
+@import "../../theme-dark";
+@import "../shared";
+
+//.@{PCSS}-field {
+//.@{PCSS}-input-container {
+@{P}-checkbox {
+
+    @_checkbox_size: 1.1rem * @font_rem_factor;
+
+    .@{PCSS}-readonly.@{PCSS}-checkbox,
+    label.@{PCSS}-label.@{PCSS}-checkbox {
+        &::before {
+            .Icon('check_box_outline_blank', @_checkbox_size);
+            .IconVariation(0);
+            left: @input_padding_horiz;
+            line-height: @field_height;
+            color: @color_input_toggle;
+        }
+
+        &::before {
+            color: @color_input_toggle;
+        }
+    }
+
+    &.@{PCSS}-selected label.@{PCSS}-label.@{PCSS}-checkbox:before {
+        content: 'check_box';
+        .IconVariation(1);
+    }
+
+    .@{PCSS}-readonly.@{PCSS}-checkbox {
+        .FormFieldLabelIcon('check_box_outline_blank');
+        .IconVariation(0);
+    }
+
+    &.@{PCSS}-selected .@{PCSS}-readonly.@{PCSS}-checkbox::before {
+        content: 'check_box';
+        .IconVariation(1);
+    }
+}
+
+// just the checkbox
+.form-minimal > @{P}-form-field:not(.field-full):not(.@{PCSS}-switcher) @{P}-checkbox,
+@{P}-form-field.field-minimal @{P}-checkbox,
+@{P}-checkbox.checkbox-naked {
+    // avoid conflict with switchers
+    &:not(.checkbox-toggle):not(.checkbox-switch) {
+        min-width: 0;
+        // height: @field_height;
+        label.@{PCSS}-checkbox {
+            border: 0;
+            padding-left: @grid_spacing/3;
+            background: none;
+            position: static;
+            line-height: 1.5;
+            min-width: 0;
+            min-height: 0;
+            vertical-align: middle;
+            .FontStdSize(@field_minimal_fontsize);
+
+            &::before {
+                position: static;
+                vertical-align: middle;
+                margin-right: @grid_spacing/4;
+            }
+        }
+    }
+}
+
+// overrides the padding of the first checkbox in a list
+/*.form-minimal > @{P}-form-field:not(.field-full):not(.@{PCSS}-switcher) @{P}-checkbox-list,
+@{P}-form-field.field-minimal @{P}-checkbox-list {
+    ol > li:first-child when(@border_field_underline = false) {
+        @{P}-checkbox:not(.checkbox-toggle):not(.checkbox-switch) label.@{PCSS}-checkbox {
+            padding-left: @grid_spacing/4;
+        }
+    }
+}*/
+
+// switcher
+.SwitcherColoring(@back, @fore) {
+    label.@{PCSS}-label.@{PCSS}-checkbox::before {
+        color: @fore;
+    }
+
+    &.@{PCSS}-selected {
+        label.@{PCSS}-label.@{PCSS}-checkbox {
+            background: @back;
+        }
+    }
+
+    &.@{PCSS}-selected when (@glows = true) {
+        label.@{PCSS}-label.@{PCSS}-checkbox {
+            box-shadow: 0 0 8px @back;
+        }
+    }
+}
+
+@{P}-form-field.@{PCSS}-switcher @{P}-checkbox,
+@{P}-checkbox.checkbox-toggle,
+@{P}-checkbox.checkbox-switch {
+    // switcher
+
+    @_pad: @grid_spacing / 6;
+    @_h: @field_height - @_pad;
+
+    label.@{PCSS}-label.@{PCSS}-checkbox {
+        min-width: 0;
+        min-height: 0;
+        font-size: 0;
+        height: @_h;
+        // box-sizing: padding-box;
+        border-radius: @_h/2;
+        width: @_h * 2;
+        margin-bottom: @_pad;
+        // remove viewpathfinder border
+        border-color: transparent !important;
+        background: @color_disabled;
+        padding: 0;
+        transition: background linear .25s;
+        border: 0;
+
+        &::before {
+            .Icon('check', @_h);
+            width: @_h;
+            height: @_h;
+            position: absolute;
+            left: @_h;
+            top: 0;
+            opacity: 0;
+            transition: transform @easing_in_out_sine .2s, opacity linear .1s;
+        }
+
+        @_brd: @border_field_size;
+        @_switch_margin: 2px;
+
+        &::after {
+            /*@_c: @_h / 2;
+            @_r: @_c - @_brd;*/
+            content: '';
+            position: absolute;
+            left: @_switch_margin;
+            top: $left;
+            height: @_h - 2* @_switch_margin;
+            width: $height;
+            transition: transform @easing_in_out_sine .2s;
+            background-color: #fff;
+            border-radius: 50%;
+        }
+
+        &::after when (@shadows = true) {
+            box-shadow: 1px 1px @_brd rgba(0,0,0,1);
+        }
+    }
+
+    label.@{PCSS}-label.@{PCSS}-checkbox when (@shadows = true) {
+        box-shadow: inset 0 2px 2px rgba(0,0,0,0.3333);
+    }
+
+    &.@{PCSS}-selected {
+        label.@{PCSS}-label.@{PCSS}-checkbox {
+
+            &::before {
+                opacity: 1;
+                transform: translateX(-@_h) translateZ(0);
+            }
+
+            &::after {
+                transform: translateX(@_h) translateZ(0);
+            }
+        }
+    }
+
+    .SwitcherColoring(@color_primary, @color_primary_inv);
+}
+
+each(@all_colors, {
+    
+    
+@{P}-form-field.@{PCSS}-switcher.switcher-@{value} @{P}-checkbox,
+@{P}-checkbox.checkbox-toggle.checkbox-@{value},
+@{P}-checkbox.checkbox-switch.checkbox-@{value} {
+    .SwitcherColoring(~"var(--@{PCSS}-color-@{value})", ~"var(--@{PCSS}-color-@{value}-inverse)");
+}
+
+    });
+
+@{P}-checkbox {
+    // coloring
+    .CheckboxColoring(@clr) {
+        .CheckboxColoring(@clr, #fff);
+    }
+
+    .CheckboxColoring(@clr, @clr_inv) {
+        .@{PCSS}-readonly.@{PCSS}-checkbox,
+        label.@{PCSS}-label.@{PCSS}-checkbox {
+
+            &::before {
+                color: @clr;
+            }
+        }
+    }
+
+
+    each(@all_colors, {
+    
+    &.checkbox-@{value} {
+    .CheckboxColoring(~"var(--@{PCSS}-color-@{value})");
+}
+
+    });
+
+    &.@{PCSS}-disabled {
+        .CheckboxColoring(@color_disabled);
+
+        .@{PCSS}-readonly.@{PCSS}-checkbox,
+        label.@{PCSS}-label.@{PCSS}-checkbox {
+            color: @color_disabled;
+        }
+    }
+}
+//}
+//}
+@media (min-width: @threshold_lg) {
+
+    @{P}-form-field.field-minimal @{P}-checkbox,
+    @{P}-checkbox.checkbox-naked,
+    @{P}-checkbox.checkbox-toggle,
+    @{P}-checkbox.checkbox-switch {
+        min-width: 0;
+    }
+}

package/pacem/scaffolding/dark/childform.less

@@ -0,0 +1,191 @@
+@import "../shared";
+
+@{P}-childform-propagator {
+    .Inert();
+}
+
+@{P}-childform {
+    display: block;
+    // remove animations
+    @{P}-repeater.@{PCSS}-animatable-list,
+    @{P}-repeater.@{PCSS}-anim-list {
+        &.@{PCSS}-list-bottom > * {
+            animation: none !important;
+        }
+    }
+    /*.@{PCSS}-childform-item {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+
+        > * {
+            flex: 0 0 auto;
+        }
+
+        > @{P}-form {
+            flex: 1 0 auto;
+        }
+    }*/
+    .@{PCSS}-childform-item {
+        display: grid;
+        grid-template-columns: auto 1fr auto;
+        align-items: start;
+
+        > .childform-item-index,
+        > .childform-item-handle {
+            grid-column: 1;
+            grid-row: 1;
+        }
+
+        > .childform-item-index {
+            display: none; // hidden by default, shown when .childform-ordered
+            margin-top: @field_padding_top;
+
+            > * /* {P}-span */ {
+                display: block;
+                .LabelTopMargin();
+                background-color: transparent;
+                padding: 0 .5em;
+
+                &::after {
+                    content: '.';
+                }
+
+                & when (@border_radius > 0) {
+                    border-radius: .3333em;
+                }
+            }
+        }
+
+        > @{P}-button {
+            grid-row: 1;
+            grid-column: 3;
+        }
+
+        > @{P}-form {
+            grid-row: 1;
+            grid-column: 2;
+        }
+    }
+
+    @{P}-button.circular:hover {
+        background-color: fade(@color_default, 10);
+    }
+}
+
+.@{PCSS}-childform-item-floater {
+    pointer-events: none;
+    opacity: 0;
+    background-color: @color_field_back;
+
+    &.@{PCSS}-drag-floater {
+        opacity: 1;
+    }
+}
+
+// form-field & co.
+
+@{P}-form-field.childform-ordered @{P}-childform,
+@{P}-childform.childform-ordered {
+
+    *:not(@{P}-childform) .@{PCSS}-childform-item > .childform-item-index {
+        display: block;
+    }
+}
+
+.ChildFormColored(@suffix, @bgclr, @fgclr) {
+
+    @{P}-form-field.childform-@{suffix} @{P}-childform,
+    @{P}-childform.childform-@{suffix} {
+
+        *:not(@{P}-childform) .@{PCSS}-childform-item > .childform-item-index > * {
+            background-color: @bgclr;
+            color: @fgclr;
+
+            &::after {
+                content: none;
+            }
+
+            & when (@shadows = true) {
+                box-shadow: 0 @grid_spacing/6 @grid_spacing/2 rgba(0,0,0,0.25);
+            }
+        }
+    }
+}
+
+.ChildFormColored(accent, @color_accent, @color_accent_inv);
+.ChildFormColored(primary, @color_primary, @color_primary_inv);
+.ChildFormColored(success, @color_success, @color_success_inv);
+.ChildFormColored(danger, @color_danger, @color_danger_inv);
+.ChildFormColored(error, @color_error, @color_error_inv);
+.ChildFormColored(warning, @color_warning, @color_warning_inv);
+.ChildFormColored(disabled, @color_disabled, @color_default);
+
+@{P}-form-field.childform-ordered @{P}-childform,
+@{P}-childform.childform-ordered {
+
+    *:not(@{P}-childform) .@{PCSS}-childform-item > .childform-item-index {
+        display: block;
+    }
+}
+
+@{P}-form-field.childform-minimal @{P}-childform,
+@{P}-childform.childform-minimal {
+
+    *:not(@{P}-childform) .@{PCSS}-childform-item > .childform-item-index {
+        margin-top: 0;
+
+        > * {
+            margin-top: 0;
+            line-height: @field_minimal_label_height;
+            font-size: @field_minimal_fontsize !important;
+        }
+    }
+}
+
+// childform "full"
+// this copies the .pacem-field style in formfield.less (amend this! DRY!)
+
+@{P}-childform .@{PCSS}-childform > .@{PCSS}-childform-item > @{P}-form > form.@{PCSS}-form .childform-full {
+    @_left: @grid_spacing * 5 / 6;
+    @_h: @_left;
+
+    padding: @grid_spacing/3 @_h;
+    margin-bottom: @grid_spacing / 3;
+    border-radius: @border_field_radius;
+    transition: background linear .3s, border linear .3s;
+
+
+    & when (@border_field_underline = false) {
+        border: @border_field_size solid transparent;
+    }
+
+    & when (@border_field_underline = true) {
+        border-bottom: @border_field_size solid transparent;
+    }
+}
+
+.@{PCSS}-field.@{PCSS}-editable > .@{PCSS}-input-container {
+
+    > @{P}-childform .@{PCSS}-childform > .@{PCSS}-childform-item > @{P}-form > form.@{PCSS}-form .childform-full {
+        background-color: @color_field_back;
+        border-color: transparent;
+
+        & when (@shadows = true) {
+            box-shadow: 0 2px @grid_spacing / 3 rgba(0,0,0,0.25);
+        }
+
+        & when (@shadows = false) {
+            box-shadow: 0 2px @grid_spacing / 8 rgba(0,0,0,0.05);
+        }
+    }
+}
+
+.@{PCSS}-field.@{PCSS}-readonly > .@{PCSS}-input-container {
+
+    > @{P}-childform .@{PCSS}-childform > .@{PCSS}-childform-item > @{P}-form > form.@{PCSS}-form .childform-full {
+        background-color: transparent;
+        box-shadow: none;
+        border-color: fade(@color_default, 5);
+    }
+}

package/pacem/scaffolding/dark/color.less

@@ -0,0 +1,128 @@
+@import "../shared";
+@import "../../../shared";
+
+@{P}-input-color {
+    .FormFieldItemWrapper();
+    display: block;
+
+    @_gap: @grid_spacing/6;
+    @_top: @input_padding_horiz / 2;
+    @_size: @field_height - @_gap - @_top;
+
+    @_rght: @grid_spacing * 2 - @input_padding_horiz;
+
+    .@{PCSS}-viewfinder {
+        max-width: @field_min_width;
+        display: flex;
+        justify-content: flex-start;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        position: relative;
+
+        &:before {
+            @_sz: @grid_spacing - @_top;
+            .Icon('opacity', @_sz);
+            left: @_rght + @_sz;
+            top: @_top;
+        }
+    }
+
+    input[type=number].@{PCSS}-input {
+        .FormFieldItem();
+        min-height: auto;
+        text-align: right;
+        width: 42px + 2 * @input_padding_horiz; // check all browsers
+        &:after {
+            content: ' ';
+        }
+    }
+
+    .@{PCSS}-input-color {
+        width: @_size;
+        height: @_size;
+        overflow: hidden;
+        border-radius: 50%;
+        margin-bottom: @_gap;
+        // space for opacity icon
+        margin-right: @_rght;
+        margin-left: @input_padding_horiz;
+        margin-top: @_top;
+
+        input.@{PCSS}-input[type=color] {
+            .FormFieldItemInline();
+            cursor: pointer;
+            padding: 0;
+            //.GradientVertical( rgba(0,0,0,0.25), rgba(0,0,0,0) );
+            height: @_size;
+            opacity: 0;
+            display: block;
+            width: @_size;
+        }
+    }
+
+    .@{PCSS}-input-color when (@shadows = true) {
+        box-shadow: inset 0 @_size/12 @_size/4 rgba(0,0,0,0.25);
+    }
+
+    .@{PCSS}-input-color when (@shadows = false) {
+        // also here, temporarily
+        box-shadow: inset 0 @_size/12 @_size/4 rgba(0,0,0,0.25);
+    }
+
+    .@{PCSS}-readonly {
+        height: @field_height;
+    }
+}
+
+@media (min-width: @threshold_lg) {
+
+    @{P}-input-color {
+
+        .@{PCSS}-readonly {
+            width: @field_min_width;
+        }
+    }
+}
+
+.field-stretch @{P}-input-color,
+/* obsolete */
+// @{P}-input-color.input-stretch,
+@{P}-input-color.field-stretch {
+    .FormFieldStretch();
+
+    .@{PCSS}-viewfinder {
+        max-width: none;
+        flex: 1 0 100%;
+    }
+}
+
+.field-minimal @{P}-input-color,
+@{P}-input-color.color-naked {
+
+    .@{PCSS}-viewfinder {
+        display: block;
+
+        &:before {
+            display: none;
+            content: '';
+        }
+    }
+
+    input[type=number].@{PCSS}-input {
+        .Inert();
+    }
+
+    .@{PCSS}-input-color {
+        width: auto;
+        height: @field_height;
+        border-radius: @border_field_radius;
+        margin: 0;
+
+        input.@{PCSS}-input[type=color] {
+            height: 100%;
+            opacity: 0;
+            display: block;
+            width: 100%;
+        }
+    }
+}

package/pacem/scaffolding/dark/contenteditable/alignment.less

@@ -0,0 +1,6 @@
+
+div[contenteditable=true] {
+    *[data-align]{
+        text-align: attr(data-align);
+    }
+}