diff --git a/src/app/components/elements/SearchInput/styles.scss b/src/app/components/elements/SearchInput/styles.scss index 095c3fd85a..54851bf18b 100644 --- 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 { } -} \ No newline at end of file +}