diff options
author | 2018-01-03 15:22:05 +0100 | |
---|---|---|
committer | 2018-01-03 15:22:05 +0100 | |
commit | 7e784c699554dd85be3e9e219c59578995cadd38 (patch) | |
tree | 3f377e368e4d797f0bf1d832f524c11431245877 /src/styles | |
parent | Merge pull request #506 from meetfranz/feature/reactivate-franz (diff) | |
download | ferdium-app-7e784c699554dd85be3e9e219c59578995cadd38.tar.gz ferdium-app-7e784c699554dd85be3e9e219c59578995cadd38.tar.zst ferdium-app-7e784c699554dd85be3e9e219c59578995cadd38.zip |
feat(Services): Improve user experience of service search
Diffstat (limited to 'src/styles')
-rw-r--r-- | src/styles/searchInput.scss | 16 | ||||
-rw-r--r-- | src/styles/settings.scss | 22 |
2 files changed, 18 insertions, 20 deletions
diff --git a/src/styles/searchInput.scss b/src/styles/searchInput.scss index 28ff09fc4..633a31e09 100644 --- a/src/styles/searchInput.scss +++ b/src/styles/searchInput.scss | |||
@@ -1,4 +1,20 @@ | |||
1 | .search-input { | 1 | .search-input { |
2 | width: 100%; | 2 | width: 100%; |
3 | height: auto; | 3 | height: auto; |
4 | display: flex; | ||
5 | align-items: center; | ||
6 | padding: 0 10px; | ||
7 | border-radius: 30px; | ||
8 | background: $theme-gray-lightest; | ||
9 | padding: 5px 10px; | ||
10 | @extend %headline; | ||
11 | color: $theme-gray-light; | ||
12 | |||
13 | input { | ||
14 | padding-left: 10px; | ||
15 | background: none; | ||
16 | border: 0; | ||
17 | flex: 1; | ||
18 | color: $theme-gray-light; | ||
19 | } | ||
4 | } | 20 | } |
diff --git a/src/styles/settings.scss b/src/styles/settings.scss index b29ed5468..2da56c930 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss | |||
@@ -129,26 +129,8 @@ | |||
129 | } | 129 | } |
130 | } | 130 | } |
131 | 131 | ||
132 | .settings__search-header { | 132 | .search-input { |
133 | display: flex; | 133 | margin-bottom: 30px; |
134 | align-items: center; | ||
135 | padding: 0 10px; | ||
136 | border-radius: $theme-border-radius; | ||
137 | transition: background $theme-transition-time; | ||
138 | @extend %headline; | ||
139 | font-size: 22px; | ||
140 | |||
141 | &:hover { | ||
142 | background: darken($theme-gray-lighter, 5%); | ||
143 | } | ||
144 | |||
145 | input { | ||
146 | padding-left: 10px; | ||
147 | background: none; | ||
148 | border: 0; | ||
149 | flex: 1; | ||
150 | @extend %headline; | ||
151 | } | ||
152 | } | 134 | } |
153 | 135 | ||
154 | &__options { | 136 | &__options { |