feat: commented out autofill-related styles

zendesk · Mar 14, 2022 · 05c6999 · 05c6999
1 parent 5f016e6
commit 05c6999
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 28 deletions.
diff --git a/style.css b/style.css
@@ -1104,12 +1104,6 @@ ul {
   -webkit-appearance: none;
 }
 
-.search input[type="search"]:-webkit-autofill, .search input[type="search"]:-webkit-autofill:hover,
-.search input[type="search"] input[type="search"]:-webkit-autofill:focus {
-  -webkit-box-shadow: 0 0 0 1000px #fff inset;
-  border-right-color: transparent;
-}
-
 .search input[type="search"],
 .search .clear-button {
   background-color: #fff;
@@ -1139,12 +1133,11 @@ ul {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
   border-left-color: transparent;
-  color: transparent;
+  color: #777;
   display: none;
   flex: none;
   justify-content: center;
   padding: 0 15px;
-  pointer-events: none;
   transition: border .12s ease-in-out, color .12s ease-in-out;
 }
 
@@ -1163,11 +1156,6 @@ ul {
   display: flex;
 }
 
-.search:focus-within .clear-button {
-  color: #777;
-  pointer-events: auto;
-}
-
 .search-icon {
   position: relative;
   top: 50%;

diff --git a/styles/_search.scss b/styles/_search.scss
@@ -2,10 +2,8 @@
 
 $padding-left: 40px;
 $padding-right: 20px;
-
 $icon-color: #777;
 
-
 .search {
   display: flex;
   position: relative;
@@ -38,12 +36,15 @@ $icon-color: #777;
       -webkit-appearance: none;
     }
 
-    &:-webkit-autofill,
-    &:-webkit-autofill:hover, 
-    input[type="search"]:-webkit-autofill:focus {
-      -webkit-box-shadow: 0 0 0 1000px #fff inset;
-      border-right-color: transparent;
-    }
+    // &:-webkit-autofill,
+    // &:-webkit-autofill:hover, 
+    // &:-webkit-autofill:focus {
+    //   -webkit-box-shadow: 0 0 0 1000px #fff inset;
+    // }
+
+    // &:-webkit-autofill {
+    //   border-right: 1px solid transparent;
+    // }
 
   }
 
@@ -77,12 +78,11 @@ $icon-color: #777;
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
     border-left-color: transparent;
-    color: transparent;
+    color: $icon-color;
     display: none;
     flex: none;
     justify-content: center;
     padding: 0 15px;
-    pointer-events: none;
     transition: border .12s ease-in-out, color .12s ease-in-out;
 
     [dir="rtl"] & {
@@ -102,11 +102,6 @@ $icon-color: #777;
     display: flex;
   }
 
-  &:focus-within .clear-button {
-    color: $icon-color;
-    pointer-events: auto;
-  }
-
 }
 
 .search-icon {