@pacem/pacem-theme-less 1.0.0-amaldi

package/pacem/basic/swipe.less

@@ -0,0 +1,22 @@
+@import "../../shared";
+@import "../theme-dark";
+
+@{P}-swipe {
+    .Inert();
+}
+
+.@{PCSS}-swipe {
+    /* Prevents the browser from handling scrolling, letting JS capture the swipe. */
+    touch-action: none;
+}
+
+/*.@{PCSS}-swipe-lock {
+    user-select: none;
+}
+.@{PCSS}-swipe-go {
+    transition: transform .1s @easing_out_sine;    
+}
+
+.@{PCSS}-swipe-back {
+    transition: transform .3s @easing_out_back;
+}*/

package/pacem/basic/viewport-aware.less

@@ -0,0 +1,4 @@
+@{P}-viewport-aware{
+    display: block;
+    //min-height: 1px;
+}

package/pacem/body.less

@@ -0,0 +1,197 @@
+@import "theme-dark";
+
+&, body {
+    font-family: @font_std;
+    background-color: ~"var(--@{PCSS}-color-root)";// @color_root_background;
+    color:~"var(--@{PCSS}-color-default)";//@color_light;
+    font-size: @font_size;
+}
+
+body {
+    overflow-x: hidden;
+    line-height: 1.5;
+    font-weight: @font_weight;
+    .Background();
+}
+
+.@{PCSS}-body.@{PCSS}-animations {
+
+    .@{PCSS}-anim,
+    .@{PCSS}-animatable {
+        .Animatable(.333s);
+
+        &.anim-fade-inout,
+        &.anim-rotate {
+            animation-timing-function: @easing_in_out_sine;
+            animation-delay: 0;
+            animation-iteration-count: infinite;
+        }
+
+        &.anim-rotate {
+            animation-duration: 1s;
+            animation-name: rotate-anim;
+
+            &.rotate-uniform {
+                animation-timing-function: linear;
+            }
+        }
+
+        &.anim-fade-inout {
+            animation-duration: .6s;
+            animation-name: fade-in;
+            animation-direction: alternate;
+        }
+
+        &.anim-quick {
+            animation-duration: .2s;
+
+            &.anim-rotate {
+                animation-duration: .4s;
+            }
+
+            &.anim-fade-inout {
+                animation-duration: .3s;
+            }
+        }
+
+        &.anim-sudden {
+            animation-delay: .0s;
+        }
+
+        &.anim-slow {
+            animation-duration: .8s;
+
+            &.anim-rotate {
+                animation-duration: 2s;
+            }
+
+            &.anim-fade-inout {
+                animation-duration: 1s;
+            }
+        }
+
+        &.anim-delay {
+            animation-delay: 1.2s;
+
+            &.delay-slight {
+                animation-delay: .8s;
+            }
+
+            &.delay-fair {
+                animation-delay: 1.6s;
+            }
+        }
+
+        &.anim-fade-in {
+            animation-name: fade-in;
+        }
+
+        &.anim-fade-out {
+            animation-name: fade-in;
+            animation-direction: reverse;
+        }
+
+        &.anim-alt {
+            animation-name: alt-anim;
+        }
+
+        &.anim-pop {
+            animation-name: pop-anim;
+            animation-timing-function: @easing_out_back;
+        }
+
+        &.anim-bottom-in {
+            animation-name: list-item-bottom;
+        }
+
+        &.anim-top-in {
+            animation-name: list-item;
+        }
+
+        &.anim-right-in {
+            animation-name: list-item-right;
+        }
+
+        &.anim-left-in {
+            animation-name: list-item-left;
+        }
+
+        &.anim-brightout {
+            animation-name: bright-out;
+        }
+
+        &.anim-alt-inv {
+            animation-name: enhanced-anim;
+        }
+
+        &.anim-appear {
+            animation-name: appear-anim;
+            animation-timing-function: @easing_out_sine;
+        }
+
+        &.anim-reverse {
+            animation-direction: reverse;
+        }
+        // hiding
+        &.@{PCSS}-hiding {
+            animation-direction: reverse;
+            animation-duration: .25s;
+            animation-delay: 0s;
+            animation-timing-function: ease-in;
+
+            &.anim-pop {
+                animation-timing-function: @easing_in_back;
+            }
+
+            &.anim-appear,
+            &.anim-bottom-in,
+            &.anim-top-in,
+            &.anim-left-in,
+            &.anim-right-in {
+                animation-timing-function: @easing_in_sine;
+            }
+        }
+    }
+
+    h1.@{PCSS}-animatable,
+    h1.@{PCSS}-anim,
+    .@{PCSS}-animatable.animatable-header,
+    .@{PCSS}-animatable.anim-header,
+    .@{PCSS}-anim.anim-header {
+        .Animatable('header-anim', .2s);
+    }
+}
+
+::-webkit-scrollbar {
+    width: @size_scrollbar;
+    height: @size_scrollbar;
+}
+
+::-webkit-scrollbar-button {
+}
+
+::-webkit-scrollbar-track {
+    background: @color_scrollbar_track;
+}
+
+::-webkit-scrollbar-track-piece {
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: @color_scrollbar_thumb;
+}
+
+::-webkit-scrollbar-thumb when (@shadows=true) {
+    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
+}
+
+::-webkit-scrollbar-corner {
+}
+
+::-webkit-resizer {
+}
+// gecko
+&, * {
+    scrollbar-color: @color_scrollbar_thumb @color_scrollbar_track;
+    scrollbar-width: thin;
+}

package/pacem/charts/dark/column-line.less

@@ -0,0 +1,10 @@
+@import "shared";
+
+.@{PCSS}-chart-area {
+    position: relative;
+
+    .@{PCSS}-line-chart,
+    .@{PCSS}-column-chart {
+        .Chart();
+    }
+}

package/pacem/charts/dark/column.less

@@ -0,0 +1,61 @@
+@import "shared";
+
+.@{PCSS}-chart-area {
+    position: relative;
+
+    .@{PCSS}-column-chart {
+        .chart-series {
+
+            rect {
+                stroke-opacity: 0;
+                stroke-width: 0;
+
+                &:hover {
+                    stroke-opacity: 0.5;
+                    stroke-width: 0.5%;
+                    z-index: 1;
+                }
+            }
+
+            &.series-shade {
+                .SeriesFade(.67);
+            }
+
+            &.series-light {
+
+                linearGradient {
+                    stop {
+                        stop-opacity: .5;
+                    }
+                }
+
+                rect {
+                    &:hover {
+                        stroke-opacity: 0.25;
+                    }
+                }
+
+                &.series-shade {
+                    .SeriesFade(.25);
+                }
+            }
+
+            &.series-fade {
+                .SeriesFade(0);
+            }
+        }
+    }
+}
+
+.@{PCSS}-animations {
+    .@{PCSS}-chart-area {
+        .@{PCSS}-column-chart {
+            .chart-series {
+                rect {
+                    transform-origin: left bottom;
+                    transition: stroke-width .2s @easing_in_out_sine, stroke-opacity .1s, x .1s, y .5s @easing_in_out_sine, width .1s, height .5s @easing_in_out_sine;
+                }
+            }
+        }
+    }
+}

package/pacem/charts/dark/index.less

@@ -0,0 +1,9 @@
+
+@{P}-chart, @{P}-chart-series {
+    .Inert();
+}
+
+@import "column-line";
+@import "line";
+@import "column";
+@import "pie";

package/pacem/charts/dark/line.less

@@ -0,0 +1,111 @@
+@import "shared";
+
+.@{PCSS}-chart-area {
+
+    .@{PCSS}-line-chart {
+
+        .chart-series {
+
+            line.circle {
+                opacity: 0;
+                stroke-width: .667%;
+                stroke-linecap: round;
+            }
+
+            path {
+                stroke-width: .333%;
+            }
+
+            linearGradient {
+                stop {
+                    stop-opacity: .5;
+                }
+            }
+
+            &.series-thin {
+                line.circle {
+                    stroke-width: .5%;
+                }
+
+                path {
+                    stroke-width: 0.125%;
+                }
+            }
+
+            &.series-thick {
+                line.circle {
+                    stroke-width: 1%;
+                }
+
+                path {
+                    stroke-width: 0.5%;
+                }
+            }
+
+            &.series-light {
+
+                linearGradient {
+                    stop {
+                        stop-opacity: .3;
+                    }
+                }
+
+                line.circle,
+                path {
+                    stroke-opacity: .5;
+                }
+            }
+
+            &.series-datapoints {
+                line.circle {
+                    opacity: 1;
+                }
+
+                &.datapoints-accent {
+                    line.circle {
+                        stroke: @color_accent;
+                    }
+                }
+
+                &.datapoints-primary {
+                    line.circle {
+                        stroke: @color_primary;
+                    }
+                }
+
+                &.datapoints-success {
+                    line.circle {
+                        stroke: @color_success;
+                    }
+                }
+
+                &.datapoints-warning {
+                    line.circle {
+                        stroke: @color_warning;
+                    }
+                }
+
+                &.datapoints-danger {
+                    line.circle {
+                        stroke: @color_danger;
+                    }
+                }
+
+                &.datapoints-disabled {
+                    line.circle {
+                        stroke: @color_disabled;
+                    }
+                }
+            }
+
+            &.series-noline {
+                path {
+                    stroke-opacity: 0;
+                    pointer-events: none;
+                }
+            }
+
+            .SeriesFade(0);
+        }
+    }
+}

package/pacem/charts/dark/pie.less

@@ -0,0 +1,210 @@
+@import "shared";
+
+@{P}-pie-chart, @{P}-pie-slice {
+    .Inert();
+}
+
+@keyframes pie-anim {
+    0% {
+        opacity: 0;
+        transform: rotate(-90deg);
+    }
+
+    100% {
+        opacity: 1;
+        transform: rotate(0);
+    }
+}
+
+svg.@{PCSS}-pie-chart {
+    display: block;
+
+    defs mask circle {
+        transition: r @easing_out_sine .125s;
+    }
+
+    g {
+        pointer-events: none;
+
+        path {
+            pointer-events: fill;
+        }
+
+        transform-origin: 50%;
+    }
+}
+
+.@{PCSS}-chart-area {
+    > svg.@{PCSS}-pie-chart {
+        display: none;
+        max-height: 30vh;
+
+        g.chart-series {
+
+            path {
+                stroke: none;
+                opacity: .8;
+                fill: @color_default;
+
+                &:hover {
+                    opacity: 1;
+                }
+            }
+
+            &.series-light {
+                path {
+                    opacity: .5;
+
+                    &:hover {
+                        opacity: .8;
+                    }
+                }
+            }
+        }
+    }
+
+    &.chart-has-data {
+        > svg.@{PCSS}-pie-chart {
+            display: block;
+        }
+    }
+
+
+    &.chart-error,
+    &.chart-disabled,
+    &.chart-danger,
+    &.chart-warning,
+    &.chart-success,
+    &.chart-primary,
+    &.chart-accent,
+    &.chart-gradient,
+    &.chart-default {
+        > svg.@{PCSS}-pie-chart g.chart-series {
+            .PieSliceGradient(20, 1);
+        }
+    }
+
+    /* #region obsolete */
+
+    &.chart-default {
+        .PieSliceGradient(@color_default);
+    }
+
+    &.chart-accent {
+        .PieSliceGradient(@color_accent);
+    }
+
+    &.chart-primary {
+        .PieSliceGradient(@color_primary);
+    }
+
+    &.chart-success {
+        .PieSliceGradient(@color_success);
+    }
+
+    &.chart-warning {
+        .PieSliceGradient(@color_warning);
+    }
+
+    &.chart-danger {
+        .PieSliceGradient(@color_danger);
+    }
+
+    &.chart-error {
+        .PieSliceGradient(@color_error);
+    }
+
+    &.chart-disabled {
+        .PieSliceGradient(@color_disabled);
+    }
+
+    /* #endregion*/
+
+    @colors: @all_colors;
+    // text
+    each(@colors, {
+                &.chart-gradient.chart-@{value} {
+                    .PieSliceGradient( ~"var(--@{PCSS}-color-@{value})");
+                }
+            });
+}
+
+.@{PCSS}-chart-area.chart-has-data {
+
+    &.chart-small > svg.@{PCSS}-pie-chart {
+        height: @grid_spacing * 8;
+    }
+
+    &.chart-smaller > svg.@{PCSS}-pie-chart {
+        height: @grid_spacing * 5;
+    }
+}
+
+.PieSliceGradient(@count, @index) when (@index < @count + 1) {
+    &:nth-child(@{index}) > path {
+        opacity: .8 - (@index - 1) * ((.9-.1) / @count);
+    }
+
+    .PieSliceGradient(@count, @index + 1);
+}
+
+.PieSliceGradient(@clr) {
+    > svg.@{PCSS}-pie-chart {
+
+        g.chart-series > path {
+            fill: @clr;
+
+            &:hover {
+                opacity: 1;
+            }
+        }
+    }
+}
+
+.PieSlice (@count, @index) when (@index > 0) {
+    &:nth-child(@{index}) {
+        animation-delay: 1.25s * @index / @count;
+    }
+    // next iteration
+    .PieSlice(@count, @index - 1);
+}
+
+.PieSlice (@count) {
+    .PieSlice(@count, @count);
+}
+
+.PieChartSeries(@clr) {
+    path {
+        fill: @clr;
+    }
+}
+
+.@{PCSS}-animations {
+
+    svg.@{PCSS}-pie-chart {
+        //.Animatable(pop-anim, .4s, @easing_out_back);
+        g.@{PCSS}-pie-slice {
+            .Animatable(pie-anim, 0s, @easing_out_sine);
+            .PieSlice(20);
+
+            path {
+                transition: transform @easing_in_out_sine .2s; /* do not include 'd' as an animatable property: will conflict with transform -> bad UX */ //, d @easing_out_sine .125s;
+            }
+        }
+
+        g.chart-series {
+
+            @colors: @all_colors;
+            // text
+            each(@colors, {
+                &.series-@{value} {
+                    .PieChartSeries( ~"var(--@{PCSS}-color-@{value})");
+                }
+            });
+        }
+    }
+
+    svg.@{PCSS}-pie-chart when (@shadows = true) {
+        filter: drop-shadow(0 @grid_spacing/6 @grid_spacing/12 rgba(0,0,0,0.5) );
+    }
+}

package/pacem/charts/dark/shared.less

@@ -0,0 +1,88 @@
+@import "../../../shared";
+@import "../../theme-dark";
+
+.ChartSeries(@clr) {
+
+    line,
+    rect,
+    path {
+        stroke: @clr;
+    }
+
+    linearGradient {
+        stop {
+            stop-color: @clr;
+            stop-opacity: 1;
+        }
+    }
+}
+
+.SeriesFade(@to) {
+    linearGradient {
+        &:not(.bottom-up) {
+            stop:last-child {
+                stop-opacity: @to;
+            }
+        }
+
+        &.bottom-up {
+            stop:first-child {
+                stop-opacity: @to;
+            }
+        }
+    }
+}
+
+.Chart() {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    .chart-series {
+        display: block;
+        height: 100%;
+        .ChartSeries(@color_default);
+
+        &.series-accent {
+            .ChartSeries(@color_accent);
+        }
+
+        &.series-primary {
+            .ChartSeries(@color_primary);
+        }
+
+        &.series-success {
+            .ChartSeries(@color_success);
+        }
+
+        &.series-warning {
+            .ChartSeries(@color_warning);
+        }
+
+        &.series-danger {
+            .ChartSeries(@color_danger);
+        }
+
+        &.series-disabled {
+            .ChartSeries(@color_disabled);
+        }
+    }
+
+    .chart-grid {
+        display: block;
+        height: 100%;
+        pointer-events: none;
+
+        path {
+            stroke-width: 0.06%;
+            stroke: fade(@color_default, 20);
+            fill: none;
+        }
+
+        text {
+            fill: fade(@color_default, 25);
+            .FontTech(.75);
+        }
+    }
+}

package/pacem/charts/index.less

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

package/pacem/charts/light/index.less

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