1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 | @import '../../globals/scss/vars';
|
13 | @import '../../globals/scss/helper-mixins';
|
14 | @import '../../globals/scss/css--reset';
|
15 | @import '../../globals/scss/typography';
|
16 | @import '../../globals/scss/import-once';
|
17 |
|
18 | @mixin search {
|
19 | .#{$prefix}--search {
|
20 | display: flex;
|
21 | position: relative;
|
22 | width: 100%;
|
23 | }
|
24 |
|
25 | .#{$prefix}--search .#{$prefix}--label {
|
26 | @include hidden;
|
27 | }
|
28 |
|
29 | .#{$prefix}--search-input {
|
30 | @include reset;
|
31 | @include font-family;
|
32 | appearance: none;
|
33 | border: none;
|
34 | background-color: $field-01;
|
35 | color: $text-01;
|
36 | font-weight: 600;
|
37 | padding: 0 $spacing-2xl;
|
38 | text-overflow: ellipsis;
|
39 | width: 100%;
|
40 | order: 1;
|
41 |
|
42 | &:focus {
|
43 | outline: none;
|
44 | }
|
45 |
|
46 | &:focus ~ .#{$prefix}--search-magnifier {
|
47 | fill: $brand-01;
|
48 | }
|
49 |
|
50 | &::placeholder {
|
51 | color: $text-02;
|
52 | font-weight: 400;
|
53 | }
|
54 |
|
55 | &::-ms-clear {
|
56 | display: none;
|
57 | }
|
58 | }
|
59 |
|
60 | .#{$prefix}--search--light .#{$prefix}--search-input {
|
61 | background: $field-02;
|
62 | }
|
63 |
|
64 | .#{$prefix}--search--sm .#{$prefix}--search-input {
|
65 | @include typescale('zeta');
|
66 | height: rem(32px);
|
67 | }
|
68 |
|
69 | .#{$prefix}--search--lg .#{$prefix}--search-input {
|
70 | @include typescale('zeta');
|
71 | height: rem(40px);
|
72 | }
|
73 |
|
74 | .#{$prefix}--search-magnifier,
|
75 | .#{$prefix}--search-close {
|
76 | position: absolute;
|
77 | height: 1rem;
|
78 | width: 1rem;
|
79 | top: calc(50% - 0.5rem);
|
80 |
|
81 | z-index: 1;
|
82 | }
|
83 |
|
84 | .#{$prefix}--search-magnifier {
|
85 | left: 0.75rem;
|
86 | fill: $ui-05;
|
87 | z-index: 2;
|
88 | }
|
89 |
|
90 | .#{$prefix}--search-close {
|
91 | @include button-reset(false);
|
92 |
|
93 | transition: opacity $transition--base;
|
94 | fill: $ui-05;
|
95 | cursor: pointer;
|
96 | visibility: visible;
|
97 | opacity: 1;
|
98 | }
|
99 |
|
100 | .#{$prefix}--search-close:focus {
|
101 | outline: 1px solid $brand-01;
|
102 | outline-offset: 2px;
|
103 | }
|
104 |
|
105 | .#{$prefix}--search-close {
|
106 | right: 0.75rem;
|
107 | }
|
108 |
|
109 | .#{$prefix}--search--lg .#{$prefix}--search-close {
|
110 | right: rem(12px);
|
111 | }
|
112 |
|
113 | .#{$prefix}--search-button {
|
114 | @include reset;
|
115 | border: 0;
|
116 | transition: $transition--base;
|
117 | height: rem(40px);
|
118 | width: rem(40px);
|
119 | min-width: rem(40px);
|
120 | margin-left: $spacing-2xs;
|
121 | background-color: $ui-01;
|
122 | position: relative;
|
123 | padding: 0;
|
124 | outline: 1px solid transparent;
|
125 | order: 2;
|
126 | }
|
127 |
|
128 | .#{$prefix}--search-button svg {
|
129 | position: relative;
|
130 | top: -1px;
|
131 | box-sizing: border-box;
|
132 | vertical-align: middle;
|
133 | transition: $transition--base;
|
134 | fill: $hover-primary;
|
135 | height: 1rem;
|
136 | width: 1rem;
|
137 | }
|
138 |
|
139 | .#{$prefix}--search-button:hover,
|
140 | .#{$prefix}--search-button:focus {
|
141 | cursor: pointer;
|
142 | background-color: $brand-01;
|
143 | outline: 1px solid transparent;
|
144 | }
|
145 |
|
146 | .#{$prefix}--search-button:hover svg,
|
147 | .#{$prefix}--search-button:focus svg {
|
148 | fill: $ui-01;
|
149 | }
|
150 |
|
151 | .#{$prefix}--search-close--hidden {
|
152 | visibility: hidden;
|
153 | opacity: 0;
|
154 | }
|
155 |
|
156 | .#{$prefix}--search-view--hidden {
|
157 | display: none;
|
158 | }
|
159 |
|
160 | .#{$prefix}--search--lg.#{$prefix}--skeleton .#{$prefix}--search-input,
|
161 | .#{$prefix}--search--sm.#{$prefix}--skeleton .#{$prefix}--search-input {
|
162 | @include skeleton;
|
163 | width: 100%;
|
164 |
|
165 | &::placeholder {
|
166 | color: transparent;
|
167 | }
|
168 | }
|
169 | }
|
170 |
|
171 | @mixin search--x {
|
172 | .#{$prefix}--search {
|
173 | display: flex;
|
174 | align-items: center;
|
175 | position: relative;
|
176 | width: 100%;
|
177 | }
|
178 |
|
179 | .#{$prefix}--search .#{$prefix}--label {
|
180 | @include hidden;
|
181 | }
|
182 |
|
183 | .#{$prefix}--search-input {
|
184 | @include reset;
|
185 | @include type-style('body-short-02');
|
186 | @include focus-outline('reset');
|
187 | appearance: none;
|
188 | border: none;
|
189 | background-color: $field-01;
|
190 | color: $text-01;
|
191 | padding: 0 $carbon--spacing-08;
|
192 | text-overflow: ellipsis;
|
193 | width: 100%;
|
194 | order: 1;
|
195 | transition: background-color $duration--fast-01, outline $duration--fast-01;
|
196 | border-bottom: 1px solid $ui-04;
|
197 |
|
198 | &:focus {
|
199 | @include focus-outline('outline');
|
200 | }
|
201 |
|
202 | &::placeholder {
|
203 | color: $text-03;
|
204 | font-weight: 400;
|
205 | }
|
206 |
|
207 | &::-ms-clear {
|
208 | display: none;
|
209 | }
|
210 | }
|
211 |
|
212 | .#{$prefix}--search-input[disabled] {
|
213 | color: $disabled;
|
214 | background-color: $disabled-background-color;
|
215 | border-bottom: 1px solid transparent;
|
216 | cursor: not-allowed;
|
217 |
|
218 | &::placeholder {
|
219 | color: $disabled;
|
220 | font-weight: 400;
|
221 | }
|
222 | }
|
223 |
|
224 | .#{$prefix}--search-input[disabled] ~ .#{$prefix}--search-magnifier {
|
225 | fill: $disabled;
|
226 | }
|
227 |
|
228 | .#{$prefix}--search--light .#{$prefix}--search-input {
|
229 | background: $field-02;
|
230 | }
|
231 |
|
232 | .#{$prefix}--search--sm .#{$prefix}--search-input {
|
233 | @include type-style('body-short-01');
|
234 | height: rem(32px);
|
235 | }
|
236 |
|
237 | .#{$prefix}--search--xl .#{$prefix}--search-input {
|
238 | @include type-style('body-short-02');
|
239 | font-size: carbon--type-scale(4);
|
240 | height: rem(48px);
|
241 | padding: 0 rem(64px) 0 rem(48px);
|
242 | }
|
243 |
|
244 | .#{$prefix}--search-magnifier {
|
245 | left: 0.75rem;
|
246 | z-index: 2;
|
247 | position: absolute;
|
248 | height: rem(16px);
|
249 | width: rem(16px);
|
250 | top: 50%;
|
251 | transform: translateY(-50%);
|
252 |
|
253 | fill: $text-02;
|
254 | }
|
255 |
|
256 | .#{$prefix}--search--xl .#{$prefix}--search-magnifier {
|
257 | height: rem(20px);
|
258 | width: rem(20px);
|
259 | left: rem(24px);
|
260 | transform: translate(-50%, -50%);
|
261 | }
|
262 |
|
263 | .#{$prefix}--search-close {
|
264 | @include button-reset(false);
|
265 | @include focus-outline('reset');
|
266 | display: flex;
|
267 | align-items: center;
|
268 | justify-content: center;
|
269 | transition: opacity $duration--fast-02, outline $duration--fast-02, background-color $duration--fast-02,
|
270 | border-color $duration--fast-02;
|
271 | border-bottom: 1px solid transparent;
|
272 | cursor: pointer;
|
273 | visibility: visible;
|
274 | opacity: 1;
|
275 | position: absolute;
|
276 | height: rem(40px);
|
277 | width: rem(40px);
|
278 | right: 0;
|
279 | fill: $icon-01;
|
280 | border: 2px solid transparent;
|
281 | border-left: 0;
|
282 |
|
283 | &:hover {
|
284 | background-color: $hover-ui;
|
285 | border-bottom: 1px solid $ui-04;
|
286 | }
|
287 | &:active {
|
288 | @include focus-outline('outline');
|
289 | background-color: $selected-ui;
|
290 | }
|
291 | }
|
292 |
|
293 | .#{$prefix}--search-input:focus ~ .#{$prefix}--search-close:hover {
|
294 | border: 2px solid $focus;
|
295 | border-left: 0;
|
296 | }
|
297 |
|
298 | .#{$prefix}--search--sm .#{$prefix}--search-close {
|
299 | height: rem(32px);
|
300 | width: rem(32px);
|
301 | }
|
302 |
|
303 | .#{$prefix}--search--xl .#{$prefix}--search-close {
|
304 | height: rem(48px);
|
305 | width: rem(48px);
|
306 | }
|
307 |
|
308 | .#{$prefix}--search-close:focus {
|
309 | @include focus-outline('outline');
|
310 | }
|
311 |
|
312 | .#{$prefix}--search-close--hidden {
|
313 | visibility: hidden;
|
314 | opacity: 0;
|
315 | }
|
316 |
|
317 | .#{$prefix}--search--lg.#{$prefix}--skeleton .#{$prefix}--search-input,
|
318 | .#{$prefix}--search--sm.#{$prefix}--skeleton .#{$prefix}--search-input {
|
319 | @include skeleton;
|
320 | width: 100%;
|
321 |
|
322 | &::placeholder {
|
323 | color: transparent;
|
324 | }
|
325 | }
|
326 | }
|
327 |
|
328 | @include exports('search') {
|
329 | @if feature-flag-enabled('components-x') {
|
330 | @include search--x;
|
331 | } @else {
|
332 | @include search;
|
333 | }
|
334 | }
|