@pacem/pacem-theme-less 1.0.0-amaldi

package/pacem/ui/dark/timeline.less

@@ -0,0 +1,159 @@
+@import "../shared";
+
+.@{PCSS}-timeline {
+    display: block;
+
+    @_step_icon_core_size: @grid_spacing;
+    @_step_icon_brd: @grid_spacing/6;
+    @_step_icon_size: @_step_icon_core_size + @_step_icon_brd * 2;
+
+    > .timeline-step {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        grid-template-rows: auto 1fr;
+        grid-template-areas: 'icon content' 'pad content';
+        align-content: start;
+
+        > *,
+        > .step-content {
+            grid-area: content;
+        }
+
+        > .step-icon,
+        > .step-pad {
+            margin-right: @grid_spacing;
+        }
+
+        > .step-icon {
+            grid-area: icon;
+            box-sizing: border-box;
+            width: @_step_icon_size;
+            height: $width;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: @_step_icon_core_size / 1.5;
+            position: relative;
+
+            .TimelineSvg(@w, @h, @clr) {
+                @_w: unit(@w);
+                @_h: unit(@w);
+                @_w2: @_w * .5;
+                @_h2: @_h * .5;
+                // <svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M0,12 H12" stroke-width="1" stroke="#fff"></path><circle fill="#fff" cx="12" cy="12" r="2"/></svg>
+                // content: data-uri("data:image/svg+xml","img.svg");
+                content: url("data:image/svg+xml,%3Csvg viewBox='0 0 @{_w} @{_h}' width='@{_w}' height='@{_h}' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M0,@{_h2} H@{_w2}' stroke='@{clr}' stroke-width='1'/%3E %3Ccircle fill='@{clr}' cx='@{_w2}' cy='@{_h2}' r='2'/%3E %3C/svg%3E");
+            }
+
+            &::after {
+                position: absolute;
+                top: 0;
+                left: @_step_icon_size - @_step_icon_brd;
+            }
+
+            & when(@glows = false) {
+                border: @grid_spacing/6 solid;
+
+                &::after {
+                    .TimelineSvg(@grid_spacing, @_step_icon_size, /* don't know how else to escape '#' char in svg */ fade(@color_timeline_frame, 99));
+                }
+            }
+
+            & when(@shadows = true) {
+                box-shadow: 0 @grid_spacing/3 @grid_spacing rgba(0,0,0,0.5);
+            }
+
+            & when (@glows = true) {
+                border: @grid_spacing/6 solid;
+                background-origin: content-box;
+
+                & when(@shadows = true) {
+                    box-shadow: inset 0 0 @grid_spacing/2 rgba(0,0,0,0.5), 0 @grid_spacing/6 @grid_spacing/3 rgba(0,0,0,0.5), 0 0 @grid_spacing fade(@color_timeline_frame, 50);
+                }
+
+                & when(@shadows = false) {
+                    box-shadow: inset 0 0 @grid_spacing/6 #000, 0 0 @grid_spacing fade(@color_timeline_frame, 50);
+                }
+
+                &::after {
+                    .TimelineSvg(@grid_spacing, @_step_icon_size, fade(@color_timeline_frame, 50));
+                }
+            }
+        }
+
+        > .step-pad {
+            grid-area: pad;
+            width: @_step_icon_size * .5;
+        }
+
+        &:not(:last-child):not(.last-step) {
+
+            > .step-pad {
+
+                &when(@glows = true) {
+                    border-right: 1px dashed fade(@color_timeline_frame, 50);
+                }
+
+                &when(@glows = false) {
+                    border-right: 1px solid @color_timeline_frame;
+                }
+            }
+        }
+
+        > .@{PCSS}-panel {
+            > .panel-heading {
+                padding-top: 0;
+                padding-bottom: 0;
+                line-height: @_step_icon_size;
+                .Ellipsed();
+            }
+        }
+
+        .Coloring(@clr, @clr_fore) {
+            > .step-icon {
+                color: @clr_fore;
+
+                & when(@glows = false) {
+                    border-color: @clr;
+                    background-color: @clr;
+                }
+
+                & when(@glows = true) {
+                    border-color: fade(@clr, 50);
+                    .GradientRadial(50%, 100%, fade(@clr, 25), fade(@clr, 50));
+                }
+            }
+        }
+
+        .Coloring(@color_default, @color_default_inv);
+        // coloring
+        &.step-disabled {
+            .Coloring(@color_disabled, @color_disabled_inv);
+        }
+
+        &.step-success {
+            .Coloring(@color_success, @color_success_inv);
+        }
+
+        &.step-danger {
+            .Coloring(@color_danger, @color_danger_inv);
+        }
+
+        &.step-error {
+            .Coloring(@color_error, @color_danger_inv);
+        }
+
+        &.step-accent {
+            .Coloring(@color_accent, @color_accent_inv);
+        }
+
+        &.step-warning {
+            .Coloring(@color_warning, @color_warning_inv);
+        }
+
+        &.step-primary {
+            .Coloring(@color_primary, @color_primary_inv);
+        }
+    }
+}

package/pacem/ui/dark/toast.less

@@ -0,0 +1,232 @@
+@import "../shared";
+
+.ToastColor(@clr, @clr_inv) {
+    background: fade( @clr, 75);
+    border-color: @clr;
+    color: @clr_inv;
+
+    & when (@glows = true) {
+        box-shadow: 0 0 8px fade(@clr, 100);
+    }
+}
+
+
+/*#region TOAST*/
+@{P}-toast {
+
+    @_brdt: 1px;
+    @_ht: @grid_cell - @_brdt;
+
+    z-index: @toast-z-index;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: @_ht;
+    overflow: visible;
+    cursor: pointer;
+    background-color: @color_toast_back;
+    border: @_brdt solid;
+    border-color: @color_border;
+    border-top-width: 0;
+    border-right-width: 0;
+    border-left-width: 0;
+    color: @color_default;
+    width: 100vw;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    align-content: flex-start;
+    .FontMainSize(1.25);
+    height: @_ht;
+    transform: translateY(-@_ht);
+    opacity: 0;
+
+    &.toast-vertical {
+        flex-direction: column;
+    }
+
+    &.toast-show {
+        transform: translateY(0);
+        opacity: 1;
+    }
+
+    &.toast-danger {
+        .ToastColor( @color_danger, @color_danger_inv);
+    }
+
+    &.toast-error,
+    &.fail {
+        .ToastColor( @color_error, @color_error_inv);
+    }
+
+    &.toast-success,
+    &.success {
+        .ToastColor( @color_success, @color_success_inv);
+    }
+
+    &.toast-primary {
+        .ToastColor( @color_primary, @color_primary_inv);
+    }
+
+    &.toast-accent {
+        .ToastColor( @color_accent, @color_accent_inv);
+    }
+
+    &.toast-warning {
+        .ToastColor( @color_warning, @color_warning_inv);
+    }
+
+    &.toast-info {
+        .ToastColor( @color_info, @color_info_inv);
+    }
+}
+
+@{P}-toast when (@shadows = true) {
+    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
+}
+/*#endregion*/
+
+.@{PCSS}-toaster {
+    // container for toasts
+    pointer-events: none;
+    position: fixed;
+    z-index: @toast-z-index;
+    display: flex;
+    flex-direction: column;
+    overflow: visible;
+    box-sizing: border-box;
+    padding: @grid_spacing;
+    z-index: @toast-z-index;
+    overflow: visible;
+    // top-right: default
+    top: 0;
+    right: 0;
+    bottom: auto;
+    left: auto;
+    align-content: flex-end;
+
+    @_w: @grid_spacing * 10;
+    @_m: @grid_cell;
+
+    @{P}-toast {
+        position: static;
+        z-index: 0;
+        //flex: 0 1 auto;
+        width: @_w;
+        overflow: hidden;
+        opacity: 0;
+        transform-origin: right center;
+        border-top-width: 1px;
+        border-right-width: 1px;
+        border-left-width: 1px;
+        padding: @grid_spacing @grid_spacing * 1.5;
+        box-sizing: border-box;
+        margin: 0 0 @grid_spacing 0;
+        pointer-events: none;
+        border-radius: @border_radius;
+        // tweak flexbox
+        justify-content: flex-start;
+        padding: @grid_spacing * 2 / 3;
+        // top-right default
+        transform: translateX(@_w - @_m) translateY(0) translateZ(0) scale(0.25);
+        transform-origin: right center;
+
+        &.toast-show {
+            pointer-events: auto;
+            //min-height: @_h;
+            order: -1;
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+
+    &.toaster-left {
+        align-content: flex-start;
+        right: auto;
+        left: 0;
+
+        @{P}-toast {
+            transform: translateX(-@_w + @_m) translateY(0) translateZ(0) scale(0.25);
+            transform-origin: left center;
+
+            &.toast-show {
+                transform: translateX(0);
+            }
+        }
+    }
+
+    &.toaster-right {
+    }
+
+    &.toaster-bottom {
+        top: auto;
+        bottom: 0;
+        flex-direction: column-reverse;
+
+        @{P}-toast {
+            margin: @grid_spacing 0 0 0;
+        }
+    }
+
+    &.toaster-top {
+    }
+
+    &.toaster-center {
+        align-content: center;
+        right: 0;
+        left: 0;
+
+        @{P}-toast {
+            align-self: center;
+            transform-origin: 50% 0;
+            transform: translateY(-100%) translateX(0) translateZ(0) scale(0.25);
+
+            &.toast-hide {
+                transform: translateY(100%) translateX(0) translateZ(0);
+                opacity: 0;
+            }
+        }
+
+        &.toaster-bottom @{P}-toast {
+            transform: translateY(100%) translateX(0) translateZ(0) scale(0.25);
+
+            &.toast-hide {
+                transform: translateY(-100%) translateX(0) translateZ(0);
+                opacity: 0;
+            }
+        }
+
+        @{P}-toast.toast-show {
+            transform: translateY(0) translateX(0) translateZ(0);
+        }
+    }
+
+    &.toaster-autosize @{P}-toast {
+        width: auto;
+    }
+}
+
+// animations
+.@{PCSS}-animations {
+
+    @{P}-toast {
+        transition: transform .3s @easing_out_sine, opacity .25s linear;
+
+        &.toast-hide {
+            transition-duration: .125s;
+            transition-timing-function: @easing_in_sine;
+        }
+    }
+
+    .@{PCSS}-toaster.toaster-anim {
+        &.anim-bounce {
+            @{P}-toast.toast-show {
+                transition: transform .3s @easing_out_back, opacity .25s linear;
+            }
+        }
+    }
+}

package/pacem/ui/dark/toc.less

@@ -0,0 +1,47 @@
+@import "../shared";
+
+@{P}-toc {
+    display: block;
+}
+
+.@{PCSS}-toc {
+
+    >@{P}-a {
+        display: block;
+        border-left: 2px solid transparent;
+        padding: 0 @grid_spacing / 2;
+        line-height: 1.5;// 1.5rem * @font_rem_factor;
+
+        &.toc-focus {
+            border-color: @color_primary;
+            font-weight: 700;
+        }
+    }
+}
+
+.toc-item,
+.@{PCSS}-toc-item {
+    transition: padding @easing_out_sine .15s;
+    cursor: pointer;
+
+    &::before {
+        pointer-events: none;
+        .Icon('link', 1em);
+        line-height: 1em;
+        top: 0;
+        left: 0;
+        transition: transform @easing_out_sine .15s, opacity .1s;
+        opacity: 0;
+        transform-origin: left 50%;
+        transform: scale(0.5);
+    }
+
+    &:hover {
+        padding-left: @grid_spacing * 1.5;
+
+        &::before {
+            transform: scale(1);
+            opacity: 1;
+        }
+    }
+}

package/pacem/ui/dark/tuner.less

@@ -0,0 +1,155 @@
+@import "../shared";
+
+@{P}-tuner {
+    .Tuner(ceil(@grid_cell * 1.414));
+    //@_padding: @grid_spacing / 6;
+    display: block;
+    position: relative;
+
+    &::part(tuner) {
+        /*width: 100%;
+        height: 100%;*/
+        position: absolute;
+        display: block;
+        fill: none;
+        stroke-width: 10px;
+        overflow: visible;
+    }
+
+    &.tuner-interactive::part(tuner) {
+        cursor: pointer;
+    }
+
+    &::part(rail) {
+        stroke: ~"var(--@{PCSS}-color-default)";
+    }
+
+    &::part(complementary-rail) {
+        display: none;
+    }
+
+    &::part(track) {
+        stroke: @color_border;
+    }
+
+    &.tuner-notrack::part(track) {
+        stroke: transparent;
+    }
+
+    &::part(content) {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+        color: @color_default;
+        //font-size: 2rem;
+    }
+
+    &.tuner-large {
+        .Tuner(2 * @grid_cell, 12px);
+    }
+
+    &.tuner-small {
+        .Tuner(@grid_cell, 6px);
+    }
+
+    &.tuner-smaller {
+        .Tuner(2 * @grid_spacing, 4px);
+    }
+
+    &.tuner-thin {
+        &::part(rail),
+        &::part(track) {
+            stroke-width: 3px;
+        }
+    }
+
+    &.tuner-tiny {
+        .Tuner(@grid_spacing, 1px);
+    }
+    // coloring
+
+
+    @colors: @all_colors;
+
+    // rail
+    each(@colors, {
+        &.tuner-@{value}::part(rail){
+        
+            stroke: ~"var(--@{PCSS}-color-@{value})";
+        }
+    });
+    // complementary-rail
+    each(@colors, {
+        &.tuner-complementary-@{value}::part(complementary-rail){
+            display: inherit;
+            stroke: ~"var(--@{PCSS}-color-@{value})";
+        }
+    });
+}
+
+.TunerWrapper(@clr) {
+    .GradientTuner(@clr);
+
+    @{P}-tuner {
+
+        &::part(track) {
+            stroke: rgba(@clr, 1);
+        }
+    }
+}
+
+.@{PCSS}-tuner-wrapper {
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: 100%;
+    transition: @easing_out_sine .25s;
+    padding: @grid_spacing/3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .TunerWrapper(~"var(--@{PCSS}-color-default-rgb)");
+
+    @{P}-tuner {
+
+        &::part(tuner),
+        &::part(content) {
+            top: 1.5px;
+            left: $top;
+            width: ~"calc(100% - 3px)";
+            height: $width;
+        }
+
+        &::part(rail),
+        &::part(complementary-rail),
+        &::part(track) {
+            stroke-width: 3px;
+        }
+
+        &::part(track) {
+            stroke-opacity: 0.1;
+        }
+    }
+
+    @colors: @all_colors;
+
+    // tuner
+    each(@colors, {
+        &.tuner-@{value}{
+            .TunerWrapper(~"var(--@{PCSS}-color-@{value}-rgb)");
+        }
+    });
+
+    &.tuner-disabled {
+        background-size: 0%;
+    }
+}
+
+.@{PCSS}-animations {
+
+    .@{PCSS}-tuner-wrapper,
+    @{P}-tuner {
+        .Animatable(pop-anim, .4s, @easing_out_back);
+    }
+}

package/pacem/ui/dark/view.less

@@ -0,0 +1,17 @@
+@import "../shared";
+
+@{P}-view {
+    display: block;
+}
+
+.@{PCSS}-animations @{P}-view.@{PCSS}-animatable,
+.@{PCSS}-animations @{P}-view.@{PCSS}-anim {
+    animation: none !important;
+    transition: transform @easing_in_out_sine .175s, opacity .2s;
+    //transform-origin: left top;
+
+    &.view-fetching {
+        transform: translateY(-@grid_spacing) translateZ(0);
+        opacity: 0;
+    }
+}