@pacem/pacem-theme-less 1.0.0-amaldi

package/pacem/scaffolding/dark/calendar-picker.less

@@ -0,0 +1,415 @@
+@import "../../theme-dark";
+@import "../shared";
+
+@{P}-calendar-month-picker,
+@{P}-calendar-year-picker {
+    display: block;
+}
+
+@{P}-calendar-picker {
+
+    input.@{PCSS}-input {
+        // text-align: right;
+        // padding-right: @grid_spacing * 1.5;
+    }
+
+    .FormFieldIcon('today');
+
+    &.@{PCSS}-readonly {
+        .FormFieldLabelIcon('today');
+    }
+
+    &::before {
+        pointer-events: none;
+    }
+    // clear button
+    @{P}-button[clear] {
+        width: @field_height;
+        height: $width;
+
+        &::before {
+            line-height: @field_height;
+            font-size: @grid_spacing/2;
+        }
+    }
+}
+
+.@{PCSS}-calendar-picker-dropdown {
+    z-index: @balloon_z_index;
+
+    // mixins
+    .Day(@count, @index, @offset) when (@index > 0) {
+        &.day-@{index} {
+            grid-column: @index + @offset;
+        }
+        // next iteration
+        .Day( @count, @index - 1, @offset);
+    }
+
+    .Day(@count) {
+        .Day(@count, 0);
+    }
+
+    .Day(@count, @offset) {
+        .Day(@count, @count, @offset);
+    }
+    // style
+    position: absolute;
+    background: @color_suggest_back;
+
+    & when(@shadows = true) {
+        box-shadow: 0 @grid_spacing/6 @grid_spacing/2 rgba(0,0,0,.25);
+    }
+
+    & when(@shadows = false) {
+        box-shadow: 0 @grid_spacing/6 @grid_spacing/3 rgba(0,0,0,.1);
+    }
+
+    .dropdown-grid {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        grid-template-rows: auto auto auto;
+        grid-template-areas: "title buttons" "weekdays weekdays" "calendar calendar";
+        align-items: center;
+
+        > .calendar-title {
+            grid-area: title;
+            padding: @grid_spacing/3 0 @grid_spacing/3 @grid_spacing/3;
+
+            > @{P}-span {
+                display: block;
+                font-weight: 700;
+                border: 1px solid transparent;
+                padding: 0 @grid_spacing 0 @grid_spacing/6;
+
+                &.calendar-zoom {
+                    position: relative;
+                    cursor: pointer;
+
+                    &:hover {
+                        border-color: @color_border;
+
+                        &::after {
+                            .Icon('unfold_more');
+                            color: @color_border;
+                            font-size: @grid_spacing * .75;
+                            line-height: 1.333;
+                            right: 0;
+                        }
+                    }
+                }
+            }
+        }
+
+        > .calendar-header {
+            grid-area: weekdays;
+            display: grid;
+            grid-template-columns: repeat(7, 1fr);
+            pointer-events: none;
+            background: @color_background;
+            color: @color_disabled;
+
+            & when (@shadows = true), (@dark_theme = true) {
+                box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
+            }
+
+            > .calendar-heading {
+                text-align: center;
+                display: block;
+                padding: @grid_spacing/6 0;
+                .Day(7);
+            }
+        }
+
+        > .calendar-month-nav {
+            grid-area: buttons;
+            padding: @grid_spacing/3;
+        }
+
+        @_sz: @grid_spacing * 1.5;
+        @_day_sz: @_sz;
+        @_month_sz_w: @_sz * 7 / 4;
+        @_month_sz_h: @_sz * 2;
+
+        > @{P}-calendar {
+            grid-area: calendar;
+
+            .@{PCSS}-calendar.calendar-grid {
+                grid-template-columns: repeat(7,@_day_sz);
+                grid-template-rows: repeat(6,@_day_sz);
+
+                .calendar-day {
+                    margin: @grid_spacing/6;
+                    padding: 0;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+                    border: none;
+                    border-radius: 50%;
+
+                    &.day-1 {
+                        border-left: none;
+                    }
+
+                    &.week-1 {
+                        border-top: none;
+                    }
+
+                    &.@{PCSS}-disabled {
+
+                        & when(@dark_theme = true) {
+                            background-color: fade(@color_default, 5);
+                            color: fade(@color_default, 15);
+                        }
+
+                        & when(@dark_theme = false) {
+                            background-color: fade(@color_default, 5);
+                            color: fade(@color_default, 25);
+                        }
+
+                        margin-left: 0;
+                        margin-right: 0;
+                        cursor: default;
+                        border-radius: 0;
+                    }
+
+                    &.today {
+                        background-color: fade(@color_default, 20);
+                    }
+                    /*&.viewday {
+                background-color: @color_primary;
+                color: @color_primary_inv;
+            }*/
+
+                    &.selected-date {
+                        background-color: @color_primary;
+                        color: @color_primary_inv;
+                        /*background-color: @color_accent;
+                color: @color_accent_inv;*/
+                    }
+                }
+            }
+        }
+        /* #region MONTH-PICKER */
+
+        > @{P}-calendar-month-picker {
+            grid-area: calendar;
+
+            .@{PCSS}-month-picker {
+                display: grid;
+                grid-template-columns: repeat(4, 1fr);
+                grid-template-rows: repeat(3, 1fr);
+                // mixins
+                .Month(@count, @index, @offset) when (@index > 0) {
+
+                    @_col: mod(@index, 4);
+
+                    &.month-@{index} {
+
+                        & when (@_col = 0) {
+                            grid-column: 4;
+                        }
+
+                        & when (@_col > 0) {
+                            grid-column: @_col;
+                        }
+
+                        grid-row: ceil(@index / 4);
+                    }
+                    // next iteration
+                    .Month( @count, @index - 1, @offset);
+                }
+
+                .Month(@count) {
+                    .Month(@count, 0);
+                }
+
+                .Month(@count, @offset) {
+                    .Month(@count, @count, @offset);
+                }
+
+                > .calendar-month {
+                    .Month(12);
+                    //
+                    width: @_month_sz_w;
+                    height: @_month_sz_h;
+                    padding: @grid_spacing/3;
+                    box-sizing: border-box;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+
+                    > .month-button {
+                        cursor: pointer;
+                        border: none;
+                        border-radius: 50%;
+                        @_month_sz: min(@_month_sz_w, @_month_sz_h);
+                        width: @_month_sz - 2 * @grid_spacing/3;
+                        height: $width;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+
+                        &:hover {
+                            background-color: @color_calendarday_hover;
+                        }
+
+
+                        &.this-month {
+                        }
+
+                        &.selected-month {
+                            background-color: fade(@color_default, 20);
+                        }
+                    }
+                }
+            }
+        }
+        /* #endregion */
+        /* #region YEAR-PICKER */
+
+        > @{P}-calendar-year-picker {
+            grid-area: calendar;
+
+            .@{PCSS}-year-picker {
+                display: grid;
+                grid-template-columns: repeat(4, 1fr);
+                grid-template-rows: repeat(3, 1fr);
+                // mixins
+                .Year(@count, @index, @offset) when (@index > 0) {
+
+                    @_col: mod(@index, 4);
+
+                    &.year-@{index} {
+
+                        & when (@_col = 0) {
+                            grid-column: 4;
+                        }
+
+                        & when (@_col > 0) {
+                            grid-column: @_col;
+                        }
+
+                        grid-row: ceil(@index / 4);
+                    }
+                    // next iteration
+                    .Year( @count, @index - 1, @offset);
+                }
+
+                .Year(@count) {
+                    .Year(@count, 0);
+                }
+
+                .Year(@count, @offset) {
+                    .Year(@count, @count, @offset);
+                }
+
+                > .calendar-year {
+                    .Year(12);
+                    //
+                    width: @_month_sz_w;
+                    height: @_month_sz_h;
+                    padding: @grid_spacing/3;
+                    box-sizing: border-box;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+
+                    > .year-button {
+                        cursor: pointer;
+                        border: none;
+                        border-radius: 50%;
+                        @_month_sz: min(@_month_sz_w, @_month_sz_h);
+                        width: @_month_sz - 2 * @grid_spacing/3;
+                        height: $width;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+
+                        &:hover {
+                            background-color: @color_calendarday_hover;
+                        }
+
+                        &.this-year {
+                        }
+
+                        &.selected-year {
+                            background-color: fade(@color_default, 20);
+                        }
+                    }
+                }
+            }
+        }
+        /* #endregion */
+    }
+}
+
+@keyframes calendar-header {
+    0% {
+        transform: translateY(-@grid_spacing / 3);
+        opacity: 0;
+    }
+
+    75%{
+        transform: none;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+.@{PCSS}-body.@{PCSS}-animations {
+
+    .@{PCSS}-calendar-picker-dropdown {
+
+        @_offset: @grid_spacing/3;
+        transition: transform @easing_out_sine .15s, opacity linear .1s;
+        transition-delay: .1s;
+        transform: translateY(@_offset);
+        opacity: 0;
+
+        &.dropdown-in {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        &.dropdown-out {
+        }
+
+        .calendar-day {
+            transition: background-color @easing_out_sine .1s, color @easing_out_sine .1s;
+        }
+
+        .calendar-header {
+            animation: calendar-header .1s @easing_out_sine both;
+        }
+
+        .calendar-header > .calendar-heading {
+            animation: calendar-header .15s @easing_out_sine both;
+        }
+
+        @{P}-calendar,
+        @{P}-calendar-month-picker,
+        @{P}-calendar-year-picker {
+            animation: default-anim .2s @easing_in_out_sine both;
+        }
+
+        @{P}-calendar.viewdate-next,
+        @{P}-calendar-month-picker.viewyear-next,
+        @{P}-calendar-year-picker.viewyear-next {
+            animation-name: list-item-right;
+        }
+
+        @{P}-calendar.viewdate-previous,
+        @{P}-calendar-month-picker.viewyear-previous,
+        @{P}-calendar-year-picker.viewyear-previous {
+            animation-name: list-item-left;
+        }
+
+        &.dropdown-select *{
+            animation: none !important;
+        }
+    }
+}

package/pacem/scaffolding/dark/char-counter.less

@@ -0,0 +1,68 @@
+@import "../../theme-dark";
+@import "../shared";
+
+@{P}-char-count {
+    display: flex;
+    align-content: flex-end;
+    justify-content: flex-end;
+    flex-direction: row;
+    .FontTech(.7);
+    text-align: right;
+
+    @{P}-span {
+        flex: 0 0 auto;
+
+        &.@{PCSS}-char-min,
+        &.@{PCSS}-char-max {
+            opacity: 0.75;
+        }
+
+        &.@{PCSS}-char-min:after,
+        &.@{PCSS}-char-max:before {
+            //content: '\2264';
+            content: '\2044';
+            font-size: 0.8em;
+            padding: @grid_spacing/12;
+        }
+
+        &.@{PCSS}-char-curr {
+            font-weight: 700;
+        }
+    }
+
+    .@{PCSS}-char-count {
+        flex: 0 0 auto;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-content: flex-end;
+        position: relative;
+        padding: @grid_spacing/12 @grid_spacing @grid_spacing/12 @grid_spacing/8;
+
+        &:after {
+            .Icon('keyboard', @grid_spacing/1.5);
+            right: 0;
+            top: 0;
+        }
+
+        & when (@border_input_radius > 0) {
+            transform: translateX(-@border_input_radius);
+        }
+    }
+
+    .@{PCSS}-char-count.invalid {
+        background: @color_error;
+        color: @color_error_inv;
+
+        & when (@border_radius > 0) {
+            padding-left: @grid_spacing/8 + @border_input_radius;
+            padding-right: @grid_spacing + @border_input_radius;
+            border-bottom-left-radius: @border_input_radius * 1;
+            border-bottom-right-radius: $border-bottom-left-radius;
+
+            &::after {
+                right: @border_input_radius;
+            }
+        }
+    }
+}

package/pacem/scaffolding/dark/chars.less

@@ -0,0 +1,29 @@
+@import "../shared";
+
+@{P}-input-chars {
+
+    .@{PCSS}-readonly,
+    .@{PCSS}-input {
+        font-size: 1.5rem;
+        font-family: ~"var(--@{PCSS}-font-tech)";
+    }
+
+    .@{PCSS}-readonly{
+        letter-spacing: .25rem;
+    }
+
+    .@{PCSS}-input {
+        text-align: center;
+        width: 2rem;
+        padding: 0;
+        margin: ~"0 var(--@{PCSS}-size--4)";
+
+        &.first-char {
+            margin-left: 0;
+        }
+
+        &.last-char {
+            margin-right: 0;
+        }
+    }
+}

package/pacem/scaffolding/dark/checkbox-radio-shared.less

@@ -0,0 +1,150 @@
+@import "../shared";
+
+@_pad: @input_padding_horiz;
+
+@{P}-radio,
+@{P}-checkbox,
+@{P}-radio-list,
+@{P}-checkbox-list {
+    .FormFieldItemWrapper();
+}
+
+@{P}-radio-list,
+@{P}-checkbox-list {
+
+    ol {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-content: flex-start;
+
+        > li {
+            flex: 0 1 auto;
+            display: inline-block;
+            padding: 0 2 * @_pad 0 0;
+
+            &:last-child {
+                padding-right: 0;
+            }
+        }
+    }
+}
+
+@{P}-radio,
+@{P}-checkbox {
+
+    .@{PCSS}-input {
+        display: inline;
+        opacity: 0;
+        width: 0;
+        height: 0;
+        border: 0;
+        margin: 0;
+        padding: 0;
+        min-width: 0;
+        min-height: 0;
+        pointer-events: none;
+        // needed in Firefox for proper rendering
+        position: absolute;
+    }
+
+    label.@{PCSS}-label {
+        .FormFieldItem();
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    &.pacem-disabled {
+
+        label.@{PCSS}-label {
+            cursor: default;
+        }
+    }
+
+    label.@{PCSS}-label {
+        padding-left: @grid_spacing + @_pad;
+        padding-right: @_pad;
+        position: relative;
+        font-size: 1.1em;
+        line-height: @field_height;
+    }
+
+    &.@{PCSS}-focus label.@{PCSS}-label::before {
+        color: @color_default;
+    }
+
+    &.@{PCSS}-selected .@{PCSS}-readonly::before {
+        color: @color_primary;
+    }
+}
+
+@{P}-checkbox .@{PCSS}-label.@{PCSS}-checkbox {
+    box-sizing: border-box;
+    width: 100%;
+}
+
+@media (min-width: @threshold_lg) {
+
+    @{P}-checkbox-list @{P}-checkbox,
+    @{P}-checkbox-list @{P}-checkbox:not(.field-stretch)/*:not(.input-stretch)*/,
+    @{P}-radio-list @{P}-radio,
+    @{P}-radio-list @{P}-radio:not(.field-stretch)/*:not(.input-stretch)*/ {
+        min-width: 0;
+    }
+}
+
+// nowrap lists
+@{P}-form-field.field-nowrap {
+
+    @{P}-radio-list,
+    @{P}-checkbox-list {
+        ol {
+            flex-wrap: nowrap;
+
+            > li {
+                flex-grow: 0;
+                flex-shrink: 1;
+
+                @{P}-radio > label {
+                    white-space: nowrap;
+                }
+            }
+        }
+    }
+}
+
+@{P}-form-field.field-outline {
+
+    @{P}-radio-list.@{PCSS}-focus @{P}-radio,
+    @{P}-checkbox-list.@{PCSS}-focus @{P}-checkbox {
+
+        .@{PCSS}-viewfinder,
+        .@{PCSS}-input {
+            .NoOutline() !important;
+        }
+    }
+}
+
+// fieldgroups
+.@{PCSS}-fieldset {
+
+    .@{PCSS}-fieldgroup,
+    input-group {
+        @{P}-radio-list @{P}-radio label.@{PCSS}-label,
+        @{P}-checkbox-list @{P}-checkbox.@{PCSS}-label {
+
+            /*& when (@border_field_underline = true) {
+                min-height: @field_height - @border_field_size;
+            }
+
+            & when (@border_field_underline = false) {
+                min-height: @field_height - 2 * @border_field_size;
+            }*/
+            min-height: @field_height;
+        }
+    }
+}