feat: updated search form + clear button styles

zendesk · Mar 14, 2022 · ca91727 · ca91727
1 parent cbd84e5
commit ca91727
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 13 deletions.
diff --git a/style.css b/style.css
@@ -1120,19 +1120,28 @@ ul {
   -webkit-appearance: none;
 }
 
+.search input[type="search"]:-webkit-autofill, .search input[type="search"]:-webkit-autofill:hover, .search input[type="search"]:-webkit-autofill:focus {
+  -webkit-box-shadow: 0 0 0 1000px #fff inset;
+}
+
 .search .clear-button {
   align-items: center;
   box-sizing: border-box;
   color: #777;
+  cursor: pointer;
   display: none;
   flex: none;
   justify-content: center;
   padding: 0 15px;
-  transition: border 0.12s ease-in-out, color 0.12s ease-in-out;
+}
+
+.search .clear-button:hover, .search .clear-button:focus {
+  background-color: $brand_color;
+  color: #fff;
 }
 
 .search .clear-button:focus {
-  border: 1px solid $brand_color;
+  box-shadow: 0 0 0 3px $brand_color;
   outline: none;
 }
 

diff --git a/styles/_search.scss b/styles/_search.scss
@@ -59,30 +59,32 @@ $padding-right: 20px;
       -webkit-appearance: none;
     }
 
-    // &:-webkit-autofill,
-    // &:-webkit-autofill:hover, 
-    // &:-webkit-autofill:focus {
-    //   -webkit-box-shadow: 0 0 0 1000px #fff inset;
-    // }
-
-    // &:-webkit-autofill {
-    //   border-right: 1px solid transparent;
-    // }
+    &:-webkit-autofill,
+    &:-webkit-autofill:hover, 
+    &:-webkit-autofill:focus {
+      -webkit-box-shadow: 0 0 0 1000px #fff inset;
+    }
 
   }
 
   .clear-button {
     align-items: center;
     box-sizing: border-box;
     color: $icon-color;
+    cursor: pointer;
     display: none;
     flex: none;
     justify-content: center;
     padding: 0 15px;
-    transition: border $input-transition, color $input-transition;
+
+    &:hover,
+    &:focus {
+      background-color: $brand-color;
+      color: #fff;
+    }
 
     &:focus {
-      border: 1px solid $brand_color;
+      box-shadow: 0 0 0 3px $brand_color;
       outline: none;
     }