pacem-less 0.20.0 → 0.20.1-atlantis

package/pacem/fx/fancy.less

@@ -5,7 +5,7 @@
 
 @_easing: @easing_out_sine;
 
-@keyframes fancy-anim {
+@keyframes fx-fancy-anim {
     0% {
         opacity: 0;
         //color: fade(@color_light, 0);
@@ -29,7 +29,7 @@
 
     .@{PCSS}-fancify {
         display: inline-block;
-        animation: fancy-anim .5s @_easing both;
+        animation: fx-fancy-anim .5s @_easing both;
     }
 }
 

package/pacem/fx/index.less

@@ -1,4 +1,5 @@
 @import "fancy";
 @import "hero";
 @import "ripple";
+@import "pulse";
 @import "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/layout/dark/datatable.less

@@ -334,4 +334,10 @@ table.@{PCSS}-datatable {
             opacity: 0.4;
         }
     }
+
+    .@{PCSS}-headcell.headcell-tools,
+    .@{PCSS}-datacell.datacell-tools,
+    .@{PCSS}-footcell.footcell-tools {
+        .ToolButtons(@grid_spacing);
+    }
 }

package/pacem/layout/dark/layout.less

@@ -397,25 +397,30 @@ aside[pacem], .@{PCSS}-aside {
     // footer starts at @grid_spacing left for small screens,
     // while header always at @grid_cell.
     // re-align when screen is large.
+    header[pacem],
+    .@{PCSS}-header,
     footer[pacem],
     .@{PCSS}-footer {
-        padding-left: @grid_cell;
+        padding-left: @layout_aside_padding;
     }
 
     // large screen @grid_cell padding set.
     .@{PCSS}-body {
-        padding-left: @grid_cell;
-        padding-right: @grid_cell;
+        padding-left: @layout_aside_padding;
+        padding-right: @layout_aside_padding;
         // when menu is open it enters like an aside drawer,
         // so make room for it...
+
+        @_menu_open_left_pad: max(@layout_aside_padding, @_aside_margin + @_aside_width);
+
         &.@{PCSS}-menu-open {
-            padding-left: @_aside_margin + @_aside_width;
+            padding-left: @_menu_open_left_pad;
             // ...and keep header and footer aligned.
             header[pacem],
             .@{PCSS}-header,
             footer[pacem],
             .@{PCSS}-footer {
-                padding-left: @_aside_margin + @_aside_width;
+                padding-left: @_menu_open_left_pad;
             }
 
             .@{PCSS}-toolbar.toolbar-header,

package/pacem/layout/dark/positioning.less

@@ -95,7 +95,6 @@
             bottom: @base + @grid_spacing * 2;
         }
     }
-
     // bottom
 
     &[footbar] {
@@ -160,7 +159,6 @@
             top: @base + @grid_spacing * 2;
         }
     }
-
     // top
 
     &[headbar] {
@@ -200,3 +198,7 @@
 .clearfix {
     clear: both;
 }
+
+.z-index.z-top {
+    z-index: @lightbox_z_index + 1;
+}

package/pacem/layout/mixins.less

@@ -127,6 +127,30 @@
     }
 }
 
+.ToolButtons(@minheight) {
+
+    .@{PCSS}-button,
+    @{P}-button {
+        width: @minheight * 1.3333;
+        height: @minheight;
+        margin: 0;
+
+        &.button-square,
+        &.circular,
+        &.button-circle,
+        &.button-circular {
+            width: @minheight;
+            margin: 0 @minheight / 6;
+
+            &::before {
+                font-size: @minheight * 2 / 3;
+                line-height: @minheight;
+                width: $line-height;
+            }
+        }
+    }
+}
+
 .Panel(@prefix) {
     padding: 0 /*0 @grid_spacing/4 0*/;
     text-rendering: optimizeSpeed;
@@ -222,26 +246,7 @@
         right: @grid_spacing/1.5;
         z-index: 1;
 
-        .@{PCSS}-button,
-        @{P}-button {
-            width: @_min_height * 1.3333;
-            height: @_min_height;
-            margin: 0;
-
-            &.button-square,
-            &.circular,
-            &.button-circle,
-            &.button-circular {
-                width: @_min_height;
-                margin: 0 @_min_height / 6;
-
-                &::before {
-                    font-size: @_min_height * 2 / 3;
-                    line-height: @_min_height;
-                    width: $line-height;
-                }
-            }
-        }
+        .ToolButtons(@_min_height);
     }
 
     &.@{prefix}-rise {

package/pacem/theme-dark.less

@@ -70,6 +70,7 @@
 
 // layout
 @layout_aside_width: 10 * @grid_spacing;
+@layout_aside_padding: /*@layout_aside_width + @grid_cell;  */ @grid_cell; // <- desktop site only
 @layout_header_height: @grid_cell;
 @layout_toolbar_height: @grid_spacing;
 @layout_footer_height: @layout_header_height - @layout_toolbar_height;
@@ -211,6 +212,8 @@
 @datarow_alt_color: fade(darken(@color_background, 5), 20);
 
 // menu
+@menu_hamburger_button_size: @layout_header_height;
+@menu_hamburger_button_desktop_size: @grid_cell;
 @menu_link_color: fade(@color_default, 60);
 @menu_link_hover_color: @color_default;
 @menu_link_active_color: @color_primary;
@@ -605,6 +608,7 @@
     width: 1em;
     position: relative;
     vertical-align: middle;
+    border-radius: 50%;
 }
 
 /*#endregion*/

package/pacem/ui/dark/icon.less

@@ -3,10 +3,12 @@
 @{P}-icon {
     display: inline-block;
     vertical-align: middle;
+    border-radius: 50%;
 
-    > i, 
-    > i.@{PCSS}-icon, 
-    > img, 
+    > i,
+    > i.@{PCSS}-icon,
+    > i.material-icons,
+    > img,
     > svg {
         display: block;
     }

package/pacem/ui/dark/menu.less

@@ -213,10 +213,10 @@
     border: none;
     top: 0;
     cursor: pointer;
-    height: @layout_header_height;
+    height: @menu_hamburger_button_size;
     width: $height;
     background: center center no-repeat;
-    background-size: .8 * @layout_header_height;
+    background-size: .8 * @menu_hamburger_button_size;
     margin: 0;
 
     button.@{PCSS}-button {
@@ -225,7 +225,7 @@
 }
 
 @{P}-button.@{PCSS}-menu {
-    @_avail: @layout_header_height;
+    @_avail: @menu_hamburger_button_size;
     @_sz: round(.5 * @_avail);
     @_pad: round(.5 * (@_avail - @_sz));
 
@@ -299,13 +299,13 @@
 
     @{P}-menu {
         font-size: .8em;
-        z-index: @header_z_index - 10;
 
         .@{PCSS}-hamburger-menu {
             width: @_w;
 
             nav {
                 transition-delay: 0.2s;
+                width: @_w;
             }
 
             &.menu-open,
@@ -313,22 +313,45 @@
                 transform: translateX(-100%) translateY(0) translateZ(0);
 
                 nav {
-                    transition-delay: .4s;
+                    transition-delay: 0s;
                     transform: translateX(100%) translateY(0) translateZ(0);
                 }
             }
+        }
 
-            nav {
-                background: none;
-                backdrop-filter: none;
-                grid-row: ~"1/9";
-                width: @_w;
-                padding-top: @grid_spacing + @layout_header_height;
+
+        &.menu-sync {
+            // font-size: .8em;
+            z-index: @header_z_index - 10;
+
+            .@{PCSS}-hamburger-menu {
+                // width: @_w;
+                nav {
+                    transition-delay: 0.2s;
+                }
+                &.menu-open,
+                &.@{PCSS}-shown {
+                    // transform: translateX(-100%) translateY(0) translateZ(0);
+
+                    nav {
+                        transition-delay: .4s;
+                        // transform: translateX(100%) translateY(0) translateZ(0);
+                    }
+                }
+
+                nav {
+                    background: none;
+                    backdrop-filter: none;
+                    grid-row: ~"1/9";
+                    // width: @_w;
+                    padding-top: @grid_spacing + @layout_header_height;
+                }
             }
         }
     }
 
-    .@{PCSS}-body {
+    .@{PCSS}-body.@{PCSS}-menu-open,
+    .@{PCSS}-body.@{PCSS}-menu-close {
         /* #region all grid row template configurations*/
         .@{PCSS}-hamburger-menu {
             grid-template-rows: @_toolbar_height // 1 header 1/2
@@ -438,7 +461,7 @@
     }
 
     @{P}-button.@{PCSS}-menu.@{PCSS}-hamburger {
-        @_avail: @grid_cell;
+        @_avail: @menu_hamburger_button_desktop_size;
         @_sz: round(.5 * @_header_height);
         @_pad: round(.5 * (@_avail - @_sz));
 

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.20.0",
+  "version": "0.20.1-atlantis",
   "name": "pacem-less",
   "homepage": "https://js.pacem.it",
   "repository": {