@pacem/pacem-theme-less 1.0.0-amaldi

package/pacem/ui/dark/window.less

@@ -0,0 +1,313 @@
+@import "../shared";
+
+@window_dock_width: @grid_spacing;
+
+@{P}-window-area {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    pointer-events: none;
+    display: grid;
+    grid-template-columns: 1fr @window_dock_width;
+    grid-gap: 0;
+    grid-template-areas: 'float dock';
+    grid-auto-rows: min-content;
+    z-index: @lightbox_z_index - 2;
+}
+
+.WinTitle(@bg, @clr) {
+    background-color: fade(@bg, 80);
+    color: @clr;
+
+    &:hover {
+        background-color: @bg;
+    }
+}
+
+@{P}-window {
+
+    @_gap: @grid_spacing/3;
+    @_pad: @grid_spacing/2;
+    @_h: @grid_spacing * 1.3333;
+
+    display: grid;
+    grid-column-gap: @_gap;
+    grid-row-gap: @_gap;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto 1fr;
+    grid-template-areas: 'title buttons' 'content content';
+    padding: @_pad;
+    border-radius: @border_radius;
+    box-sizing: border-box;
+
+    &.window-border {
+        border: 1px solid @color_window_border;
+    }
+
+    & when (@blur = false) {
+        background-color: @color_background;
+    }
+
+    & when (@blur = true) {
+        .Blur(6px, @color_background);
+    }
+
+    &.window-corners when (@border_radius = 0) {
+        .Corners(fade(@color_window_border, 100), 0, @corner_size);
+    }
+
+    > .window-title {
+        grid-area: title;
+        .FontMain(1.1);
+        .Ellipsed();
+        .WinTitle(@color_button_back, @color_button_fore);
+        cursor: default;
+
+        > * {
+            pointer-events: none;
+        }
+    }
+
+    &.window-accent > .window-title {
+        .WinTitle(@color_accent, @color_accent_inv);
+    }
+
+    &.window-primary > .window-title {
+        .WinTitle(@color_primary, @color_primary_inv);
+    }
+
+    &.window-success > .window-title {
+        .WinTitle(@color_success, @color_success_inv);
+    }
+
+    &.window-danger > .window-title {
+        .WinTitle(@color_danger, @color_danger_inv);
+    }
+
+    &.window-warning > .window-title {
+        .WinTitle(@color_warning, @color_warning_inv);
+    }
+
+    > .window-buttons {
+        grid-area: buttons;
+        padding: 0;
+        margin: 0;
+
+        @{P}-button[data-icon-glyph]::before {
+            .FontStdSize(1.125);
+            padding: 0;
+            margin: 0;
+            vertical-align: middle;
+        }
+    }
+
+    > .window-content {
+        grid-area: content;
+        overflow: auto;
+
+        & when (@dark_theme = true) {
+            background-color: fade(@color_light, 1.25);
+        }
+
+        & when (@dark_theme = false) {
+            background-color: fade(@color_dark, 1.25);
+        }
+    }
+
+    > .window-title,
+    > .window-buttons @{P}-button {
+        height: @_h;
+        line-height: $height;
+    }
+
+    > .window-content,
+    > .window-title,
+    > .window-buttons @{P}-button {
+        padding: 0 @grid_spacing/3;
+    }
+
+    &.window-min:not(.window-dock) {
+        padding-bottom: @_pad - @_gap;
+        height: @_h + 2 * @_pad !important;
+
+        .window-content {
+            opacity: 0;
+        }
+    }
+
+    min-width: @layout_aside_width;
+    min-height: @_h + 2 * @_pad;
+}
+
+@{P}-window-area > @{P}-window {
+    @_pad: @grid_spacing/2;
+
+    grid-area: float;
+    position: absolute;
+    top: @layout_header_height + @grid_spacing;
+    left: @layout_aside_width + @grid_spacing;
+    width: 25vw;
+    height: 15.45vw;
+    pointer-events: auto;
+
+    &.window-dock {
+        position: fixed;
+        transform: translateX(@layout_aside_width) !important;
+        z-index: 1 !important;
+        width: @layout_aside_width !important;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        left: auto;
+        height: auto !important;
+        padding-right: @_pad + @window_dock_width;
+        opacity: 0;
+
+        &.dock-open:not(.docking-in) {
+            transform: matrix(1,0,0,1,0,0) !important;
+            z-index: 2 !important;
+            opacity: 1;
+        }
+    }
+
+    & when (@shadows = true) {
+        box-shadow: 0 @grid_spacing/3 @grid_spacing rgba(0,0,0,0.25);
+    }
+
+    & when (@shadows = false) {
+        box-shadow: 0 @grid_spacing/12 @grid_spacing/3 rgba(0,0,0,0.125);
+    }
+}
+
+// adapter
+@{P}-window-area > @{P}-adapter.windows-adapter {
+    grid-area: dock;
+    z-index: 2;
+
+    > @{P}-button.@{PCSS}-adapter-previous,
+    > @{P}-button.@{PCSS}-adapter-next {
+        .Inert();
+    }
+
+    ol.@{PCSS}-adapter-dashboard {
+        display: grid;
+        grid-row-gap: @window_dock_width / 10;
+        padding: 0;
+        margin: 0;
+
+        > li {
+            list-style-type: none;
+            padding: 0;
+            margin: 0;
+
+            > @{P}-button.@{PCSS}-adapter-page {
+                pointer-events: auto;
+                padding: 0 0 0 @window_dock_width/6;
+                height: @grid_cell;
+                box-sizing: border-box;
+
+                & when (@shadows = true) {
+                    box-shadow: 0 @grid_spacing/8 @grid_spacing/4 rgba(0,0,0,.3333);
+                }
+
+                > @{P}-span {
+                    .WinTitle(@color_button_back, @color_button_fore);
+                    display: block;
+                    writing-mode: vertical-lr;
+                    text-align: start;
+                    padding: @window_dock_width/6 0;
+                    box-sizing: border-box;
+                    height: 100%;
+                    width: @window_dock_width * 5/6;
+                    line-height: $width;
+                    font-size: @window_dock_width * 2/3;
+                    .Ellipsed();
+                }
+
+                &.@{PCSS}-adapter-active {
+                    > @{P}-span {
+                        .WinTitle(@color_primary, @color_primary_inv);
+                    }
+                }
+            }
+        }
+    }
+}
+
+.@{PCSS}-body {
+
+    &[footer] {
+        @{P}-window-area > @{P}-window.window-dock {
+            bottom: @layout_footer_height;
+        }
+
+        @{P}-window-area > @{P}-adapter.windows-adapter ol.@{PCSS}-adapter-dashboard {
+            padding-bottom: @layout_footer_height;
+        }
+    }
+
+    &[bigfooter] {
+        @{P}-window-area > @{P}-window.window-dock {
+            bottom: @layout_bigfooter_height;
+        }
+
+        @{P}-window-area > @{P}-adapter.windows-adapter ol.@{PCSS}-adapter-dashboard {
+            padding-bottom: @layout_bigfooter_height;
+        }
+    }
+
+    &[header] {
+
+        @{P}-window-area > @{P}-window.window-dock {
+            top: @layout_header_height;
+        }
+
+        @{P}-window-area > @{P}-adapter.windows-adapter ol.@{PCSS}-adapter-dashboard {
+            padding-top: @layout_header_height;
+        }
+    }
+}
+
+.@{PCSS}-animations @{P}-window:not(.window-dock) {
+    animation: fade-in @easing_out_sine .2s;
+
+    .window-content {
+        transition: opacity linear .2s;
+    }
+
+    &:not(.window-rescaling) {
+        transition: height @easing_in_out_sine .15s;
+    }
+}
+
+.@{PCSS}-animations @{P}-window.window-dock:not(.docking-in) {
+    transition: transform @easing_in_out_sine .3s, opacity linear .2s .1s;
+
+    &.dock-open {
+        transition: transform @easing_in_out_sine .3s, opacity linear .2s;
+    }
+}
+
+.@{PCSS}-animations {
+    @{P}-window-area > @{P}-adapter.windows-adapter {
+
+        ol.@{PCSS}-adapter-dashboard {
+
+            > li {
+
+                > @{P}-button.@{PCSS}-adapter-page {
+                    animation: list-item-right @easing_out_sine .35s;
+
+                    > @{P}-span {
+                        transition: background-color linear .3s;
+                    }
+                }
+            }
+        }
+    }
+}

package/pacem/ui/dialog-vars.less

@@ -0,0 +1,159 @@
+@import "shared";
+
+.DialogWithFixedButtons() {
+    @{P}-lightbox {
+
+        > .@{PCSS}-dialog-buttons {
+            padding: 0 /*@grid_spacing / 2*/ @lightbox_padding @lightbox_padding @lightbox_padding;
+            box-sizing: border-box;
+            z-index: @lightbox_z_index;
+            border-bottom-left-radius: @border_radius;
+            border-bottom-right-radius: @border_radius;
+        }
+
+        > .@{PCSS}-dialog-heading {
+            overflow: hidden;
+            // padding: @lightbox_padding @lightbox_padding 0 /*@grid_spacing / 2*/ @lightbox_padding;
+            > * {
+                margin: 0 @lightbox_padding;
+
+                &:first-child {
+                    margin-top: @lightbox_padding;
+                }
+            }
+        }
+
+        > .@{PCSS}-dialog-heading,
+        &::part(scrollable), // already defined in the lightbox
+        > .@{PCSS}-dialog-buttons {
+            max-width: 80vw;
+        }
+    }
+
+    &.modal-corners,
+    &.dialog-corners {
+        &::part(lightbox) when (@border_radius = 0) {
+            .Corners(fade(@color_border, 100), 0, @corner_size);
+        }
+    }
+}
+
+.DialogSizeAbsolute(@prefix, @suffix, @vw) {
+
+    &.@{prefix}-@{suffix} @{P}-lightbox::part(lightbox),
+    &.@{prefix}-@{suffix}::part(lightbox) {
+        max-width: @vw;
+
+        > .@{PCSS}-dialog-heading,
+        > .@{PCSS}-dialog-buttons,
+        > .@{PCSS}-scrollable {
+            max-width: @vw;
+        }
+    }
+}
+
+.DialogSizeResponsive(@prefix, @mid, @suffix, @vw) {
+
+    &.@{prefix}-@{mid}-@{suffix} @{P}-lightbox::part(lightbox),
+    &.@{prefix}-@{mid}-@{suffix}::part(lightbox) {
+        max-width: @vw;
+
+        > .@{PCSS}-dialog-heading,
+        > .@{PCSS}-dialog-buttons,
+        > .@{PCSS}-scrollable {
+            max-width: @vw;
+        }
+    }
+}
+
+.DialogPositioning(@prefix) {
+    &.@{prefix}-top @{P}-lightbox::part(lightbox-wrapper),
+    &.@{prefix}-top::part(lightbox-wrapper) {
+        justify-content: start;
+    }
+
+    &.@{prefix}-bottom @{P}-lightbox::part(lightbox-wrapper),
+    &.@{prefix}-bottom::part(lightbox-wrapper) {
+        justify-content: end;
+    }
+}
+
+.DialogAlignment(@prefix) {
+    &.@{prefix}-right:dir(ltr) @{P}-lightbox,
+    &.@{prefix}-left:dir(rtl) @{P}-lightbox,
+    &.@{prefix}-end @{P}-lightbox,
+    &.@{prefix}-right:dir(ltr),
+    &.@{prefix}-left:dir(rtl),
+    &.@{prefix}-end {
+        &::part(lightbox-wrapper) {
+            align-items: end;
+        }
+    }
+
+    &.@{prefix}-left:dir(ltr) @{P}-lightbox,
+    &.@{prefix}-right:dir(rtl) @{P}-lightbox,
+    &.@{prefix}-start @{P}-lightbox,
+    &.@{prefix}-left:dir(ltr),
+    &.@{prefix}-right:dir(rtl),
+    &.@{prefix}-start {
+        &::part(lightbox-wrapper) {
+            align-items: start;
+        }
+    }
+}
+
+.DialogSize(@prefix) {
+
+    @_slim: 25vw;
+    @_medium: 50vw;
+
+
+    .DialogSizeAbsolute(@prefix, slim, @_slim);
+    .DialogSizeAbsolute(@prefix, medium, @_medium);
+
+
+    @media (max-width: @threshold_sm - 1) {
+        .DialogSizeResponsive(@prefix, xs, slim, @_slim);
+        .DialogSizeResponsive(@prefix, xs, medium, @_medium);
+    }
+
+    @media (min-width: @threshold_sm) {
+        .DialogSizeResponsive(@prefix, sm, slim, @_slim);
+        .DialogSizeResponsive(@prefix, sm, medium, @_medium);
+    }
+
+    @media (min-width: @threshold_md) {
+        .DialogSizeResponsive(@prefix, md, slim, @_slim);
+        .DialogSizeResponsive(@prefix, md, medium, @_medium);
+    }
+
+    @media (min-width: @threshold_lg) {
+        .DialogSizeResponsive(@prefix, lg, slim, @_slim);
+        .DialogSizeResponsive(@prefix, lg, medium, @_medium);
+    }
+
+    @media (min-width: @threshold_xl) {
+        .DialogSizeResponsive(@prefix, xl, slim, @_slim);
+        .DialogSizeResponsive(@prefix, xl, medium, @_medium);
+    }
+
+    @media (min-width: @threshold_hd) {
+        .DialogSizeResponsive(@prefix, hd, slim, @_slim);
+        .DialogSizeResponsive(@prefix, hd, medium, @_medium);
+    }
+
+    @media (min-width: @threshold_2k) {
+        .DialogSizeResponsive(@prefix, 2k, slim, @_slim);
+        .DialogSizeResponsive(@prefix, 2k, medium, @_medium);
+    }
+
+    @media (min-width: @threshold_4k) {
+        .DialogSizeResponsive(@prefix, 4k, slim, @_slim);
+        .DialogSizeResponsive(@prefix, 4k, medium, @_medium);
+    }
+
+    @media (orientation: portrait) {
+        .DialogSizeResponsive(@prefix, v, slim, @_slim);
+        .DialogSizeResponsive(@prefix, v, medium, @_medium);
+    }
+}

package/pacem/ui/index.less

@@ -0,0 +1 @@
+@import "@{theme}/index";

package/pacem/ui/light/button.less

@@ -0,0 +1,8 @@
+@import '../../theme-light';
+.@{PCSS}-contextmenu {
+
+    hr {
+        background-color: fade(@color_dark, 7);
+        border-bottom: 1px solid fade(@color_light, 60);
+    }
+}

package/pacem/ui/light/index.less

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

package/pacem/ui/light/loader.less

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

package/pacem/ui/light/menu.less

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

package/pacem/ui/light/sidebar.less

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

package/pacem/ui/phousys/button.less

@@ -0,0 +1,8 @@
+@import '../../theme-phousys';
+.@{PCSS}-contextmenu {
+
+    hr {
+        background-color: transparent;
+        border-bottom: 1px dashed fade(@color_light, 5);
+    }
+}

package/pacem/ui/phousys/index.less

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

package/pacem/ui/phousys/loader.less

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

package/pacem/ui/phousys/menu.less

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

package/pacem/ui/phousys/sidebar.less

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

package/pacem/ui/shared.less

@@ -0,0 +1,125 @@
+@import "../layout/shared";
+@import "../theme-dark.less";
+@import "../../shared";
+
+@lightbox_padding: 1em;
+
+.ButtonShadows() {
+    box-shadow: 0 2px @grid_spacing / 3 rgba(0,0,0,0.5);
+}
+
+.HorizontalItemSet(@type) {
+    display: grid;
+    grid-gap: 0;
+    grid-template-columns: auto 1fr auto 1fr auto;
+    grid-template-areas: 'left . center . right';
+    align-items: start;
+    white-space: nowrap;
+
+    .@{PCSS}-@{type}set-left, .@{type}set-left,
+    .@{PCSS}-@{type}set-center, .@{type}set-center,
+    .@{PCSS}-@{type}set-right, .@{type}set-right {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+    }
+
+    .@{PCSS}-@{type}set-left, .@{type}set-left {
+        grid-area: left;
+        align-content: flex-start;
+    }
+
+    .@{PCSS}-@{type}set-center, .@{type}set-center {
+        grid-area: center;
+        align-content: center;
+    }
+
+    .@{PCSS}-@{type}set-right, .@{type}set-right {
+        grid-area: right;
+        align-content: flex-end;
+    }
+
+    .@{PCSS}-@{type}set-auto, .@{type}set-auto {
+        grid-column-start: 1;
+        grid-column-end: 6;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+
+        > * {
+            flex: 1 0 auto;
+        }
+    }
+}
+
+.HorizontalItem(@type) {
+    border-radius: 0;
+    display: block;
+
+    @_r0: ~"var(--@{PCSS}-border-button-radius)";
+    @_r1: ~"var(--@{PCSS}-border-radius)";
+    @_r: if((@type = button), @_r0, @_r1);
+    @_radius: if((@type = button), @border_button_radius, @border_radius);
+
+    &.@{type}set-first when (@_radius > 0) {
+        border-top-left-radius: @_r;
+        border-bottom-left-radius: @_r;
+    }
+
+    &:first-child when (@_radius > 0) {
+        border-top-left-radius: @_r;
+        border-bottom-left-radius: @_r;
+    }
+
+    &.@{type}set-last when (@_radius > 0) {
+        border-top-right-radius: @_r;
+        border-bottom-right-radius: @_r;
+    }
+
+    &:last-child when (@_radius > 0) {
+        border-top-right-radius: @_r;
+        border-bottom-right-radius: @_r;
+    }
+
+    &:not(:last-child):not(.@{type}set-last) {
+        border-right: none;
+    }
+}
+
+/* #region TUNER */
+
+.GradientTuner(@clr) {
+    .GradientRadialContain(50%, 85%, 87%, 88%, 88%, 90%, 91%, 96%, 98%, 100%, rgba(@clr, 0), rgba(@clr, .20), rgba(@clr, .50), rgba(@clr, 0), rgba(@clr, 0), rgba(@clr, .10), rgba(@clr, .10), rgba(@clr, 0), rgba(@clr, .25), rgba(@clr, 0));
+}
+
+.Tuner(@size) {
+    @_ratio: 10.8;
+    .Tuner(@size, round(@size / @_ratio));
+}
+
+.Tuner(@size, @stroke) {
+    @_scale: 108 / @size;
+    @_thickness: @stroke * @_scale;
+    @_outer_diam: @size;
+
+    width: @_outer_diam;
+    height: $width;
+
+    &::part(tuner),
+    &::part(content) {
+        top: @_thickness * .5;
+        left: $top;
+        width: @_outer_diam - @_thickness;
+        height: $width;
+    }
+
+    &::part(tuner) {
+        stroke-width: @_thickness;
+    }
+
+    &::part(content) {
+        font-size: round(@size/3.2);
+    }
+}
+
+/* #endregion */

package/package.json

@@ -0,0 +1,39 @@
+{
+  "version": "1.0.0-amaldi",
+  "name": "@pacem/pacem-theme-less",
+  "type": "module",
+  "homepage": "https://js.pacem.it",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pacem-it/pacem.git"
+  },
+  "files": [
+    "pacem/*.less",
+    "pacem/**/*.less",
+    "*.less",
+    "README.md",
+    "LICENSE",
+    "NOTICE",
+    "themebuilder.js",
+    "package.json"
+  ],
+  "author": {
+    "name": "Pacem",
+    "url": "https://pacem.it"
+  },
+  "maintainers": [
+    {
+      "name": "Cristian Merighi",
+      "url": "https://pacem.it"
+    }
+  ],
+  "license": "Apache-2.0",
+  "description": "Pacem JS theme generator. LESS-based.",
+  "dependencies": {
+    "@pacem/pacem-foundation": "*",
+    "@pacem/pacem-numerical": "*"
+  },
+  "devDependencies": {
+    "less": "4.8.0"
+  }
+}