@luizleon/sf.prefeiturasp.vuecomponents 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (93) hide show
  1. package/dist/components/content/Content.d.ts +21 -0
  2. package/dist/components/icon/Icon.d.ts +39 -0
  3. package/dist/components/internal/LoadingCircle.d.ts +2 -0
  4. package/dist/components/internal/LogoutIcon.d.ts +2 -0
  5. package/dist/components/internal/MenuIcon.d.ts +2 -0
  6. package/dist/components/internal/ScrollToTop.d.ts +2 -0
  7. package/dist/components/internal/ThemeToggle.d.ts +2 -0
  8. package/dist/components/internal/cssClassBuilder.d.ts +29 -0
  9. package/dist/components/layout/Layout.d.ts +12 -0
  10. package/dist/components/navmenulink/NavMenuLink.d.ts +12 -0
  11. package/dist/enum/cor.d.ts +9 -0
  12. package/dist/enum/index.d.ts +2 -0
  13. package/dist/enum/tamanho.d.ts +5 -0
  14. package/dist/index.d.ts +9 -0
  15. package/dist/lib.es.js +2724 -0
  16. package/dist/lib.umd.js +79 -0
  17. package/dist/services/authService.d.ts +20 -0
  18. package/dist/services/dialogService.d.ts +12 -0
  19. package/dist/services/navMenuService.d.ts +9 -0
  20. package/dist/style.css +1 -0
  21. package/package.json +31 -0
  22. package/src/components/content/Content.d.ts +35 -0
  23. package/src/components/content/Content.vue +41 -0
  24. package/src/components/icon/Icon.d.ts +38 -0
  25. package/src/components/icon/Icon.vue +43 -0
  26. package/src/components/internal/LoadingCircle.vue +16 -0
  27. package/src/components/internal/LogoutIcon.vue +14 -0
  28. package/src/components/internal/MenuIcon.vue +13 -0
  29. package/src/components/internal/ScrollToTop.vue +26 -0
  30. package/src/components/internal/ThemeToggle.ts +41 -0
  31. package/src/components/internal/ThemeToggle.vue +23 -0
  32. package/src/components/internal/cssClassBuilder.ts +44 -0
  33. package/src/components/layout/Layout.d.ts +44 -0
  34. package/src/components/layout/Layout.vue +63 -0
  35. package/src/components/navmenulink/NavMenuLink.d.ts +34 -0
  36. package/src/components/navmenulink/NavMenuLink.vue +41 -0
  37. package/src/enum/cor.ts +9 -0
  38. package/src/enum/index.ts +2 -0
  39. package/src/enum/tamanho.ts +5 -0
  40. package/src/index.ts +56 -0
  41. package/src/services/authService.ts +69 -0
  42. package/src/services/dialogService.ts +35 -0
  43. package/src/services/navMenuService.ts +21 -0
  44. package/src/sf-oidc-state.html +15 -0
  45. package/src/style/componentes.scss +22 -0
  46. package/src/style/src/_animation.scss +441 -0
  47. package/src/style/src/_display.scss +10 -0
  48. package/src/style/src/_flexbox.scss +85 -0
  49. package/src/style/src/_functions.scss +171 -0
  50. package/src/style/src/_gap.scss +8 -0
  51. package/src/style/src/_grid.scss +100 -0
  52. package/src/style/src/_mixins.scss +633 -0
  53. package/src/style/src/_normalize.scss +351 -0
  54. package/src/style/src/_ripple.scss +30 -0
  55. package/src/style/src/_size.scss +98 -0
  56. package/src/style/src/_spacing.scss +42 -0
  57. package/src/style/src/_typography.scss +43 -0
  58. package/src/style/src/_variables.scss +87 -0
  59. package/src/style/src/components/_button.scss +110 -0
  60. package/src/style/src/components/_checkbox.scss +53 -0
  61. package/src/style/src/components/_content.scss +57 -0
  62. package/src/style/src/components/_datefield.scss +405 -0
  63. package/src/style/src/components/_drawer.scss +99 -0
  64. package/src/style/src/components/_icon.scss +120 -0
  65. package/src/style/src/components/_internal_icon_button.scss +5 -0
  66. package/src/style/src/components/_layout.scss +183 -0
  67. package/src/style/src/components/_loading-circle.scss +24 -0
  68. package/src/style/src/components/_mark.scss +9 -0
  69. package/src/style/src/components/_mask.scss +33 -0
  70. package/src/style/src/components/_navmenulink.scss +31 -0
  71. package/src/style/src/components/_numpad.scss +58 -0
  72. package/src/style/src/components/_progress-circular.scss +52 -0
  73. package/src/style/src/components/_scrollToTop.scss +28 -0
  74. package/src/style/src/components/_select.scss +60 -0
  75. package/src/style/src/components/_svg_icon.scss +5 -0
  76. package/src/style/src/components/_textfield.scss +186 -0
  77. package/src/style/src/components/_themetoggle.scss +25 -0
  78. package/src/style/src/components/_toast.scss +66 -0
  79. package/src/style/src/components/_tooltip.scss +55 -0
  80. package/src/style/src/sweetalert/_sweetalert.scss +9 -0
  81. package/src/style/src/sweetalert/scss/_animations.scss +197 -0
  82. package/src/style/src/sweetalert/scss/_body.scss +45 -0
  83. package/src/style/src/sweetalert/scss/_core.scss +863 -0
  84. package/src/style/src/sweetalert/scss/_mixins.scss +16 -0
  85. package/src/style/src/sweetalert/scss/_theming.scss +8 -0
  86. package/src/style/src/sweetalert/scss/_toasts-animations.scss +83 -0
  87. package/src/style/src/sweetalert/scss/_toasts-body.scss +85 -0
  88. package/src/style/src/sweetalert/scss/_toasts.scss +203 -0
  89. package/src/style/src/sweetalert/scss/_variables.scss +265 -0
  90. package/src/style/tema.scss +169 -0
  91. package/src/ts-helpers.d.ts +57 -0
  92. package/tsconfig.json +19 -0
  93. package/vite.config.js +25 -0
@@ -0,0 +1,863 @@
1
+ @use "sass:math";
2
+ @import "../../functions";
3
+
4
+ .swal2-container {
5
+ display: grid;
6
+ position: fixed;
7
+ z-index: 9999;
8
+ top: 0;
9
+ right: 0;
10
+ bottom: 0;
11
+ left: 0;
12
+ box-sizing: border-box;
13
+ grid-template-areas:
14
+ "top-start top top-end"
15
+ "center-start center center-end"
16
+ "bottom-start bottom-center bottom-end";
17
+ grid-template-rows: minmax(min-content, auto) minmax(
18
+ min-content,
19
+ auto
20
+ ) minmax(min-content, auto);
21
+ height: 100%; // Safari
22
+ padding: $swal2-container-padding;
23
+ overflow-x: hidden;
24
+ transition: $swal2-backdrop-transition;
25
+
26
+ // sweetalert2/issues/905
27
+ -webkit-overflow-scrolling: touch;
28
+
29
+ &.swal2-backdrop-show,
30
+ &.swal2-noanimation {
31
+ background: $swal2-backdrop;
32
+ }
33
+
34
+ &.swal2-backdrop-hide {
35
+ background: transparent !important;
36
+ }
37
+
38
+ &.swal2-top-start,
39
+ &.swal2-center-start,
40
+ &.swal2-bottom-start {
41
+ grid-template-columns: minmax(0, 1fr) auto auto;
42
+ }
43
+
44
+ &.swal2-top,
45
+ &.swal2-center,
46
+ &.swal2-bottom {
47
+ grid-template-columns: auto minmax(0, 1fr) auto;
48
+ }
49
+
50
+ &.swal2-top-end,
51
+ &.swal2-center-end,
52
+ &.swal2-bottom-end {
53
+ grid-template-columns: auto auto minmax(0, 1fr);
54
+ }
55
+
56
+ &.swal2-top-start > .swal2-popup {
57
+ align-self: start;
58
+ }
59
+
60
+ &.swal2-top > .swal2-popup {
61
+ grid-column: 2;
62
+ align-self: start;
63
+ justify-self: center;
64
+ }
65
+
66
+ &.swal2-top-end > .swal2-popup,
67
+ &.swal2-top-right > .swal2-popup {
68
+ grid-column: 3;
69
+ align-self: start;
70
+ justify-self: end;
71
+ }
72
+
73
+ &.swal2-center-start > .swal2-popup,
74
+ &.swal2-center-left > .swal2-popup {
75
+ grid-row: 2;
76
+ align-self: center;
77
+ }
78
+
79
+ &.swal2-center > .swal2-popup {
80
+ grid-column: 2;
81
+ grid-row: 2;
82
+ align-self: center;
83
+ justify-self: center;
84
+ }
85
+
86
+ &.swal2-center-end > .swal2-popup,
87
+ &.swal2-center-right > .swal2-popup {
88
+ grid-column: 3;
89
+ grid-row: 2;
90
+ align-self: center;
91
+ justify-self: end;
92
+ }
93
+
94
+ &.swal2-bottom-start > .swal2-popup,
95
+ &.swal2-bottom-left > .swal2-popup {
96
+ grid-column: 1;
97
+ grid-row: 3;
98
+ align-self: end;
99
+ }
100
+
101
+ &.swal2-bottom > .swal2-popup {
102
+ grid-column: 2;
103
+ grid-row: 3;
104
+ justify-self: center;
105
+ align-self: end;
106
+ }
107
+
108
+ &.swal2-bottom-end > .swal2-popup,
109
+ &.swal2-bottom-right > .swal2-popup {
110
+ grid-column: 3;
111
+ grid-row: 3;
112
+ align-self: end;
113
+ justify-self: end;
114
+ }
115
+
116
+ &.swal2-grow-row > .swal2-popup,
117
+ &.swal2-grow-fullscreen > .swal2-popup {
118
+ grid-column: 1/4;
119
+ width: 100%;
120
+ }
121
+
122
+ &.swal2-grow-column > .swal2-popup,
123
+ &.swal2-grow-fullscreen > .swal2-popup {
124
+ grid-row: 1/4;
125
+ align-self: stretch;
126
+ }
127
+
128
+ &.swal2-no-transition {
129
+ transition: none !important;
130
+ }
131
+ }
132
+
133
+ .swal2-popup {
134
+ display: none;
135
+ position: relative;
136
+ box-sizing: border-box;
137
+ grid-template-columns: minmax(0, 100%);
138
+ width: $swal2-width;
139
+ max-width: 100%;
140
+ padding: $swal2-padding;
141
+ border: $swal2-border;
142
+ border-radius: $swal2-border-radius;
143
+ background: $swal2-background;
144
+ color: $swal2-color;
145
+ font-family: $swal2-font;
146
+ font-size: $swal2-font-size;
147
+
148
+ &:focus {
149
+ outline: none;
150
+ }
151
+
152
+ &.swal2-loading {
153
+ overflow-y: hidden;
154
+ }
155
+ }
156
+
157
+ .swal2-title {
158
+ position: $swal2-title-position;
159
+ max-width: $swal2-title-max-width;
160
+ margin: $swal2-title-margin;
161
+ padding: $swal2-title-padding;
162
+ color: $swal2-title-color;
163
+ font-size: $swal2-title-font-size;
164
+ font-weight: $swal2-title-font-weight;
165
+ text-align: $swal2-title-text-align;
166
+ text-transform: none;
167
+ word-wrap: break-word;
168
+ }
169
+
170
+ .swal2-actions {
171
+ display: flex;
172
+ z-index: 1; // prevent success icon from overlapping buttons
173
+ box-sizing: border-box;
174
+ flex-wrap: $swal2-actions-flex-wrap;
175
+ align-items: $swal2-actions-align-items;
176
+ justify-content: $swal2-actions-justify-content;
177
+ width: $swal2-actions-width;
178
+ margin: $swal2-actions-margin;
179
+ padding: $swal2-actions-padding;
180
+
181
+ &:not(.swal2-loading) {
182
+ .swal2-styled {
183
+ &[disabled] {
184
+ opacity: 0.4;
185
+ }
186
+
187
+ &:hover {
188
+ background-image: linear-gradient(
189
+ $swal2-button-darken-hover,
190
+ $swal2-button-darken-hover
191
+ );
192
+ }
193
+
194
+ &:active {
195
+ background-image: linear-gradient(
196
+ $swal2-button-darken-active,
197
+ $swal2-button-darken-active
198
+ );
199
+ }
200
+ }
201
+ }
202
+ }
203
+
204
+ .swal2-loader {
205
+ display: none;
206
+ align-items: $swal2-loader-align-items;
207
+ justify-content: $swal2-loader-justify-content;
208
+ width: $swal2-loader-width;
209
+ height: $swal2-loader-height;
210
+ margin: $swal2-loader-margin;
211
+ animation: $swal2-loader-animation;
212
+ border-width: $swal2-loader-border-width;
213
+ border-style: $swal2-loader-border-style;
214
+ border-radius: $swal2-loader-border-radius;
215
+ border-color: $swal2-loader-border-color;
216
+ }
217
+
218
+ .swal2-styled {
219
+ margin: $swal2-button-margin;
220
+ padding: $swal2-button-padding;
221
+ transition: $swal2-button-transition;
222
+ box-shadow: $swal2-button-box-shadow;
223
+ font-weight: $swal2-button-font-weight;
224
+
225
+ &:not([disabled]) {
226
+ cursor: pointer;
227
+ }
228
+
229
+ &.swal2-confirm {
230
+ order: $swal2-confirm-button-order;
231
+ border: $swal2-confirm-button-border;
232
+ border-radius: $swal2-confirm-button-border-radius;
233
+ background: initial;
234
+ background-color: $swal2-confirm-button-background-color;
235
+ color: $swal2-confirm-button-color;
236
+ font-size: $swal2-confirm-button-font-size;
237
+
238
+ &:focus {
239
+ box-shadow: $swal2-confirm-button-focus-box-shadow;
240
+ }
241
+ }
242
+
243
+ &.swal2-deny {
244
+ order: $swal2-deny-button-order;
245
+ border: $swal2-deny-button-border;
246
+ border-radius: $swal2-deny-button-border-radius;
247
+ background: initial;
248
+ background-color: $swal2-deny-button-background-color;
249
+ color: $swal2-deny-button-color;
250
+ font-size: $swal2-deny-button-font-size;
251
+
252
+ &:focus {
253
+ box-shadow: $swal2-deny-button-focus-box-shadow;
254
+ }
255
+ }
256
+
257
+ &.swal2-cancel {
258
+ order: $swal2-cancel-button-order;
259
+ border: $swal2-cancel-button-border;
260
+ border-radius: $swal2-cancel-button-border-radius;
261
+ background: initial;
262
+ background-color: $swal2-cancel-button-background-color;
263
+ color: $swal2-cancel-button-color;
264
+ font-size: $swal2-cancel-button-font-size;
265
+
266
+ &:focus {
267
+ box-shadow: $swal2-cancel-button-focus-box-shadow;
268
+ }
269
+ }
270
+
271
+ &.swal2-default-outline {
272
+ &:focus {
273
+ box-shadow: $swal2-button-focus-box-shadow;
274
+ }
275
+ }
276
+
277
+ &:focus {
278
+ outline: $swal2-button-focus-outline;
279
+ }
280
+
281
+ &::-moz-focus-inner {
282
+ border: 0;
283
+ }
284
+ }
285
+
286
+ .swal2-footer {
287
+ justify-content: center;
288
+ margin: $swal2-footer-margin;
289
+ padding: $swal2-footer-padding;
290
+ border-top: 1px solid $swal2-footer-border-color;
291
+ color: $swal2-footer-color;
292
+ font-size: $swal2-footer-font-size;
293
+ }
294
+
295
+ .swal2-timer-progress-bar-container {
296
+ position: absolute;
297
+ right: 0;
298
+ bottom: 0;
299
+ left: 0;
300
+ grid-column: auto !important;
301
+ overflow: hidden;
302
+ border-bottom-right-radius: $swal2-border-radius;
303
+ border-bottom-left-radius: $swal2-border-radius;
304
+ }
305
+
306
+ .swal2-timer-progress-bar {
307
+ width: 100%;
308
+ height: $swal2-timer-progress-bar-height;
309
+ background: $swal2-timer-progress-bar-background;
310
+ }
311
+
312
+ .swal2-image {
313
+ max-width: 100%;
314
+ margin: $swal2-image-margin;
315
+ }
316
+
317
+ .swal2-close {
318
+ position: $swal2-close-button-position;
319
+ z-index: 2; // sweetalert2/issues/1617
320
+ align-items: $swal2-close-button-align-items;
321
+ justify-content: $swal2-close-button-justify-content;
322
+ width: $swal2-close-button-width;
323
+ height: $swal2-close-button-height;
324
+ margin-top: $swal2-close-button-gap;
325
+ margin-right: $swal2-close-button-gap;
326
+ margin-bottom: -$swal2-close-button-height;
327
+ padding: $swal2-close-button-padding;
328
+ overflow: hidden;
329
+ transition: $swal2-close-button-transition;
330
+ border: $swal2-close-button-border;
331
+ border-radius: $swal2-close-button-border-radius;
332
+ outline: $swal2-close-button-outline;
333
+ background: $swal2-close-button-background;
334
+ color: $swal2-close-button-color;
335
+ font-family: $swal2-close-button-font-family;
336
+ font-family: monospace;
337
+ font-size: $swal2-close-button-font-size;
338
+ cursor: pointer;
339
+ justify-self: $swal2-close-button-justify-self;
340
+
341
+ &:hover {
342
+ transform: $swal2-close-button-hover-transform;
343
+ background: $swal2-close-button-hover-background;
344
+ color: $swal2-close-button-hover-color;
345
+ }
346
+
347
+ &:focus {
348
+ outline: $swal2-close-button-focus-outline;
349
+ box-shadow: $swal2-close-button-focus-box-shadow;
350
+ }
351
+
352
+ &::-moz-focus-inner {
353
+ border: 0;
354
+ }
355
+ }
356
+
357
+ .swal2-html-container {
358
+ z-index: 1; // prevent sucess icon overlapping the content
359
+ justify-content: $swal2-html-container-justify-content;
360
+ margin: $swal2-html-container-margin;
361
+ padding: $swal2-html-container-padding;
362
+ overflow: $swal2-html-container-overflow;
363
+ color: $swal2-html-container-color;
364
+ font-size: $swal2-html-container-font-size;
365
+ font-weight: $swal2-html-container-font-weight;
366
+ line-height: $swal2-html-container-line-height;
367
+ text-align: $swal2-html-container-text-align;
368
+ word-wrap: $swal2-html-container-word-wrap;
369
+ word-break: $swal2-html-container-word-break;
370
+ }
371
+
372
+ .swal2-input,
373
+ .swal2-file,
374
+ .swal2-textarea,
375
+ .swal2-select,
376
+ .swal2-radio,
377
+ .swal2-checkbox {
378
+ margin: $swal2-input-margin;
379
+ }
380
+
381
+ .swal2-input,
382
+ .swal2-file,
383
+ .swal2-textarea {
384
+ box-sizing: border-box;
385
+ width: $swal2-input-width;
386
+ transition: $swal2-input-transition;
387
+ border: $swal2-input-border;
388
+ border-radius: $swal2-input-border-radius;
389
+ background: $swal2-input-background;
390
+ box-shadow: $swal2-input-box-shadow;
391
+ color: $swal2-input-color;
392
+ font-size: $swal2-input-font-size;
393
+
394
+ &.swal2-inputerror {
395
+ border-color: $swal2-error !important;
396
+ background-color: alpha(--error, 0.1);
397
+ }
398
+
399
+ &:focus {
400
+ border: $swal2-input-focus-border;
401
+ outline: $swal2-input-focus-outline;
402
+ box-shadow: $swal2-input-focus-box-shadow;
403
+ }
404
+
405
+ &::placeholder {
406
+ color: alpha(--text, 0.8);
407
+ }
408
+ }
409
+
410
+ .swal2-range {
411
+ margin: $swal2-input-margin;
412
+ background: $swal2-background;
413
+
414
+ input {
415
+ width: 80%;
416
+ }
417
+
418
+ output {
419
+ width: 20%;
420
+ color: $swal2-input-color;
421
+ font-weight: 600;
422
+ text-align: center;
423
+ }
424
+
425
+ input,
426
+ output {
427
+ height: $swal2-input-height;
428
+ padding: 0;
429
+ font-size: $swal2-input-font-size;
430
+ line-height: $swal2-input-height;
431
+ }
432
+ }
433
+
434
+ .swal2-input {
435
+ height: $swal2-input-height;
436
+ padding: $swal2-input-padding;
437
+ }
438
+
439
+ .swal2-file {
440
+ width: 75%;
441
+ margin-right: auto;
442
+ margin-left: auto;
443
+ background: $swal2-input-background;
444
+ font-size: $swal2-input-font-size;
445
+ }
446
+
447
+ .swal2-textarea {
448
+ height: $swal2-textarea-height;
449
+ padding: $swal2-textarea-padding;
450
+ }
451
+
452
+ .swal2-select {
453
+ min-width: 50%;
454
+ max-width: 100%;
455
+ padding: 0.375em 0.625em;
456
+ background: $swal2-input-background;
457
+ color: $swal2-input-color;
458
+ font-size: $swal2-input-font-size;
459
+ }
460
+
461
+ .swal2-radio,
462
+ .swal2-checkbox {
463
+ align-items: center;
464
+ justify-content: center;
465
+ background: $swal2-background;
466
+ color: $swal2-input-color;
467
+
468
+ label {
469
+ margin: 0 0.6em;
470
+ font-size: $swal2-input-font-size;
471
+ }
472
+
473
+ input {
474
+ flex-shrink: 0;
475
+ margin: 0 0.4em;
476
+ }
477
+ }
478
+
479
+ .swal2-input-label {
480
+ display: flex;
481
+ justify-content: $swal2-input-label-justify-content;
482
+ margin: $swal2-input-label-margin;
483
+ }
484
+
485
+ .swal2-validation-message {
486
+ align-items: $swal2-validation-message-align-items;
487
+ justify-content: $swal2-validation-message-justify-content;
488
+ margin: $swal2-validation-message-margin;
489
+ padding: $swal2-validation-message-padding;
490
+ overflow: hidden;
491
+ background: $swal2-validation-message-background;
492
+ color: $swal2-validation-message-color;
493
+ font-size: $swal2-validation-message-font-size;
494
+ font-weight: $swal2-validation-message-font-weight;
495
+
496
+ &::before {
497
+ content: "!";
498
+ display: inline-block;
499
+ width: 1.5em;
500
+ min-width: 1.5em;
501
+ height: 1.5em;
502
+ margin: 0 0.625em;
503
+ zoom: $swal2-validation-message-icon-zoom;
504
+ border-radius: 50%;
505
+ background-color: $swal2-validation-message-icon-background;
506
+ color: $swal2-validation-message-icon-color;
507
+ font-weight: 600;
508
+ line-height: 1.5em;
509
+ text-align: center;
510
+ }
511
+ }
512
+
513
+ // https://stackoverflow.com/a/12335841/1331425
514
+ @function strip-units($number) {
515
+ @return math.div($number, ($number * 0 + 1));
516
+ }
517
+ $icon-zoom: math.div(strip-units($swal2-icon-size), 5);
518
+
519
+ .swal2-icon {
520
+ position: relative;
521
+ box-sizing: content-box;
522
+ justify-content: center;
523
+ width: $swal2-icon-size;
524
+ height: $swal2-icon-size;
525
+ margin: $swal2-icon-margin;
526
+ zoom: $swal2-icon-zoom;
527
+ border: #{0.25em * $icon-zoom} solid transparent;
528
+ border-radius: 50%;
529
+ border-color: $swal2-icon-border-color;
530
+ font-family: $swal2-icon-font-family;
531
+ line-height: $swal2-icon-size;
532
+ cursor: default;
533
+ user-select: none;
534
+
535
+ .swal2-icon-content {
536
+ display: flex;
537
+ align-items: center;
538
+ font-size: $swal2-icon-font-size;
539
+ }
540
+
541
+ &.swal2-error {
542
+ border-color: $swal2-error;
543
+ color: $swal2-error;
544
+
545
+ .swal2-x-mark {
546
+ position: relative;
547
+ flex-grow: 1;
548
+
549
+ @if $icon-zoom != 1 {
550
+ zoom: $icon-zoom;
551
+ }
552
+ }
553
+
554
+ [class^="swal2-x-mark-line"] {
555
+ display: block;
556
+ position: absolute;
557
+ top: 2.3125em;
558
+ width: 2.9375em;
559
+ height: 0.3125em;
560
+ border-radius: 0.125em;
561
+ background-color: $swal2-error;
562
+
563
+ &[class$="left"] {
564
+ left: 1.0625em;
565
+ transform: rotate(45deg);
566
+ }
567
+
568
+ &[class$="right"] {
569
+ right: 1em;
570
+ transform: rotate(-45deg);
571
+ }
572
+ }
573
+
574
+ // Error icon animation
575
+ &.swal2-icon-show {
576
+ @if $swal2-icon-animations {
577
+ animation: swal2-animate-error-icon 0.5s;
578
+
579
+ .swal2-x-mark {
580
+ animation: swal2-animate-error-x-mark 0.5s;
581
+ }
582
+ }
583
+ }
584
+ }
585
+
586
+ &.swal2-warning {
587
+ border-color: alpha(--warn, 0.7);
588
+ background-color: alpha(--warn, 0.1);
589
+ color: $swal2-warning;
590
+
591
+ // Warning icon animation
592
+ &.swal2-icon-show {
593
+ @if $swal2-icon-animations {
594
+ animation: swal2-animate-error-icon 0.5s;
595
+
596
+ .swal2-icon-content {
597
+ animation: swal2-animate-i-mark 0.5s;
598
+ }
599
+ }
600
+ }
601
+ }
602
+
603
+ &.swal2-info {
604
+ border-color: alpha(--info, 0.7);
605
+ background-color: alpha(--info, 0.1);
606
+ color: $swal2-info;
607
+
608
+ // Info icon animation
609
+ &.swal2-icon-show {
610
+ @if $swal2-icon-animations {
611
+ animation: swal2-animate-error-icon 0.5s;
612
+
613
+ .swal2-icon-content {
614
+ animation: swal2-animate-i-mark 0.8s;
615
+ }
616
+ }
617
+ }
618
+ }
619
+
620
+ &.swal2-question {
621
+ border-color: alpha(--help, 0.7);
622
+ background-color: alpha(--help, 0.1);
623
+ color: $swal2-question;
624
+
625
+ // Question icon animation
626
+ &.swal2-icon-show {
627
+ @if $swal2-icon-animations {
628
+ animation: swal2-animate-error-icon 0.5s;
629
+
630
+ .swal2-icon-content {
631
+ animation: swal2-animate-question-mark 0.8s;
632
+ }
633
+ }
634
+ }
635
+ }
636
+
637
+ &.swal2-success {
638
+ border-color: alpha(--success, 0.7);
639
+ background-color: alpha(--success, 0.1);
640
+ color: $swal2-success;
641
+
642
+ [class^="swal2-success-circular-line"] {
643
+ // Emulate moving circular line
644
+ position: absolute;
645
+ width: 3.75em;
646
+ height: 7.5em;
647
+ transform: rotate(45deg);
648
+ border-radius: 50%;
649
+
650
+ &[class$="left"] {
651
+ top: -0.4375em;
652
+ left: -2.0635em;
653
+ transform: rotate(-45deg);
654
+ transform-origin: 3.75em 3.75em;
655
+ border-radius: 7.5em 0 0 7.5em;
656
+
657
+ @if $icon-zoom != 1 {
658
+ zoom: $icon-zoom;
659
+ }
660
+ }
661
+
662
+ &[class$="right"] {
663
+ top: -0.6875em;
664
+ left: 1.875em;
665
+ transform: rotate(-45deg);
666
+ transform-origin: 0 3.75em;
667
+ border-radius: 0 7.5em 7.5em 0;
668
+
669
+ @if $icon-zoom != 1 {
670
+ zoom: $icon-zoom;
671
+ }
672
+ }
673
+ }
674
+
675
+ .swal2-success-ring {
676
+ // Ring
677
+ position: absolute;
678
+ z-index: 2;
679
+ top: -0.25em;
680
+ left: -0.25em;
681
+ box-sizing: content-box;
682
+ width: 100%;
683
+ height: 100%;
684
+ border: 0.25em solid $swal2-success-border;
685
+ border-radius: 50%;
686
+
687
+ @if $icon-zoom != 1 {
688
+ zoom: $icon-zoom;
689
+ }
690
+ }
691
+
692
+ .swal2-success-fix {
693
+ // Hide corners left from animation
694
+ position: absolute;
695
+ z-index: 1;
696
+ top: 0.5em;
697
+ left: 1.625em;
698
+ width: 0.4375em;
699
+ height: 5.625em;
700
+ transform: rotate(-45deg);
701
+
702
+ @if $icon-zoom != 1 {
703
+ zoom: $icon-zoom;
704
+ }
705
+ }
706
+
707
+ [class^="swal2-success-line"] {
708
+ display: block;
709
+ position: absolute;
710
+ z-index: 2;
711
+ height: 0.3125em;
712
+ border-radius: 0.125em;
713
+ background-color: $swal2-success;
714
+
715
+ &[class$="tip"] {
716
+ top: 2.875em;
717
+ left: 0.8125em;
718
+ width: 1.5625em;
719
+ transform: rotate(45deg);
720
+ }
721
+
722
+ &[class$="long"] {
723
+ top: 2.375em;
724
+ right: 0.5em;
725
+ width: 2.9375em;
726
+ transform: rotate(-45deg);
727
+ }
728
+
729
+ @if $icon-zoom != 1 {
730
+ zoom: $icon-zoom;
731
+ }
732
+ }
733
+
734
+ // Success icon animation
735
+ &.swal2-icon-show {
736
+ @if $swal2-icon-animations {
737
+ .swal2-success-line-tip {
738
+ animation: swal2-animate-success-line-tip 0.75s;
739
+ }
740
+
741
+ .swal2-success-line-long {
742
+ animation: swal2-animate-success-line-long 0.75s;
743
+ }
744
+
745
+ .swal2-success-circular-line-right {
746
+ animation: swal2-rotate-success-circular-line 4.25s ease-in;
747
+ }
748
+ }
749
+ }
750
+ }
751
+ }
752
+
753
+ .swal2-progress-steps {
754
+ flex-wrap: $swal2-progress-steps-flex-wrap;
755
+ align-items: $swal2-progress-steps-align-items;
756
+ max-width: $swal2-progress-steps-max-width;
757
+ margin: $swal2-progress-steps-margin;
758
+ padding: $swal2-progress-steps-padding;
759
+ background: $swal2-progress-steps-background;
760
+ font-weight: $swal2-progress-steps-font-weight;
761
+
762
+ li {
763
+ display: inline-block;
764
+ position: relative;
765
+ }
766
+
767
+ .swal2-progress-step {
768
+ z-index: 20;
769
+ flex-shrink: 0;
770
+ width: $swal2-progress-step-width;
771
+ height: $swal2-progress-step-height;
772
+ border-radius: $swal2-progress-step-border-radius;
773
+ background: $swal2-active-step-background;
774
+ color: $swal2-active-step-color;
775
+ line-height: $swal2-progress-step-height;
776
+ text-align: center;
777
+
778
+ &.swal2-active-progress-step {
779
+ background: $swal2-active-step-background;
780
+
781
+ ~ .swal2-progress-step {
782
+ background: $swal2-progress-step-background;
783
+ color: $swal2-progress-step-color;
784
+ }
785
+
786
+ ~ .swal2-progress-step-line {
787
+ background: $swal2-progress-step-background;
788
+ }
789
+ }
790
+ }
791
+
792
+ .swal2-progress-step-line {
793
+ z-index: 10;
794
+ flex-shrink: 0;
795
+ width: $swal2-progress-steps-distance;
796
+ height: 0.4em;
797
+ margin: 0 -1px;
798
+ background: $swal2-active-step-background;
799
+ }
800
+ }
801
+
802
+ // github.com/sweetalert2/sweetalert2/issues/268
803
+ [class^="swal2"] {
804
+ -webkit-tap-highlight-color: transparent;
805
+ }
806
+
807
+ .swal2-show {
808
+ animation: $swal2-show-animation;
809
+ }
810
+
811
+ .swal2-hide {
812
+ animation: $swal2-hide-animation;
813
+ }
814
+
815
+ .swal2-noanimation {
816
+ transition: none;
817
+ }
818
+
819
+ // Measure scrollbar width for padding body during modal show/hide
820
+ .swal2-scrollbar-measure {
821
+ position: absolute;
822
+ top: -9999px;
823
+ width: 50px;
824
+ height: 50px;
825
+ overflow: scroll;
826
+ }
827
+
828
+ // Right-to-left support
829
+ .swal2-rtl {
830
+ .swal2-close {
831
+ margin-right: initial;
832
+ margin-left: $swal2-close-button-gap;
833
+ }
834
+
835
+ .swal2-timer-progress-bar {
836
+ right: 0;
837
+ left: auto;
838
+ }
839
+ }
840
+
841
+ .swal2-no-war {
842
+ display: flex;
843
+ position: fixed;
844
+ z-index: 1061;
845
+ top: 0;
846
+ left: 0;
847
+ align-items: center;
848
+ justify-content: center;
849
+ width: 100%;
850
+ height: 3.375em;
851
+ background: #20232a;
852
+ color: #fff;
853
+ text-align: center;
854
+
855
+ a {
856
+ color: #61dafb;
857
+ text-decoration: none;
858
+
859
+ &:hover {
860
+ text-decoration: underline;
861
+ }
862
+ }
863
+ }