feat: vetted + refined rtl styles for search input + clear button

zendesk · Mar 14, 2022 · e585acd · e585acd
1 parent 011b832
commit e585acd
Show file tree

Hide file tree

Showing 4 changed files with 148 additions and 81 deletions.
diff --git a/style.css b/style.css
@@ -250,7 +250,7 @@ textarea {
 input {
   max-width: 100%;
   box-sizing: border-box;
-  transition: border .12s ease-in-out;
+  transition: border 0.12s ease-in-out;
 }
 
 input:not([type="checkbox"]) {
@@ -1073,72 +1073,110 @@ ul {
 }
 
 /***** Search field *****/
+.search-container {
+  position: relative;
+}
+
 .search {
   display: flex;
   position: relative;
 }
 
+.search input[type="search"],
+.search .clear-button {
+  background-color: #fff;
+  border-color: #ddd;
+  border-radius: 30px;
+  border-style: solid;
+  border-width: 1px;
+}
+
+.search input[type="search"]:focus,
+.search .clear-button:focus {
+  border-color: $brand_color;
+}
+
+.search-full input[type="search"],
+.search-full .clear-button {
+  border-color: #fff;
+}
+
 .search input[type="search"] {
   appearance: none;
   -webkit-appearance: none;
   box-sizing: border-box;
   color: #666;
   flex: 1 1 auto;
   height: 40px;
-  padding-left: 40px;
-  padding-right: 20px;
   width: 100%;
 }
 
-[dir="rtl"] .search input[type="search"] {
-  padding-right: 40px;
-  padding-left: 20px;
-}
-
 .search input[type="search"]:focus {
-  border: 1px solid $brand_color;
   color: #555;
 }
 
 .search input[type="search"]::-webkit-search-decoration, .search input[type="search"]::-webkit-search-cancel-button, .search input[type="search"]::-webkit-search-results-button, .search input[type="search"]::-webkit-search-results-decoration {
   -webkit-appearance: none;
 }
 
-.search input[type="search"],
 .search .clear-button {
-  background-color: #fff;
-  border: 1px solid #ddd;
-  border-radius: 30px;
+  align-items: center;
+  box-sizing: border-box;
+  color: #777;
+  display: none;
+  flex: none;
+  justify-content: center;
+  padding: 0 15px;
+  transition: border 0.12s ease-in-out, color 0.12s ease-in-out;
 }
 
-.search-full input[type="search"],
-.search-full .clear-button {
-  border: 1px solid #fff;
+.search .clear-button:focus {
+  border: 1px solid $brand_color;
+  outline: none;
 }
 
-.search-has-value input[type="search"] {
+.search-has-value .clear-button {
+  display: flex;
+}
+
+[dir="ltr"] .search input[type="search"] {
+  padding-left: 40px;
+  padding-right: 20px;
+}
+
+[dir="ltr"] .search-has-value input[type="search"] {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
   border-right-color: transparent;
 }
 
-[dir="rtl"] .search-has-value input[type="search"] {
+[dir="ltr"] .search-has-value input[type="search"]:focus {
+  border-right-color: $brand_color;
+}
+
+[dir="ltr"] .search .clear-button {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
   border-left-color: transparent;
 }
 
-.search .clear-button {
-  align-items: center;
+[dir="ltr"] .search .clear-button:focus {
+  border-left-color: $brand_color;
+}
+
+[dir="rtl"] .search input[type="search"] {
+  padding-left: 20px;
+  padding-right: 40px;
+}
+
+[dir="rtl"] .search-has-value input[type="search"] {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
   border-left-color: transparent;
-  color: #777;
-  display: none;
-  flex: none;
-  justify-content: center;
-  padding: 0 15px;
-  transition: border .12s ease-in-out, color .12s ease-in-out;
+}
+
+[dir="rtl"] .search-has-value input[type="search"]:focus {
+  border-left-color: $brand_color;
 }
 
 [dir="rtl"] .search .clear-button {
@@ -1147,13 +1185,8 @@ ul {
   border-right-color: transparent;
 }
 
-.search .clear-button:focus {
-  border: 1px solid $brand_color;
-  outline: none;
-}
-
-.search-has-value .clear-button {
-  display: flex;
+[dir="rtl"] .search .clear-button:focus {
+  border-right-color: $brand_color;
 }
 
 .search-icon {
@@ -1170,12 +1203,8 @@ ul {
 }
 
 [dir="rtl"] .search-icon {
-  right: 15px;
   left: auto;
-}
-
-.search-container {
-  position: relative;
+  right: 15px;
 }
 
 /***** Hero component *****/

diff --git a/styles/_base.scss b/styles/_base.scss
@@ -69,7 +69,7 @@ textarea {
 input {
   max-width: 100%;
   box-sizing: border-box;
-  transition: border .12s ease-in-out;
+  transition: border $input-transition;
 
   &:not([type="checkbox"]) {
     outline: none;

diff --git a/styles/_search.scss b/styles/_search.scss
@@ -1,31 +1,45 @@
 /***** Search field *****/
 
+$icon-color: #777;
 $padding-left: 40px;
 $padding-right: 20px;
-$icon-color: #777;
+
+.search-container {
+  position: relative;
+}
 
 .search {
   display: flex;
   position: relative;
 
+  input[type="search"], 
+  .clear-button {
+    background-color: #fff;
+    border-color: $border-color;
+    border-radius: 30px;
+    border-style: solid;
+    border-width: 1px;
+
+    &:focus {
+      border-color: $brand_color;
+    }
+  }
+
+  &-full input[type="search"], 
+  &-full .clear-button {
+    border-color: #fff;
+  }
+
   input[type="search"] {
     appearance: none;
     -webkit-appearance: none;
     box-sizing: border-box;
     color: $field-text-color;
     flex: 1 1 auto;
     height: 40px;
-    padding-left: $padding-left;
-    padding-right: $padding-right;
     width: 100%;
 
-    [dir="rtl"] & {
-      padding-right: $padding-left;
-      padding-left: $padding-right;
-    }
-
     &:focus {
-      border: 1px solid $brand_color;
       color: $field-text-focus-color;
     }
 
@@ -48,60 +62,85 @@ $icon-color: #777;
 
   }
 
-  input[type="search"], 
   .clear-button {
-    background-color: #fff;
-    border: 1px solid $border-color;
-    border-radius: 30px;
+    align-items: center;
+    box-sizing: border-box;
+    color: $icon-color;
+    display: none;
+    flex: none;
+    justify-content: center;
+    padding: 0 15px;
+    transition: border $input-transition, color $input-transition;
+
+    &:focus {
+      border: 1px solid $brand_color;
+      outline: none;
+    }
+
   }
 
-  &-full input[type="search"], 
-  &-full .clear-button {
-    border: 1px solid #fff;
+  &-has-value .clear-button {
+    display: flex;
   }
-
+
+}
+
+[dir="ltr"] .search {
+  input[type="search"] {
+    padding-left: $padding-left;
+    padding-right: $padding-right;
+  }
+
   &-has-value input[type="search"] {
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
     border-right-color: transparent;
 
-    [dir="rtl"] & {
-      border-bottom-left-radius: 0;
-      border-top-left-radius: 0;
-      border-left-color: transparent;
+    &:focus {
+      border-right-color: $brand_color;
     }
 
   }
 
   .clear-button {
-    align-items: center;
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
     border-left-color: transparent;
-    color: $icon-color;
-    display: none;
-    flex: none;
-    justify-content: center;
-    padding: 0 15px;
-    transition: border .12s ease-in-out, color .12s ease-in-out;
 
-    [dir="rtl"] & {
-      border-bottom-right-radius: 0;
-      border-top-right-radius: 0;
-      border-right-color: transparent;
+    &:focus {
+      border-left-color: $brand_color;
     }
+
+  }
+}
+
+[dir="rtl"] .search {
+  input[type="search"] {
+    padding-left: $padding-right;
+    padding-right: $padding-left;
+  }
+
+  &-has-value input[type="search"] {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+    border-left-color: transparent;
 
     &:focus {
-      border: 1px solid $brand_color;
-      outline: none;
+      border-left-color: $brand_color;
     }
 
   }
 
-  &-has-value .clear-button {
-    display: flex;
-  }
+  .clear-button {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    border-right-color: transparent;
+
+    &:focus {
+      border-right-color: $brand_color;
+    }
 
+  }
 }
 
 .search-icon {
@@ -115,11 +154,7 @@ $icon-color: #777;
   pointer-events: none;
 
   [dir="rtl"] & {
-    right: 15px;
     left: auto;
+    right: 15px;
   }
 }
-
-.search-container {
-  position: relative;
-}
diff --git a/styles/_variables.scss b/styles/_variables.scss
@@ -27,3 +27,6 @@ $desktop-width: 1024px;
 $max-width-container: 1160px;
 
 $font-weight-semibold: 600;
+
+// Transitions
+$input-transition: .12s ease-in-out;