@pacem/pacem-theme-less 1.0.0-amaldi

package/pacem/ui/dark/button.less

@@ -0,0 +1,716 @@
+@import "../shared";
+
+@_side_padding: @grid_spacing / 2;
+@_margin: @grid_spacing/3;
+@_width: 2 * (@grid_cell + @_side_padding);
+@_width_half: @grid_cell + 2 * @_side_padding;
+@_height: @grid_spacing * 1.5;
+@_border: 1px;
+@_radius: ~"var(--@{PCSS}-border-button-radius)";
+
+.@{PCSS}-button.button,
+@{P}-button.button {
+    @_brd: @_border;
+    @_h: @_height;
+    height: @_h - 2 * @_brd;
+    line-height: $height;
+    padding: 0 @grid_spacing/1.5;
+    //min-width: @_width;
+    // background-color: @color_button_back;
+    box-sizing: border-box;
+    cursor: pointer;
+    border: @_brd solid transparent;
+    //margin: 0 @_margin @_margin 0;
+    transition: all .1s linear;
+    //color: @color_light;
+    border-radius: @_radius;
+
+    &.button-size {
+        padding: 0 @grid_spacing/2;
+        min-width: @_width;
+        // constrained min-width
+        &.size-small {
+            min-width: @_width_half;
+        }
+        // minimal size, depends on content
+        &.size-auto {
+            min-width: 0;
+            padding: 0 0 0 @grid_spacing/3;
+            height: @grid_spacing;
+
+            &[data-icon-glyph]::before {
+                font-size: 1rem;
+                line-height: @grid_spacing;
+                display: block;
+            }
+        }
+
+        &.size-stretch {
+            min-width: 0;
+            padding: 0 0 0 @grid_spacing/3;
+            height: auto;
+            line-height: inherit;
+
+            &[data-icon-glyph]::before {
+                font-size: 1rem;
+                line-height: 1;
+                display: block;
+            }
+        }
+    }
+}
+
+.ButtonGradients() {
+    .GradientBorderVertical(1, 0, 100%, @color_button_border_light, @color_button_border_dark);
+}
+
+.ButtonNoGradients() {
+    border-top-color: @color_button_border_light;
+    border-bottom-color: @color_button_border;
+    border-right-color: @color_button_border;
+    border-left-color: @color_button_border;
+}
+
+.@{PCSS}-button.button when (@shadows = true) {
+    .ButtonShadows();
+}
+
+@{P}-button.button when (@shadows = true) {
+    .ButtonShadows();
+}
+
+.@{PCSS}-button.button when (@gradients = true) {
+    .ButtonGradients();
+}
+
+@{P}-button.button when (@gradients = true) {
+    .ButtonGradients();
+}
+
+.@{PCSS}-button.button when (@gradients = false) {
+    .ButtonNoGradients();
+}
+
+@{P}-button.button when (@gradients = false) {
+    .ButtonNoGradients();
+}
+
+.@{PCSS}-button,
+a.@{PCSS}-button,
+@{P}-button {
+    background-color: @color_button_back;
+}
+
+/*.@{PCSS}-balloon {
+
+    .@{PCSS}-button,
+    a.@{PCSS}-button,
+    @{P}-button {
+        background-color: @balloon_color;
+    }
+}*/
+
+.@{PCSS}-button,
+a.@{PCSS}-button,
+@{P}-button {
+    position: relative;
+    cursor: pointer;
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0 @_margin @_margin 0;
+    user-select: none;
+
+    .ButtonColorize(@clr, @clr_fore) {
+        background: @clr;
+        color: @clr_fore;
+
+        @_darken_perc: @button_hover_percentage;
+
+        &:hover {
+            color: @clr_fore;
+        }
+
+        &:focus when (@glows = true) {
+            text-shadow: 0 0 8px @clr_fore;
+        }
+
+        &:hover when (@glows = true) {
+            text-shadow: 0 0 8px @clr_fore;
+        }
+
+        &:focus when (@dark_theme = false) {
+            background-color: darken(@clr, @_darken_perc);
+        }
+
+        &:hover when (@dark_theme = false) {
+            background-color: darken(@clr, @_darken_perc);
+        }
+
+        &:focus when (@dark_theme = true) {
+            background-color: lighten(@clr, @_darken_perc);
+        }
+
+        &:hover when (@dark_theme = true) {
+            background-color: lighten(@clr, @_darken_perc);
+        }
+    }
+
+    .ButtonColorize(@clr_name) {
+        @_fore: ~"var(--@{PCSS}-color-@{clr_name}-inverse)";
+        @_back: ~"var(--@{PCSS}-color-@{clr_name})";
+        background: @_back;
+        color: @_fore;
+
+        &:focus when (@glows = true) {
+            text-shadow: 0 0 8px @_fore;
+        }
+
+        &:hover when (@glows = true) {
+            text-shadow: 0 0 8px @_fore;
+        }
+
+        &:focus,
+        &:hover {
+            background-color: ~"var(--@{PCSS}-color-@{clr_name}-hover)";
+            color: ~"var(--@{PCSS}-color-@{clr_name}-inverse-hover)";
+        }
+    }
+
+    .ButtonColorize(@color_button_back, @color_button_fore);
+
+    .IconGlyphColorize(@color) {
+        &[data-icon-glyph]::before {
+            color: ~"var(--@{PCSS}-color-@{color})";
+        }
+
+        &:focus,
+        &:hover {
+            &[data-icon-glyph]::before {
+                color: ~"var(--@{PCSS}-color-@{color}-hover)";
+            }
+        }
+    }
+
+    &.button-invert {
+        .ButtonColorize(invert);
+    }
+
+    @_palette: @palette_colors;
+    @_colors: @semantic_colors;
+
+    each(@_colors, {
+
+        &.@{value},
+        &.button-@{value}{
+            .ButtonColorize(@value);
+        }
+        
+        &.icon-glyph-@{value}{
+            .IconGlyphColorize(@value);
+        }
+        /*&.button-@{value}-container{
+            .ButtonColorize(~"@{value}-container");
+        }*/
+
+    });
+
+    each(@_palette, {
+
+        &.@{value},
+        &.button-@{value}{
+            .ButtonColorize(@value);
+        }
+        
+        &.icon-glyph-@{value}{
+            .IconGlyphColorize(@value);
+        }
+        /*&.button-@{value}-container{
+            .ButtonColorize(~"@{value}-container");
+        }*/
+    });
+
+    &.exhalt,
+    &.button-exhalt {
+        .ButtonColorize(@color_highlight, @color_highlight_fore);
+    }
+
+    &.rise,
+    &.button-rise {
+        /*box-shadow: none;
+        border-image: none;*/
+        box-shadow: 0 2px @grid_spacing / 3 rgba(0,0,0,0.5);
+        margin: 0 @_margin @_margin 0;
+    }
+
+    &::before {
+        line-height: 1;
+        text-align: center;
+        .IconCore();
+        font-size: @grid_spacing;
+    }
+
+    &.button::before {
+        line-height: @_height - 2 * @_border;
+    }
+
+    &.add::before {
+        content: 'add';
+    }
+
+    &.remove::before {
+        content: 'remove';
+    }
+
+    &.edit::before {
+        content: 'edit';
+    }
+
+    &.save::before {
+        content: 'save';
+    }
+
+    &.check::before {
+        content: 'check';
+    }
+
+    &.clear::before {
+        content: 'clear';
+    }
+
+    &.delete::before {
+        content: 'delete';
+    }
+
+    &.copy::before {
+        content: 'file_copy';
+    }
+
+    &.toggle {
+
+        &::before {
+            transition: transform @easing_in_out_sine .333s;
+            overflow: hidden;
+        }
+
+        &.fullscreen::before {
+            content: 'fullscreen';
+        }
+
+        &.fullscreen-exit::before {
+            content: 'fullscreen_exit';
+        }
+
+        &.expand::before {
+            content: 'expand_more';
+            transform: rotate(0);
+        }
+
+        &.collapse::before {
+            content: 'expand_more';
+            transform: rotate(-180deg);
+        }
+    }
+
+    &.circular,
+    &.button-circular,
+    &.button-circle,
+    &.button-square {
+        width: 2 *@grid_spacing;
+        aspect-ratio: 1;
+        font-size: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &::before {
+            /*position: absolute;
+            top: 50%;
+            left: 50%;
+            margin-top: -@grid_spacing/2;
+            margin-left: -@grid_spacing/2;*/
+        }
+
+        &.square-small,
+        &.circle-small {
+            width: 1.5 *@grid_spacing;
+            // height: $width;
+
+            &::before {
+                font-size: @grid_spacing * .75;
+                /*margin-top: -@grid_spacing * (1.5 - .75)/2;
+                margin-left: $margin-top;*/
+            }
+        }
+
+        &.square-smaller,
+        &.circle-smaller {
+            width: @grid_spacing;
+            // height: $width;
+
+            &::before {
+                font-size: @grid_spacing * .5;
+                /*margin-top: -@grid_spacing * (0.5)/2;
+                margin-left: $margin-top;*/
+            }
+        }
+
+        &.square-auto,
+        &.circle-auto {
+            width: 100%;
+
+            &::before {
+                font-size: @grid_spacing;
+                text-size-adjust: 67%;
+                /*margin-top: -25%;
+                margin-left: -25%;*/
+            }
+        }
+    }
+
+    &.circular, &.button-circular, &.button-circle {
+        border-radius: 50%;
+    }
+
+    &.button-square {
+        border-radius: @_radius;
+
+        &.square-sharp {
+            border-radius: 0;
+        }
+    }
+}
+
+@{P}-button, .@{PCSS}-button {
+
+    &:focus when (@gradients = true) {
+        .GradientBorderVertical(1, 0, 100%, fade(@color_button_border_light, 20), fade(@color_button_border, 0));
+    }
+
+    &:focus when (@gradients = false) {
+        border-bottom-color: @color_button_border_dark;
+    }
+    // '.button-firm' class prevents the 'active' state (alongside with the 'disabled' state).
+    &:not(.@{PCSS}-disabled):not(.button-firm) {
+        &.@{PCSS}-active {
+            //border-image: none;
+            transform: translateY(@_border);
+            box-shadow: none;
+        }
+
+        &.@{PCSS}-active when (@gradients = true) {
+            .GradientBorderVertical(1, 0, 100%, fade(@color_button_border_dark, 10), fade(@color_button_border_light, 10));
+        }
+
+        &.@{PCSS}-active when (@gradients = false) {
+            border-top-color: @color_button_border;
+            border-bottom-color: @color_button_border_light;
+        }
+    }
+}
+
+.ButtonText() {
+    cursor: pointer;
+    // picked from below
+    font-family: ~"var(--@{PCSS}-font-btn)";
+    font-size: @button_fontsize;
+    text-align: center;
+}
+//:host
+.@{PCSS}-button,
+@{P}-button {
+    .ButtonText();
+}
+
+@{P}-button when (@uppercase_buttons = true) {
+    text-transform: uppercase;
+}
+
+.@{PCSS}-button when (@uppercase_buttons = true) {
+    text-transform: uppercase;
+}
+//:host([disabled]),
+.@{PCSS}-button.@{PCSS}-disabled,
+@{P}-button.@{PCSS}-disabled,
+.@{PCSS}-button.@{PCSS}-disabled:hover,
+@{P}-button.@{PCSS}-disabled:hover,
+// non-components
+a.@{PCSS}-button[disabled],
+button.@{PCSS}-button[disabled]:hover,
+input.@{PCSS}-button[disabled],
+a.@{PCSS}-button[disabled]:hover,
+button.@{PCSS}-button[disabled]:hover,
+input.@{PCSS}-button[disabled]:hover {
+    cursor: default;
+    //color: fade(@color_button_fore, 30);
+    text-shadow: none;
+    pointer-events: none;
+}
+
+.@{PCSS}-button,
+@{P}-button,
+.@{PCSS}-button:hover,
+@{P}-button:hover,
+.@{PCSS}-button:focus,
+@{P}-button:focus {
+    // color: inherit;
+    &.@{PCSS}-disabled {
+        @_fore: ~"var(--@{PCSS}-color-disabled-button-inverse-rgb)";
+        @_back: ~"var(--@{PCSS}-color-disabled-button)";
+        //color: fade(@color_button_fore, 30);
+        //background-color: @color_button_back;
+        color: rgba(@_fore, .4);
+        background-color: @_back;
+        cursor: default;
+    }
+
+    &.@{PCSS}-disabled when (@gradients = true) {
+        .GradientBorderVertical(1, 0, 50%, fade(@color_button_border_light, 10), fade(@color_button_border, 0));
+        //border-color: transparent;
+    }
+
+    &.@{PCSS}-disabled when (@shadows = true) {
+        box-shadow: 0 2px 2px rgba(0,0,0,0.1);
+    }
+
+    &.@{PCSS}-disabled when (@gradients = false) {
+        //border-color: #f0f0f0;
+        border-color: transparent;
+    }
+    // flat: no background at all
+    &.flat,
+    &.button-flat {
+        background-color: transparent;
+    }
+}
+/* #endregion */
+body.@{PCSS}-animations {
+    .@{PCSS}-button, a.@{PCSS}-button, @{P}-button {
+        transition: color .1s, background .15s;
+    }
+}
+
+@{P}-buttonset {
+    display: block;
+    border: 4px solid transparent;
+    transition: border .25s linear;
+    position: relative;
+
+    &:focus {
+        border-color: @color_suggest_border;
+    }
+    /*&:focus::before{
+        .Icon('keyboard_arrow_down');
+        color: @color_primary;
+        top: -@grid_spacing;
+        left: 50%;
+        margin-left: -@grid_spacing/2;
+        animation: shooting-star .4s linear both;
+        //z-index: 2;
+    }*/
+}
+
+.@{PCSS}-buttonset {
+    .HorizontalItemSet(button);
+    padding: @grid_spacing/2 0 0 0;
+
+    &.buttons when (@shadows = true) {
+        .@{PCSS}-buttonset-left, .buttonset-left,
+        .@{PCSS}-buttonset-center, .buttonset-center,
+        .@{PCSS}-buttonset-right, .buttonset-right {
+            .ButtonShadows();
+        }
+    }
+
+    @{P}-button,
+    .@{PCSS}-button {
+        .HorizontalItem(button);
+        margin: 0;
+        box-shadow: none;
+    }
+}
+
+.@{PCSS}-contextmenu {
+    margin: 0;
+    padding: 0;
+
+    @{P}-button,
+    .@{PCSS}-button {
+
+        @_side_pad: @grid_spacing * 1.25;
+        @_v_pad: @grid_spacing * .5;
+
+        display: block;
+        margin: 0;
+        padding: @_v_pad @_side_pad;
+        box-shadow: none;
+        border: none;
+        background: transparent;
+        height: auto;
+        line-height: 1;
+        .FontStd(1);
+        border-radius: 0;
+        text-transform: none;
+        text-align: left;
+        width: @grid_spacing * 5;
+        .Ellipsed();
+
+        &::before {
+            font-size: 1em;
+            width: @_side_pad;
+            text-align: center;
+            position: absolute;
+            left: 0;
+            top: @font_icon_offset + @_v_pad;
+            content: '';
+        }
+
+        &:hover,
+        &:focus {
+
+            &:not(.@{PCSS}-disabled) {
+                background-color: @color_contextmenu_hover_back;
+                color: @color_contextmenu_hover_fore;
+            }
+
+            &.@{PCSS}-disabled {
+                background-color: transparent;
+            }
+        }
+    }
+
+    hr {
+        border: 0;
+        height: 1px;
+        background-color: fade(@color_dark, 10);
+        border-bottom: 1px solid fade(@color_light, 5);
+        margin: @grid_spacing / 6 @grid_spacing / 8;
+    }
+}
+// icon injection
+@{P}-button,
+.@{PCSS}-button {
+
+    &[data-icon-glyph] {
+        &::before {
+            content: attr(data-icon-glyph);
+        }
+
+        &.icon-glyph-normal::before {
+            font-size: 1rem;
+        }
+
+        &.icon-glyph-tiny::before {
+            font-size: @grid_spacing/3;
+        }
+
+        &.icon-glyph-small::before {
+            font-size: 2 * @grid_spacing/3;
+        }
+
+        &.icon-glyph-smaller::before {
+            font-size: @grid_spacing/2;
+        }
+    }
+
+    &[data-icon-url]::before {
+        // will work in a far future
+        content: attr(data-icon-url url);
+    }
+
+    &.button[data-icon-glyph]::before {
+        vertical-align: bottom;
+        margin-right: @grid_spacing/3;
+    }
+}
+
+@{P}-button.dropdown-toggle {
+    padding-right: 1.5 * @grid_spacing;
+    margin-bottom: 0;
+    position: relative;
+
+    &::after {
+        .Icon('arrow_drop_down');
+        right: .25 * @grid_spacing;
+        //top: .5 * (@_height - @grid_spacing) - @_border;
+        top: 50%;
+        margin-top: -@grid_spacing/2;
+        transition: transform .25s @easing_in_out_sine;
+    }
+
+    &.dropdown-open::after {
+        transform: rotate(-180deg);
+    }
+}
+
+.@{PCSS}-button.dropdown-item,
+@{P}-button.dropdown-item {
+    display: block;
+    margin: 0;
+    height: @_height;
+    line-height: @_height;
+    border-top: 1px solid @color_suggest_border_light;
+    border-bottom: 1px solid @color_suggest_border_dark;
+
+    &.selected {
+        background-color: @color_accent;
+        color: @color_accent_inv;
+    }
+
+    &:hover,
+    &:focus {
+        background-color: @color_suggest_focus_back;
+        color: @color_suggest_focus_fore;
+    }
+}
+// icon rotations
+@{P}-button,
+.@{PCSS}-button {
+
+    &.icon-rotate {
+
+        &::before {
+            display: inline-block;
+            transform-origin: center center;
+        }
+        // rotate
+        &.rotate-45::before {
+            transform: rotate(45deg);
+        }
+
+        &.rotate-90::before {
+            transform: rotate(90deg);
+        }
+
+        &.rotate-135::before {
+            transform: rotate(135deg);
+        }
+
+        &.rotate-180::before {
+            transform: rotate(180deg);
+        }
+
+        &.rotate-225::before {
+            transform: rotate(225deg);
+        }
+
+        &.rotate-270::before {
+            transform: rotate(270deg);
+        }
+
+        &.rotate-315::before {
+            transform: rotate(315deg);
+        }
+    }
+}
+// animations
+.@{PCSS}-animations {
+
+    @{P}-button,
+    .@{PCSS}-button {
+        transition: background-color @easing_in_out_sine .125s, color @easing_in_out_sine .15s;
+
+        &.icon-rotate::before {
+            transition: background-color @easing_in_out_sine .125s, color @easing_in_out_sine .15s,transform @easing_in_out_sine .2s;
+        }
+    }
+}