1 | @import "../../themes/ionic.globals.wp";
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | $alert-wp-backdrop-background: #fff !default;
|
8 |
|
9 |
|
10 | $alert-wp-width: 100% !default;
|
11 |
|
12 |
|
13 | $alert-wp-max-width: 520px !default;
|
14 |
|
15 |
|
16 | $alert-wp-border-width: 1px !default;
|
17 |
|
18 |
|
19 | $alert-wp-border-style: solid !default;
|
20 |
|
21 |
|
22 | $alert-wp-border-color: color($colors-wp, primary) !default;
|
23 |
|
24 |
|
25 | $alert-wp-border-radius: 0 !default;
|
26 |
|
27 |
|
28 | $alert-wp-background: #e6e6e6 !default;
|
29 |
|
30 |
|
31 | $alert-wp-head-padding: null !default;
|
32 |
|
33 |
|
34 | $alert-wp-head-padding-top: 20px !default;
|
35 |
|
36 |
|
37 | $alert-wp-head-padding-end: 22px !default;
|
38 |
|
39 |
|
40 | $alert-wp-head-padding-bottom: 5px !default;
|
41 |
|
42 |
|
43 | $alert-wp-head-padding-start: 22px !default;
|
44 |
|
45 |
|
46 | $alert-wp-head-text-align: start !default;
|
47 |
|
48 |
|
49 | $alert-wp-title-font-size: 20px !default;
|
50 |
|
51 |
|
52 | $alert-wp-title-font-weight: 400 !default;
|
53 |
|
54 |
|
55 | $alert-wp-sub-title-font-size: 16px !default;
|
56 |
|
57 |
|
58 | $alert-wp-message-padding: null !default;
|
59 |
|
60 |
|
61 | $alert-wp-message-padding-top: 0 !default;
|
62 |
|
63 |
|
64 | $alert-wp-message-padding-end: 22px !default;
|
65 |
|
66 |
|
67 | $alert-wp-message-padding-bottom: 8px !default;
|
68 |
|
69 |
|
70 | $alert-wp-message-padding-start: 22px !default;
|
71 |
|
72 |
|
73 | $alert-wp-message-padding-empty: null !default;
|
74 |
|
75 |
|
76 | $alert-wp-message-empty-padding-top: 0 !default;
|
77 |
|
78 |
|
79 | $alert-wp-message-empty-padding-end: $alert-wp-message-empty-padding-top !default;
|
80 |
|
81 |
|
82 | $alert-wp-message-empty-padding-bottom: $alert-wp-message-empty-padding-top !default;
|
83 |
|
84 |
|
85 | $alert-wp-message-empty-padding-start: $alert-wp-message-empty-padding-end !default;
|
86 |
|
87 |
|
88 | $alert-wp-message-text-color: #000 !default;
|
89 |
|
90 |
|
91 | $alert-wp-message-font-size: 13px !default;
|
92 |
|
93 |
|
94 | $alert-wp-content-max-height: 240px !default;
|
95 |
|
96 |
|
97 | $alert-wp-input-margin: null !default;
|
98 |
|
99 |
|
100 | $alert-wp-input-margin-top: 5px !default;
|
101 |
|
102 |
|
103 | $alert-wp-input-margin-end: 0 !default;
|
104 |
|
105 |
|
106 | $alert-wp-input-margin-bottom: 5px !default;
|
107 |
|
108 |
|
109 | $alert-wp-input-margin-start: 0 !default;
|
110 |
|
111 |
|
112 | $alert-wp-input-padding: null !default;
|
113 |
|
114 |
|
115 | $alert-wp-input-padding-top: 0 !default;
|
116 |
|
117 |
|
118 | $alert-wp-input-padding-end: 8px !default;
|
119 |
|
120 |
|
121 | $alert-wp-input-padding-bottom: $alert-wp-input-padding-top !default;
|
122 |
|
123 |
|
124 | $alert-wp-input-padding-start: $alert-wp-input-padding-end !default;
|
125 |
|
126 |
|
127 | $alert-wp-input-border-width: 2px !default;
|
128 |
|
129 |
|
130 | $alert-wp-input-border-style: $alert-wp-border-style !default;
|
131 |
|
132 |
|
133 | $alert-wp-input-border-color: $input-wp-border-color !default;
|
134 |
|
135 |
|
136 | $alert-wp-input-border-color-focused: color($colors-wp, primary) !default;
|
137 |
|
138 |
|
139 | $alert-wp-input-line-height: 3rem !default;
|
140 |
|
141 |
|
142 | $alert-wp-input-text-color: #000 !default;
|
143 |
|
144 |
|
145 | $alert-wp-button-padding: null !default;
|
146 |
|
147 |
|
148 | $alert-wp-button-padding-top: 5px !default;
|
149 |
|
150 |
|
151 | $alert-wp-button-padding-end: $alert-wp-button-padding-top !default;
|
152 |
|
153 |
|
154 | $alert-wp-button-padding-bottom: $alert-wp-button-padding-top !default;
|
155 |
|
156 |
|
157 | $alert-wp-button-padding-start: $alert-wp-button-padding-end !default;
|
158 |
|
159 |
|
160 | $alert-wp-button-width: 49.5% !default;
|
161 |
|
162 |
|
163 | $alert-wp-button-border-radius: 0 !default;
|
164 |
|
165 |
|
166 | $alert-wp-button-font-weight: 400 !default;
|
167 |
|
168 |
|
169 | $alert-wp-button-text-color: #000 !default;
|
170 |
|
171 |
|
172 | $alert-wp-button-background: #b8b8b8 !default;
|
173 |
|
174 |
|
175 | $alert-wp-button-background-activated: color-shade($alert-wp-button-background) !default;
|
176 |
|
177 |
|
178 | $alert-wp-button-margin-right: 1% !default;
|
179 |
|
180 | $alert-wp-button-margin-end: $alert-wp-button-margin-right !default;
|
181 |
|
182 | $alert-wp-button-group-padding: null !default;
|
183 |
|
184 |
|
185 | $alert-wp-button-group-padding-top: 20px !default;
|
186 |
|
187 |
|
188 | $alert-wp-button-group-padding-end: 22px !default;
|
189 |
|
190 |
|
191 | $alert-wp-button-group-padding-bottom: 20px !default;
|
192 |
|
193 |
|
194 | $alert-wp-button-group-padding-start: 22px !default;
|
195 |
|
196 |
|
197 |
|
198 | $alert-wp-button-group-justify-content: flex-end !default;
|
199 |
|
200 |
|
201 | $alert-wp-button-group-flex-wrap: wrap-reverse !default;
|
202 |
|
203 |
|
204 | $alert-wp-button-group-vertical-width: 100% !default;
|
205 |
|
206 |
|
207 | $alert-wp-button-group-vertical-margin-top: 5px !default;
|
208 |
|
209 |
|
210 |
|
211 | $alert-wp-radio-background: color($colors-wp, primary) !default;
|
212 |
|
213 |
|
214 | $alert-wp-radio-border-color: $input-wp-border-color !default;
|
215 |
|
216 |
|
217 | $alert-wp-radio-label-padding: null !default;
|
218 |
|
219 |
|
220 | $alert-wp-radio-label-padding-top: 13px !default;
|
221 |
|
222 |
|
223 | $alert-wp-radio-label-padding-end: 26px !default;
|
224 |
|
225 |
|
226 | $alert-wp-radio-label-padding-bottom: $alert-wp-radio-label-padding-top !default;
|
227 |
|
228 |
|
229 | $alert-wp-radio-label-padding-start: $alert-wp-radio-label-padding-end !default;
|
230 |
|
231 |
|
232 |
|
233 | $alert-wp-radio-label-text-color: initial !default;
|
234 |
|
235 |
|
236 | $alert-wp-radio-label-text-color-checked: $alert-wp-button-text-color !default;
|
237 |
|
238 |
|
239 | $alert-wp-radio-top: 0 !default;
|
240 |
|
241 |
|
242 | $alert-wp-radio-left: 13px !default;
|
243 |
|
244 |
|
245 | $alert-wp-radio-width: 16px !default;
|
246 |
|
247 |
|
248 | $alert-wp-radio-height: 16px !default;
|
249 |
|
250 |
|
251 | $alert-wp-radio-border-width: 2px !default;
|
252 |
|
253 |
|
254 | $alert-wp-radio-border-style: solid !default;
|
255 |
|
256 |
|
257 | $alert-wp-radio-border-radius: 50% !default;
|
258 |
|
259 |
|
260 | $alert-wp-radio-border-color: $input-wp-border-color !default;
|
261 |
|
262 |
|
263 | $alert-wp-radio-icon-top: 2px !default;
|
264 |
|
265 |
|
266 | $alert-wp-radio-icon-left: 2px !default;
|
267 |
|
268 | $alert-wp-radio-icon-start: $alert-wp-radio-icon-left !default;
|
269 |
|
270 |
|
271 | $alert-wp-radio-icon-width: 8px !default;
|
272 |
|
273 |
|
274 | $alert-wp-radio-icon-height: 8px !default;
|
275 |
|
276 |
|
277 | $alert-wp-radio-icon-border-radius: $alert-wp-radio-border-radius !default;
|
278 |
|
279 |
|
280 | $alert-wp-checkbox-label-padding: null !default;
|
281 |
|
282 |
|
283 | $alert-wp-checkbox-label-padding-top: 13px !default;
|
284 |
|
285 |
|
286 | $alert-wp-checkbox-label-padding-end: 26px !default;
|
287 |
|
288 |
|
289 | $alert-wp-checkbox-label-padding-bottom: $alert-wp-checkbox-label-padding-top !default;
|
290 |
|
291 |
|
292 | $alert-wp-checkbox-label-padding-start: $alert-wp-checkbox-label-padding-end !default;
|
293 |
|
294 |
|
295 | $alert-wp-checkbox-label-text-color: initial !default;
|
296 |
|
297 |
|
298 | $alert-wp-checkbox-label-text-color-checked: initial !default;
|
299 |
|
300 |
|
301 | $alert-wp-checkbox-top: 0 !default;
|
302 |
|
303 |
|
304 | $alert-wp-checkbox-left: 13px !default;
|
305 |
|
306 |
|
307 | $alert-wp-checkbox-width: 16px !default;
|
308 |
|
309 |
|
310 | $alert-wp-checkbox-height: 16px !default;
|
311 |
|
312 |
|
313 | $alert-wp-checkbox-border-width: 2px !default;
|
314 |
|
315 |
|
316 | $alert-wp-checkbox-border-style: solid !default;
|
317 |
|
318 |
|
319 | $alert-wp-checkbox-border-radius: 0 !default;
|
320 |
|
321 |
|
322 | $alert-wp-checkbox-border-color: $input-wp-border-color !default;
|
323 |
|
324 |
|
325 | $alert-wp-checkbox-background-off: transparent !default;
|
326 |
|
327 |
|
328 | $alert-wp-checkbox-background-on: color($colors-wp, primary) !default;
|
329 |
|
330 |
|
331 | $alert-wp-checkbox-icon-top: -2px !default;
|
332 |
|
333 |
|
334 | $alert-wp-checkbox-icon-left: 3px !default;
|
335 |
|
336 | $alert-wp-checkbox-icon-start: $alert-wp-checkbox-icon-left !default;
|
337 |
|
338 |
|
339 | $alert-wp-checkbox-icon-width: 6px !default;
|
340 |
|
341 |
|
342 | $alert-wp-checkbox-icon-height: 12px !default;
|
343 |
|
344 |
|
345 | $alert-wp-checkbox-icon-border-width: 1px !default;
|
346 |
|
347 |
|
348 | $alert-wp-checkbox-icon-border-style: solid !default;
|
349 |
|
350 |
|
351 | $alert-wp-checkbox-icon-border-color: color-contrast($colors-wp, $alert-wp-checkbox-background-on) !default;
|
352 |
|
353 |
|
354 | $alert-wp-checkbox-icon-transform: rotate(45deg) !default;
|
355 |
|
356 |
|
357 | .alert-wp ion-backdrop {
|
358 | background: $alert-wp-backdrop-background;
|
359 | }
|
360 |
|
361 | .alert-wp .alert-wrapper {
|
362 | @include border-radius($alert-wp-border-radius);
|
363 |
|
364 | width: $alert-wp-width;
|
365 | max-width: $alert-wp-max-width;
|
366 |
|
367 | border: $alert-wp-border-width $alert-wp-border-style $alert-wp-border-color;
|
368 | background: $alert-wp-background;
|
369 | }
|
370 |
|
371 |
|
372 |
|
373 |
|
374 | .alert-wp .alert-head {
|
375 | @include text-align($alert-wp-head-text-align);
|
376 |
|
377 | @include deprecated-variable(padding, $alert-wp-head-padding) {
|
378 | @include padding($alert-wp-head-padding-top, $alert-wp-head-padding-end, $alert-wp-head-padding-bottom, $alert-wp-head-padding-start);
|
379 | }
|
380 | }
|
381 |
|
382 | .alert-wp .alert-title {
|
383 | font-size: $alert-wp-title-font-size;
|
384 | font-weight: $alert-wp-title-font-weight;
|
385 | }
|
386 |
|
387 | .alert-wp .alert-sub-title {
|
388 | font-size: $alert-wp-sub-title-font-size;
|
389 | }
|
390 |
|
391 |
|
392 |
|
393 |
|
394 |
|
395 | .alert-wp .alert-message,
|
396 | .alert-wp .alert-input-group {
|
397 | color: $alert-wp-message-text-color;
|
398 |
|
399 | @include deprecated-variable(padding, $alert-wp-message-padding) {
|
400 | @include padding($alert-wp-message-padding-top, $alert-wp-message-padding-end, $alert-wp-message-padding-bottom, $alert-wp-message-padding-start);
|
401 | }
|
402 | }
|
403 |
|
404 | .alert-wp .alert-message {
|
405 | max-height: $alert-wp-content-max-height;
|
406 |
|
407 | font-size: $alert-wp-message-font-size;
|
408 | }
|
409 |
|
410 | .alert-wp .alert-message:empty {
|
411 | @include deprecated-variable(padding, $alert-wp-message-padding-empty) {
|
412 | @include padding($alert-wp-message-empty-padding-top, $alert-wp-message-empty-padding-end, $alert-wp-message-empty-padding-bottom, $alert-wp-message-empty-padding-start);
|
413 | }
|
414 | }
|
415 |
|
416 |
|
417 |
|
418 |
|
419 |
|
420 | .alert-wp .alert-input {
|
421 | border: $alert-wp-input-border-width $alert-wp-input-border-style $alert-wp-input-border-color;
|
422 | line-height: $alert-wp-input-line-height;
|
423 | color: $alert-wp-input-text-color;
|
424 |
|
425 | @include deprecated-variable(margin, $alert-wp-input-margin) {
|
426 | @include margin($alert-wp-input-margin-top, $alert-wp-input-margin-end, $alert-wp-input-margin-bottom, $alert-wp-input-margin-start);
|
427 | }
|
428 |
|
429 | @include deprecated-variable(padding, $alert-wp-input-padding) {
|
430 | @include padding($alert-wp-input-padding-top, $alert-wp-input-padding-end, $alert-wp-input-padding-bottom, $alert-wp-input-padding-start);
|
431 | }
|
432 | }
|
433 |
|
434 | .alert-wp .alert-input:focus {
|
435 | border-color: $alert-wp-input-border-color-focused;
|
436 | }
|
437 |
|
438 |
|
439 |
|
440 |
|
441 |
|
442 | .alert-wp .alert-radio-group,
|
443 | .alert-wp .alert-checkbox-group {
|
444 | position: relative;
|
445 | overflow: auto;
|
446 |
|
447 | max-height: $alert-wp-content-max-height;
|
448 | }
|
449 |
|
450 | .alert-wp .alert-tappable {
|
451 | position: relative;
|
452 | display: flex;
|
453 |
|
454 | overflow: hidden;
|
455 |
|
456 |
|
457 | min-height: 4.4rem;
|
458 | }
|
459 |
|
460 |
|
461 |
|
462 |
|
463 |
|
464 | .alert-wp .alert-radio-label {
|
465 | overflow: hidden;
|
466 |
|
467 | flex: 1;
|
468 |
|
469 | text-overflow: ellipsis;
|
470 | white-space: nowrap;
|
471 |
|
472 | color: $alert-wp-radio-label-text-color;
|
473 |
|
474 | @include deprecated-variable(padding, $alert-wp-radio-label-padding) {
|
475 | @include padding($alert-wp-radio-label-padding-top, $alert-wp-radio-label-padding-end, $alert-wp-radio-label-padding-bottom, $alert-wp-radio-label-padding-start);
|
476 | }
|
477 | }
|
478 |
|
479 |
|
480 |
|
481 |
|
482 | .alert-wp .alert-radio-icon {
|
483 | @include position($alert-wp-radio-top, null, null, $alert-wp-radio-left);
|
484 | @include margin(0);
|
485 | @include border-radius($alert-wp-radio-border-radius);
|
486 |
|
487 | position: relative;
|
488 | display: block;
|
489 |
|
490 | width: $alert-wp-radio-width;
|
491 | height: $alert-wp-radio-height;
|
492 |
|
493 | border-width: $alert-wp-radio-border-width;
|
494 | border-style: $alert-wp-radio-border-style;
|
495 | border-color: $alert-wp-radio-border-color;
|
496 | }
|
497 |
|
498 |
|
499 |
|
500 |
|
501 | .alert-wp .alert-radio-inner {
|
502 | @include position($alert-wp-radio-icon-top, null, null, $alert-wp-radio-icon-start);
|
503 | @include border-radius($alert-wp-radio-icon-border-radius);
|
504 |
|
505 | position: absolute;
|
506 | display: none;
|
507 |
|
508 | width: $alert-wp-radio-icon-width;
|
509 | height: $alert-wp-radio-icon-height;
|
510 |
|
511 | background: $alert-wp-radio-background;
|
512 | }
|
513 |
|
514 |
|
515 |
|
516 |
|
517 | .alert-wp [aria-checked=true] .alert-radio-label {
|
518 | color: $alert-wp-radio-label-text-color-checked;
|
519 | }
|
520 |
|
521 | .alert-wp [aria-checked=true] .alert-radio-icon {
|
522 | border-color: $alert-wp-radio-border-color;
|
523 | }
|
524 |
|
525 | .alert-wp [aria-checked=true] .alert-radio-inner {
|
526 | display: block;
|
527 | }
|
528 |
|
529 |
|
530 |
|
531 |
|
532 |
|
533 | .alert-wp .alert-checkbox-label {
|
534 | overflow: hidden;
|
535 |
|
536 | flex: 1;
|
537 |
|
538 | text-overflow: ellipsis;
|
539 | white-space: nowrap;
|
540 |
|
541 | color: $alert-wp-checkbox-label-text-color;
|
542 |
|
543 | @include deprecated-variable(padding, $alert-wp-checkbox-label-padding) {
|
544 | @include padding($alert-wp-checkbox-label-padding-top, $alert-wp-checkbox-label-padding-end, $alert-wp-checkbox-label-padding-bottom, $alert-wp-checkbox-label-padding-start);
|
545 | }
|
546 | }
|
547 |
|
548 | .alert-wp [aria-checked=true] .alert-checkbox-label {
|
549 | color: $alert-wp-checkbox-label-text-color-checked;
|
550 | }
|
551 |
|
552 |
|
553 |
|
554 |
|
555 | .alert-wp .alert-checkbox-icon {
|
556 | @include position($alert-wp-checkbox-top, null, null, $alert-wp-checkbox-left);
|
557 | @include border-radius($alert-wp-checkbox-border-radius);
|
558 |
|
559 | position: relative;
|
560 |
|
561 | width: $alert-wp-checkbox-width;
|
562 | height: $alert-wp-checkbox-height;
|
563 |
|
564 | border-width: $alert-wp-checkbox-border-width;
|
565 | border-style: $alert-wp-checkbox-border-style;
|
566 | border-color: $alert-wp-checkbox-border-color;
|
567 | background: $alert-wp-checkbox-background-off;
|
568 | }
|
569 |
|
570 |
|
571 |
|
572 |
|
573 | .alert-wp [aria-checked=true] .alert-checkbox-icon {
|
574 | border-color: $alert-wp-checkbox-background-on;
|
575 | background: $alert-wp-checkbox-background-on;
|
576 | }
|
577 |
|
578 |
|
579 |
|
580 |
|
581 | .alert-wp [aria-checked=true] .alert-checkbox-inner {
|
582 | @include position($alert-wp-checkbox-icon-top, null, null, $alert-wp-checkbox-icon-start);
|
583 |
|
584 | position: absolute;
|
585 |
|
586 | width: $alert-wp-checkbox-icon-width;
|
587 | height: $alert-wp-checkbox-icon-height;
|
588 |
|
589 | border-width: $alert-wp-checkbox-icon-border-width;
|
590 | border-top-width: 0;
|
591 | border-left-width: 0;
|
592 | border-style: $alert-wp-checkbox-icon-border-style;
|
593 | border-color: $alert-wp-checkbox-icon-border-color;
|
594 | transform: $alert-wp-checkbox-icon-transform;
|
595 | }
|
596 |
|
597 |
|
598 |
|
599 |
|
600 |
|
601 | .alert-wp .alert-button-group {
|
602 | flex-wrap: $alert-wp-button-group-flex-wrap;
|
603 | justify-content: $alert-wp-button-group-justify-content;
|
604 |
|
605 | @include deprecated-variable(padding, $alert-wp-button-group-padding) {
|
606 | @include padding($alert-wp-button-group-padding-top, $alert-wp-button-group-padding-end, $alert-wp-button-group-padding-bottom, $alert-wp-button-group-padding-start);
|
607 | }
|
608 | }
|
609 |
|
610 | .alert-wp .alert-button-group-vertical .alert-button {
|
611 | @include margin($alert-wp-button-group-vertical-margin-top, null, null, null);
|
612 |
|
613 | width: $alert-wp-button-group-vertical-width;
|
614 | }
|
615 |
|
616 | .alert-wp .alert-button-group-vertical .alert-button:first-child:not(:only-child) {
|
617 | @include margin(0, 0, null, null);
|
618 | }
|
619 |
|
620 | .alert-wp .alert-button {
|
621 | @include border-radius($alert-wp-button-border-radius);
|
622 |
|
623 | width: $alert-wp-button-width;
|
624 |
|
625 | font-weight: $alert-wp-button-font-weight;
|
626 | color: $alert-wp-button-text-color;
|
627 | background: $alert-wp-button-background;
|
628 |
|
629 | @include deprecated-variable(padding, $alert-wp-button-padding) {
|
630 | @include padding($alert-wp-button-padding-top, $alert-wp-button-padding-end, $alert-wp-button-padding-bottom, $alert-wp-button-padding-start);
|
631 | }
|
632 | }
|
633 |
|
634 | .alert-wp .alert-button:first-child:not(:only-child) {
|
635 | @include margin-horizontal(null, $alert-wp-button-margin-end);
|
636 | }
|
637 |
|
638 | .alert-wp .alert-button.activated {
|
639 | background: $alert-wp-button-background-activated;
|
640 | }
|