diff options
author | Rigel Kent <sendmemail@rigelk.eu> | 2020-02-04 16:44:53 +0100 |
---|---|---|
committer | Rigel Kent <sendmemail@rigelk.eu> | 2020-02-13 16:35:24 +0100 |
commit | 9b8a7aa8ea128f7e197ff38ca9f86ffa53bbe110 (patch) | |
tree | f38e6f83a9d892a99f930c0a25b1a405e679cd4a /client/src/app/header/search-typeahead.component.scss | |
parent | ece3029bd99a76b3c48a1cc8c58914c5cf61f106 (diff) | |
download | PeerTube-9b8a7aa8ea128f7e197ff38ca9f86ffa53bbe110.tar.gz PeerTube-9b8a7aa8ea128f7e197ff38ca9f86ffa53bbe110.tar.zst PeerTube-9b8a7aa8ea128f7e197ff38ca9f86ffa53bbe110.zip |
Improve search typeahead performance and use native events
Diffstat (limited to 'client/src/app/header/search-typeahead.component.scss')
-rw-r--r-- | client/src/app/header/search-typeahead.component.scss | 30 |
1 files changed, 27 insertions, 3 deletions
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss index 6d7511c70..a55e78326 100644 --- a/client/src/app/header/search-typeahead.component.scss +++ b/client/src/app/header/search-typeahead.component.scss | |||
@@ -3,6 +3,30 @@ | |||
3 | @import '_bootstrap-variables'; | 3 | @import '_bootstrap-variables'; |
4 | @import '~bootstrap/scss/mixins/_breakpoints'; | 4 | @import '~bootstrap/scss/mixins/_breakpoints'; |
5 | 5 | ||
6 | #search-video { | ||
7 | @include peertube-input-text($search-input-width); | ||
8 | padding-left: 10px; | ||
9 | padding-right: 40px; // For the search icon | ||
10 | font-size: 14px; | ||
11 | |||
12 | &::placeholder { | ||
13 | color: var(--inputPlaceholderColor); | ||
14 | } | ||
15 | } | ||
16 | |||
17 | .icon.icon-search { | ||
18 | @include icon(25px); | ||
19 | height: 21px; | ||
20 | |||
21 | background-color: var(--mainForegroundColor); | ||
22 | mask: url('../../assets/images/header/search.svg') no-repeat 50% 50%; | ||
23 | |||
24 | // yolo | ||
25 | position: absolute; | ||
26 | margin-left: -35px; | ||
27 | margin-top: 5px; | ||
28 | } | ||
29 | |||
6 | .jump-to-suggestions { | 30 | .jump-to-suggestions { |
7 | top: 100%; | 31 | top: 100%; |
8 | left: 0; | 32 | left: 0; |
@@ -42,7 +66,7 @@ my-suggestions ::ng-deep ul { | |||
42 | } | 66 | } |
43 | 67 | ||
44 | #typeahead-container { | 68 | #typeahead-container { |
45 | ::ng-deep input { | 69 | input { |
46 | border: 1px solid var(--mainBackgroundColor) !important; | 70 | border: 1px solid var(--mainBackgroundColor) !important; |
47 | box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px 0px; | 71 | box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px 0px; |
48 | flex-grow: 1; | 72 | flex-grow: 1; |
@@ -56,12 +80,12 @@ my-suggestions ::ng-deep ul { | |||
56 | @media screen and (max-width: $small-view) { | 80 | @media screen and (max-width: $small-view) { |
57 | flex: 1; | 81 | flex: 1; |
58 | 82 | ||
59 | ::ng-deep input { | 83 | input { |
60 | width: unset; | 84 | width: unset; |
61 | } | 85 | } |
62 | } | 86 | } |
63 | 87 | ||
64 | ::ng-deep span { | 88 | span { |
65 | right: 10px; | 89 | right: 10px; |
66 | } | 90 | } |
67 | 91 | ||