pacem-less 0.20.2-babylon → 0.20.2-corinth

package/pacem/scaffolding/dark/slider.less

@@ -110,20 +110,17 @@
     }
 }
 
-.@{PCSS}-fieldgroup,
-@{P}-form:not(.form-minimal) > @{P}-form-field:not(.field-full) > @{P}-form:not(.@{PCSS}-readonly),
-@{P}-form-field:not(.field-minimal) > @{P}-form:not(.@{PCSS}-readonly) {
-    @{P}-slider {
-        .FormFieldItemWrapperCore();
+.@{PCSS}-fieldgroup @{P}-slider,
+@{P}-form:not(.form-minimal) @{P}-form-field:not(.field-minimal) > @{P}-form:not(.@{PCSS}-readonly) > .@{PCSS}-input-container > @{P}-slider {
+    .FormFieldItemWrapperCore();
 
-        > .@{PCSS}-slider {
-            *[min] {
-                padding-left: @grid_spacing/3;
-            }
+    > .@{PCSS}-slider {
+        *[min] {
+            padding-left: @grid_spacing/3;
+        }
 
-            *[max] {
-                padding-right: @grid_spacing/3;
-            }
+        *[max] {
+            padding-right: @grid_spacing/3;
         }
     }
 }
@@ -190,7 +187,7 @@
 }
 
 /* form-field context */
-@{P}-form-field @{P}-slider {
+@{P}-form-field @{P}-slider > .@{PCSS}-slider {
 
     .slider-footer {
         .FontTech(.8);
@@ -198,8 +195,9 @@
         align-items: center;
         flex-direction: row;
         padding-left: @grid_spacing;
+        padding-bottom: @grid_spacing/3;
         .Ellipsed();
-        color: fade(@color_tech, 100);
+        // color: fade(@color_tech, 100);
 
         &::before {
             .Icon('label', @grid_spacing/1.5);

package/pacem/ui/dark/button.less

@@ -517,8 +517,11 @@ body.@{PCSS}-animations {
 
     hr {
         border: 0;
-        border-bottom: 1px solid fade(@color_default, 50);
+        height: 1px;
+        background-color: fade(@color_dark, 10);
+        border-bottom: 1px solid fade(@color_light, 5);
         margin: @grid_spacing / 6 @grid_spacing / 8;
+
     }
 }
 

package/pacem/ui/dark/index.less

@@ -74,4 +74,5 @@
 @import "view";
 @import "slideshow";
 @import "timeline";
-@import "window";
+@import "window";
+@import "sticky-header";

package/pacem/ui/dark/menu.less

@@ -32,7 +32,7 @@
     z-index: @hamburger_z_index;
 }
 
-.@{PCSS}-hamburger-menu {
+.@{PCSS}-menu {
     display: grid;
     grid-template-rows: @_header_height // header 1
     @_toolbar_height // toolbar 2
@@ -54,8 +54,8 @@
         min-width: @_w;
         box-sizing: border-box;
         padding: @grid_cell 0 @grid_spacing 0;
-        border-right: 1px solid fade(@color_default, 10);
         transition: transform .325s cubic-bezier(0.39, 0.575, 0.565, 1) .5s;
+        border-right: 1px solid fade(@color_default, 10);
 
         .menu-item when (@menuitem_borders = true) {
             border-top: 1px solid @color_border_light;
@@ -300,7 +300,7 @@
     @{P}-menu {
         font-size: .8em;
 
-        .@{PCSS}-hamburger-menu {
+        .@{PCSS}-menu {
             width: @_w;
 
             nav {
@@ -324,11 +324,12 @@
             // font-size: .8em;
             z-index: @header_z_index - 10;
 
-            .@{PCSS}-hamburger-menu {
+            .@{PCSS}-menu {
                 // width: @_w;
                 nav {
                     transition-delay: 0.2s;
                 }
+
                 &.menu-open,
                 &.@{PCSS}-shown {
                     // transform: translateX(-100%) translateY(0) translateZ(0);
@@ -350,10 +351,10 @@
         }
     }
 
+    /* #region all grid row template configurations*/
     .@{PCSS}-body.@{PCSS}-menu-open,
     .@{PCSS}-body.@{PCSS}-menu-close {
-        /* #region all grid row template configurations*/
-        .@{PCSS}-hamburger-menu {
+        @{P}-menu.menu-sync .@{PCSS}-menu {
             grid-template-rows: @_toolbar_height // 1 header 1/2
             max(0, @_header_height - @_toolbar_height) // 2 header 2/2
             @_toolbar_height // 3 toolbar
@@ -363,9 +364,13 @@
             @_toolbar_height // 7 footer 2/3
             auto; // 8 footer 3/3
         }
+    }
 
-        &[bigfooter] {
-            .@{PCSS}-hamburger-menu {
+    .@{PCSS}-body.@{PCSS}-menu-open[bigfooter] @{P}-menu,
+    .@{PCSS}-body.@{PCSS}-menu-close[bigfooter] @{P}-menu,
+    @{P}-menu.menu-bigfooter {
+        &.menu-sync {
+            .@{PCSS}-menu {
                 grid-template-rows: @_toolbar_height // 1 header 1/2
                 @_header_height - @_toolbar_height // 2 header 2/2
                 @_toolbar_height // 3 toolbar
@@ -376,66 +381,134 @@
                 @_toolbar_height; // 8 footer 3/3
             }
         }
-        /* #endregion*/
-        // layout with a header?
-        &[header] {
-            @{P}-menu {
-                .@{PCSS}-hamburger-menu {
+    }
+    /* #endregion*/
 
-                    nav {
-                        padding-top: @grid_spacing;
-                        grid-row-start: 3;
-                    }
+    // layout with a header?
+    .@{PCSS}-body.@{PCSS}-menu-open[header]:not(.sticky-header-fade) @{P}-menu,
+    .@{PCSS}-body.@{PCSS}-menu-close[header]:not(.sticky-header-fade) @{P}-menu,
+    @{P}-menu.menu-header {
+        &.menu-sync {
+            .@{PCSS}-menu {
+
+                nav {
+                    padding-top: @grid_spacing;
+                    grid-row-start: 3;
                 }
             }
-            // layout with header AND headbar?
-            &[headbar],
-            &[headbar-prepend] {
-                @{P}-menu {
-                    .@{PCSS}-hamburger-menu {
-
-                        nav {
-                            grid-row-start: 4;
-                        }
-                    }
+        }
+    }
+
+    .@{PCSS}-body.@{PCSS}-menu-open[header][headbar]:not(.sticky-header-fade) @{P}-menu,
+    .@{PCSS}-body.@{PCSS}-menu-close[header][headbar]:not(.sticky-header-fade) @{P}-menu,
+    .@{PCSS}-body.@{PCSS}-menu-open[header][headbar-prepend]:not(.sticky-header-fade) @{P}-menu,
+    .@{PCSS}-body.@{PCSS}-menu-close[header][headbar-prepend]:not(.sticky-header-fade) @{P}-menu,
+    .@{PCSS}-body.@{PCSS}-menu-open[headbar] @{P}-menu.menu-header,
+    .@{PCSS}-body.@{PCSS}-menu-open[headbar-prepend] @{P}-menu.menu-header,
+    .@{PCSS}-body.@{PCSS}-menu-close[headbar] @{P}-menu.menu-header,
+    .@{PCSS}-body.@{PCSS}-menu-close[headbar-prepend] @{P}-menu.menu-header,
+    @{P}-menu.menu-header.menu-headbar,
+    @{P}-menu.menu-header.menu-headbar-prepend {
+        // layout with header AND headbar?
+        &.menu-sync {
+            .@{PCSS}-menu {
+
+                nav {
+                    grid-row-start: 4;
                 }
             }
         }
+    }
+
+    .@{PCSS}-body.@{PCSS}-menu-open[headbar]:not([header]) @{P}-menu:not(.menu-header),
+    .@{PCSS}-body.@{PCSS}-menu-close[headbar]:not([header]) @{P}-menu:not(.menu-header),
+    .@{PCSS}-body.@{PCSS}-menu-open[headbar].sticky-header-fade @{P}-menu:not(.menu-header),
+    .@{PCSS}-body.@{PCSS}-menu-close[headbar].sticky-header-fade @{P}-menu:not(.menu-header),
+    .@{PCSS}-body.@{PCSS}-menu-open[headbar-prepend]:not([header]) @{P}-menu:not(.menu-header),
+    .@{PCSS}-body.@{PCSS}-menu-close[headbar-prepend]:not([header]) @{P}-menu:not(.menu-header),
+    .@{PCSS}-body.@{PCSS}-menu-open[headbar-prepend].sticky-header-fade @{P}-menu:not(.menu-header),
+    .@{PCSS}-body.@{PCSS}-menu-close[headbar-prepend].sticky-header-fade @{P}-menu:not(.menu-header),
+    @{P}-menu.menu-headbar:not(.menu-header),
+    @{P}-menu.menu-headbar-prepend:not(.menu-header) {
         // headbars without header?
-        &[headbar], &[headbar-prepend] {
+        &.menu-sync {
+            .@{PCSS}-menu {
 
-            &:not([header]) {
-                @{P}-menu {
-                    .@{PCSS}-hamburger-menu {
+                nav {
+                    grid-row-start: 2;
+                }
+            }
+        }
+    }
 
-                        nav {
-                            grid-row-start: 2;
-                        }
-                    }
+    .@{PCSS}-body.@{PCSS}-menu-open[footer] @{P}-menu,
+    .@{PCSS}-body.@{PCSS}-menu-close[footer] @{P}-menu,
+    .@{PCSS}-body.@{PCSS}-menu-open[bigfooter] @{P}-menu,
+    .@{PCSS}-body.@{PCSS}-menu-close[bigfooter] @{P}-menu,
+    @{P}-menu.menu-footer,
+    @{P}-menu.menu-bigfooter {
+        // headbars without footers?
+        &.menu-sync {
+            .@{PCSS}-menu {
+
+                nav {
+                    grid-row-end: 6;
                 }
             }
         }
-        // layout with footers?
-        &[footer], &[bigfooter] {
-            @{P}-menu {
-                .@{PCSS}-hamburger-menu {
-                    nav {
-                        grid-row-end: 6;
-                    }
+    }
+
+
+    .@{PCSS}-body.@{PCSS}-menu-open[footer][footbar] @{P}-menu,
+    .@{PCSS}-body.@{PCSS}-menu-close[footer][footbar] @{P}-menu,
+    .@{PCSS}-body.@{PCSS}-menu-open[footer][footbar-append] @{P}-menu,
+    .@{PCSS}-body.@{PCSS}-menu-close[footer][footbar-append] @{P}-menu,
+    .@{PCSS}-body.@{PCSS}-menu-open[footbar] @{P}-menu.menu-footer,
+    .@{PCSS}-body.@{PCSS}-menu-open[footbar-append] @{P}-menu.menu-footer,
+    .@{PCSS}-body.@{PCSS}-menu-close[footbar] @{P}-menu.menu-footer,
+    .@{PCSS}-body.@{PCSS}-menu-close[footbar-append] @{P}-menu.menu-footer,
+    .@{PCSS}-body.@{PCSS}-menu-open[bigfooter][footbar] @{P}-menu,
+    .@{PCSS}-body.@{PCSS}-menu-close[bigfooter][footbar] @{P}-menu,
+    .@{PCSS}-body.@{PCSS}-menu-open[bigfooter][footbar-append] @{P}-menu,
+    .@{PCSS}-body.@{PCSS}-menu-close[bigfooter][footbar-append] @{P}-menu,
+    .@{PCSS}-body.@{PCSS}-menu-open[footbar] @{P}-menu.menu-bigfooter,
+    .@{PCSS}-body.@{PCSS}-menu-open[footbar-append] @{P}-menu.menu-bigfooter,
+    .@{PCSS}-body.@{PCSS}-menu-close[footbar] @{P}-menu.menu-bigfooter,
+    .@{PCSS}-body.@{PCSS}-menu-close[footbar-append] @{P}-menu.menu-bigfooter,
+    @{P}-menu.menu-footer.menu-footbar,
+    @{P}-menu.menu-footer.menu-footbar-append,
+    @{P}-menu.menu-bigfooter.menu-footbar,
+    @{P}-menu.menu-bigfooter.menu-footbar-append {
+        // layout with footer AND footbar?
+        &.menu-sync {
+            .@{PCSS}-menu {
+
+                nav {
+                    grid-row-end: 5;
                 }
             }
-            // layout with footer AND footbar?
-            &[footbar],
-            &[footbar-append] {
-                @{P}-menu {
-                    .@{PCSS}-hamburger-menu {
-                        nav {
-                            grid-row-end: 5;
-                        }
-                    }
+        }
+    }
+
+    .@{PCSS}-body.@{PCSS}-menu-open:not([footer]):not([bigfooter])[footbar] @{P}-menu:not(.menu-footer):not(.menu-bigfooter),
+    .@{PCSS}-body.@{PCSS}-menu-open:not([footer]):not([bigfooter])[footbar] @{P}-menu:not(.menu-footer):not(.menu-bigfooter),
+    .@{PCSS}-body.@{PCSS}-menu-open:not([footer]):not([bigfooter])[footbar-append] @{P}-menu:not(.menu-footer):not(.menu-bigfooter),
+    .@{PCSS}-body.@{PCSS}-menu-open:not([footer]):not([bigfooter])[footbar-append] @{P}-menu:not(.menu-footer):not(.menu-bigfooter),
+    @{P}-menu.menu-footbar:not(.menu-footer):not(.menu-bigfooter),
+    @{P}-menu.menu-footbar-append:not(.menu-footer):not(.menu-bigfooter) {
+        // footbars without footer?
+        &.menu-sync {
+            .@{PCSS}-menu {
+
+                nav {
+                    grid-row-end: 7;
                 }
             }
         }
+    }
+
+    .@{PCSS}-body.@{PCSS}-menu-open,
+    .@{PCSS}-body.@{PCSS}-menu-close {
         // toolbar on top? Then move down the buttons
         &[headbar]:not([header]),
         &[headbar-prepend] {
@@ -445,37 +518,35 @@
                 top: @_toolbar_height;
             }
         }
-        // footbars without footer?
-        &[footbar],
-        &[footbar-append] {
+    }
 
-            &:not([footer]):not([bigfooter]) {
-                .@{PCSS}-hamburger-menu {
+    /*@{P}-menu.menu-sync {
+        @{P}-button.@{PCSS}-menu.@{PCSS}-hamburger {
+            @_avail: @menu_hamburger_button_desktop_size;
+            @_sz: round(.5 * @_header_height);
+            @_pad: round(.5 * (@_avail - @_sz));
 
-                    nav {
-                        grid-row-end: 7;
-                    }
-                }
+            width: @_avail;
+
+            &::before {
+                left: @_pad;
             }
         }
-    }
-
-    @{P}-button.@{PCSS}-menu.@{PCSS}-hamburger {
-        @_avail: @menu_hamburger_button_desktop_size;
-        @_sz: round(.5 * @_header_height);
-        @_pad: round(.5 * (@_avail - @_sz));
+    }*/
+}
 
-        width: @_avail;
+.@{PCSS}-body.@{PCSS}-menu-close.sticky-header-fade {
 
-        &::before {
-            left: @_pad;
-        }
+    @{P}-button.@{PCSS}-menu.@{PCSS}-hamburger {
+        transform: translateY(-@_header_height);
     }
+}
 
-    /* #endregion */
-    // see body modifications in `../body.less`
-    .@{PCSS}-animations {
+/* #endregion */
+// see body modifications in `../body.less`
+.@{PCSS}-body.@{PCSS}-animations {
 
+    @{P}-menu {
         .@{PCSS}-menu-item, .menu-item {
 
             @{P}-button, button,
@@ -484,4 +555,12 @@
             }
         }
     }
+
+    &.sticky-header-scroll {
+
+        @{P}-button.@{PCSS}-menu.@{PCSS}-hamburger {
+            transition: transform @easing_out_sine .3s, opacity .2s;
+            transition-delay: .25s;
+        }
+    }
 }

package/pacem/ui/dark/sticky-header.less

@@ -0,0 +1,41 @@
+@import "../shared";
+
+@{P}-sticky-header {
+    .Inert();
+
+    &when(@shadows = true) {
+        box-shadow: 0 1px @grid_spacing rgba(0,0,0,0.5);
+    }
+}
+
+.@{PCSS}-body {
+
+    &.sticky-header-top {
+        // when at top (<= threshold)
+        header[pacem], .@{PCSS}-header {
+        }
+    }
+
+    &.sticky-header-scroll {
+        // while scrolling (> threshold)
+        header[pacem], .@{PCSS}-header {
+        }
+    }
+    /*#region layout overrides*/
+    &.sticky-header-fade[header],
+    &.sticky-header-fade[header][headbar],
+    &.sticky-header-fade[header][headbar-prepend] {
+        // while scrolling (> threshold)
+        header[pacem], .@{PCSS}-header {
+            transform: translateY(-100%);
+        }
+    }
+
+    &[headbar][header].sticky-header-fade {
+        .@{PCSS}-toolbar.toolbar-header {
+            transform: translateX(0) translateY(0);
+        }
+    }
+    /*#endregion*/
+}
+

package/pacem/ui/light/button.less

@@ -0,0 +1,8 @@
+@import '../../theme-light';
+.@{PCSS}-contextmenu {
+
+    hr {
+        background-color: fade(@color_dark, 7);
+        border-bottom: 1px solid fade(@color_light, 60);
+    }
+}

package/pacem/ui/light/index.less

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

package/pacem/ui/phousys/button.less

@@ -0,0 +1,8 @@
+@import '../../theme-phousys';
+.@{PCSS}-contextmenu {
+
+    hr {
+        background-color: transparent;
+        border-bottom: 1px dashed fade(@color_light, 5);
+    }
+}

package/pacem/ui/phousys/index.less

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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.20.2-babylon",
+  "version": "0.20.2-corinth",
   "name": "pacem-less",
   "homepage": "https://js.pacem.it",
   "repository": {