@pacem/pacem-theme-less 1.0.0-amaldi

package/pacem/layout/mixins.less

@@ -0,0 +1,445 @@
+@import "../../shared";
+@import "shared";
+@import "../ui/shared";
+
+.BoxLayout(@prefix) {
+    .BoxLayout(@prefix, @color_default);
+
+    &.@{prefix}-accent {
+        .BoxLayout(@prefix, @color_accent);
+    }
+
+    &.@{prefix}-warning {
+        .BoxLayout(@prefix, @color_warning);
+    }
+
+    &.@{prefix}-success {
+        .BoxLayout(@prefix, @color_success);
+    }
+
+    &.@{prefix}-danger {
+        .BoxLayout(@prefix, @color_danger);
+    }
+
+    &.@{prefix}-error {
+        .BoxLayout(@prefix, @color_error);
+    }
+
+    &.@{prefix}-primary {
+        .BoxLayout(@prefix, @color_primary);
+    }
+
+    &.@{prefix}-secondary {
+        .BoxLayout(@prefix, @color_secondary);
+    }
+
+    &.@{prefix}-disabled {
+        .BoxLayout(@prefix, @color_disabled);
+    }
+}
+
+.BoxLayout(@prefix, @_clr) {
+
+    &.@{prefix}-border {
+        border-color: fade(@_clr, 20);
+    }
+
+    &.@{prefix}-filled {
+        background-color: fade(@_clr, 10);
+    }
+
+    @_r0: if((@prefix = card), @border_card_radius, @border_radius);
+    @_r1: if((@prefix = panel), @border_panel_radius, @_r0);
+
+    &.@{prefix}-corners{ // when (@_r1 = 0) {
+        .Corners(@_clr, @_r1, @corner_size);
+    }
+}
+
+.PanelColorize(@prefix, @_clr) {
+    .@{prefix}-heading {
+        color: @_clr;
+    }
+
+    .BoxLayout(@prefix, @_clr);
+    @_r0: if((@prefix = card), @border_card_radius, @border_radius);
+    @_r1: if((@prefix = panel), @border_panel_radius, @_r0);
+    .CornersColorize(@_clr, @_r1);
+}
+
+/*.CornersSize() {
+    .CornersSize(@grid_spacing/4;);
+}*/
+
+.CornersSize(@_sz) /*when (@border_radius = 0)*/ {
+
+    .corner {
+
+        &when (@_sz > 0) {
+            width: @_sz * 2;
+            height: $width;
+            border-radius: 50%;
+        }
+
+        &when (@_sz <= 0) {
+            width: ~"var(--@{PCSS}-corner-size)";
+            height: $width;
+        }
+
+        border: 1px solid transparent;
+        position: absolute;
+        pointer-events: none;
+        box-sizing: border-box;
+
+        &.top-left {
+            top: -1px;
+            left: -1px;
+
+            &when (@_sz > 0) {
+                transform: rotate(-45deg);
+            }
+        }
+
+        &.top-right {
+            top: -1px;
+            right: -1px;
+
+            &when (@_sz > 0) {
+                transform: rotate(45deg);
+            }
+        }
+
+        &.bottom-right {
+            bottom: -1px;
+            right: -1px;
+
+            &when (@_sz > 0) {
+                transform: rotate(135deg);
+            }
+        }
+
+        &.bottom-left {
+            bottom: -1px;
+            left: -1px;
+
+            &when (@_sz > 0) {
+                transform: rotate(-135deg);
+            }
+        }
+    }
+
+    .corner /*when (@border_radius > @_sz/2)*/ {
+        /* deprecated */
+        //visibility: hidden;
+    }
+}
+
+.CornersColorize(@_clr, @_radius) /*when (@border_radius = 0)*/ {
+    .corner {
+
+        &when (@_radius > 0) {
+            border-top-color: @_clr;
+        }
+
+        &when (@_radius <= 0) {
+
+            // reset
+            border-top-color: transparent;
+            border-radius: 0;
+            transform: none;
+
+            &.top-left {
+                border-top-color: @_clr;
+                border-left-color: @_clr;
+            }
+
+            &.top-right {
+                border-top-color: @_clr;
+                border-right-color: @_clr;
+            }
+
+            &.bottom-right {
+                border-bottom-color: @_clr;
+                border-right-color: @_clr;
+            }
+
+            &.bottom-left {
+                border-bottom-color: @_clr;
+                border-left-color: @_clr;
+            }
+        }
+    }
+}
+
+.ToolButtons(@minheight) {
+
+    .@{PCSS}-button,
+    @{P}-button {
+        width: @minheight * 1.3333;
+        height: @minheight;
+        margin: 0;
+
+        &.button-square,
+        &.circular,
+        &.button-circle,
+        &.button-circular {
+            width: @minheight;
+            margin: 0 @minheight / 6;
+
+            &::before {
+                font-size: @minheight * 2 / 3;
+                line-height: @minheight;
+                width: $line-height;
+            }
+        }
+    }
+}
+
+.Panel(@prefix) {
+    padding: 0 /*0 @grid_spacing/4 0*/;
+    text-rendering: optimizeSpeed;
+    border: 1px solid transparent;
+    box-sizing: border-box;
+    position: relative;
+
+    @_r0: if((@prefix = card), @border_card_radius, @border_radius);
+    @_r1: if((@prefix = panel), @border_panel_radius, @_r0);
+
+    @_rvar0: if((@prefix = card), ~"var(--@{PCSS}-border-card-radius)", ~"var(--@{PCSS}-border-radius)");
+    @_rvar: if((@prefix = panel), ~"var(--@{PCSS}-border-panel-radius)", @_r0);
+
+    border-radius: @_rvar;
+    .CornersSize(@_r1);
+    .CornersColorize(@color_default, @_r1);
+    /*border-radius: @border_radius;
+    .CornersSize(@border_radius);
+    .CornersColorize(@color_default, @border_radius);
+
+    &when (@prefix = panel) {
+        border-radius: @border_panel_radius;
+        .CornersSize(@border_panel_radius);
+        .CornersColorize(@color_default,@border_panel_radius);
+    }
+
+    &when (@prefix = card) {
+        border-radius: @border_card_radius;
+        .CornersSize(@border_card_radius);
+        .CornersColorize(@color_default,@border_card_radius);
+    }*/
+
+
+    @_min_height: @grid_spacing;
+
+    .@{prefix}-heading, .@{prefix}-body, .@{prefix}-footer {
+        padding: @grid_spacing/2 @grid_spacing/1.5 @grid_spacing/2 @grid_spacing/1.5;
+        margin: 0;
+    }
+
+    .@{prefix}-side {
+        color: fade(@color_default, 80);
+        padding: @grid_spacing/2 0 @grid_spacing/2 @grid_spacing/1.5;
+    }
+
+    .@{prefix}-body,
+    .@{prefix}-footer {
+        //padding-top: 0;
+        color: fade(@color_default, 80);
+        line-height: 1.3333;
+    }
+
+    .@{prefix}-heading {
+        line-height: 1.1;
+    }
+    /*.@{prefix}-footer {
+        padding-bottom: @grid_spacing / 2;
+    }*/
+    .@{prefix}-heading {
+        .FontMain(1.5);
+        min-height: @_min_height;
+
+        &.heading-bigger {
+            .FontMainSize(2);
+        }
+
+        h1, h2, h3, h4, h5, h6 {
+            font-size: 1em;
+            margin: 0;
+            padding: 0;
+            line-height: 1;
+        }
+    }
+
+    .@{prefix}-heading when (@uppercase_headings = true) {
+        text-transform: uppercase;
+
+        h1, h2, h3, h4, h5, h6 {
+            font-weight: @font_main_weight;
+        }
+    }
+
+    .@{prefix}-heading when (@shadows = true) {
+        text-shadow: 0 2px 5px rgba(0,0,0,0.5);
+    }
+
+    .PanelColorize(@prefix, @color_default);
+    /* other panel styles*/
+    &.@{prefix}-accent {
+        .PanelColorize(@prefix, @color_accent);
+    }
+
+    &.@{prefix}-warning {
+        .PanelColorize(@prefix, @color_warning);
+    }
+
+    &.@{prefix}-success {
+        .PanelColorize(@prefix, @color_success);
+    }
+
+    &.@{prefix}-danger {
+        .PanelColorize(@prefix, @color_danger);
+    }
+
+    &.@{prefix}-error {
+        .PanelColorize(@prefix, @color_error);
+    }
+
+    &.@{prefix}-primary {
+        .PanelColorize(@prefix, @color_primary);
+    }
+
+    &.@{prefix}-secondary {
+        .PanelColorize(@prefix, @color_secondary);
+    }
+
+    &.@{prefix}-disabled {
+        .PanelColorize(@prefix, @color_disabled);
+    }
+
+    each(@all_colors, {
+        &.fill-@{value}{
+            color: ~"var(--@{PCSS}-color-@{value}-inverse)";
+            // border-color: ~"var(--@{PCSS}-color-@{value}-inverse)";
+            .CornersColorize(~"var(--@{PCSS}-color-@{value}-inverse)", @_r1);
+
+            .@{prefix}-body,
+            .@{prefix}-footer,
+            .@{prefix}-heading{
+                color: ~"var(--@{PCSS}-color-@{value}-inverse)";
+            }
+            
+            &.@{prefix}-border{
+                border-color: ~"rgba(var(--@{PCSS}-color-@{value}-inverse-rgb), .25)";
+            }
+        }
+        &.fill-@{value}-container{
+            color: ~"var(--@{PCSS}-color-@{value}-container-inverse)";
+            // border-color: ~"var(--@{PCSS}-color-@{value}-container-inverse)";
+            .CornersColorize(~"var(--@{PCSS}-color-@{value}-container-inverse)", @_r1);
+
+            .@{prefix}-heading,
+            .@{prefix}-body,
+            .@{prefix}-footer{
+                color: ~"var(--@{PCSS}-color-@{value}-container-inverse)";
+            }
+            
+            &.@{prefix}-border{
+                border-color: ~"rgba(var(--@{PCSS}-color-@{value}-container-inverse-rgb), .25)";
+            }
+        }
+    });
+
+    .@{prefix}-tools,
+    .tools {
+        position: absolute;
+        top: @grid_spacing/2;
+        right: @grid_spacing/1.5;
+        z-index: 1;
+        .ToolButtons(@_min_height);
+    }
+
+    &.@{prefix}-rise {
+        box-shadow: 0 @grid_spacing/6 @grid_spacing @color_shadow;
+
+        &:not(.@{prefix}-border) {
+            border-top-color: @color_border_light;
+            border-bottom-color: @color_border_dark;
+            border-left-color: @color_border_dawn;
+            border-right-color: @color_border_dusk;
+        }
+    }
+
+    &.@{prefix}-fullscreen {
+        position: fixed;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        z-index: @lightbox_z_index - 1;
+        display: grid;
+        grid-gap: 0;
+        grid-template-rows: auto 1fr auto;
+        border-radius: 0;
+        background-color: @color_background;
+        margin: 0;
+        box-sizing: border-box;
+
+        > .@{prefix}-body,
+        > *:not(.corner):not(.tools):not(.@{prefix}-tools):not(.@{prefix}-heading):not(.@{prefix}-footer) {
+            grid-row: 2;
+            overflow: auto;
+        }
+
+        > .@{prefix}-heading {
+            grid-row: 1;
+        }
+
+        > .@{prefix}-footer {
+            grid-row: 3;
+        }
+
+        &.@{prefix}-accent {
+            .PanelColorizeFullscreen(@prefix, @color_accent);
+        }
+
+        &.@{prefix}-warning {
+            .PanelColorizeFullscreen(@prefix, @color_warning);
+        }
+
+        &.@{prefix}-success {
+            .PanelColorizeFullscreen(@prefix, @color_success);
+        }
+
+        &.@{prefix}-danger {
+            .PanelColorizeFullscreen(@prefix, @color_danger);
+        }
+
+        &.@{prefix}-primary {
+            .PanelColorizeFullscreen(@prefix, @color_primary);
+        }
+
+        &.@{prefix}-disabled {
+            .PanelColorizeFullscreen(@prefix, @color_disabled);
+        }
+    }
+}
+
+.PanelColorizeFullscreen(@prefix, @_clr) {
+    &.@{prefix}-filled {
+        background-color: @color_background;
+
+        > .@{prefix}-heading,
+        > .@{prefix}-body,
+        > .@{prefix}-footer {
+            background-color: fade(@_clr, 10);
+        }
+    }
+}
+
+.PanelRiseAnim(@prefix) {
+    .@{PCSS}-@{prefix}.@{PCSS}-anim.@{prefix}-rise.anim-rise {
+        animation-name: anim-rise;
+        animation-fill-mode: both;
+        animation-duration: .667s;
+        animation-timing-function: @easing_out_sine;
+    }
+}

package/pacem/layout/phousys/index.less

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

package/pacem/layout/phousys/layout.less

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

package/pacem/layout/shared.less

@@ -0,0 +1,18 @@
+@import "../theme-dark";
+@import "../../shared";
+
+@panel_spacing: @grid_spacing / 2;
+
+// renaming with underscores
+@toast_z_index: @max_z_index; 
+@balloon_z_index: @toast_z_index - 100;
+@lightbox_z_index: @balloon_z_index - 100;
+@hamburger_z_index: @lightbox_z_index - 100;
+@header_z_index: @hamburger_z_index - 100;
+
+// deprecated (hyphenated)
+@toast-z-index: @toast_z_index;
+@balloon-z-index: @balloon_z_index;
+@lightbox-z-index: @lightbox_z_index;
+@hamburger-z-index: @hamburger_z_index;
+@header-z-index: @header_z_index;

package/pacem/logging/console.less

@@ -0,0 +1,3 @@
+@import "../../shared";
+    .Inert();
+}

package/pacem/logging/fps.less

@@ -0,0 +1,6 @@
+@import "../../shared";
+@import "../theme-dark";
+
+.@{PCSS}-fps {
+    .Inert();
+}

package/pacem/logging/index.less

@@ -0,0 +1,2 @@
+@import "console";
+@import "fps";

package/pacem/maps/index.less

@@ -0,0 +1,21 @@
+@import "../theme-dark";
+
+@{P}-map,
+@{P}-map-marker,
+@{P}-map-circle,
+@{P}-map-polygon,
+@{P}-map-polyline,
+@{P}-map-rectangle,
+@{P}-map-geocoder,
+@{P}-map-adapter-leaflet,
+@{P}-map-adapter-google,
+@{P}-map-adapter-azure {
+    font-size: 0;
+    display: none !important;
+    user-select: none;
+}
+
+.@{PCSS}-map > div{
+    min-height: @grid_cell * 3;
+    color: @color_map;
+}

package/pacem/media/dark/index.less

@@ -0,0 +1,6 @@
+
+// non-UI components
+@{P}-media-recorder,
+@{P}-audio {
+    .Inert();
+}

package/pacem/media/index.less

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

package/pacem/media/light/index.less

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

package/pacem/media/phousys/index.less

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