Refactor and polish css.

Shopify · Feb 24, 2023 · ae042a3 · ae042a3
1 parent 7ddb22b
commit ae042a3
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 17 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -2294,7 +2294,7 @@ product-info .loading-overlay:not(.hidden) ~ *,
 .header {
   display: grid;
   grid-template-areas: 'left-icons heading icons';
-  grid-template-columns: 1fr auto 1fr;
+  grid-template-columns: 1fr 2fr 1fr;
   align-items: center;
 }
 
@@ -2310,7 +2310,7 @@ product-info .loading-overlay:not(.hidden) ~ *,
   .header--top-left.drawer-menu,
   .header--middle-left.drawer-menu {
     grid-template-areas:
-      'left-icons heading icons';
+      'navigation heading icons';
     grid-template-columns: auto 1fr auto;
     column-gap: 1rem;
   }
@@ -2321,10 +2321,6 @@ product-info .loading-overlay:not(.hidden) ~ *,
     column-gap: 2rem;
   }
 
-  .header--middle-center {
-    grid-template-areas: 'left-icons heading icons';
-  }
-
   .header--middle-center:not(.drawer-menu) {
     grid-template-areas: 'navigation heading icons';
     grid-template-columns: 1fr auto 1fr;
@@ -2411,8 +2407,8 @@ product-info .loading-overlay:not(.hidden) ~ *,
 }
 
 @media screen and (min-width: 990px) {
-  header.header--middle-left .header__heading-link,
-  header.header--top-left .header__heading-link {
+  .header--middle-left .header__heading-link,
+  .header--top-left .header__heading-link {
     margin-left: -0.75rem;
   }
 
@@ -2421,6 +2417,12 @@ product-info .loading-overlay:not(.hidden) ~ *,
     justify-self: start;
   }
 
+  .header--middle-center .header__heading-link,
+  .header--middle-center .header__heading {
+    justify-self: center;
+    text-align: center;
+  }
+
   .header--top-center .header__heading-link,
   .header--top-center .header__heading {
     justify-self: center;
@@ -2497,20 +2499,16 @@ menu-drawer + .header__search {
 .header > .header__search {
   grid-area: left-icons;
   justify-self: start;
-  margin-left: 3.2rem;
 }
 
-.header:not(.drawer-menu) > .header__search {
-  margin-left: 0;
+.header--top-center.drawer-menu > .header__search {
+  margin-left: 3.2rem;
 }
 
-header-drawer {
+.header--top-center header-drawer {
   grid-area: left-icons;
-  justify-self: start;
 }
 
-
-
 .header:not(.header--has-menu) * > .header__search {
   display: none;
 }

diff --git a/sections/header.liquid b/sections/header.liquid
@@ -662,7 +662,7 @@
 </{% if section.settings.sticky_header_type != 'none' %}sticky-header{% else %}div{% endif %}>
 
 {%- if settings.cart_type == "notification" -%}
-  {%- render 'cart-notification', color_scheme: section.settings.color_scheme, desktop_menu_type: section.settings.menu_type_desktop  -%}
+  {%- render 'cart-notification', color_scheme: section.settings.color_scheme, desktop_menu_type: section.settings.menu_type_desktop -%}
 {%- endif -%}
 
 {% javascript %}

diff --git a/snippets/cart-notification.liquid b/snippets/cart-notification.liquid
@@ -3,7 +3,7 @@
 
   Accepts:
   - color_scheme: {String} sets the color scheme of the notification (optional)
-  - desktop_menu_type: {String} sets the desktop menu type which allows us to use the right css class using the snippet in the header (optinal)
+  - desktop_menu_type: {String} passes the desktop menu type which allows us to use the right css class (optional)
 
   Usage:
   {% render 'cart-notification' %}