- positioning of text inside search input

- white text color when hovering search input
sudguru · Feb 19, 2020 · 29b6a0a · 29b6a0a
1 parent 82e8187
commit 29b6a0a
Showing 1 changed file with 12 additions and 2 deletions.
diff --git a/src/app/components/elements/SearchInput/styles.scss b/src/app/components/elements/SearchInput/styles.scss
@@ -14,7 +14,7 @@ form.search-input {
 
     input.search-input__inner {
         outline: none;
-        padding: 9px 10px 9px 32px;
+        padding: 9px 10px 11px 32px;
         border-radius: 25pc;
         transition: all 0.3s ease-in-out;
         font-size: 16px;
@@ -76,9 +76,15 @@ form.search-input--expanded {
         fill: none;
     }
 
+    &:hover {
+        svg.search-input__icon {
+            stroke: $color-white;
+        }
+    }
+
     input.search-input__inner {
         outline: none;
-        padding: 9px 10px 9px 32px;
+        padding: 9px 10px 11px 32px;
         border-radius: 25pc;
         transition: all 0.3s ease-in-out;
         font-size: 16px;
@@ -102,12 +108,16 @@ form.search-input--expanded {
         }
         &:hover {
             background-color: $color-teal;
+            color: $color-white;
         }
         &::placeholder {
             @include themify($themes) {
                 color: themed('textColorSecondary');
             }
         }
+        &:hover::placeholder {
+            color: $color-text-white;
+        }
     }
 
     /* small */