diff options
Diffstat (limited to 'client/src/app/header')
-rw-r--r-- | client/src/app/header/search-typeahead.component.scss | 13 | ||||
-rw-r--r-- | client/src/app/header/suggestion.component.scss | 8 |
2 files changed, 12 insertions, 9 deletions
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss index c754a99d1..3e0350ba0 100644 --- a/client/src/app/header/search-typeahead.component.scss +++ b/client/src/app/header/search-typeahead.component.scss | |||
@@ -44,7 +44,8 @@ li.suggestion { | |||
44 | 44 | ||
45 | // soft border-radius for the last suggestion and the link inside | 45 | // soft border-radius for the last suggestion and the link inside |
46 | &:last-of-type { | 46 | &:last-of-type { |
47 | &, & ::ng-deep a { | 47 | &, |
48 | ::ng-deep a { | ||
48 | border-bottom-right-radius: 3px; | 49 | border-bottom-right-radius: 3px; |
49 | border-bottom-left-radius: 3px; | 50 | border-bottom-left-radius: 3px; |
50 | } | 51 | } |
@@ -74,7 +75,7 @@ li.suggestion { | |||
74 | #typeahead-container { | 75 | #typeahead-container { |
75 | input { | 76 | input { |
76 | border: 1px solid pvar(--mainBackgroundColor) !important; | 77 | border: 1px solid pvar(--mainBackgroundColor) !important; |
77 | box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px 0px; | 78 | box-shadow: rgba(0, 0, 0, 0.1) 0 1px 20px 0; |
78 | flex-grow: 1; | 79 | flex-grow: 1; |
79 | transition: box-shadow .3s ease, width .2s ease; | 80 | transition: box-shadow .3s ease, width .2s ease; |
80 | } | 81 | } |
@@ -95,7 +96,7 @@ li.suggestion { | |||
95 | right: 10px; | 96 | right: 10px; |
96 | } | 97 | } |
97 | 98 | ||
98 | & > div:last-child { | 99 | > div:last-child { |
99 | // we have to switch the display and not the opacity, | 100 | // we have to switch the display and not the opacity, |
100 | // to avoid clashing with the rest of the interface. | 101 | // to avoid clashing with the rest of the interface. |
101 | display: none; | 102 | display: none; |
@@ -103,7 +104,7 @@ li.suggestion { | |||
103 | 104 | ||
104 | &:focus, | 105 | &:focus, |
105 | ::ng-deep &:focus-within { | 106 | ::ng-deep &:focus-within { |
106 | & > div:last-child { | 107 | > div:last-child { |
107 | @media screen and (min-width: $mobile-view) { | 108 | @media screen and (min-width: $mobile-view) { |
108 | display: initial !important; | 109 | display: initial !important; |
109 | } | 110 | } |
@@ -111,12 +112,12 @@ li.suggestion { | |||
111 | #typeahead-help, | 112 | #typeahead-help, |
112 | #typeahead-instructions, | 113 | #typeahead-instructions, |
113 | li.suggestion { | 114 | li.suggestion { |
114 | box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 20px -5px; | 115 | box-shadow: rgba(0, 0, 0, 0.2) 0 10px 20px -5px; |
115 | } | 116 | } |
116 | } | 117 | } |
117 | 118 | ||
118 | ::ng-deep input { | 119 | ::ng-deep input { |
119 | box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 20px 0px; | 120 | box-shadow: rgba(0, 0, 0, 0.2) 0 1px 20px 0; |
120 | border-end-start-radius: 0; | 121 | border-end-start-radius: 0; |
121 | border-end-end-radius: 0; | 122 | border-end-end-radius: 0; |
122 | 123 | ||
diff --git a/client/src/app/header/suggestion.component.scss b/client/src/app/header/suggestion.component.scss index 692a81daa..9163de0b1 100644 --- a/client/src/app/header/suggestion.component.scss +++ b/client/src/app/header/suggestion.component.scss | |||
@@ -2,9 +2,11 @@ | |||
2 | 2 | ||
3 | a { | 3 | a { |
4 | @include disable-default-a-behaviour; | 4 | @include disable-default-a-behaviour; |
5 | |||
5 | width: 100%; | 6 | width: 100%; |
6 | 7 | ||
7 | &, &:hover { | 8 | &, |
9 | &:hover { | ||
8 | color: pvar(--mainForegroundColor); | 10 | color: pvar(--mainForegroundColor); |
9 | 11 | ||
10 | &.focus-visible { | 12 | &.focus-visible { |
@@ -23,10 +25,10 @@ a { | |||
23 | } | 25 | } |
24 | 26 | ||
25 | my-global-icon { | 27 | my-global-icon { |
28 | @include apply-svg-color(pvar(--mainForegroundColor)); | ||
29 | |||
26 | width: 17px; | 30 | width: 17px; |
27 | position: relative; | 31 | position: relative; |
28 | top: -2px; | 32 | top: -2px; |
29 | margin: 5px; | 33 | margin: 5px; |
30 | |||
31 | @include apply-svg-color(pvar(--mainForegroundColor)); | ||
32 | } | 34 | } |