Update site header template and update css fallback

pixelgrade · Feb 11, 2021 · 48d46ed · 48d46ed
1 parent 44ca368
commit 48d46ed
Show file tree

Hide file tree

Showing 4 changed files with 249 additions and 94 deletions.
diff --git a/dist/css/blocks/nova-blocks/header-rtl.css b/dist/css/blocks/nova-blocks/header-rtl.css
@@ -112,28 +112,12 @@
     display: none; } }
 
 @media only screen and (min-width: 1000px) {
-  .site-header__content {
-    display: grid;
-    align-items: center;
-    grid-gap: 1em; }
-    .site-header__content > * {
-      justify-content: center; }
-    .site-header__content > :first-child {
-      justify-content: flex-start; }
-    .site-header__content > :last-child {
-      justify-content: flex-end; }
-    .site-header__content > .wp-block-novablocks-navigation > .menu,
-    .site-header__content > .wp-block-novablocks-navigation > .menu > ul {
-      justify-content: inherit; }
-    .site-header--logo-left .site-header__content {
-      grid-template-columns: auto 1fr; }
-    .site-header--logo-center .site-header__content {
-      grid-template-columns: 1fr auto 1fr; }
-    .site-header--logo-right .site-header__content {
-      grid-template-columns: 1fr auto; }
-    .site-header__content.alignfull[class] {
-      margin-right: 0;
-      margin-left: 0; }
+  .site-header__content > .wp-block-novablocks-navigation > .menu,
+  .site-header__content > .wp-block-novablocks-navigation > .menu > ul {
+    justify-content: inherit; }
+  .site-header__content.alignfull[class] {
+    margin-right: 0;
+    margin-left: 0; }
   .c-menu-toggle__checkbox,
   .c-menu-toggle {
     display: none; } }
@@ -188,3 +172,57 @@
     opacity: 0; }
   .c-menu-toggle__checkbox:checked ~ .c-menu-toggle .c-menu-toggle__slice--bottom {
     transform: rotate(45deg); } }
+
+.site-header--secondary {
+  width: 100%;
+  z-index: 1100;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .15s ease-in; }
+
+.is-visible {
+  opacity: 1;
+  pointer-events: auto; }
+
+.site-header--sticky {
+  position: fixed;
+  top: var(--admin-bar-height, 0); }
+
+@media not screen and (min-width: 1000px) {
+  .site-header--secondary[class][class][class] {
+    display: none !important; }
+  .site-header .site-header__row {
+    display: flex;
+    flex-direction: column; }
+    .site-header .site-header__row .site-header__menu--primary {
+      order: -1; }
+  .site-header__row--primary {
+    order: -1; } }
+
+@media only screen and (min-width: 1000px) {
+  .site-header__row {
+    display: flex;
+    align-items: center; }
+    .site-header__row > :first-child:not(:last-child) {
+      justify-content: flex-start;
+      flex-shrink: 1;
+      flex-basis: 50%; }
+    .site-header__row > :only-child {
+      justify-content: center;
+      flex-grow: 1; }
+      .site-header__row > :only-child,
+      .site-header__row > :only-child .menu {
+        justify-content: center; }
+    .site-header__row > :not(:first-child):not(:last-child) {
+      justify-content: center; }
+    .site-header__row > :last-child:not(:first-child) {
+      flex-shrink: 1;
+      flex-basis: 50%;
+      margin-right: auto; }
+      .site-header__row > :last-child:not(:first-child),
+      .site-header__row > :last-child:not(:first-child) .menu {
+        justify-content: flex-end; } }
+
+.site-header--secondary .site-header__row--logo {
+  padding-top: var(--theme-spacing-default);
+  padding-bottom: var(--theme-spacing-default); }
diff --git a/dist/css/blocks/nova-blocks/header.css b/dist/css/blocks/nova-blocks/header.css
@@ -112,28 +112,12 @@
     display: none; } }
 
 @media only screen and (min-width: 1000px) {
-  .site-header__content {
-    display: grid;
-    align-items: center;
-    grid-gap: 1em; }
-    .site-header__content > * {
-      justify-content: center; }
-    .site-header__content > :first-child {
-      justify-content: flex-start; }
-    .site-header__content > :last-child {
-      justify-content: flex-end; }
-    .site-header__content > .wp-block-novablocks-navigation > .menu,
-    .site-header__content > .wp-block-novablocks-navigation > .menu > ul {
-      justify-content: inherit; }
-    .site-header--logo-left .site-header__content {
-      grid-template-columns: auto 1fr; }
-    .site-header--logo-center .site-header__content {
-      grid-template-columns: 1fr auto 1fr; }
-    .site-header--logo-right .site-header__content {
-      grid-template-columns: 1fr auto; }
-    .site-header__content.alignfull[class] {
-      margin-left: 0;
-      margin-right: 0; }
+  .site-header__content > .wp-block-novablocks-navigation > .menu,
+  .site-header__content > .wp-block-novablocks-navigation > .menu > ul {
+    justify-content: inherit; }
+  .site-header__content.alignfull[class] {
+    margin-left: 0;
+    margin-right: 0; }
   .c-menu-toggle__checkbox,
   .c-menu-toggle {
     display: none; } }
@@ -188,3 +172,57 @@
     opacity: 0; }
   .c-menu-toggle__checkbox:checked ~ .c-menu-toggle .c-menu-toggle__slice--bottom {
     transform: rotate(-45deg); } }
+
+.site-header--secondary {
+  width: 100%;
+  z-index: 1100;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .15s ease-in; }
+
+.is-visible {
+  opacity: 1;
+  pointer-events: auto; }
+
+.site-header--sticky {
+  position: fixed;
+  top: var(--admin-bar-height, 0); }
+
+@media not screen and (min-width: 1000px) {
+  .site-header--secondary[class][class][class] {
+    display: none !important; }
+  .site-header .site-header__row {
+    display: flex;
+    flex-direction: column; }
+    .site-header .site-header__row .site-header__menu--primary {
+      order: -1; }
+  .site-header__row--primary {
+    order: -1; } }
+
+@media only screen and (min-width: 1000px) {
+  .site-header__row {
+    display: flex;
+    align-items: center; }
+    .site-header__row > :first-child:not(:last-child) {
+      justify-content: flex-start;
+      flex-shrink: 1;
+      flex-basis: 50%; }
+    .site-header__row > :only-child {
+      justify-content: center;
+      flex-grow: 1; }
+      .site-header__row > :only-child,
+      .site-header__row > :only-child .menu {
+        justify-content: center; }
+    .site-header__row > :not(:first-child):not(:last-child) {
+      justify-content: center; }
+    .site-header__row > :last-child:not(:first-child) {
+      flex-shrink: 1;
+      flex-basis: 50%;
+      margin-left: auto; }
+      .site-header__row > :last-child:not(:first-child),
+      .site-header__row > :last-child:not(:first-child) .menu {
+        justify-content: flex-end; } }
+
+.site-header--secondary .site-header__row--logo {
+  padding-top: var(--theme-spacing-default);
+  padding-bottom: var(--theme-spacing-default); }
diff --git a/src/scss/blocks/nova-blocks/header/fallback/_style.scss b/src/scss/blocks/nova-blocks/header/fallback/_style.scss
@@ -1,4 +1,6 @@
 @import "../../../../setup/mixins/wp-offset";
+@import "../../../../setup/variables";
+@import "../../../../setup/mixins/media-queries";
 @import '../fallback/menu-toggle';
 
 @media only screen and (min-width: 1000px) {
@@ -7,49 +9,22 @@
     // styles from Nova Blocks should only affect blocks created by it
     @import '../fallback/menu';
   }
-
+  
   .site-header__content {
-    display: grid;
-    align-items: center;
-    grid-gap: 1em;
-
-    > * {
-      justify-content: center;
-    }
-
-    > :first-child {
-      justify-content: flex-start;
-    }
-
-    > :last-child {
-      justify-content: flex-end;
-    }
-
+
     > .wp-block-novablocks-navigation {
       > .menu,
       > .menu > ul {
         justify-content: inherit;
       }
     }
-
-    .site-header--logo-left & {
-      grid-template-columns: auto 1fr;
-    }
-
-    .site-header--logo-center & {
-      grid-template-columns: 1fr auto 1fr;
-    }
-
-    .site-header--logo-right & {
-      grid-template-columns: 1fr auto;
-    }
-
+
     &.alignfull[class] {
       margin-left: 0;
       margin-right: 0;
     }
   }
-
+  
   .c-menu-toggle__checkbox,
   .c-menu-toggle {
     display: none;
@@ -60,3 +35,104 @@
   @import '../fallback/mobile';
   @import '../fallback/mobile-transitions';
 }
+
+.site-header--secondary {
+
+  width: 100%;
+  z-index: 1100;
+
+  opacity: 0;
+  pointer-events: none;
+
+  transition: opacity .15s ease-in;
+}
+
+.is-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.site-header {
+
+  &--sticky {
+    position: fixed;
+    top: var(--admin-bar-height, 0);
+  }
+}
+
+@include below(lap) {
+
+  .site-header--secondary[class][class][class] {
+    display: none !important;
+  }
+
+  .site-header {
+
+    .site-header__row {
+      display: flex;
+      flex-direction: column;
+
+      .site-header__menu--primary {
+        order: -1;
+      }
+    }
+  }
+
+  .site-header__row--primary {
+    order: -1;
+  }
+}
+
+@include above(lap) {
+
+  .site-header__row {
+
+    display: flex;
+    align-items: center;
+
+    > :first-child:not(:last-child) {
+      justify-content: flex-start;
+      flex-shrink: 1;
+      flex-basis: 50%;
+    }
+
+    > :only-child {
+      justify-content: center;
+      flex-grow: 1;
+
+      &,
+      .menu {
+        justify-content: center;
+
+      }
+    }
+
+    > :not(:first-child):not(:last-child) {
+      justify-content: center;
+    }
+
+    > :last-child:not(:first-child) {
+
+      flex-shrink: 1;
+      flex-basis: 50%;
+
+      margin-left: auto;
+
+      &,
+      .menu {
+        justify-content: flex-end;
+
+      }
+    }
+
+  }
+}
+
+.site-header--secondary {
+
+  .site-header__row--logo {
+    padding-top: var(--theme-spacing-default);
+    padding-bottom: var(--theme-spacing-default);
+  }
+}
+