@pacem/pacem-theme-less 1.0.0-amaldi

package/pacem/scaffolding/dark/tags.less

@@ -0,0 +1,149 @@
+@import "../shared";
+
+@keyframes tag-out {
+    0% {
+        transform: scaleX(1);
+    }
+
+    100% {
+        transform: scaleX(0);
+    }
+}
+
+@keyframes tag-content-out {
+    0% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+
+    100% {
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+}
+
+@keyframes tag-in {
+    0% {
+        transform: scaleX(0);
+    }
+
+    100% {
+        transform: scaleX(1);
+    }
+}
+
+@keyframes tag-content-in {
+    0% {
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+
+    100% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@{P}-tag {
+    display: block;
+}
+
+@{P}-tags {
+    .FormFieldItemWrapper();
+
+    @_spacing: @input_padding_horiz/2;
+
+    ul.@{PCSS}-tags {
+        display: flex;
+        flex-flow: row wrap;
+        align-items: center;
+        justify-content: flex-start;
+        padding-right: @_spacing;
+
+        li.@{PCSS}-tag {
+            flex: 0 1 auto;
+            margin: 0;
+
+            @{P}-tag {
+                margin: @_spacing 0 @_spacing @_spacing;
+                padding: @_spacing;
+                line-height: 1rem * @font_rem_factor;
+                background-color: @color_tag_back;
+                color: @color_tag_fore;
+                border-radius: @border_input_radius / 2;
+                // animations-relevant
+                overflow: hidden;
+                transform-origin: 0 50%;
+
+                @{P}-text {
+                    display: inline-block;
+                }
+
+                @{P}-button {
+                    margin: 0 0 0 @_spacing;
+                    background: none;
+
+                    &::before {
+                        .Icon('clear', .667rem);
+                        position: static;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        /*height: 100%;
+                        width: 1.25rem;*/
+                    }
+                }
+
+                &.tag-in {
+                    animation: tag-in @easing_in_out_sine .2s both;
+
+                    > * {
+                        animation: tag-content-in @easing_in_sine .15s .15s both;
+                    }
+                }
+
+                &.tag-out {
+                    // provide a transition/animation here
+                    animation: tag-out @easing_in_out_sine .2s .175s both;
+
+                    > * {
+                        animation: tag-content-out @easing_in_sine .2s both;
+                    }
+                }
+            }
+
+            @{P}-tag when (@shadows = true) {
+                box-shadow: 0 2px 4px rgba(0,0,0,0.5);
+            }
+        }
+
+        li.tag-new {
+            @{P}-suggest {
+                .@{PCSS}-input {
+                    min-height: @field_height;
+                }
+            }
+        }
+    }
+
+    &.@{PCSS}-disabled {
+        ul.@{PCSS}-tags > li.@{PCSS}-tag @{P}-tag {
+            background-color: @color_disabled;
+        }
+    }
+
+    &.@{PCSS}-readonly {
+
+        ul.@{PCSS}-viewfinder {
+            background-color: transparent;
+            border-color: transparent !important;
+            min-height: @field_height;
+
+            li.@{PCSS}-tag:first-child {
+                @{P}-tag {
+                    margin-left: 0;
+                }
+            }
+        }
+    }
+}

package/pacem/scaffolding/dark/tel.less

@@ -0,0 +1,11 @@
+@import "../shared";
+
+@{P}-input-tel {
+    .FormFieldIcon('dialpad');
+    /*.@{PCSS}-readonly {
+        margin-left: @grid_spacing;
+    }*/
+    &.@{PCSS}-readonly {
+        .FormFieldLabelIcon('dialpad');
+    }
+}

package/pacem/scaffolding/dark/textarea.less

@@ -0,0 +1,29 @@
+@import "../shared";
+
+@{P}-textarea {
+    .FormFieldItemMultiline();
+    /*textarea.@{PCSS}-input {
+        //display: block;
+        line-height: 1;
+        flex: 1 0 100%;
+    }*/
+    .@{PCSS}-readonly {
+        white-space: pre-line;
+    }
+
+    &.@{PCSS}-readonly {
+        min-width: unset;
+    }
+
+    /* obsolete */
+    &.@{PCSS}-stretch {
+        .FormFieldStretch();
+    }
+}
+
+.field-stretch @{P}-textarea,
+/* obsolete */
+// @{P}-textarea.input-stretch,
+@{P}-textarea.field-stretch {
+    .FormFieldStretch();
+}

package/pacem/scaffolding/dark/upload.less

@@ -0,0 +1,252 @@
+@import "../../../shared";
+@import "../shared";
+@import "../../ui/shared";
+
+@{P}-upload {
+    display: inline-block;
+
+    > .@{PCSS}-upload.@{PCSS}-viewfinder {
+
+        @_sz: @grid_cell;
+
+        // overflow: hidden;
+        height: @_sz;
+        width: @_sz;
+        display: grid;
+        align-items: center;
+        justify-content: stretch;
+        //max-width: @field_min_width_wide;
+
+        @_brd: 1px;
+        @_grd_sz: @_sz - (2 * @_brd);
+        grid-template-columns: @_grd_sz auto @_grd_sz - 14px;
+        grid-template-rows: @_grd_sz;
+        border: @_brd dashed @color_border;
+        border-radius: @_sz / 2;
+        box-sizing: border-box;
+
+        > * {
+            grid-row: 1;
+            grid-column: 2;
+        }
+
+        > .clear-button,
+        > .upload-progress,
+        > .upload-button {
+            // overlapped content
+            grid-column: 1;
+            display: flex;
+            justify-content: center;
+        }
+
+        > .upload-data {
+            white-space: pre;
+        }
+
+        > .upload-button > @{P}-button,
+        > .clear-button {
+            margin: 0;
+
+            &.circular,
+            &.button-circular {
+                // force tp 48px...
+                width: min(2 * @grid_spacing, @_sz - 28px);
+                height: $width;
+            }
+        }
+
+        > .upload-progress {
+            // transform: scale(.9);
+            @{P}-tuner {
+                .Tuner(@_grd_sz - 2 * @_brd);
+            }
+        }
+
+        > .clear-button {
+            grid-column: 3;
+        }
+
+        &.upload-chosen {
+            width: auto;
+            border-color: @color_success;
+            border-style: solid;
+
+            &.upload-error {
+                border-color: @color_error;
+            }
+        }
+
+        &.upload-readonly {
+            border-width: 0;
+            grid-template-columns: auto auto;
+            grid-gap: @grid_spacing * 2 / 3;
+
+            > .clear-button {
+                .Inert();
+            }
+        }
+    }
+}
+
+.@{PCSS}-animations {
+
+    @{P}-upload {
+        > .@{PCSS}-upload.@{PCSS}-viewfinder {
+            > .clear-button,
+            > .upload-button {
+                .Animatable(pop-anim, .55s, @easing_out_back);
+            }
+        }
+    }
+}
+
+// inside form field
+.@{PCSS}-field {
+
+    > .@{PCSS}-input-container > :not(@{P}-childform) .@{PCSS}-viewfinder.upload-readonly {
+        border-radius: @border_input_radius;
+
+        & when (@border_field_underline = false) {
+            padding: 0 @grid_spacing * 2/3;
+            border-width: @border_field_size;
+        }
+
+        & when (@border_field_underline = true) {
+            border-top: 0;
+            border-left: 0;
+            border-right: 0;
+            border-bottom-width: @border_field_size;
+            border-bottom-style: solid;
+        }
+    }
+
+    &:not(.@{PCSS}-has-value) {
+        > .@{PCSS}-input-container > :not(@{P}-childform) .@{PCSS}-viewfinder.upload-readonly {
+            border-color: transparent;
+        }
+    }
+}
+/*
+@keyframes upload-data-std{
+    0%{
+        opacity: 0;
+        transform: translateX(-@grid_spacing);
+    }
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}*/
+
+.upload-std @{P}-upload,
+@{P}-upload.upload-std {
+    .FormFieldItemWrapper();
+    max-width: @field_min_width_wide;
+    min-width: @field_min_width;
+
+    > .@{PCSS}-upload.@{PCSS}-viewfinder {
+
+        @_sz: @field_height;
+
+        // overflow: hidden;
+        height: @_sz;
+        width: auto;
+
+        @_brd: 1px;
+        @_grd_sz: @_sz - (2 * @_brd);
+        @_gap: @grid_spacing/3;
+        grid-template-columns: @_grd_sz 1fr auto;
+        grid-column-gap: @_gap;
+        grid-template-rows: @_grd_sz;
+        .FormFieldItem();
+        margin: 0;
+        padding: 0;
+
+        > .upload-data {
+            white-space: nowrap;
+            display: block;
+            // width: @field_min_width - @_grd_sz - @_gap;
+            .Ellipsed();
+
+            &.@{PCSS}-anim {
+                animation-name: list-item-left;
+                animation-timing-function: @easing_out_sine;
+                transform-origin: left center;
+            }
+        }
+
+        > .upload-progress {
+            // transform: scale(.9);
+            @{P}-tuner {
+                .Tuner(@_grd_sz /*- 2 * @_brd*/ );
+            }
+        }
+
+        > .upload-button > @{P}-button,
+        > .clear-button {
+            margin: 0;
+
+            &.circular,
+            &.button-circle,
+            &.button-circular {
+                // force tp 24px...
+                width: @grid_spacing;
+                height: $width;
+                border-radius: @border_input_radius / 2;
+
+                &.button-success {
+                    color: @color_success;
+                    background-color: transparent;
+                }
+
+                &.button-primary {
+                    color: @color_primary;
+                    background-color: transparent;
+                }
+
+                &.button-error {
+                    color: @color_error;
+                    background-color: transparent;
+                }
+
+
+                &::before {
+                    font-size: 11 * @grid_spacing/24;
+                    // margin-left: -@grid_spacing/3;
+                    // margin-top: $margin-left;
+                }
+            }
+        }
+
+        > .clear-button {
+            // decrease font size
+        }
+
+        &.upload-readonly {
+            background: none;
+            grid-template-columns: @_grd_sz 1fr;
+            grid-column-gap: @_gap;
+            grid-template-rows: @_grd_sz;
+            padding: 0;
+            min-height: 0;
+            border-width: 0;
+        }
+    }
+}
+
+.upload-std > {
+    .@{PCSS}-field.@{PCSS}-readonly {
+
+        &.@{PCSS}-valid,
+        &.@{PCSS}-invalid,
+        &.@{PCSS}-has-value {
+
+            > .@{PCSS}-input-container.@{PCSS}-fieldgroup {
+                > .fieldgroup-prepend,
+                > .fieldgroup-append {
+                    padding: 0;
+                }
+            }
+        }
+    }
+}

package/pacem/scaffolding/dark/url.less

@@ -0,0 +1,9 @@
+@import "../shared";
+
+    .FormFieldIcon('link');
+
+    &::before {
+        transform: rotate(-45deg);
+    }
+
+}

package/pacem/scaffolding/dark/validators.less

@@ -0,0 +1,36 @@
+@import "../../../shared";
+@import "../shared";
+@import "../../layout/shared";
+
+.@{PCSS}-validator {
+    background-color: @color_error;
+    color: @color_error_inv;
+    padding-right: @grid_spacing/4;
+    position: relative;
+    box-sizing: border-box;
+    min-height: @grid_spacing;
+    line-height: @grid_spacing;
+    border-radius: @border_input_radius;
+    padding-left: @grid_spacing;
+    display: inline-block;
+    margin-left: @grid_spacing * .8;
+
+    &::before {
+        @_sz: @grid_spacing /1.5;
+        .Icon('error', round(@_sz));
+        left: @grid_spacing *.125;
+        line-height: @grid_spacing;
+    }
+}
+
+.@{PCSS}-validator.validator-minimal,
+.form-minimal > @{P}-form-field:not(.field-full) .@{PCSS}-validator,
+@{P}-form-field.field-minimal .@{PCSS}-validator {
+    background-color: transparent;
+    color: @color_error;
+    margin-left: 0;
+
+    /*& when (@dark_theme = true) {
+        font-weight: 700;
+    }*/
+}

package/pacem/scaffolding/index.less

@@ -0,0 +1,2 @@
+// theme-dark is the 'cookie-cutter'
+@import "@{theme}/index";

package/pacem/scaffolding/light/index.less

@@ -0,0 +1,2 @@
+// theme-dark is the 'cookie-cutter'
+@import "../dark/index";

package/pacem/scaffolding/phousys/index.less

@@ -0,0 +1,2 @@
+// theme-dark is the 'cookie-cutter'
+@import "../dark/index";