Merge pull request #309 from BeAPI/fix/header

fix (header) : handle admin-bar scroll attachment on mobile

Author: francoistibo

.stylelintrc

@@ -32,7 +32,14 @@
                 "custom-property-pattern": null,
                 "indentation": 4,
                 "number-leading-zero": "never",
-                "string-quotes": "double"
+                "string-quotes": "double",
+                "length-zero-no-unit": [
+                    true,
+                    {
+                        "ignore": ["custom-properties"],
+                        "ignoreFunctions": ["var", "/^--/"]
+                    }
+                ]
             }
         }
     ]

src/scss/01-abstract/_variables.scss

@@ -102,9 +102,9 @@ $external-gutter: 25px;
 // ----
 $breakpoints: (
     xs: 480,
-    s: 600,
+    s: 601,         // 601px is a wordpress breakpoint (admin-bar become sticky)
     sm: 768,
-    admin-bar: 784,
+    admin-bar: 784, // admin bar height change
     md: 1024,
     mdl: 1200,
     lg: $container-wide + $external-gutter,

src/scss/03-base/_variables-css.scss

@@ -41,7 +41,11 @@
     /*
      * Admin bar
      */
-    --wp-admin-bar-height: 46px;
+    --wp-admin-bar-height: 0rem;
+
+    .admin-bar {
+        --wp-admin-bar-height: 46px;
+    }
 
     /*
      * Alignments breakpoints
@@ -70,7 +74,9 @@
         /*
          * Admin bar
          */
-        --wp-admin-bar-height: 32px;
+        .admin-bar {
+            --wp-admin-bar-height: 32px;
+        }
     }
 
     @include breakpoints(md) {

src/scss/08-template-parts/_header.scss

@@ -9,7 +9,7 @@
 
     &__inner {
         position: fixed;
-        top: 0;
+        top: var(--wp-admin-bar-height);
         z-index: 10000;
         width: 100%;
         background: var(--wp--preset--color--cyan-bluish-gray);
@@ -163,16 +163,6 @@
         }
     }
 
-    .admin-bar &__inner {
-        top: var(--wp-admin-bar-height);
-    }
-
-    .scroll-up &__inner,
-    .scroll-down &__inner,
-    .scroll-bottom &__inner {
-        top: 0;
-    }
-
     @include breakpoints(lg, max) {
         &__menu {
             position: absolute;
@@ -210,6 +200,14 @@
         }
     }
 
+    @include breakpoints(s, max) {
+        .scroll-up &__inner,
+        .scroll-down &__inner,
+        .scroll-bottom &__inner {
+            top: 0;
+        }
+    }
+
     @include breakpoints(sm) {
         &__menu {
             #{$el}__logo-link {