@pacem/pacem-theme-less 1.0.0-amaldi

package/pacem/charts/phousys/index.less

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

package/pacem/cms/datagrid-columns.less

@@ -0,0 +1,41 @@
+@import "shared";
+
+@{P}-widget-datacolumns {
+
+    > .@{PCSS}-datacolumns {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        grid-column-gap: @grid_spacing;
+        align-items: stretch;
+
+        > .datacolumns-main {
+            overflow: auto;
+            background-color: @menu_link_active_backgroundcolor;
+
+            *[drop-target] {
+                border: 2px dashed transparent;
+                min-height: @grid_cell;
+
+                &.@{PCSS}-dropping {
+                    border-color: @color_accent;
+                    background-color: none;
+                }
+
+                > * {
+                    width: 14 * @grid_spacing;
+                    border-right: 1px dashed @color_border;
+                    align-self: stretch;
+
+                    &:hover {
+                        background-color: fade(@color_default, 2);
+                    }
+                }
+            }
+        }
+
+        > .datacolumns-props {
+            padding: 0 0 0 @grid_spacing;
+            border-left: 1px dashed @color_border;
+        }
+    }
+}

package/pacem/cms/grid.less

@@ -0,0 +1,23 @@
+@import "shared";
+
+@{P}-widget-grid.@{PCSS}-widget.ui-widget {
+    display: grid;
+    padding: 0;
+
+    svg.grid-cell-wrapper {
+
+        box-sizing: border-box;
+        padding: 1px;
+
+        > rect.grid-cell {
+            fill: none;
+            stroke-width: 1px;
+            stroke-dasharray: 4;
+            stroke: fade(@color_default, 17);
+        }
+    }
+
+    .@{PCSS}-widget.ui-widget.widget-editing {
+        cursor: move;
+    }
+}

package/pacem/cms/index.less

@@ -0,0 +1,3 @@
+@import "widget";
+@import "grid";
+@import "datagrid-columns";

package/pacem/cms/shared.less

@@ -0,0 +1,3 @@
+@import "../../shared";
+@import "../theme-dark";
+@import "../layout/shared";

package/pacem/cms/widget.less

@@ -0,0 +1,81 @@
+@import "shared";
+
+
+.@{PCSS}-widget:not(.ui-widget) {
+
+    @_size: @grid_spacing * 2;
+    @_brd: @color_border;
+
+    .IconCore();
+    display: block;
+    width: @_size;
+    height: $width;
+    line-height: @_size - 2px;
+    font-size: @_size * .707;
+    text-align: center;
+    box-sizing: border-box;
+
+    &[data-icon]::before {
+        content: attr(data-icon);
+        color: fade(@_brd, 100);
+    }
+
+    border: 1px solid @_brd;
+
+    &when (@border_radius > 0) {
+        border-radius: 50%;
+    }
+
+    &when (@border_radius = 0) {
+        @brd1: fade(@_brd, 100);
+        @brd2: escape("@{brd1}");
+        background-origin: border-box;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath stroke='@{brd2}' fill='transparent' stroke-width='1' d='M0,6 V0 H6 M42,0 H48 V6 M48,42 V48 H42 M6,48 H0 V42'%3E%3C/path%3E%3C/svg%3E");
+    }
+
+    &.widget-editing {
+        line-height: @_size - 4px;
+        border-style: dashed;
+        border-width: 2px;
+        background-image: none;
+    }
+}
+
+.@{PCSS}-widget.ui-widget {
+    display: block;
+    position: relative;
+
+    &.widget-editing {
+        border: 1px dashed @color_border;
+        margin: 2px;
+
+        &:hover {
+            border: 1px solid @color_primary;
+        }
+    }
+
+    &.@{PCSS}-dragging.drag-placeholder,
+    &.@{PCSS}-rescalable.@{PCSS}-rescaling {
+        opacity: .5;
+        pointer-events: none;
+        background-color: fade(@color_primary, 50);
+    }
+}
+
+@{P}-widget-toolbar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: nowrap;
+
+    > * {
+        flex: 1 0 auto;
+    }
+
+    > .toolbar-text {
+        .Ellipsed();
+        max-width: 120px;
+    }
+}

package/pacem/fonts-dark.less

@@ -0,0 +1,7 @@
+@import "../shared";
+
+@font_icons_apiurl: @material_symbols_font;
+// wrap in quotes when ';' in the url
+@font_main_apiurl: ~"'https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap'";
+@font_std_apiurl: ~"'https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;700&display=swap'";
+@font_tech_apiurl: ~"'https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;700&display=swap'";

package/pacem/fonts-light.less

@@ -0,0 +1,7 @@
+@import "../shared";
+
+@font_icons_apiurl: @material_symbols_font;
+// wrap in quotes when ';' in the url
+@font_main_apiurl: ~"'https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap'";
+@font_std_apiurl: ~"'https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap'";
+@font_tech_apiurl: ~"'https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;700&display=swap'";

package/pacem/fonts-none.less

@@ -0,0 +1 @@
+// nothing here

package/pacem/fonts-phousys.less

@@ -0,0 +1,8 @@
+@import "../shared";
+
+@font_icons_apiurl: @material_symbols_font;
+// wrap in quotes when ';' in the url
+@font_main_apiurl: ~"'https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap'";
+@font_std_apiurl: ~"'https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;700&display=swap'";
+@font_tech_apiurl: ~"https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap";
+@font_btn_apiurl: ~"https://fonts.googleapis.com/css2?family=Teko:wght@300&display=swap";

package/pacem/fx/fancy.less

@@ -0,0 +1,138 @@
+@import "../theme-dark";
+@import "../../shared";
+
+@_offset: -.25 * @grid_spacing;
+
+@_easing: @easing_out_sine;
+
+@keyframes fx-fancy-anim {
+    0% {
+        opacity: 0;
+        //color: fade(@color_light, 0);
+        transform: translateX(@_offset);
+        text-shadow: none;
+    }
+
+    100% {
+        opacity: 1;
+        //color: inherit;
+        transform: translateX(0);
+        text-shadow: inherit;
+    }
+}
+
+@{P}-fancy {
+    .Inert();
+}
+
+.@{PCSS}-fancy {
+
+    .@{PCSS}-fancify {
+        display: inline-block;
+        animation: fx-fancy-anim .5s @_easing both;
+    }
+}
+
+.@{PCSS}-panel.panel-fancy {
+
+    @_delay: .5s;
+
+    > .corner {
+        transition: opacity .5s linear @_delay + .75s;
+    }
+
+    > .panel-side {
+        transition: transform .2s @_easing @_delay - .2s;
+        //transform-origin: @grid_spacing @grid_spacing;
+        transform: translateX(0) translateY(0);
+
+        canvas.@{PCSS}-tuner {
+            stroke: @color_teal;
+        }
+
+       @{P}-tuner {
+            margin-top: @grid_spacing/4;
+
+            .@{PCSS}-content {
+                font-size: 1em;
+                transition: opacity .2s, transform .4s @easing_in_out_sine .1s;
+            }
+        }
+    }
+
+    > .panel-heading {
+        transition: transform .3s @_easing @_delay + .1s, border .2s .3s + @_delay;
+    }
+
+    > .panel-body {
+        transition: transform .3s @_easing @_delay, border .2s .3s + @_delay;
+    }
+
+    &.fancy-off {
+        border-color: transparent;
+
+        > .corner,
+        > .panel-side,
+        > .panel-body,
+        > .panel-heading {
+            transition-delay: 0;
+            transition-duration: @_delay;
+        }
+
+        > .panel-side {
+            transform: translateX(-1 * @_offset) translateY(0);
+
+            canvas.@{PCSS}-tuner {
+                stroke: @color_tech;
+            }
+
+           @{P}-tuner {
+                .@{PCSS}-content {
+                    opacity: 0;
+                    transform: rotate(90deg);
+                }
+            }
+        }
+
+        > .panel-heading {
+            border-color: transparent;
+            transform: translateX(@_offset) translateY(@_offset);
+        }
+
+        > .panel-body {
+            border-color: transparent;
+            transform: translateX(2 * @_offset) translateY(2 * @_offset);
+        }
+
+        > .corner,
+        > .panel-body,
+        > .panel-heading {
+            opacity: 0;
+        }
+    }
+
+    &.fancy-on {
+        /*> .corner {
+            opacity: 1;
+        }
+
+        > .panel-body,
+        > .panel-heading {
+            transform: translateX(0) translateY(0);
+        }
+
+        > .panel-side {
+
+           @{P}-tuner {
+                .@{PCSS}-content {
+                    opacity: 1;
+                    transform: rotate(0);
+                }
+            }
+
+            canvas.@{PCSS}-tuner {
+                stroke: @color_teal;
+            }
+        }*/
+    }
+}

package/pacem/fx/gradient.less

@@ -0,0 +1,21 @@
+@import "../theme-dark";
+@import "../../shared";
+@import "../ui/shared";
+
+@{P}-fx-gradient-radial,
+@{P}-fx-gradient-linear,
+@{P}-fx-gradient-stop,
+@{P}-fx-gradient {
+    .Inert();
+}
+
+.@{PCSS}-fx-gradient-fill {
+    // empty
+}
+
+.@{PCSS}-fx-gradient-text {
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+}

package/pacem/fx/hero.less

@@ -0,0 +1,12 @@
+@import "../theme-dark";
+@import "../../shared";
+@import "../ui/shared";
+
+@{P}-fx-hero{
+    .Inert();
+}
+
+.@{PCSS}-hero {
+    position: absolute;
+    z-index: @hamburger-z-index - 100;
+}

package/pacem/fx/index.less

@@ -0,0 +1,6 @@
+@import "fancy";
+@import "gradient";
+@import "hero";
+@import "ripple";
+@import "pulse";
+@import "list";

package/pacem/fx/list.less

@@ -0,0 +1,11 @@
+@import "../theme-dark";
+@import "../../shared";
+@import "../ui/shared";
+
+@{P}-fx-list{
+    .Inert();
+}
+
+.@{PCSS}-fx-list {
+
+}

package/pacem/fx/pulse.less

@@ -0,0 +1,105 @@
+@import "../theme-dark";
+@import "../../shared";
+@import "../ui/shared";
+
+@keyframes fx-pulse-anim {
+    0% {
+        opacity: .8;
+        //color: fade(@color_light, 0);
+    }
+
+    50% {
+        border-width: 10px;
+        transform: scale(1);
+        // border-radius: unset;
+        height: inherit;
+        width: inherit;
+    }
+
+    100% {
+        opacity: 0;
+        //color: inherit;
+        transform: scale(1.25);
+        border-radius: 50%;
+        height: 100%;
+        width: 100%;
+    }
+}
+
+@{P}-fx-pulse {
+    position: absolute;
+    z-index: @hamburger_z_index - 1; // below the menu (mobile/default site)
+    pointer-events: none;
+    display: block;
+
+    svg.pulse {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+
+        rect {
+            fill: none;
+            stroke: @color_default;
+            transform-origin: 50% 50%;
+        }
+    }
+
+    &.pulse-accent {
+        svg.pulse rect {
+            stroke: @color_accent;
+        }
+    }
+
+    &.pulse-primary {
+        svg.pulse rect {
+            stroke: @color_primary;
+        }
+    }
+
+    &.pulse-success {
+        svg.pulse rect {
+            stroke: @color_success;
+        }
+    }
+
+    &.pulse-warning {
+        svg.pulse rect {
+            stroke: @color_warning;
+        }
+    }
+
+    &.pulse-error {
+        svg.pulse rect {
+            stroke: @color_error;
+        }
+    }
+
+    &.pulse-danger {
+        svg.pulse rect {
+            stroke: @color_danger;
+        }
+    }
+
+    &.pulse-disabled {
+        svg.pulse rect {
+            stroke: @color_disabled;
+        }
+    }
+
+    &.@{PCSS}-disabled,
+    &.pulse-off {
+        svg {
+            display: none;
+
+            rect {
+                animation: none;
+            }
+        }
+    }
+}
+
+@media screen and (min-width: @threshold_lg) {
+    @{P}-fx-pulse {
+        z-index: @header_z_index - 11; // below the menu (desktop site)
+    }
+}

package/pacem/fx/ripple.less

@@ -0,0 +1,66 @@
+@import "../theme-dark";
+@import "../../shared";
+@import "../ui/shared";
+
+.RippleColorize(@clr) {
+    > .ripple {
+        background-color: fade(@clr, 20);
+    }
+}
+
+@{P}-fx-ripple {
+    pointer-events: none;
+    position: absolute;
+    z-index: @balloon-z-index + 1;
+    overflow: hidden;
+    .RippleColorize(@color_default);
+
+    > .ripple {
+        border-radius: 50%;
+        opacity: 0;
+        transition: opacity @easing_out_sine .2s;
+        transform-origin: center center;
+        position: absolute;
+        animation-duration: .2s;
+        animation-timing-function: @easing_out_sine;
+        animation-fill-mode: both;
+
+        &.ripple-go {
+            transition: none;
+            opacity: 1;
+            animation-name: pop-anim;
+        }
+    }
+
+    &.ripple-primary {
+        .RippleColorize(@color_primary);
+    }
+
+    &.ripple-accent {
+        .RippleColorize(@color_accent);
+    }
+
+    &.ripple-danger {
+        .RippleColorize(@color_danger);
+    }
+
+    &.ripple-success {
+        .RippleColorize(@color_success);
+    }
+
+    &.ripple-warning {
+        .RippleColorize(@color_warning);
+    }
+
+    &.ripple-invert {
+        .RippleColorize(@color_background);
+    }
+
+    &.ripple-dark {
+        .RippleColorize(@color_dark);
+    }
+
+    &.ripple-light {
+        .RippleColorize(@color_light);
+    }
+}

package/pacem/icons.less

@@ -0,0 +1,76 @@
+@import "../shared";
+@import "theme-dark";
+
+i.@{PCSS}-icon {
+    .IconCore();
+    .PacemIconCore();
+
+    &.icon-fill {
+        .IconVariation(1);
+    }
+
+    &.icon-outline {
+        .IconVariation(0);
+    }
+
+    &.space-left {
+        margin-left: @grid_spacing/2;
+
+        &.space-more {
+            margin-left: @grid_spacing;
+        }
+    }
+
+    &.space-right {
+        margin-right: @grid_spacing/2;
+
+        &.space-more {
+            margin-right: @grid_spacing;
+        }
+    }
+
+    transform-origin: center center;
+    // rotate
+    &.rotate-45 {
+        transform: rotate(45deg);
+    }
+
+    &.rotate-90 {
+        transform: rotate(90deg);
+    }
+
+    &.rotate-135 {
+        transform: rotate(135deg);
+    }
+
+    &.rotate-180 {
+        transform: rotate(180deg);
+    }
+
+    &.rotate-225 {
+        transform: rotate(225deg);
+    }
+
+    &.rotate-270 {
+        transform: rotate(270deg);
+    }
+
+    &.rotate-315 {
+        transform: rotate(315deg);
+    }
+}
+
+i.material-icons {
+    font-family: ~"var(--@{PCSS}-font-icons)" !important;
+    font-size: @font_icon_size;
+    font-weight: normal;
+    font-style: normal;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-smoothing: antialiased;
+}

package/pacem/layout/animations.less

@@ -0,0 +1,37 @@
+@import "../theme-dark";
+
+@_brd: 2px;
+
+@keyframes anim-rise {
+    0% {
+        opacity: 0;
+        transform: translateY(@grid_spacing);
+        box-shadow: 0 0 0 transparent;
+        border-color: transparent;
+    }
+
+    25% {
+        opacity: 1;
+        transform: translateY(@_brd);
+        border-color: transparent;
+    }
+
+    40% {
+        transform: translate(0,0);
+    }
+
+    50% {
+        box-shadow: 0 0 0 transparent;
+    }
+
+    60% {
+        border-top-color: #fff;
+        border-bottom-color: #eee;
+        border-left-color: #f5f5f5;
+        border-right-color: #f5f5f5;
+    }
+
+    100% {
+        box-shadow: 0 @grid_spacing/6 @grid_spacing rgba(0,0,0,0.05);
+    }
+}