]>
Commit | Line | Data |
---|---|---|
8f9d1d4d DC |
1 | [type="search"]::-webkit-search-cancel-button, |
2 | [type="search"]::-webkit-search-decoration { | |
8f9d1d4d DC |
3 | appearance: none; |
4 | } | |
5 | ||
f2a92ac6 DC |
6 | [type="search"]::-ms-clear, |
7 | [type="search"]::-ms-reveal { | |
8f9d1d4d DC |
8 | display: none; |
9 | width: 0; | |
10 | height: 0; | |
11 | } | |
12 | ||
13 | .search { | |
14 | margin: 1rem 0; | |
15 | position: relative; | |
16 | } | |
17 | ||
18 | .search__input-wrapper, | |
19 | .search__inner-input-wrapper { | |
20 | position: relative; | |
21 | } | |
22 | ||
23 | .search__clear-btn { | |
24 | color: var(--body-text-color); | |
25 | position: absolute; | |
26 | display: flex; | |
27 | top: 50%; | |
28 | offset-block-start: 50%; | |
29 | transform: translateY(-50%); | |
30 | right: 1.5rem; | |
31 | offset-inline-end: 1.5rem; | |
32 | z-index: 3; | |
33 | padding: 0; | |
34 | ||
35 | svg { | |
36 | color: inherit; | |
37 | width: 1rem; | |
38 | height: 1rem; | |
39 | border: 1px solid; | |
40 | border-radius: 50%; | |
41 | } | |
42 | } | |
43 | ||
44 | .search__input { | |
45 | padding-left: 2.5rem; | |
46 | padding-inline-start: 2.5rem; | |
47 | outline-offset: 1px; | |
48 | width: 100%; | |
49 | } | |
50 | ||
51 | .search__icon { | |
52 | color: var(--body-text-color); | |
53 | position: absolute; | |
54 | display: block; | |
55 | top: 50%; | |
56 | offset-block-start: 50%; | |
57 | transform: translateY(-50%); | |
58 | left: .75rem; | |
59 | offset-inline-start: .75rem; | |
60 | z-index: 3; | |
61 | } | |
62 | ||
63 | /* search results */ | |
64 | .search .search-results { | |
65 | font-size: .875rem; | |
66 | background-color: var(--body-background-color); | |
8f9d1d4d DC |
67 | z-index: 10; |
68 | width: 100%; | |
69 | border-radius: 0 0 var(--border-radius) var(--border-radius); | |
70 | border: 1px solid var(--divider-color); | |
f2a92ac6 | 71 | position: relative; |
8f9d1d4d DC |
72 | top: .25rem; |
73 | max-height: 400px; | |
74 | overflow-y: auto; | |
75 | ||
76 | @media all and (min-width: 1024px) { | |
77 | box-shadow: var(--shadow-lg); | |
78 | position: absolute; | |
79 | top: calc(100% + .25rem); | |
80 | } | |
81 | ||
82 | &[data-results="true"] { | |
83 | padding: 0; | |
84 | } | |
f2a92ac6 | 85 | |
8f9d1d4d DC |
86 | &[data-results="false"] { |
87 | padding: 1rem; | |
88 | } | |
89 | ||
90 | &:empty { | |
91 | display: none; | |
92 | } | |
93 | } | |
94 | ||
95 | .search-results__list { | |
96 | list-style: none; | |
97 | margin: 0; | |
98 | padding: 0; | |
99 | } | |
100 | ||
101 | .search .search-results__item { | |
102 | margin: 0; | |
103 | padding: .875rem; | |
104 | border-bottom: 1px solid var(--lightest-background-color); | |
105 | border-block-end: 1px solid var(--lightest-background-color); | |
106 | position: relative; | |
107 | ||
108 | &:hover { | |
109 | background-color: var(--lightest-background-color); | |
110 | } | |
111 | ||
f2a92ac6 | 112 | &:focus-within { |
8f9d1d4d DC |
113 | background-color: var(--lightest-background-color); |
114 | } | |
115 | } | |
116 | ||
117 | .search .search-results__item__title { | |
118 | font-size: var(--step-0); | |
119 | font-size: .875rem; | |
120 | margin-bottom: 0; | |
121 | font-family: var(--text-font); | |
122 | ||
8f9d1d4d DC |
123 | a { |
124 | display: block; | |
125 | text-decoration: none; | |
126 | color: var(--link-color); | |
127 | font: inherit; | |
128 | padding: .25rem .75rem; | |
129 | ||
130 | &:hover { | |
131 | background-color: inherit; | |
132 | color: var(--link-color); | |
133 | } | |
134 | ||
135 | &::after { | |
136 | position: absolute; | |
137 | top: 0; | |
138 | left: 0; | |
139 | right: 0; | |
140 | bottom: 0; | |
141 | content: ""; | |
142 | } | |
143 | } | |
144 | } | |
145 | ||
146 | .search-results__item__context { | |
147 | margin: 0; | |
148 | font-size: .875rem; | |
149 | padding-left: 1rem; | |
150 | } | |
151 | ||
152 | .algolia-docsearch-suggestion--highlight { | |
153 | background-color: var(--color-brand); | |
154 | color: #fff; | |
155 | display: inline-block; | |
156 | padding: 0 2px; | |
157 | border-radius: 2px; | |
158 | ||
159 | [data-theme="dark"] & { | |
160 | background-color: var(--link-color); | |
161 | color: var(--color-neutral-900); | |
162 | } | |
163 | } |