Merge pull request #301 from BeAPI/feature/admin-bar

Admin bar css variable

Author: francoistibo

src/scss/01-abstract/_variables.scss

@@ -110,12 +110,6 @@ $breakpoints: (
 );
 // /!\ WARNING: If you use a breakpoint of 1280px, it causes a bug under Window Edge with a device pixel ratio higher than 1. Prefer to use the value 1279px.
 
-// ----
-// wp admin bar
-// ----
-$wp-admin-bar-mobile-height: 46px;
-$wp-admin-bar-desktop-height: 32px;
-
 // ----
 // border
 // ----

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

@@ -33,15 +33,20 @@
     --responsive--alignwide-width: calc(100% - #{$external-gutter * 2});
     --responsive--alignfull-width: 100%;
 
-
     /*
      * Animation speeds
      */
     --speed: 1s;
 
+    /*
+     * Admin bar
+     */
+    --wp-admin-bar-height: 46px;
+
     /*
      * Alignments breakpoints
      */
+
     @media screen and (min-width: #{$container-default + $external-gutter * 2}) {
         --responsive--aligndefault-width: #{$container-default};
     }
@@ -60,6 +65,14 @@
     /*
      * Global breakpoints
      */
+
+    @include breakpoints(admin-bar) {
+        /*
+         * Admin bar
+         */
+        --wp-admin-bar-height: 32px;
+    }
+
     @include breakpoints(md) {
         /*
          * Spacing

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

@@ -164,7 +164,7 @@
     }
 
     .admin-bar &__inner {
-        top: $wp-admin-bar-mobile-height;
+        top: var(--wp-admin-bar-height);
     }
 
     .scroll-up &__inner,
@@ -231,12 +231,6 @@
         }
     }
 
-    @include breakpoints(admin-bar) {
-        .admin-bar &__inner {
-            top: $wp-admin-bar-desktop-height;
-        }
-    }
-
     @include breakpoints(lg) {
         .container {
             display: flex;