diff options
author | Thibaut Girka <thib@sitedethib.com> | 2019-06-27 22:30:55 +0200 |
---|---|---|
committer | ThibG <thib@sitedethib.com> | 2019-06-28 11:13:41 +0200 |
commit | 6ad870a410c7379eb8f3e719f3ad217354691546 (patch) | |
tree | 966dd007e9a6fc3a1998692d3f655131de051048 /app/javascript/flavours/glitch/styles/components/search.scss | |
parent | ca17bae904783dfb1f4899a533d28a79da0c6fe9 (diff) |
Change search components classes and styling to match upstream
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components/search.scss')
-rw-r--r-- | app/javascript/flavours/glitch/styles/components/search.scss | 27 |
1 files changed, 20 insertions, 7 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss index 3ef141133..7c5039efc 100644 --- a/app/javascript/flavours/glitch/styles/components/search.scss +++ b/app/javascript/flavours/glitch/styles/components/search.scss @@ -3,13 +3,25 @@ } .search__input { + @include search-input(); + display: block; - padding: 10px; + padding: 15px; padding-right: 30px; - @include search-input(); + line-height: 18px; + font-size: 16px; } .search__icon { + &::-moz-focus-inner { + border: 0; + } + + &::-moz-focus-inner, + &:focus { + outline: 0 !important; + } + .fa { position: absolute; top: 16px; @@ -18,7 +30,7 @@ display: inline-block; opacity: 0; transition: all 100ms linear; - transition-property: transform, opacity; + transition-property: color, transform, opacity; font-size: 18px; width: 18px; height: 18px; @@ -33,17 +45,18 @@ } .fa-search { - transform: rotate(90deg); + transform: rotate(0deg); &.active { - pointer-events: none; - transform: rotate(0deg); + pointer-events: auto; + opacity: 0.3; } } .fa-times-circle { top: 17px; transform: rotate(0deg); + color: $action-button-color; cursor: pointer; &.active { @@ -51,7 +64,7 @@ } &:hover { - color: $primary-text-color; + color: lighten($action-button-color, 7%); } } } |