diff options
author | Rigel Kent <sendmemail@rigelk.eu> | 2020-01-25 16:32:06 +0100 |
---|---|---|
committer | Rigel Kent <sendmemail@rigelk.eu> | 2020-02-13 16:32:21 +0100 |
commit | 6af662a5961b48ac12682df2b8b971060a2cc67d (patch) | |
tree | de1efc71cbe8543b5b832e5de99a407a54c37220 /client/src/app/header/search-typeahead.component.scss | |
parent | f409f0c3b91d85c66b4841d72ea65b5fbe1483d8 (diff) | |
download | PeerTube-6af662a5961b48ac12682df2b8b971060a2cc67d.tar.gz PeerTube-6af662a5961b48ac12682df2b8b971060a2cc67d.tar.zst PeerTube-6af662a5961b48ac12682df2b8b971060a2cc67d.zip |
Add keyboard navigation and hepler to typeahead
Diffstat (limited to 'client/src/app/header/search-typeahead.component.scss')
-rw-r--r-- | client/src/app/header/search-typeahead.component.scss | 45 |
1 files changed, 14 insertions, 31 deletions
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss index 93f021e33..c410d4734 100644 --- a/client/src/app/header/search-typeahead.component.scss +++ b/client/src/app/header/search-typeahead.component.scss | |||
@@ -7,8 +7,9 @@ | |||
7 | width: 100%; | 7 | width: 100%; |
8 | } | 8 | } |
9 | 9 | ||
10 | #typeahead-help, | ||
10 | #typeahead-instructions, | 11 | #typeahead-instructions, |
11 | #jump-to-results { | 12 | my-suggestions ::ng-deep ul { |
12 | border: 1px solid var(--mainBackgroundColor); | 13 | border: 1px solid var(--mainBackgroundColor); |
13 | border-bottom-right-radius: 3px; | 14 | border-bottom-right-radius: 3px; |
14 | border-bottom-left-radius: 3px; | 15 | border-bottom-left-radius: 3px; |
@@ -17,10 +18,12 @@ | |||
17 | transition-property: box-shadow; | 18 | transition-property: box-shadow; |
18 | } | 19 | } |
19 | 20 | ||
21 | #typeahead-help, | ||
20 | #typeahead-instructions { | 22 | #typeahead-instructions { |
21 | margin-top: 10px; | 23 | margin-top: 10px; |
22 | width: 100%; | 24 | width: 100%; |
23 | padding: .5rem 1rem; | 25 | padding: .5rem 1rem; |
26 | white-space: normal; | ||
24 | 27 | ||
25 | ul { | 28 | ul { |
26 | list-style: none; | 29 | list-style: none; |
@@ -58,8 +61,9 @@ | |||
58 | & > div:last-child { | 61 | & > div:last-child { |
59 | display: initial !important; | 62 | display: initial !important; |
60 | 63 | ||
64 | #typeahead-help, | ||
61 | #typeahead-instructions, | 65 | #typeahead-instructions, |
62 | #jump-to-results { | 66 | my-suggestions ::ng-deep ul { |
63 | box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 20px -5px; | 67 | box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 20px -5px; |
64 | } | 68 | } |
65 | } | 69 | } |
@@ -76,33 +80,17 @@ | |||
76 | } | 80 | } |
77 | } | 81 | } |
78 | 82 | ||
79 | a.focus-visible { | ||
80 | background-color: var(--mainHoverColor); | ||
81 | } | ||
82 | |||
83 | a { | ||
84 | @include disable-default-a-behaviour; | ||
85 | width: 100%; | ||
86 | |||
87 | &, &:hover { | ||
88 | color: var(--mainForegroundColor); | ||
89 | } | ||
90 | } | ||
91 | |||
92 | .bg-gray { | ||
93 | background-color: var(--mainBackgroundColor); | ||
94 | } | ||
95 | |||
96 | .text-gray-light { | ||
97 | color: var(--mainForegroundColor); | ||
98 | } | ||
99 | |||
100 | .glyphicon { | 83 | .glyphicon { |
101 | top: 3px; | 84 | top: 3px; |
102 | } | 85 | } |
103 | 86 | ||
104 | .advanced-search-status { | 87 | .advanced-search-status { |
105 | cursor: help; | 88 | height: max-content; |
89 | cursor: default; | ||
90 | |||
91 | &.c-help { | ||
92 | cursor: help; | ||
93 | } | ||
106 | } | 94 | } |
107 | 95 | ||
108 | .small-title { | 96 | .small-title { |
@@ -111,11 +99,6 @@ a { | |||
111 | margin-bottom: .5rem; | 99 | margin-bottom: .5rem; |
112 | } | 100 | } |
113 | 101 | ||
114 | my-global-icon { | 102 | ::ng-deep my-suggestion { |
115 | width: 17px; | 103 | width: 100%; |
116 | position: relative; | ||
117 | top: -2px; | ||
118 | margin: 5px; | ||
119 | |||
120 | @include apply-svg-color(var(--mainForegroundColor)) | ||
121 | } | 104 | } |