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