@pacem/pacem-theme-less 1.0.0-amaldi

package/pacem/scaffolding/dark/radio.less

@@ -0,0 +1,78 @@
+@import "../../../shared";
+@import "../shared";
+
+//.@{PCSS}-field {
+//.@{PCSS}-input-container {
+
+.@{PCSS}-readonly.@{PCSS}-radio,
+label.@{PCSS}-label.@{PCSS}-radio,
+@{P}-radio-list .@{PCSS}-readonly.@{PCSS}-radio {
+
+    &::before {
+        .Icon('radio_button_unchecked', 1.1rem * @font_rem_factor);
+        .IconVariation(0);
+        left: @input_padding_horiz;
+        line-height: @field_height;
+        color: @color_input_toggle;
+    }
+}
+
+@{P}-radio {
+
+    &.@{PCSS}-selected label.@{PCSS}-label.@{PCSS}-radio:before {
+        content: 'radio_button_checked';
+        .IconVariation(0);
+    }
+}
+
+@{P}-radio-list,
+@{P}-radio {
+
+    .@{PCSS}-readonly.@{PCSS}-radio {
+        .FormFieldLabelIcon('check_circle');
+        .IconVariation(1);
+    }
+
+    &.@{PCSS}-disabled {
+        .@{PCSS}-readonly.@{PCSS}-radio,
+        label.@{PCSS}-label.@{PCSS}-radio {
+            color: @color_disabled;
+
+            &:before {
+                color: @color_disabled;
+            }
+        }
+    }
+}
+
+// just the radio
+.form-minimal > @{P}-form-field:not(.field-full) @{P}-radio-list,
+@{P}-form-field.field-minimal @{P}-radio-list,
+@{P}-radio-list.radio-list-naked {
+    .@{PCSS}-radio-list {
+        min-width: 0;
+        // height: @field_height;
+        background: none;
+
+        label.@{PCSS}-radio {
+            border: 0;
+            padding-left: @grid_spacing/3;
+            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;
+            }
+        }
+
+        /*> li:first-child when (@border_field_underline = false) {
+            padding-left: @grid_spacing/4;
+        }*/
+    }
+}

package/pacem/scaffolding/dark/search.less

@@ -0,0 +1,29 @@
+@import "../../../shared";
+@import "../shared";
+
+    display: block;
+    position: relative;
+
+    &:before {
+        .Icon('search');
+        //color: @color_lightblue;
+        //top: .125 * @grid_spacing;
+        left: 0;
+    }
+
+    input[type=search] {
+        border: none;
+        border-bottom: 1px solid fade(@color_light, 10);
+        padding-bottom: @grid_spacing/2;
+        padding-left: 1.25 * @grid_spacing;
+        margin-bottom: @grid_spacing/1.5;
+        display: block;
+        width: 100%;
+        .FontMain(1.2);
+        //font-weight: bold;
+        //background: @color_light;
+        color: @color_default;
+        height: 1.25 * @grid_spacing;
+        box-sizing: border-box;
+    }
+}

package/pacem/scaffolding/dark/select.less

@@ -0,0 +1,55 @@
+@import "../shared";
+
+@{P}-select {
+    .FormFieldItemWrapper();
+
+    &::after {
+        .Icon('arrow_drop_down', @grid_spacing);
+        line-height: @field_height;
+        right: 0;
+        top: 0;
+        pointer-events: none;
+    }
+
+    &.@{PCSS}-readonly {
+
+        &::after {
+            display: none;
+        }
+    }
+
+    .@{PCSS}-select {
+        .FormFieldItem();
+        .FormFieldItemInline();
+        box-sizing: border-box;
+        padding-right: @grid_spacing;
+        display: block;
+        width: 100%;
+
+        > option {
+            background-color: @color_lightblue;
+
+            &.@{PCSS}-watermark {
+                .Watermark();
+            }
+
+            &[disabled]{
+                color: @color_disabled;
+            }
+        }
+        // normalize toggle button:
+        -webkit-appearance: none;
+        -moz-appearance: none;
+
+        &:-moz-focusring {
+            color: transparent;
+            text-shadow: 0 0 0 #000;
+        }
+
+        &::-ms-expand {
+            display: none;
+        }
+    }
+}
+
+

package/pacem/scaffolding/dark/slider.less

@@ -0,0 +1,176 @@
+@import "../../../shared";
+@import "../shared";
+
+
+.SliderProgress(@clr) {
+    background-color: @clr;
+
+    & when (@glows = true) {
+        box-shadow: 0 0 8px @clr;
+    }
+}
+
+@{P}-slider {
+
+    > .@{PCSS}-slider {
+
+        @_slider_h: @field_height;
+        @_slider_track_h: @grid_spacing/ 6;
+        @_slider_thumb_size: @grid_spacing;
+
+        display: grid;
+        grid-template-columns: auto 1fr auto;
+        grid-template-rows: auto auto;
+        grid-template-areas: 'min track max' 'left footer right';
+        align-items: center;
+        // min-width: @field_min_width;
+
+        .slider-track, .slider-progress, .slider-thumb {
+            grid-area: track;
+        }
+
+        *[min] {
+            grid-area: min;
+        }
+
+        *[max] {
+            grid-area: max;
+        }
+
+        .slider-track, .slider-progress {
+            height: @_slider_track_h;
+        }
+
+        .slider-track {
+            margin: 0 @grid_spacing;
+            background-color: @color_disabled;
+
+            & when (@glows = false) {
+                border-radius: @_slider_track_h * .5;
+                overflow: hidden;
+            }
+
+            & when (@gradients = true) {
+                .GradientVertical(0%, 100%, rgba(0,0,0,0.25), rgba(255,255,255,0.05));
+            }
+        }
+
+        .slider-thumb {
+            width: @_slider_thumb_size;
+            height: $width;
+            margin-left: @grid_spacing - .5 * $width;
+            margin-top: (@_slider_h - $width) / 2;
+            margin-bottom: $margin-top;
+
+            .thumb-label {
+                border-radius: 50%;
+                background-color: @color_slider_thumb;
+                transform-origin: 50% 50%;
+                transform: scale(0.75);
+                width: @_slider_thumb_size;
+                height: $width;
+
+                & when (@shadows = true) {
+                    box-shadow: 0 2px @grid_spacing / 3 rgba(0,0,0,0.5);
+                }
+            }
+
+            &.@{PCSS}-drag-lock,
+            &.@{PCSS}-dragging {
+                opacity: 1 !important;
+
+                .thumb-label {
+                    transform: scale(1);
+                }
+            }
+        }
+
+        &.slider-thumblabel {
+
+            .slider-thumb:focus {
+
+                .thumb-label {
+                    transform: scale(0);
+                }
+            }
+        }
+
+        .slider-progress {
+            align-self: start;
+            transform: scaleX(0);
+            transform-origin: 0 0;
+            .SliderProgress(@color_default);
+        }
+
+        .slider-footer {
+            grid-area: footer;
+            pointer-events: none;
+            display: none;
+        }
+    }
+}
+
+.@{PCSS}-fieldgroup @{P}-slider,
+@{P}-form:not(.form-minimal) @{P}-form-field:not(.field-minimal) > @{P}-form:not(.@{PCSS}-readonly) > .@{PCSS}-input-container > @{P}-slider {
+    .FormFieldItemWrapperCore();
+
+    > .@{PCSS}-slider {
+        *[min] {
+            padding-left: @grid_spacing/3;
+        }
+
+        *[max] {
+            padding-right: @grid_spacing/3;
+        }
+    }
+}
+
+each(@all_colors,{
+        @{P}-form-field.slider-@{value} @{P}-slider,
+        @{P}-slider.slider-@{value} {
+            .slider-progress {
+                .SliderProgress(~"var(--@{PCSS}-color-@{value})");
+            }
+        }
+     });
+
+
+.@{PCSS}-animations {
+
+    &:not(.@{PCSS}-dragging) @{P}-slider:not(.slider-keydown) {
+
+        .slider-progress,
+        .slider-thumb {
+            transition: transform .3333s @easing_in_out_sine;
+        }
+    }
+
+    @{P}-slider {
+
+        .slider-thumb .thumb-label {
+            transition: transform .15s @easing_in_out_sine;
+        }
+    }
+}
+
+/* form-field context */
+@{P}-form-field:not(.slider-nofooter) @{P}-slider > .@{PCSS}-slider {
+
+    .slider-footer {
+        .FontTech(.8);
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        padding-left: @grid_spacing;
+        padding-bottom: @grid_spacing/3;
+        .Ellipsed();
+        // color: fade(@color_tech, 100);
+
+        &::before {
+            .Icon('label', @grid_spacing/1.5);
+            position: static;
+            margin-right: @grid_spacing/6;
+            color: @color_default;
+        }
+    }
+}

package/pacem/scaffolding/dark/snapshot.less

@@ -0,0 +1,183 @@
+@import "../../../shared";
+@import "../shared";
+
+@{P}-snapshot {
+    display: grid;
+    grid-template-columns: auto 1fr;
+
+    @_dim_w: @grid_spacing * 10;
+    @_dim_h: @_dim_w;
+
+    .@{PCSS}-snapshot {
+        grid-column: 1;
+        height: 100%;
+        width: 100%;
+        display: grid;
+        grid-template-rows: 1fr auto;
+        grid-template-areas: "stage" "footer";
+        justify-content: center;
+        align-items: center;
+
+        .snapshot-step {
+            grid-area: footer;
+            pointer-events: none;
+            opacity: 0;
+            transform: none;
+        }
+
+        canvas, video {
+            border: 1px solid @color_border;
+            width: @_dim_w;
+            height: @_dim_h;
+            grid-area: stage;
+            width: 100%;
+            height: 100%;
+            // hack to avoid the video element to exceed the allowed size: :S
+            border-radius: @grid_spacing / @grid_spacing;
+            object-fit: cover;
+            visibility: hidden;
+            pointer-events: none;
+        }
+
+        .snapshot-countdown {
+            grid-area: stage;
+            pointer-events: none;
+            border-radius: 50%;
+            width: @grid_spacing * 2;
+            height: $width;
+            background-color: fade(@color_dark, 50);
+            color: #fff;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            justify-self: center;
+            .FontTechSize(2);
+
+            & when(@blur) {
+                .Blur(@grid_spacing * .25);
+            }
+        }
+
+        input[type=file] {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+        // start viewstep
+        &.snapshot-start {
+            canvas {
+                visibility: visible;
+            }
+
+            .snapshot-step {
+                &.step-start {
+                    pointer-events: all;
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+
+                &.step-taking,
+                &.step-confirm {
+                    transform: translateY(@grid_spacing);
+                }
+            }
+        }
+        // taking viewstep
+        &.snapshot-taking {
+            video {
+                visibility: visible;
+            }
+
+            .snapshot-step {
+                &.step-taking {
+                    pointer-events: all;
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+
+                &.step-start {
+                    transform: translateY(-@grid_spacing);
+                }
+
+                &.step-confirm {
+                    transform: translateY(@grid_spacing);
+                }
+            }
+        }
+        // confirm viewstep
+        &.snapshot-confirm {
+            canvas {
+                visibility: visible;
+            }
+
+            .snapshot-step {
+                &.step-confirm {
+                    pointer-events: all;
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+
+                &.step-taking,
+                &.step-start {
+                    transform: translateY(-@grid_spacing);
+                }
+            }
+        }
+
+        &.snapshot-steady .snapshot-preview,
+        &.snapshot-preview.snapshot-taking .snapshot-preview,
+        &.snapshot-video video {
+            visibility: visible;
+            pointer-events: all;
+        }
+
+        &.snapshot-preview.snapshot-taking .snapshot-preview {
+            border-color: @color_highlight;
+        }
+
+        video {
+            background-color: #000; // only visible in edge(?) that doesn't obey to object-fit `cover`
+        }
+
+        .snapshot-brightout {
+            -moz-animation: bright-out 1s 1 normal;
+            -o-animation: bright-out 1s 1 normal;
+            -webkit-animation: bright-out 1s 1 normal;
+            animation: bright-out 1s 1 normal;
+        }
+    }
+
+    &.@{PCSS}-readonly {
+
+        .@{PCSS}-snapshot {
+
+            .snapshot-step {
+                display: none;
+            }
+        }
+    }
+}
+
+.@{PCSS}-animations {
+
+    @{P}-snapshot {
+        .snapshot-step {
+            transition: transform .25s @easing_out_sine, opacity .2s linear;
+        }
+
+        .snapshot-countdown {
+            .Animatable(pop-anim, .25s, @easing_out_back);
+        }
+    }
+}
+
+@{P}-form-field.field-center > .@{PCSS}-field > .@{PCSS}-input-container {
+    // this is a filthy patch
+    @{P}-snapshot {
+        grid-template-columns: 1fr auto 1fr;
+
+        .@{PCSS}-snapshot {
+            grid-column: 2;
+        }
+    }
+}

package/pacem/scaffolding/dark/suggest.less

@@ -0,0 +1,115 @@
+@import "../shared";
+
+@{P}-suggest {
+
+    input[type=text] {
+        padding-right: @field_height;
+    }
+    // clear and toggle button
+    input[type=text] ~ @{P}-button {
+        width: @field_height;
+        height: $width;
+
+        &::before {
+            line-height: @field_height;
+        }
+    }
+    // clear button
+    input[type=text] + @{P}-button {
+        &::before {
+            content: 'close';
+            font-size: @grid_spacing/2;
+        }
+    }
+}
+
+@{P}-balloon.suggest {
+    /*border: none;
+    background: none;
+    padding: 0;
+    z-index: @lightbox-z-index; // needed for modal form*/
+    min-height: 0;
+
+    ol {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+        //border: 2px solid @color_suggest_border;
+        //min-width: 175px;
+        li {
+            color: @color_default;
+            background-color: @color_suggest_back;
+            cursor: pointer;
+            border-top: 1px solid @color_suggest_border_light;
+            border-bottom: 1px solid @color_suggest_border_dark;
+            padding: @grid_spacing/3 @grid_spacing*.5;
+            font-size: 1.1em;
+
+            /*&[data-pacem-disabled=false] {
+                color: @color_suggest_focus_fore;
+
+                & when(@dark_theme = true) {
+                    background-color: darken(@color_suggest_focus_back, 10);
+                }
+
+                & when(@dark_theme = false) {
+                    background-color: lighten(@color_suggest_focus_back, 10);
+                }
+            }
+
+            &[data-pacem-disabled=false] ~ li[data-pacem-disabled=false]:not(:focus):not(:hover):not([data-pacem-focused]) {
+                background-color: @color_suggest_back;
+                color: @color_default;
+            }*/
+
+            span.@{PCSS}-highlight {
+                background-color: transparent;
+                color: @color_suggest_highlight;
+                font-weight: 700;
+            }
+
+            &[data-pacem-disabled=true] {
+                pointer-events: none;
+                color: @color_disabled;
+
+                span.@{PCSS}-highlight {
+                    background-color: transparent;
+                    color: @color_disabled_inv;
+                    font-weight: @font_weight;
+                }
+            }
+        }
+    }
+
+    ol:focus-within,
+    ol:hover {
+        > li[data-pacem-disabled=false] {
+            background-color: @color_suggest_back;
+            color: @color_default;
+        }
+
+        > li {
+
+            &:focus,
+            &:hover {
+                background-color: @color_suggest_focus_back;
+                color: @color_suggest_focus_fore;
+
+                span.@{PCSS}-highlight {
+                    color: @color_suggest_focus_highlight;
+                }
+            }
+        }
+    }
+
+    ol:not(:focus-within):not(:hover) {
+        > li[data-pacem-focused] {
+            background-color: @color_suggest_focus_back;
+            color: @color_suggest_focus_fore;
+
+            span.@{PCSS}-highlight {
+                color: @color_suggest_focus_highlight;
+            }
+        }
+    }
+}