@pacem/pacem-theme-less 1.0.0-amaldi

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

@@ -0,0 +1,253 @@
+@import "../../shared";
+
+@{P}-contenteditable {
+
+    div[dashboard] {
+        padding: @grid_spacing/3 0 0 0;
+        grid-area: bottom;
+    }
+}
+
+// dashboard on top
+.dashboard-top @{P}-contenteditable,
+@{P}-contenteditable.dashboard-top {
+
+    .@{PCSS}-viewfinder {
+        grid-area: bottom;
+    }
+
+    div[dashboard] {
+        grid-area: top;
+    }
+}
+
+/* #region dashboard content flow*/
+
+@{P}-contenteditable div[dashboard],
+@{P}-contenteditable div[dashboard] .@{PCSS}-toolbar,
+@{P}-contenteditable div[dashboard] .@{PCSS}-contenteditable-toolbar {
+    display: flex;
+    flex-flow: row;
+    align-content: start;
+    align-items: start;
+    justify-content: start;
+}
+
+@{P}-contenteditable div[dashboard] {
+    > .@{PCSS}-toolbar,
+    > .@{PCSS}-contenteditable-toolbar {
+        flex-wrap: nowrap;
+        margin-bottom: @grid_spacing/3;
+        padding: 0;
+
+        .@{PCSS}-contenteditable-command {
+            // reset input field appearence in the toolbar
+            > @{P}-suggest {
+                padding: 0;
+
+                .@{PCSS}-input,
+                .@{PCSS}-viewfinder {
+                    background: transparent;
+                    border: 0;
+                    color: inherit;
+                }
+            }
+
+            > @{P}-button,
+            > .@{PCSS}-button {
+                border-radius: 0;
+                display: block;
+            }
+
+            &.toolbar-first when (@border_radius > 0) {
+                > @{P}-button,
+                > .@{PCSS}-button {
+                    border-top-left-radius: @border_radius;
+                    border-bottom-left-radius: @border_radius;
+                }
+            }
+
+            &:first-child when (@border_radius > 0) {
+                > @{P}-button,
+                > .@{PCSS}-button {
+                    border-top-left-radius: @border_radius;
+                    border-bottom-left-radius: @border_radius;
+                }
+            }
+
+            &.toolbar-last when (@border_radius > 0) {
+                > @{P}-button,
+                > .@{PCSS}-button {
+                    border-top-right-radius: @border_radius;
+                    border-bottom-right-radius: @border_radius;
+                }
+            }
+
+            &:last-child when (@border_radius > 0) {
+                > @{P}-button,
+                > .@{PCSS}-button {
+                    border-top-right-radius: @border_radius;
+                    border-bottom-right-radius: @border_radius;
+                }
+            }
+
+            &:not(:last-child):not(.toolbar-last) {
+                > @{P}-button,
+                > .@{PCSS}-button {
+                    border-right: none;
+                }
+            }
+
+            > @{P}-button.button,
+            > .@{PCSS}-button.button {
+                margin: 0;
+                box-shadow: none;
+                padding: 0 @grid_spacing/2;
+            }
+        }
+
+        & when (@shadows = true) {
+            .ButtonShadows();
+        }
+    }
+
+    > .@{PCSS}-separator,
+    > .@{PCSS}-contenteditable-separator {
+        display: block;
+        width: @grid_spacing/3;
+    }
+}
+
+/* #endregion */
+
+/* #region sticky dasboard */
+
+.dashboard-sticky @{P}-contenteditable,
+@{P}-contenteditable.dashboard-sticky {
+
+    div[dashboard] {
+        position: sticky;
+        bottom: 0;
+        top: auto;
+        background: @color_field_back;
+
+        & when(@blur = true) {
+            .Blur(@grid_spacing/4, @color_background);
+        }
+    }
+}
+
+// dashboard at the bottom
+.dashboard-sticky:not(.dashboard-top) @{P}-contenteditable:not(.dashboard-top),
+:not(.dashboard-top) @{P}-contenteditable.dashboard-sticky:not(.dashboard-top) {
+
+    .@{PCSS}-viewfinder {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    div[dashboard] {
+        box-shadow: 0 -1px 0px rgba(0,0,0,.25);
+    }
+}
+
+// dashboard on top
+.dashboard-top.dashboard-sticky @{P}-contenteditable,
+@{P}-contenteditable.dashboard-top.dashboard-sticky {
+
+    .@{PCSS}-viewfinder {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
+
+    div[dashboard] {
+        grid-area: top;
+        bottom: auto;
+        top: 0;
+        box-shadow: 0 1px 0px rgba(0,0,0,.25);
+    }
+}
+
+// layout-driven sticky position override
+.@{PCSS}-body {
+    &[footbar] {
+
+        @{P}-contenteditable {
+            div[dashboard] {
+                top: auto;
+                bottom: @layout_toolbar_height;
+            }
+        }
+    }
+
+    &[footer] {
+        @{P}-contenteditable {
+            div[dashboard] {
+                top: auto;
+                bottom: @layout_footer_height;
+            }
+        }
+    }
+
+    &[bigfooter] {
+        @{P}-contenteditable {
+            div[dashboard] {
+                top: auto;
+                bottom: @layout_bigfooter_height;
+            }
+        }
+    }
+
+    &[footer][footbar] {
+        @{P}-contenteditable {
+            div[dashboard] {
+                top: auto;
+                bottom: @layout_footer_height + @layout_toolbar_height;
+            }
+        }
+    }
+
+    &[bigfooter][footbar] {
+        @{P}-contenteditable {
+            div[dashboard] {
+                top: auto;
+                bottom: @layout_bigfooter_height + @layout_toolbar_height;
+            }
+        }
+    }
+}
+// layout-driven sticky position override (top)
+.@{PCSS}-body {
+    &[headbar] {
+
+        .dashboard-top @{P}-contenteditable,
+        @{P}-contenteditable.dashboard-top {
+            div[dashboard] {
+                top: @layout_toolbar_height;
+                bottom: auto;
+            }
+        }
+    }
+
+    &[header] {
+        .dashboard-top @{P}-contenteditable,
+        @{P}-contenteditable.dashboard-top {
+            div[dashboard] {
+                top: @layout_header_height;
+                bottom: auto;
+            }
+        }
+    }
+
+    &[header][headbar] {
+        .dashboard-top @{P}-contenteditable,
+        @{P}-contenteditable.dashboard-top {
+            div[dashboard] {
+                top: @layout_header_height + @layout_toolbar_height;
+                bottom: auto;
+            }
+        }
+    }
+}
+/* #endregion */
+

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

@@ -0,0 +1,4 @@
+@import "dashboard";
+@import "alignment";
+@import "picture";
+@import "placeholder";

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

@@ -0,0 +1,74 @@
+@import "../../shared";
+
+div[contenteditable=true] {
+
+    picture,
+    img {
+        max-width: 100%;
+    }
+
+    picture /*:focus-within*/ {
+        display: inline-block;
+
+        > img {
+            display: block;
+
+            &::selection {
+                background-color: transparent;
+            }
+        }
+
+        > .@{PCSS}-rescale {
+
+            @_clr: @color_primary;
+            @_brd: 2px;
+
+            opacity: .5;
+
+            &:hover {
+                opacity: 1;
+            }
+
+            &.rescale-bottomleft,
+            &.rescale-topleft,
+            &.rescale-bottomright,
+            &.rescale-topright {
+                opacity: 1;
+                background-color: @_clr;
+                border: @_brd solid @_clr;
+            }
+
+            &.rescale-bottomleft {
+                transform: translate(-@_brd, @_brd);
+            }
+
+            &.rescale-topleft {
+                transform: translate(-@_brd, -@_brd);
+            }
+
+            &.rescale-bottomright {
+                transform: translate(@_brd, @_brd);
+            }
+
+            &.rescale-topright {
+                transform: translate(@_brd, -@_brd);
+            }
+
+            &.rescale-right {
+                .GradientHorizontal(0, 50%, 50%, 100%, transparent, transparent, @_clr, @_clr);
+            }
+
+            &.rescale-left {
+                .GradientHorizontal(0, 50%, 50%, 100%, @_clr, @_clr, transparent, transparent);
+            }
+
+            &.rescale-bottom {
+                .GradientVertical(0, 50%, 50%, 100%, transparent, transparent, @_clr, @_clr);
+            }
+
+            &.rescale-top {
+                .GradientVertical(0, 50%, 50%, 100%, @_clr, @_clr, transparent, transparent);
+            }
+        }
+    }
+}

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

@@ -0,0 +1,24 @@
+@import "../../shared";
+
+div[contenteditable=true] {
+
+    @_clr: @color_primary;
+    @_brd: 3px;
+
+    ins {
+        text-decoration: inherit;
+
+        &::selection {
+            background-color: transparent;
+        }
+
+        &:hover {
+            outline: @_brd solid fade(@_clr, 50);
+        }
+
+        &:active, &:focus, &.placeholder-selected {
+            outline: @_brd solid @_clr;
+        }
+    }
+}
+

package/pacem/scaffolding/dark/contenteditable.less

@@ -0,0 +1,157 @@
+@import "../../../shared";
+@import "../shared";
+@import "../../ui/shared";
+
+@{P}-contenteditable {
+    .FormFieldItemWrapperCore();
+    display: grid;
+    grid-template-rows: auto auto;
+    grid-template-areas: 'top' 'bottom';
+    position: relative;
+
+    div[contenteditable=true] {
+        // max-height: 7.5 * @grid_spacing;
+        overflow: auto;
+        .FormFieldItem();
+        .FormFieldItemMultiline();
+        min-height: @field_height;
+        padding: @grid_spacing / 3;
+
+        ul, ol {
+            margin: 1em 2em;
+        }
+
+        ul {
+            list-style: disc;
+        }
+
+        ol {
+            list-style: decimal;
+        }
+    }
+
+    &.@{PCSS}-readonly {
+
+        .@{PCSS}-contenteditable {
+            border: none;
+            margin-bottom: @border_field_size;
+
+            & when (@border_field_underline = false) {
+                margin-top: @border_field_size;
+            }
+        }
+
+        div[pacem][readonly] {
+            font-size: 1.1em;
+            min-height: @field_height;
+            box-sizing: border-box;
+            padding: @grid_spacing / 3;
+        }
+    }
+
+    .@{PCSS}-viewfinder {
+        grid-area: top;
+    }
+}
+
+.field-stretch @{P}-contenteditable,
+/* obsolete */
+// @{P}-contenteditable.input-stretch,
+@{P}-contenteditable.field-stretch {
+
+    .@{PCSS}-contenteditable {
+        .FormFieldStretch();
+    }
+}
+
+/* #region print sizes */
+
+.contenteditable-pagesize @{P}-contenteditable,
+@{P}-contenteditable.contenteditable-pagesize {
+
+    @_pad_vert: 1.95cm;
+    @_line_h: .6cm;
+    @_font_sz: .4cm;
+
+    div[contenteditable=true],
+    div[pacem][readonly] {
+        box-sizing: border-box;
+        padding: @_pad_vert 1cm;
+        line-height: @_line_h;
+        font-size: @_font_sz;
+        margin: @grid_spacing auto;
+        box-sizing: border-box;
+
+        p {
+            padding: 0;
+        }
+
+        blockquote {
+            padding-top: @_line_h/2;
+            padding-bottom: $padding-top;
+        }
+
+        p, blockquote {
+            margin: 0 0 @_line_h/2 0;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+
+        h1 {
+            line-height: 1.5 * @_line_h;
+            font-size: $line-height * @_font_sz / @_line_h;
+            font-weight: 700;
+            margin: 12pt 0 2pt 0;
+        }
+
+        h2 {
+            line-height: 1.25 * @_line_h;
+            font-size: $line-height * @_font_sz / @_line_h;
+            font-weight: 700;
+            margin: 12pt 0 2pt 0;
+        }
+
+        & when (@dark_theme = true) {
+            box-shadow: 0 0 @grid_spacing rgba(0,0,0,.5);
+            background-color: @color_input_back;
+        }
+
+        & when (@dark_theme = false) {
+            border: 1px solid @color_border;
+            border-top: 1px solid #fff;
+            box-shadow: 0 0 @grid_spacing rgba(0,0,0,.1);
+        }
+    }
+
+    &.pagesize-a4 {
+        div[contenteditable=true],
+        div[pacem][readonly] {
+            width: 21cm;
+
+            /*&when (@dark_theme = true) {
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMinYMin slice' viewBox='0 0 210 297'%3E%3Cline x1='0' y1='0' x2='210' y2='0' stroke-width='1' stroke-dasharray='1 1' stroke='rgba%28255,255,255,0.1%29' /%3E%3C/svg%3E");
+            }
+
+            &when (@dark_theme = false) {
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMinYMin slice' viewBox='0 0 210 297'%3E%3Cline x1='0' y1='0' x2='210' y2='0' stroke-width='1' stroke-dasharray='1 1' stroke='rgba%280,0,0,0.1%29' /%3E%3C/svg%3E");
+            }
+
+            background-size: 21cm 29.7cm - 2 * @_pad_vert;
+            background-repeat: repeat;
+            background-position-y: @_pad_vert;*/
+        }
+    }
+
+    &.pagesize-a5 {
+        div[contenteditable=true],
+        div[pacem][readonly] {
+            width: 148mm;
+        }
+    }
+}
+
+/* #endregion */
+
+@import "contenteditable/index";

package/pacem/scaffolding/dark/datepicker.less

@@ -0,0 +1,129 @@
+@import "../../../shared";
+@import "../shared";
+
+@{P}-datetime-picker {
+    .FormFieldItemWrapper();
+
+    .@{PCSS}-datetime-picker-fields {
+        width: 100%;
+
+        > div,
+        > @{P}-panel {
+            display: inline-block;
+            vertical-align: middle;
+        }
+
+        .@{PCSS}-datetime-picker-hours {
+
+            @_sz: @grid_spacing /1.5;
+
+            padding-left: @_sz;
+            position: relative;
+
+            &:before {
+                .Icon('access_time', @grid_spacing / 2);
+                position: absolute;
+                left: 0;
+                top: @grid_spacing / 3;
+            }
+        }
+    }
+
+    .@{PCSS}-datetime-picker {
+        // overriding pacem-select rules...
+        @{P}-select {
+            border: 0;
+            min-width: 56px;
+
+            .@{PCSS}-select {
+                // remove borders
+                min-height: @field_height;
+                line-height: $min-height;
+            }
+        }
+
+        .@{PCSS}-datetime-picker-hours,
+        .@{PCSS}-datetime-picker-minutes,
+        .@{PCSS}-datetime-picker-seconds {
+            min-width: 40px;
+        }
+
+        .@{PCSS}-datetime-picker-fields {
+            display: inline-block;
+        }
+    }
+
+    dl {
+        @_h: @grid_spacing * 1.3333;
+        padding: @grid_spacing/6 0;
+        overflow: hidden;
+        height: @_h;
+
+        dt, dd {
+            line-height: @_h * .5;
+            height: @_h * .5;
+        }
+
+        dt {
+            float: left;
+            vertical-align: middle;
+            width: @grid_spacing / 1.5;
+            background: center center no-repeat;
+            background-size: contain;
+            font-size: 0;
+
+            &:nth-of-type(2)::before {
+                .Icon('language', @grid_spacing * 2 / 4);
+                position: static;
+                line-height: @_h * .5;
+            }
+
+            &:nth-of-type(1)::before {
+                .Icon('location_on', @grid_spacing * 2 / 4);
+                position: static;
+                line-height: @_h * .5;
+            }
+        }
+
+        dd {
+            clear: right;
+            // margin-left: @grid_spacing;
+            .FontTech(.8);
+
+            &:nth-of-type(2) {
+                color: fade(@color_tech, 100);
+            }
+        }
+
+        &.@{PCSS}-hidden {
+            transition: all .3s;
+            transform: none;
+            height: 0;
+        }
+
+        &.@{PCSS}-shown {
+            transition: all .3s /*cubic-bezier(0.23, 1, 0.32, 1)*/ .1s;
+            transform: none;
+        }
+    }
+
+    .@{PCSS}-readonly {
+        /*padding-left: @grid_spacing;
+        &::before {
+            .Icon('access_time', @field_left);
+            line-height: @field_height;
+            color: @color_primary;
+            left: 0;
+        }*/
+        .FormFieldLabelIcon('access_time');
+
+        &.date::before {
+            content: 'date_range';
+        }
+    }
+
+}
+
+.datetime-picker-nodetails .@{PCSS}-datetime-picker-preview{
+    .Inert();
+} 

package/pacem/scaffolding/dark/dialog-overrides.less

@@ -0,0 +1,32 @@
+@import "../shared";
+
+@{P}-dialog {
+
+   @{P}-input-search {
+        display: block;
+
+        .@{PCSS}-input {
+            display: block;
+            width: 100%;
+            box-sizing: border-box;
+            //color: @color_lightblue;
+            //border-color: fade(@color_teal, 20);
+            //&:focus {
+            //    color: @color_blue;
+            //    border-color: @color_teal;
+            //}
+        }
+    }
+
+   @{P}-contenteditable {
+        .@{PCSS}-contenteditable {
+            border-color: fade(@color_default, 10);
+        }
+
+        &.@{PCSS}-focus {
+            .@{PCSS}-contenteditable {
+                border-color: fade(@color_default, 40);
+            }
+        }
+    }
+}

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

@@ -0,0 +1,11 @@
+@import "../../../shared";
+@import "../shared";
+
+@{P}-element-picker {
+    .FormFieldItemWrapper();
+    display: inline-block;
+
+    @{P}-select{
+        display: block;
+    }
+}