Update search and minicart styles

hlxsites · Jan 25, 2024 · 152bc42 · 152bc42
1 parent c6bba24
commit 152bc42
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 25 deletions.
diff --git a/blocks/header/header.css b/blocks/header/header.css
@@ -273,7 +273,7 @@ header nav .nav-tools {
   gap: 10px;
 }
 
-header nav .nav-tools button {
+header nav .nav-tools > button, header nav .nav-tools .minicart-wrapper > button {
   color: var(--color-brand-700);
   background: transparent;
   padding: 5px 10px;
@@ -296,12 +296,13 @@ header nav .nav-tools button.nav-search-button {
 
 header .nav-search-input {
   position: absolute;
+  z-index: 99;
   top: var(--nav-height);
+  box-shadow: var(--shape-shadow-2);
   background: var(--color-neutral-50);
   left: 0;
   right: 0;
-  padding: 10px;
-  z-index: 1;
+  padding: 20px;
 }
 
 header .nav-search-input.hidden {
@@ -310,4 +311,15 @@ header .nav-search-input.hidden {
 
 header .nav-search-input input {
   width: 100%;
+  padding: 5px;
 }
+
+@media (width >= 1024px) {
+  header .nav-search-input {
+    left: unset;
+    right: 20px;
+  }
+  header .nav-search-input input {
+    min-width: 400px;
+  }
+}
diff --git a/styles/minicart.css b/styles/minicart.css
@@ -6,8 +6,8 @@
     top: var(--nav-height);
     right: 0;
     left: 0;
-    box-shadow: 3px 4px 4px 0 rgb(0 0 0 / 50%);
-    padding: 0 20px 40px;
+    box-shadow: var(--shape-shadow-2);
+    padding: 20px;
     background: var(--background-color);
     display: flex;
     flex-direction: column;
@@ -21,7 +21,7 @@
 
 .minicart-panel .minicart-header {
     display: flex;
-    height: 55px;
+    justify-content: space-between;
     align-items: center;
 }
 
@@ -33,19 +33,6 @@
     align-items: center;
 }
 
-.minicart-panel .minicart-header .title {
-    border-right: 1px solid var(--color-neutral-500);
-    padding-right: 8px;
-}
-
-.minicart-panel .minicart-header .subtotal {
-    padding-left: 8px;
-}
-
-.minicart-panel .minicart-header .price {
-    padding-left: 8px;
-}
-
 .minicart-panel .minicart-header .close {
     display: none;
 }
@@ -268,27 +255,24 @@
         position: absolute;
         right: 20px;
         top: var(--nav-height);
-        padding: 0 30px 40px;
+        padding: 20px;
         left: unset;
     }
 
     .minicart-panel .minicart-header .close {
         display: block;
-        position: relative;
-        right: -17px;
-        top: 2px;
         width: 22px;
         height: 22px;
         border: 0;
-        margin: 0 0 0 auto;
         border-radius: 0;
         background-repeat: no-repeat;
         background-size: contain;
         background-color: transparent;
         background-image: url('../../icons/x-lg.svg');
         color: var(--color-brand-700);
         line-height: 1.2rem;;
-        padding: 5px 3px 0 0;
+        padding: 0;
+        margin: 0;
         text-align: center;
         font-size: 0;
     }