Merge branch 'search_bar_css' of https://github.com/quochuy/condenser …

…into quochuy-search_bar_css
sudguru · Feb 20, 2020 · 07bc445 · 07bc445
2 parents d30ad37 + 29b6a0a
commit 07bc445
Showing 1 changed file with 26 additions and 33 deletions.
diff --git a/src/app/components/elements/SearchInput/styles.scss b/src/app/components/elements/SearchInput/styles.scss
@@ -10,13 +10,11 @@ form.search-input {
         }
         stroke-width: 1.2;
         fill: none;
-
     }
 
     input.search-input__inner {
         outline: none;
-        padding: 9px 10px 9px 32px;
-        width: 55px;
+        padding: 9px 10px 11px 32px;
         border-radius: 25pc;
         transition: all 0.3s ease-in-out;
         font-size: 16px;
@@ -26,7 +24,6 @@ form.search-input {
         height: 42px;
         color: transparent;
         cursor: pointer;
-        transition: all 0.3s ease-in-out;
         font-family: $font-primary;
         @include themify($themes) {
             border: 1px solid rgba(202, 202, 202, 0.6);
@@ -39,13 +36,11 @@ form.search-input {
         }
         &:focus {
             width: 180px;
-            background-color: $color-white;
             @include themify($themes) {
                 border: themed('moduleBackgroundColor');
             }
             border-color: $color-teal;
             box-shadow: 0 0 5px rgba(109,207,246,.5);
-            width: 180px;
             padding-left: 2.5rem;
             @include themify($themes) {
                 color: themed('textColorPrimary');
@@ -79,56 +74,54 @@ form.search-input--expanded {
         }
         stroke-width: 1.2;
         fill: none;
-
+    }
+
+    &:hover {
+        svg.search-input__icon {
+            stroke: $color-white;
+        }
     }
 
     input.search-input__inner {
         outline: none;
-        padding: 9px 10px 9px 32px;
-        width: 55px;
+        padding: 9px 10px 11px 32px;
         border-radius: 25pc;
         transition: all 0.3s ease-in-out;
         font-size: 16px;
         background: transparent;
-        box-shadow: none;
-        width: 42px;
         height: 42px;
         color: transparent;
-        cursor: pointer;
-        transition: all 0.3s ease-in-out;
         font-family: $font-primary;
+        width: 100%;
+        border-color: $color-teal;
+        box-shadow: 0 0 5px rgba(109,207,246,.5);
+        padding-left: 2.5rem;
+        cursor: auto;
         @include themify($themes) {
             border: 1px solid rgba(202, 202, 202, 0.6);
         }
-        &::placeholder {
-            color: transparent
+        @include themify($themes) {
+            border: themed('moduleBackgroundColor');
+        }
+        @include themify($themes) {
+            color: themed('textColorPrimary');
         }
         &:hover {
             background-color: $color-teal;
+            color: $color-white;
         }
-            width: 100%;
-            background-color: $color-white;
-            @include themify($themes) {
-                border: themed('moduleBackgroundColor');
-            }
-            border-color: $color-teal;
-            box-shadow: 0 0 5px rgba(109,207,246,.5);
-            padding-left: 2.5rem;
+        &::placeholder {
             @include themify($themes) {
-                color: themed('textColorPrimary');
-            }
-            background-color: transparent;
-            cursor: auto;
-            &::placeholder {
-                color: $color-blue-dark;
-                @include themify($themes) {
-                    color: themed('textColorSecondary');
-                }
+                color: themed('textColorSecondary');
             }
+        }
+        &:hover::placeholder {
+            color: $color-text-white;
+        }
     }
 
     /* small */
     input.search-input__inner.search-input__inner--small {
 
     }
-}
+}