]>
Commit | Line | Data |
---|---|---|
f409f0c3 RK |
1 | @import '_mixins'; |
2 | ||
3 | .jump-to-suggestions { | |
4 | top: 100%; | |
5 | left: 0; | |
6 | z-index: 35; | |
7 | width: 100%; | |
8 | } | |
9 | ||
6af662a5 | 10 | #typeahead-help, |
f409f0c3 | 11 | #typeahead-instructions, |
6af662a5 | 12 | my-suggestions ::ng-deep ul { |
f409f0c3 RK |
13 | border: 1px solid var(--mainBackgroundColor); |
14 | border-bottom-right-radius: 3px; | |
15 | border-bottom-left-radius: 3px; | |
16 | background: var(--mainBackgroundColor); | |
17 | transition: .3s ease; | |
18 | transition-property: box-shadow; | |
19 | } | |
20 | ||
6af662a5 | 21 | #typeahead-help, |
f409f0c3 RK |
22 | #typeahead-instructions { |
23 | margin-top: 10px; | |
24 | width: 100%; | |
25 | padding: .5rem 1rem; | |
6af662a5 | 26 | white-space: normal; |
f409f0c3 RK |
27 | |
28 | ul { | |
29 | list-style: none; | |
30 | padding: 0; | |
31 | margin-bottom: .5rem; | |
32 | ||
33 | em { | |
34 | font-weight: 600; | |
35 | margin-right: 0.2rem; | |
36 | font-style: normal; | |
37 | } | |
38 | } | |
39 | } | |
40 | ||
41 | #typeahead-container { | |
42 | ::ng-deep input { | |
43 | border: 1px solid var(--mainBackgroundColor) !important; | |
44 | box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px 0px; | |
45 | flex-grow: 1; | |
46 | transition: box-shadow .3s ease, width .2s ease; | |
47 | } | |
48 | ||
49 | ::ng-deep span { | |
50 | right: 10px; | |
51 | } | |
52 | ||
53 | & > div:last-child { | |
54 | // we have to switch the display and not the opacity, | |
55 | // to avoid clashing with the rest of the interface. | |
56 | display: none; | |
57 | } | |
58 | ||
59 | &:focus, | |
60 | ::ng-deep &:focus-within { | |
61 | & > div:last-child { | |
62 | display: initial !important; | |
63 | ||
6af662a5 | 64 | #typeahead-help, |
f409f0c3 | 65 | #typeahead-instructions, |
6af662a5 | 66 | my-suggestions ::ng-deep ul { |
f409f0c3 RK |
67 | box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 20px -5px; |
68 | } | |
69 | } | |
70 | ||
71 | ::ng-deep input { | |
72 | box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 20px 0px; | |
73 | border-end-start-radius: 0; | |
74 | border-end-end-radius: 0; | |
75 | ||
76 | @media screen and (min-width: 900px) { | |
77 | width: 500px; | |
78 | } | |
79 | } | |
80 | } | |
81 | } | |
82 | ||
f409f0c3 RK |
83 | .glyphicon { |
84 | top: 3px; | |
85 | } | |
86 | ||
87 | .advanced-search-status { | |
6af662a5 RK |
88 | height: max-content; |
89 | cursor: default; | |
90 | ||
91 | &.c-help { | |
92 | cursor: help; | |
93 | } | |
f409f0c3 RK |
94 | } |
95 | ||
96 | .small-title { | |
97 | @include in-content-small-title; | |
98 | ||
99 | margin-bottom: .5rem; | |
100 | } | |
101 | ||
6af662a5 RK |
102 | ::ng-deep my-suggestion { |
103 | width: 100%; | |
f409f0c3 | 104 | } |