@pacem/pacem-theme-less 1.0.0-amaldi

package/pacem/ui/dark/balloon.less

@@ -0,0 +1,566 @@
+@import "../shared";
+
+/* #region BALLOON */
+
+@_balloon_offset: @balloon_pointer_size/12;
+@_pointer_w: @balloon_pointer_size/2;
+@_pointer_h: @balloon_pointer_size/2;
+@_scale_off: 0.6667;
+
+.BalloonColorize(@_clr, @clr_inv) {
+    .BalloonColorize(@_clr, @clr_inv, @_clr, 95);
+}
+
+.BalloonColorize(@clr1, @clrinv, @clr2, @_opacity) {
+    @_clr: ~"var(--@{PCSS}-color-@{clr1}-rgb)";
+    @_clr2: ~"var(--@{PCSS}-color-@{clr2}-rgb)";
+    @clr_inv: ~"var(--@{PCSS}-color-@{clrinv})";
+    color: @clr_inv;
+    background-color: rgba(@_clr, @_opacity/100);
+
+    & when (@blur = true) {
+        .Blur(12px);
+    }
+
+    &.balloon-border {
+        border-color: rgba(@_clr2, @_opacity/100);
+    }
+
+    &::after {
+        background-color: rgba(@_clr, min(99, @_opacity)/100);
+        /*@_svg: replace("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='@{balloon_pointer_size}' viewBox='0 0 24 24' width='@{balloon_pointer_size}' fill='@{_clr0}'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E", ",", "%2C");
+        content: ~"url(\"data:image/svg+xml,@{_svg}\")";*/
+    }
+
+    &.balloon-corners {
+
+        &::part(corner-topleft) {
+            border-top-color: rgba(@_clr2, 1);
+            border-left-color: rgba(@_clr2, 1);
+        }
+
+        &::part(corner-topright) {
+            border-top-color: rgba(@_clr2, 1);
+            border-right-color: rgba(@_clr2, 1);
+        }
+
+        &::part(corner-bottomright) {
+            border-bottom-color: rgba(@_clr2, 1);
+            border-right-color: rgba(@_clr2, 1);
+        }
+
+        &::part(corner-bottomleft) {
+            border-bottom-color: rgba(@_clr2, 1);
+            border-left-color: rgba(@_clr2, 1);
+        }
+
+        > .corner {
+            &.top-left {
+                border-top-color: rgba(@_clr2, 1);
+                border-left-color: rgba(@_clr2, 1);
+            }
+
+            &.top-right {
+                border-top-color: rgba(@_clr2, 1);
+                border-right-color: rgba(@_clr2, 1);
+            }
+
+            &.bottom-right {
+                border-bottom-color: rgba(@_clr2, 1);
+                border-right-color: rgba(@_clr2, 1);
+            }
+
+            &.bottom-left {
+                border-bottom-color: rgba(@_clr2, 1);
+                border-left-color: rgba(@_clr2, 1);
+            }
+        }
+    }
+
+    &.@{PCSS}-contextmenu {
+        .@{PCSS}-button,
+        @{P}-button {
+            border-radius: @border_radius;
+            background-color: transparent;
+
+            &:not(.@{PCSS}-disabled) {
+                //background-color: ~"var(--@{PCSS}-color-@{clr1})";
+                color: @clr_inv;
+
+                &:hover,
+                &:focus {
+                    background-color: ~"var(--@{PCSS}-color-@{clr1}-hover)";
+                    color: ~"var(--@{PCSS}-color-@{clrinv}-hover)";
+                }
+
+                &:active {
+                    background-color: ~"var(--@{PCSS}-color-@{clr1}-emphasis)";
+                }
+            }
+        }
+    }
+}
+
+@{P}-balloon {
+    box-sizing: border-box;
+    //min-height: @grid_spacing * 2;
+    min-width: @grid_spacing * 3;
+    border: 1px solid transparent;
+    border-radius: @border_radius;
+    //color: #fff;
+    padding: @grid_spacing * .5;
+    cursor: default;
+    //font-size: .86em;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: @balloon-z-index;
+    display: block;
+
+    @_offset: -2 * @grid_spacing / 3;
+
+    &::before,
+    &::after {
+        position: absolute;
+        display: block;
+        width: @grid_spacing;
+        height: $width;
+        /*width: @balloon_pointer_size;
+        height: $width;*/
+    }
+
+    &::after {
+        content: "";
+        clip-path: polygon(33% 20%, 33% 80%, 80% 50%);
+    }
+
+    &::before {
+        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='@{balloon_pointer_size}' viewBox='0 0 24 24' width='@{balloon_pointer_size}' fill='rgba(0,0,0,0.1)'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
+        z-index: -1;
+    }
+
+    .BalloonTipShadow(@a, @b, @c, @f) {
+        filter: drop-shadow(@a @b @c #000);
+        /* &when (@balloon_shadows = true) and (@dark_theme = true) and (luminance(@color_background) >= 5) {
+            filter: drop-shadow(@a @b @c fade( @color_dark, 50 * @f));
+        }
+
+        &when (@balloon_shadows = true) and (@dark_theme = true) and (luminance(@color_background) < 5) {
+            filter: drop-shadow(@a @b @c fade( @color_dark, 75 * @f));
+        }
+
+        &when (@balloon_shadows = true) and (@dark_theme = false) {
+            filter: drop-shadow(@a @b @c fade( @color_dark, 25 * @f));
+        }*/
+    }
+
+    .BalloonColorize(balloon, default, balloon, 100);
+
+    &.balloon-right {
+        &::before,
+        &::after {
+            left: @_offset;
+            transform: rotateZ(180deg);
+        }
+
+        &::before {
+            .BalloonTipShadow(2px, -2px, 1px, .5);
+        }
+    }
+
+    &.balloon-left {
+        &::before,
+        &::after {
+            right: @_offset;
+        }
+
+        &::before {
+            .BalloonTipShadow(2px, 2px, 1px, .5);
+        }
+    }
+
+    &.balloon-top {
+        &::before,
+        &::after {
+            bottom: @_offset;
+            transform: rotateZ(90deg);
+        }
+
+        &::before {
+            .BalloonTipShadow(3.25px, 0, 2px, .5);
+        }
+    }
+
+    &.balloon-bottom {
+        &::before,
+        &::after {
+            top: @_offset;
+            transform: rotateZ(-90deg);
+        }
+
+        &::before {
+            // no shadow under the tip
+            .BalloonTipShadow(2px, 0, 1px, .5);
+        }
+    }
+
+    &.balloon-out {
+    }
+
+    &.balloon-top,
+    &.balloon-bottom {
+
+        &.balloon-start::after,
+        &.balloon-start::before {
+            left: ~"var(--@{PCSS}-balloon-tail-inset)";
+        }
+
+
+        &.balloon-end::after,
+        &.balloon-end::before {
+            right: ~"var(--@{PCSS}-balloon-tail-inset)";
+        }
+
+        &.balloon-center::after,
+        &.balloon-center::before {
+            left: 50%;
+            margin-left: -@grid_spacing/2;
+        }
+    }
+
+    &.balloon-right,
+    &.balloon-left {
+
+        &.balloon-start::after,
+        &.balloon-start::before {
+            top: ~"var(--@{PCSS}-balloon-tail-inset)";
+        }
+
+        &.balloon-end::after,
+        &.balloon-end::before {
+            bottom: ~"var(--@{PCSS}-balloon-tail-inset)";
+        }
+
+        &.balloon-center::after,
+        &.balloon-center::before {
+            top: 50%;
+            margin-top: -@grid_spacing/2;
+        }
+    }
+
+    &.balloon-corners {
+
+        &::part(corner-topleft),
+        &::part(corner-topright),
+        &::part(corner-bottomright),
+        &::part(corner-bottomleft) {
+            @_sz: @grid_spacing/4;
+            width: @_sz;
+            height: @_sz;
+            border: 2px solid transparent;
+            position: absolute;
+            pointer-events: none;
+        }
+
+        &::part(corner-topleft) {
+            top: -1px;
+            left: -1px;
+        }
+
+        &::part(corner-topright) {
+            top: -1px;
+            right: -1px;
+        }
+
+        &::part(corner-bottomright) {
+            bottom: -1px;
+            right: -1px;
+        }
+
+        &::part(corner-bottomleft) {
+            bottom: -1px;
+            left: -1px;
+        }
+
+        > .corner {
+            @_sz: @grid_spacing/4;
+            width: @_sz;
+            height: @_sz;
+            border: 2px solid transparent;
+            position: absolute;
+            pointer-events: none;
+
+            &.top-left {
+                top: -1px;
+                left: -1px;
+            }
+
+            &.top-right {
+                top: -1px;
+                right: -1px;
+            }
+
+            &.bottom-right {
+                bottom: -1px;
+                right: -1px;
+            }
+
+            &.bottom-left {
+                bottom: -1px;
+                left: -1px;
+            }
+        }
+    }
+}
+
+@{P}-balloon when (@balloon_shadows = true) and (@dark_theme = true) and (luminance(@color_background) >= 5) {
+    box-shadow: 0 @grid_spacing/12 @grid_spacing/3 fade( @color_dark, 50);
+}
+
+@{P}-balloon when (@balloon_shadows = true) and (@dark_theme = true) and (luminance(@color_background) < 5) {
+    // very dark theme
+    box-shadow: 0 @grid_spacing/3 @grid_spacing fade(@color_dark,75);
+}
+
+@{P}-balloon when (@balloon_shadows = true) and (@dark_theme = false) {
+    box-shadow: 0 @grid_spacing/6 @grid_spacing/3 fade( @color_dark, 25);
+}
+/* #endregion */
+/* #region INSIDE FORM FIELD */
+@{P}-balloon.@{PCSS}-field-tooltip {
+    .BalloonColorize(primary, primary-inverse,primary, 100);
+    /*background-color: @color_primary;
+
+    &::after {
+        color: @color_primary;
+        text-shadow: none;
+    }
+
+    color: @color_primary_inv;*/
+
+    code {
+        color: @color_primary_inv;
+        background-color: fade(@color_primary_inv, 10);
+    }
+}
+/* #endregion */
+
+@{P}-balloon.dropdown,
+@{P}-balloon.balloon-dropdown {
+    padding: 0;
+    background-color: @color_suggest_back;
+    border: 2px solid @color_suggest_border;
+    min-width: 175px;
+    min-height: auto;
+}
+
+@{P}-balloon.dropdown,
+@{P}-balloon.balloon-dropdown {
+    & when (@balloon_shadows = true) and (@dark_theme = false) {
+        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    }
+}
+/*#region for PANELS CONTAINED IN A BALLOON */
+.balloon-panel {
+    margin: -@grid_spacing * .5;
+}
+/*#endregion*/
+
+@{P}-balloon {
+    // default state
+    opacity: 0;
+    pointer-events: none;
+    transform: scale(@_scale_off);
+
+    &.balloon-dropdown,
+    &.dropdown {
+        transform: scaleY(@_scale_off);
+    }
+    //
+    &.balloon-in {
+        opacity: 1;
+    }
+
+    &.balloon-right {
+        transform: translateX(-@_balloon_offset) scale(@_scale_off);
+
+        &.balloon-start {
+            transform-origin: left top;
+        }
+
+        &.balloon-end {
+            transform-origin: left bottom;
+        }
+
+        &.balloon-center {
+            transform-origin: left 50%;
+        }
+
+        &.balloon-in {
+            // animation:@{P}-balloon-right @_d ease-out both;
+            transform: translateX(@_pointer_h);
+        }
+
+        &.balloon-out {
+            // animation:@{P}-balloon-right-out @_d_out ease-in both;
+        }
+    }
+
+    &.balloon-left {
+        transform: translateX(@_balloon_offset) scale(@_scale_off);
+
+        &.balloon-start {
+            transform-origin: right top;
+        }
+
+        &.balloon-end {
+            transform-origin: right bottom;
+        }
+
+        &.balloon-center {
+            transform-origin: right 50%;
+        }
+
+        &.balloon-in {
+            //animation:@{P}-balloon-left @_d ease-out both;
+            transform: translateX(-@_pointer_h);
+        }
+
+        &.balloon-out {
+            //animation:@{P}-balloon-left-out @_d_out ease-in both;
+        }
+    }
+
+    &.balloon-top {
+        transform: translateY(@_balloon_offset) scale(@_scale_off);
+
+        &.balloon-start {
+            transform-origin: left bottom;
+        }
+
+        &.balloon-end {
+            transform-origin: right bottom;
+        }
+
+        &.balloon-center {
+            transform-origin: 50% bottom;
+        }
+
+        &.dropdown {
+            transform: translateY(@_balloon_offset * 2) scaleY(@_scale_off);
+            transform-origin: 50% bottom;
+        }
+
+        &.balloon-in {
+            // animation:@{P}-balloon-top @_d ease-out both;
+            transform: translateY(-@_pointer_h);
+        }
+
+        &.balloon-out {
+            // animation:@{P}-balloon-top-out @_d_out ease-in both;
+        }
+    }
+
+    &.balloon-bottom {
+        // default state (not visible)
+        transform: translateY(-@_balloon_offset) scale(@_scale_off);
+
+        &.balloon-start {
+            transform-origin: left top;
+        }
+
+        &.balloon-end {
+            transform-origin: right top;
+        }
+
+        &.balloon-center {
+            transform-origin: 50% top;
+        }
+
+        &.dropdown {
+            transform: translateY(-@_balloon_offset * 2) scaleY(@_scale_off);
+            transform-origin: 50% top;
+        }
+
+        &.balloon-in {
+            transform: translateY(@_pointer_h);
+        }
+
+        &.balloon-out {
+        }
+    }
+}
+/* colors */
+@{P}-balloon {
+
+    @_colors: root, background, /*default,*/ invert, primary, secondary, accent, info, success, warning, danger, error, disabled, green, yellow, brown, red, pink, blue, orange, purple, teal, gray;
+
+    each(@_colors, {
+
+        &.balloon-@{value}{
+            .BalloonColorize(@value, ~"@{value}-inverse");
+        }
+        
+        &.balloon-@{value}-container{
+            .BalloonColorize(~"@{value}-container", ~"@{value}-container-inverse");
+        }
+
+    });
+    // legacy
+    &.balloon-alternative {
+        .BalloonColorize(background, default);
+    }
+
+    &.balloon-contrast {
+        .BalloonColorize(background, default, background, 100);
+    }
+}
+
+@{P}-balloon.balloon-notip,
+@{P}-balloon.dropdown,
+@{P}-balloon.balloon-dropdown {
+
+    &.balloon-top {
+        margin-top: @_pointer_h;
+    }
+
+    &.balloon-bottom {
+        margin-top: -@_pointer_h;
+    }
+
+    &.balloon-left {
+        margin-left: @_pointer_w;
+    }
+
+    &.balloon-right {
+        margin-left: -@_pointer_w;
+    }
+
+    &::after,
+    &::before {
+        display: none;
+    }
+}
+
+.@{PCSS}-animations {
+    @_d: .15s;
+    @_d_out: .1s;
+
+    @{P}-balloon {
+        // default state
+        transition: transform @_d ease-out, opacity @_d;
+
+        &.balloon-on {
+            transition: transform @_d ease-out, opacity @_d, top @_d ease-in-out, left @_d ease-in-out;
+
+            &.dropdown,
+            &.balloon-dropdown {
+                transition: transform @_d ease-out, opacity @_d;
+            }
+        }
+
+        &.balloon-out {
+            transition: transform @_d_out ease-in, opacity @_d_out;
+        }
+    }
+}

package/pacem/ui/dark/binder.less

@@ -0,0 +1,50 @@
+@import "../shared";
+
+@{P}-binder{
+    .Inert();
+}
+
+svg.@{PCSS}-binder {
+
+    path {
+        stroke: @color_default;
+        opacity: 0.25;
+        stroke-width: 2px;
+    }
+
+    &.binder-thin path {
+        opacity: 0.1;
+        stroke-width: 1px;
+    }
+
+    &.binder-thick path {
+        opacity: 0.75;
+        stroke-width: 2px;
+    }
+
+    &.binder-thicker path {
+        opacity: 0.75;
+        stroke-width: 3px;
+    }
+
+    &.binder-primary path {
+        stroke: @color_primary;
+    }
+
+    &.binder-success path {
+        stroke: @color_success;
+    }
+
+    &.binder-danger path {
+        stroke: @color_danger;
+    }
+
+    &.binder-warning path {
+        stroke: @color_warning;
+    }
+
+    &.binder-accent path {
+        stroke: @color_accent;
+    }
+}
+

package/pacem/ui/dark/blade.less

@@ -0,0 +1,110 @@
+@import "../shared";
+
+@{P}-blade {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 33vw;
+    min-width: 600px;
+    box-sizing: border-box;
+    transform: translate(100%, 0);
+    z-index: @lightbox-z-index - 1;
+    overflow: auto;
+    // background-color: ~"var(--@{PCSS}-color-background)";
+
+    &.blade-slim {
+        width: 25vw;
+        min-width: 480px;
+    }
+
+    &.blade-large {
+        width: 50vw;
+    }
+
+    & when(@border_radius > 0) {
+        border-radius: @border_radius 0 0 @border_radius;
+    }
+
+    &.blade-right {
+        left: auto;
+    }
+
+    &.blade-left {
+        left: 0;
+        right: auto;
+        transform: translate(-100%, 0);
+
+        & when(@border_radius > 0) {
+            border-radius: 0 @border_radius @border_radius 0;
+        }
+    }
+
+    &.blade-open {
+        transform: translate(0, 0);
+    }
+}
+
+@media screen and (min-width: @threshold_lg) {
+
+    // layout with a header?
+    .@{PCSS}-body[header]:not(.sticky-header-fade) {
+
+        @{P}-blade.blade-inset {
+            top: ~"var(--@{PCSS}-layout-header-height)";
+        }
+    }
+
+    .@{PCSS}-body[headbar] {
+
+        @{P}-blade.blade-inset {
+            top: ~"var(--@{PCSS}-layout-toolbar-height)";
+        }
+    }
+
+    .@{PCSS}-body[header][headbar]:not(.sticky-header-fade) {
+
+        @{P}-blade.blade-inset {
+            top: ~"calc(var(--@{PCSS}-layout-header-height) +  var(--@{PCSS}-layout-toolbar-height))";
+        }
+    }
+
+    .@{PCSS}-body[footbar] {
+
+        @{P}-blade.blade-inset {
+            bottom: ~"var(--@{PCSS}-layout-toolbar-height)";
+        }
+    }
+
+    .@{PCSS}-body[footer] {
+
+        @{P}-blade.blade-inset {
+            bottom: ~"var(--@{PCSS}-layout-footer-height)";
+        }
+    }
+
+    .@{PCSS}-body[bigfooter] {
+
+        @{P}-blade.blade-inset {
+            bottom: ~"var(--@{PCSS}-layout-bigfooter-height)";
+        }
+    }
+
+    .@{PCSS}-body[footbar][footer] {
+
+        @{P}-blade.blade-inset {
+            bottom: ~"calc(var(--@{PCSS}-layout-footer-height) +  var(--@{PCSS}-layout-toolbar-height))";
+        }
+    }
+}
+
+// animations
+.@{PCSS}-animations {
+
+    @{P}-blade {
+        transition-property: transform !important;
+        transition-timing-function: @easing_in_out_sine !important;
+        transition-duration: .3s !important;
+        transition-delay: 0 !important;
+    }
+}