feat: started updating search styles for smaller viewports

zendesk · Mar 14, 2022 · 1fa9e54 · 1fa9e54
1 parent ea8d8e7
commit 1fa9e54
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 11 deletions.
diff --git a/style.css b/style.css
@@ -1138,6 +1138,7 @@ ul {
   flex: none;
   justify-content: center;
   padding: 0 15px;
+  pointer-events: none;
   transition: .12s ease-in-out;
 }
 
@@ -1158,6 +1159,7 @@ ul {
 
 .search:focus-within .clear-button {
   color: #777;
+  pointer-events: auto;
 }
 
 .search-icon {
@@ -1254,21 +1256,24 @@ ul {
 }
 
 .sub-nav {
+  align-items: baseline;
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
+  gap: 15px 30px;
   justify-content: space-between;
-  margin-bottom: 30px;
-  min-height: 50px;
-  padding-bottom: 15px;
+  margin-bottom: 55px;
 }
 
 @media (min-width: 768px) {
   .sub-nav {
     align-items: baseline;
-    flex-direction: row;
   }
 }
 
+.sub-nav .breadcrumbs {
+  margin: 0;
+}
+
 .sub-nav .search-container {
   flex: 0 1 300px;
 }

diff --git a/styles/_search.scss b/styles/_search.scss
@@ -75,6 +75,7 @@ $icon-color: #777;
     flex: none;
     justify-content: center;
     padding: 0 15px;
+    pointer-events: none;
     transition: .12s ease-in-out;
 
     [dir="rtl"] & {
@@ -96,6 +97,7 @@ $icon-color: #777;
 
   &:focus-within .clear-button {
     color: $icon-color;
+    pointer-events: auto;
   }
 
 }

diff --git a/styles/_sub-nav.scss b/styles/_sub-nav.scss
@@ -1,17 +1,25 @@
 .sub-nav {
   @include tablet {
     align-items: baseline;
-    flex-direction: row;
+    // flex-direction: row;
   }
 
+  align-items: baseline;
   display: flex;
-  flex-direction: column;
+  // flex-direction: column;
+  flex-wrap: wrap;
+  gap: 15px 30px;
   justify-content: space-between;
-  margin-bottom: 30px;
-  min-height: 50px;
-  padding-bottom: 15px;
+  margin-bottom: 55px;
+  // min-height: 50px;
+  // padding-bottom: 15px;
 
-  //Inner pages search field
+  // Inner pages breadcrumbs
+  .breadcrumbs {
+    margin: 0;
+  }
+
+  // Inner pages search field
   .search-container {
     flex: 0 1 300px;
   }