aio-popup 4.5.2 → 5.1.0

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 (7) hide show
  1. package/alert1.css +68 -0
  2. package/alert2.css +70 -0
  3. package/index.css +406 -203
  4. package/index.d.ts +155 -153
  5. package/index.js +13 -9
  6. package/package.json +1 -3
  7. package/theme2.css +139 -0
package/index.css CHANGED
@@ -16,9 +16,10 @@
16
16
  background: rgba(0, 0, 0, 0.1);
17
17
  transition: .3s;
18
18
  pointer-events: all;
19
- outline:none;
20
- flex-shrink:0;
19
+ outline: none;
20
+ flex-shrink: 0;
21
21
  }
22
+
22
23
  .aio-popup {
23
24
  border-radius: 4px;
24
25
  font-size: 14px;
@@ -26,44 +27,123 @@
26
27
  max-width: 100vw;
27
28
  max-height: 100vh;
28
29
  pointer-events: auto;
29
- display:flex;
30
+ display: flex;
30
31
  flex-direction: column;
31
- outline:none;
32
- z-index:10;
33
- position:absolute;
32
+ outline: none;
33
+ z-index: 10;
34
+ position: absolute;
34
35
  }
35
- .aio-popup.rtl {direction: rtl;}
36
- .aio-popup.not-mounted {transition: .3s;}
36
+
37
+ .aio-popup.rtl {
38
+ direction: rtl;
39
+ }
40
+
41
+ .aio-popup.not-mounted {
42
+ transition: .3s;
43
+ }
44
+
37
45
  /**********position (fullscreen)*******/
38
- .aio-popup-position-fullscreen>.aio-popup.not-mounted {transform: scale(0);}
39
- .aio-popup-position-fullscreen>.aio-popup {width: 100%;height: 100%;}
46
+ .aio-popup-position-fullscreen>.aio-popup.not-mounted {
47
+ transform: scale(0);
48
+ }
49
+
50
+ .aio-popup-position-fullscreen>.aio-popup {
51
+ width: 100%;
52
+ height: 100%;
53
+ }
54
+
40
55
  /**********position (top)**************/
41
- .aio-popup-position-top {align-items: flex-start;}
42
- .aio-popup-position-top > .aio-popup.not-mounted {transform: translateY(-500px);}
43
- .aio-popup-position-top > .aio-popup {width: 100%;max-height: 90vh;transform: translateY(0px);}
56
+ .aio-popup-position-top {
57
+ align-items: flex-start;
58
+ }
59
+
60
+ .aio-popup-position-top>.aio-popup.not-mounted {
61
+ transform: translateY(-500px);
62
+ }
63
+
64
+ .aio-popup-position-top>.aio-popup {
65
+ width: 100%;
66
+ max-height: 90vh;
67
+ transform: translateY(0px);
68
+ }
69
+
44
70
  /**********position (bottom)***********/
45
- .aio-popup-position-bottom {align-items: flex-end;}
46
- .aio-popup-position-bottom>.aio-popup.not-mounted {opacity: 0; bottom:-500px; transform: scaleY(0);}
47
- .aio-popup-position-bottom>.aio-popup {width: 100%; bottom: 0; opacity: 1; transform: scaleY(1); }
71
+ .aio-popup-position-bottom {
72
+ align-items: flex-end;
73
+ }
74
+
75
+ .aio-popup-position-bottom>.aio-popup.not-mounted {
76
+ opacity: 0;
77
+ bottom: -500px;
78
+ transform: scaleY(0);
79
+ }
80
+
81
+ .aio-popup-position-bottom>.aio-popup {
82
+ width: 100%;
83
+ bottom: 0;
84
+ opacity: 1;
85
+ transform: scaleY(1);
86
+ }
48
87
 
49
88
  /**********position (left)*************/
50
- .aio-popup-position-left {justify-content: left;}
51
- .aio-popup-position-left > .aio-popup.not-mounted {transform: translateX(-500px);}
52
- .aio-popup-position-left > .aio-popup {height: 100%;max-width: 90vh;transform: translateX(0px);}
89
+ .aio-popup-position-left {
90
+ justify-content: left;
91
+ }
92
+
93
+ .aio-popup-position-left>.aio-popup.not-mounted {
94
+ transform: translateX(-500px);
95
+ }
96
+
97
+ .aio-popup-position-left>.aio-popup {
98
+ height: 100%;
99
+ max-width: 90vh;
100
+ transform: translateX(0px);
101
+ }
102
+
53
103
  /**********position (right)************/
54
- .aio-popup-position-right {justify-content: right;}
55
- .aio-popup-position-right > .aio-popup.not-mounted {transform: translateX(500px) scaleX(0);}
56
- .aio-popup-position-right > .aio-popup {height: 100%;max-width: 90vh;transform: translateX(0px) scaleX(1);;}
104
+ .aio-popup-position-right {
105
+ justify-content: right;
106
+ }
107
+
108
+ .aio-popup-position-right>.aio-popup.not-mounted {
109
+ transform: translateX(500px) scaleX(0);
110
+ }
111
+
112
+ .aio-popup-position-right>.aio-popup {
113
+ height: 100%;
114
+ max-width: 90vh;
115
+ transform: translateX(0px) scaleX(1);
116
+ ;
117
+ }
118
+
57
119
  /**********position (popover)************/
58
- .aio-popup-position-popover {opacity: 1;}
59
- .aio-popup-position-popover>.aio-popup.not-mounted {opacity: 0;}
120
+ .aio-popup-position-popover {
121
+ opacity: 1;
122
+ }
123
+
124
+ .aio-popup-position-popover>.aio-popup.not-mounted {
125
+ opacity: 0;
126
+ }
127
+
60
128
  /**********position (center)***********/
61
- .aio-popup-position-center>.aio-popup.not-mounted {transform: translateY(-500px);opacity: 0;}
62
- .aio-popup-position-center>.aio-popup {max-width: 100vw;width: fit-content;opacity: 1;max-height: 100vh;transform: translateY(0px); transform-origin:top;}
129
+ .aio-popup-position-center>.aio-popup.not-mounted {
130
+ transform: translateY(-500px);
131
+ opacity: 0;
132
+ }
133
+
134
+ .aio-popup-position-center>.aio-popup {
135
+ max-width: 100vw;
136
+ width: fit-content;
137
+ opacity: 1;
138
+ max-height: 100vh;
139
+ transform: translateY(0px);
140
+ transform-origin: top;
141
+ }
142
+
63
143
  /**************************************/
64
144
 
65
145
  .aio-popup-header {
66
- display:flex;
146
+ display: flex;
67
147
  border-bottom: 1px solid #e7e9ec;
68
148
  background: #fff;
69
149
  color: #323130;
@@ -71,36 +151,51 @@
71
151
  font-size: 16px;
72
152
  font-weight: bold;
73
153
  min-height: 36px;
74
- gap:12px;
154
+ gap: 12px;
155
+ align-items: center;
75
156
  }
76
- .aio-popup-header-text{
77
- display:flex;
78
- flex-direction:column;
79
- align-items: flex-start;
80
- flex:1;
157
+
158
+ .aio-popup-header-title {
159
+ display: flex;
160
+ flex-direction: column;
161
+ justify-content: center;
162
+ flex: 1;
81
163
  }
82
- .aio-popup-header-subtitle {
83
- font-size: 85%;
84
- opacity: 0.5;
164
+
165
+ .aio-popup-header-title:after {
166
+ content: attr(data-subtitle);
167
+ opacity: 0.7;
168
+ font-size: 80%;
169
+ }
170
+
171
+ .aio-popup-header-text {
172
+ display: flex;
173
+ flex-direction: column;
174
+ align-items: flex-start;
175
+ flex: 1;
85
176
  }
86
- .aio-popup-header-before{
87
- display:flex;
177
+
178
+ .aio-popup-header-before {
179
+ display: flex;
88
180
  align-items: center;
89
181
  justify-content: center;
90
182
  }
91
- .aio-popup-header-after{
92
- display:flex;
183
+
184
+ .aio-popup-header-after {
185
+ display: flex;
93
186
  align-items: center;
94
187
  justify-content: center;
95
188
  }
189
+
96
190
  .aio-popup-body {
97
191
  background: #fff;
98
192
  flex: 1;
99
193
  width: 100%;
100
194
  overflow-y: auto;
101
- box-sizing:border-box;
195
+ box-sizing: border-box;
102
196
  }
103
- .aio-popup-body *{
197
+
198
+ .aio-popup-body * {
104
199
  box-sizing: border-box;
105
200
  }
106
201
 
@@ -114,29 +209,34 @@
114
209
  justify-content: flex-end;
115
210
  box-sizing: border-box;
116
211
  }
117
- .aio-popup-header-buttons{
118
- display:flex;
212
+
213
+ .aio-popup-header-buttons {
214
+ display: flex;
119
215
  align-items: center;
120
216
  justify-content: center;
121
- gap:6px;
217
+ gap: 6px;
122
218
  }
219
+
123
220
  .aio-popup-header-button {
124
221
  padding: 0 6px;
125
222
  background: none;
126
223
  border: none;
127
224
  cursor: pointer;
128
225
  }
129
- .aio-popup-header-close-button {
130
- display:flex;
226
+
227
+ .aio-popup-header-close {
228
+ display: flex;
131
229
  align-items: center;
132
230
  justify-content: center;
133
231
  width: 36px;
134
232
  }
135
- .aio-popup-header-after{
136
- display:flex;
233
+
234
+ .aio-popup-header-after {
235
+ display: flex;
137
236
  align-items: center;
138
- height:100%;
237
+ height: 100%;
139
238
  }
239
+
140
240
  .aio-popup-footer-button {
141
241
  height: 30px;
142
242
  background: dodgerblue;
@@ -173,12 +273,12 @@
173
273
  align-items: center;
174
274
  justify-content: center;
175
275
  font-family: inherit;
176
- transition:0.2s;
276
+ transition: 0.2s;
177
277
  }
178
278
 
179
- .aio-popup-alert-container.not-mounted{
279
+ .aio-popup-alert-container.not-mounted {
180
280
  background: rgba(0, 0, 0, 0);
181
- transition:0.2;
281
+ transition: 0.2;
182
282
  }
183
283
 
184
284
  .aio-popup-alert {
@@ -193,29 +293,34 @@
193
293
  overflow: hidden;
194
294
  }
195
295
 
196
- .aio-popup-alert-container-center .aio-popup-alert{
197
- transform:scale(1);
198
- transition:0.2s;
296
+ .aio-popup-alert-container-center .aio-popup-alert {
297
+ transform: scale(1);
298
+ transition: 0.2s;
199
299
  }
300
+
200
301
  .aio-popup-alert-container-center.not-mounted .aio-popup-alert {
201
- transform:scale(0);
202
- transition:0.2s;
302
+ transform: scale(0);
303
+ transition: 0.2s;
203
304
  }
204
- .aio-popup-alert-container-top .aio-popup-alert{
205
- transform:translateY(0vh);
206
- transition:0.2s;
305
+
306
+ .aio-popup-alert-container-top .aio-popup-alert {
307
+ transform: translateY(0vh);
308
+ transition: 0.2s;
207
309
  }
310
+
208
311
  .aio-popup-alert-container-top.not-mounted .aio-popup-alert {
209
- transform:translateY(-100vh);
210
- transition:0.2s;
312
+ transform: translateY(-100vh);
313
+ transition: 0.2s;
211
314
  }
212
- .aio-popup-alert-container-bottom .aio-popup-alert{
213
- transform:translateY(0vh);
214
- transition:0.2s;
315
+
316
+ .aio-popup-alert-container-bottom .aio-popup-alert {
317
+ transform: translateY(0vh);
318
+ transition: 0.2s;
215
319
  }
320
+
216
321
  .aio-popup-alert-container-bottom.not-mounted .aio-popup-alert {
217
- transform:translateY(100vh);
218
- transition:0.2s;
322
+ transform: translateY(100vh);
323
+ transition: 0.2s;
219
324
  }
220
325
 
221
326
  .aio-popup-alert-error .aio-popup-alert-header svg {
@@ -327,39 +432,46 @@
327
432
  justify-content: center;
328
433
  z-index: 1000000;
329
434
  }
330
- .aio-popup-snackebar-item-container.aio-popup-snackebar-item-container-horizontal-align-start {
435
+
436
+ .aio-popup-snackebar-item-container.aio-popup-snackebar-item-container-horizontal-align-left {
331
437
  justify-content: flex-start;
332
438
  }
333
- .aio-popup-snackebar-item-container.aio-popup-snackebar-item-container-horizontal-align-end {
439
+
440
+ .aio-popup-snackebar-item-container.aio-popup-snackebar-item-container-horizontal-align-right {
334
441
  justify-content: flex-end;
335
442
  }
443
+
336
444
  .aio-popup-snackebar-item-container.aio-popup-snackebar-item-container-horizontal-align-center {
337
445
  justify-content: center;
338
446
  }
447
+
339
448
  .aio-popup-snackebar-item-container.rtl {
340
- direction:rtl;
449
+ direction: rtl;
341
450
  }
342
- .aio-popup-snackebar-item-container .aio-popup-snackebar-item-uptext{
343
- text-align:left;
451
+
452
+ .aio-popup-snackebar-item-container .aio-popup-snackebar-item-uptext {
453
+ text-align: left;
344
454
  }
345
- .aio-popup-snackebar-item-container.rtl .aio-popup-snackebar-item-uptext{
346
- text-align:right;
455
+
456
+ .aio-popup-snackebar-item-container.rtl .aio-popup-snackebar-item-uptext {
457
+ text-align: right;
347
458
  }
459
+
348
460
  .aio-popup-snackebar-item {
349
461
  background: rgba(24, 28, 41, 0.945);
350
462
  padding: 12px;
351
463
  right: 100%;
352
464
  position: relative;
353
465
  width: fit-content;
354
- max-width:100%;
466
+ max-width: 100%;
355
467
  height: fit-content;
356
468
  box-sizing: border-box;
357
469
  display: flex;
358
470
  align-items: center;
359
471
  transition: 0.2s;
360
472
  overflow: hidden;
361
- box-shadow:1px 1px 10px 0 rgba(0,0,0,0.2);
362
- backdrop-filter:blur(4px);
473
+ box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.2);
474
+ backdrop-filter: blur(4px);
363
475
  }
364
476
 
365
477
  .aio-popup-snackebar-item-container.mounted .aio-popup-snackebar-item {
@@ -395,9 +507,10 @@
395
507
  border-radius: 100%;
396
508
  padding: 3px;
397
509
  }
398
- .aio-popup-snackebar-item-icon svg{
399
- width:48px !important;
400
- height:48px !important;
510
+
511
+ .aio-popup-snackebar-item-icon svg {
512
+ width: 48px !important;
513
+ height: 48px !important;
401
514
  }
402
515
 
403
516
  .aio-popup-snackebar-item-success .aio-popup-snackebar-item-icon {
@@ -423,9 +536,10 @@
423
536
  width: 0%;
424
537
  height: 4px;
425
538
  }
539
+
426
540
  .aio-popup-snackebar-item-container.rtl .aio-popup-snackebar-bar {
427
541
  left: unset;
428
- right:0;
542
+ right: 0;
429
543
  }
430
544
 
431
545
  .aio-popup-snackebar-item-container.mounted .aio-popup-snackebar-bar {
@@ -433,8 +547,8 @@
433
547
  }
434
548
 
435
549
  /* .aio-popup-snackebar-container.mounted .aio-popup-snackebar-bar{
436
- width:50%;
437
- } */
550
+ width:50%;
551
+ } */
438
552
 
439
553
  .aio-popup-snackebar-item-success .aio-popup-snackebar-bar {
440
554
  background: #5ba427;
@@ -457,11 +571,13 @@
457
571
  border: none;
458
572
  background: none;
459
573
  }
460
- .aio-popup-confirm{
461
- overflow:hidden;
574
+
575
+ .aio-popup-confirm {
576
+ overflow: hidden;
462
577
  }
463
- .aio-popup-confirm .aio-popup-body{
464
- padding:12px;
578
+
579
+ .aio-popup-confirm .aio-popup-body {
580
+ padding: 12px;
465
581
  }
466
582
 
467
583
  .aio-popup-scroll::-webkit-scrollbar {
@@ -487,140 +603,158 @@
487
603
  .aio-popup-scroll::-webkit-scrollbar-thumb:hover {
488
604
  background-color: #6f7888;
489
605
  }
490
- .aio-popup-theme1{
491
- background:#253340;
606
+
607
+ .aio-popup-theme1 {
608
+ background: #253340;
492
609
  border-radius: 12px;
493
- color:#fff;
494
- font-family:cursive;
610
+ color: #fff;
611
+ font-family: cursive;
495
612
  }
496
- .aio-popup-theme1 .aio-popup-header{
613
+
614
+ .aio-popup-theme1 .aio-popup-header {
497
615
  height: 36px;
498
- box-shadow:0 1px 1px 0 rgba(255,255,255,0.07);
499
- border:none;
500
- background: linear-gradient(180deg, #446481, rgba(0,0,0,0.25));
616
+ box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.07);
617
+ border: none;
618
+ background: linear-gradient(180deg, #446481, rgba(0, 0, 0, 0.25));
501
619
  border-radius: 10px;
502
- color:#fff;
503
- font-size:12px;
504
- }
505
- .aio-popup-theme1 .aio-popup-body{
506
- background:none;
507
- }
508
- .aio-popup-theme1 .aio-popup-header-close-button{
509
- width:24px;
510
- }
511
-
512
- .aio-popup-theme1 .aio-popup-body button{
513
- background:none;
514
- border:1px solid rgba(255,255,255,0.8);
515
- color:rgba(255,255,255,0.8);
516
- height:30px;
517
- border-radius:6px;
518
- font-size:12px;
519
- padding:0 24px;
520
- font-family:inherit;
521
- }
522
- .aio-popup-theme1 .aio-popup-body button.active{
523
- background:dodgerblue;
524
- border:1px solid dodgerblue;
525
- color:#fff;
526
- height:30px;
527
- border-radius:6px;
528
- font-size:12px;
529
- padding:0 24px;
530
- font-family:inherit;
531
- }
532
- .aio-popup-theme1 .aio-popup-body p{
533
- border:1px solid #364458;
534
- padding:6px;
535
- }
536
- .aio-popup-prompt .aio-popup-body{
537
- padding:6px;
538
- }
539
- .aio-popup-prompt .aio-popup-body textarea{
540
- width:100%;
541
- left:0;
542
- top:0;
543
- border:none;
544
- height:60px;
545
- font-family:inherit;
546
- outline:none;
547
- color:inherit;
548
- padding:6px;
620
+ color: #fff;
621
+ font-size: 12px;
622
+ }
623
+
624
+ .aio-popup-theme1 .aio-popup-body {
625
+ background: none;
626
+ }
627
+
628
+ .aio-popup-theme1 .aio-popup-header-close {
629
+ width: 24px;
630
+ }
631
+
632
+ .aio-popup-theme1 .aio-popup-body button {
633
+ background: none;
634
+ border: 1px solid rgba(255, 255, 255, 0.8);
635
+ color: rgba(255, 255, 255, 0.8);
636
+ height: 30px;
637
+ border-radius: 6px;
638
+ font-size: 12px;
639
+ padding: 0 24px;
640
+ font-family: inherit;
641
+ }
642
+
643
+ .aio-popup-theme1 .aio-popup-body button.active {
644
+ background: dodgerblue;
645
+ border: 1px solid dodgerblue;
646
+ color: #fff;
647
+ height: 30px;
648
+ border-radius: 6px;
649
+ font-size: 12px;
650
+ padding: 0 24px;
651
+ font-family: inherit;
652
+ }
653
+
654
+ .aio-popup-theme1 .aio-popup-body p {
655
+ border: 1px solid #364458;
656
+ padding: 6px;
657
+ }
658
+
659
+ .aio-popup-prompt .aio-popup-body {
660
+ padding: 6px;
661
+ }
662
+
663
+ .aio-popup-prompt .aio-popup-body textarea {
664
+ width: 100%;
665
+ left: 0;
666
+ top: 0;
667
+ border: none;
668
+ height: 60px;
669
+ font-family: inherit;
670
+ outline: none;
671
+ color: inherit;
672
+ padding: 6px;
549
673
  }
550
674
 
551
675
  .aio-popup-highlight {
552
676
  font-size: 24px;
553
677
  pointer-events: none;
554
- direction:ltr;
678
+ direction: ltr;
555
679
  color: rgba(255, 255, 255, 0.5);
556
680
  position: fixed;
557
- left:0;
558
- top:0;
559
- width:100%;
560
- height:100%;
561
- display:flex;
681
+ left: 0;
682
+ top: 0;
683
+ width: 100%;
684
+ height: 100%;
685
+ display: flex;
562
686
  flex-direction: column;
563
687
  box-sizing: border-box;
564
688
  }
565
- .aio-popup-highlight-main{
566
- display:flex;
689
+
690
+ .aio-popup-highlight-main {
691
+ display: flex;
567
692
  position: relative;
568
693
  box-sizing: border-box;
569
- overflow:hidden;
694
+ overflow: hidden;
570
695
  }
696
+
571
697
  .aio-popup-highlight-mask {
572
698
  background: rgba(0, 0, 0, 0.8);
573
699
  pointer-events: all;
574
- display:flex;
700
+ display: flex;
575
701
  align-items: center;
576
702
  justify-content: center;
577
703
  position: relative;
578
704
  box-sizing: border-box;
579
- height:100%;
580
- overflow:hidden;
581
- }
582
- .aio-popup-highlight-mask-flex{
583
- flex:1;
584
- }
585
- .aio-popup-highlight-html-container{
586
- position:absolute;
587
- left:0;
588
- top:0;
589
- height:100%;
590
- width:100%;
591
- display:flex;
592
- flex:1;
705
+ height: 100%;
706
+ overflow: hidden;
707
+ }
708
+
709
+ .aio-popup-highlight-mask-flex {
710
+ flex: 1;
711
+ }
712
+
713
+ .aio-popup-highlight-html-container {
714
+ position: absolute;
715
+ left: 0;
716
+ top: 0;
717
+ height: 100%;
718
+ width: 100%;
719
+ display: flex;
720
+ flex: 1;
593
721
  flex-direction: column;
594
- overflow:hidden;
722
+ overflow: hidden;
595
723
  }
596
- .aio-popup-highlight-space{
597
- flex:1;
724
+
725
+ .aio-popup-highlight-space {
726
+ flex: 1;
598
727
  }
599
- .aio-popup-highlight-focus-container{
600
- overflow:hidden;
728
+
729
+ .aio-popup-highlight-focus-container {
730
+ overflow: hidden;
601
731
  }
732
+
602
733
  .aio-popup-highlight-focus {
603
734
  width: 100%;
604
735
  height: 100%;
605
736
  box-shadow: 0 0 0 24px rgba(0, 0, 0, 0.8);
606
737
  border-radius: 6px;
607
738
  position: relative;
608
- overflow:hidden;
739
+ overflow: hidden;
609
740
  }
610
- .aio-popup-highlight-html{
611
- background:rgba(0,0,0,0.2);
612
- padding:12px;
741
+
742
+ .aio-popup-highlight-html {
743
+ background: rgba(0, 0, 0, 0.2);
744
+ padding: 12px;
613
745
  box-sizing: border-box;
614
- display:flex;
746
+ display: flex;
615
747
  align-items: center;
616
748
  justify-content: center;
617
749
  position: relative;
618
750
  }
619
- .aio-popup-highlight-arrow{
620
- padding:0 12px;
621
- height:48px;
751
+
752
+ .aio-popup-highlight-arrow {
753
+ padding: 0 12px;
754
+ height: 48px;
622
755
  box-sizing: border-box;
623
756
  }
757
+
624
758
  .aio-popup-highlight-arrow-bottom {
625
759
  fill: rgba(255, 255, 255, 1);
626
760
  animation-name: puls;
@@ -640,42 +774,111 @@
640
774
 
641
775
  @keyframes puls {
642
776
  0% {
643
- transform: translateY(12px);
644
- opacity: 1;
777
+ transform: translateY(12px);
778
+ opacity: 1;
645
779
  }
646
780
 
647
781
  100% {
648
- transform: translateY(0px);
649
- opacity: 0;
782
+ transform: translateY(0px);
783
+ opacity: 0;
650
784
  }
651
785
  }
652
786
 
653
787
  @keyframes puls1 {
654
788
  0% {
655
- transform: translateY(0px) rotate(180deg);
656
- opacity: 1;
789
+ transform: translateY(0px) rotate(180deg);
790
+ opacity: 1;
657
791
  }
658
792
 
659
793
  100% {
660
- transform: translateY(12px) rotate(180deg);
661
- opacity: 0;
794
+ transform: translateY(12px) rotate(180deg);
795
+ opacity: 0;
662
796
  }
663
797
  }
664
798
 
665
799
  /* .aio-popup-snackebar-item{
666
- background:linear-gradient(180deg, #ffffff, #d1d1d1);
667
- color:#222;
668
- font-weight:bold;
669
- border-radius:6px;
670
- border:2px solid #eee;
671
- box-shadow:inset 2px 1px 4px 0px rgb(0 0 0 / 19%);
672
- }
673
-
674
- */
800
+ background:linear-gradient(180deg, #ffffff, #d1d1d1);
801
+ color:#222;
802
+ font-weight:bold;
803
+ border-radius:6px;
804
+ border:2px solid #eee;
805
+ box-shadow:inset 2px 1px 4px 0px rgb(0 0 0 / 19%);
806
+ }
807
+
808
+ */
675
809
  /* .aio-popup-snackebar-item{
676
- background:#fff;
677
- color:#222;
678
- font-weight:bold;
679
- border-radius:6px;
680
- border:1px solid #eee;
681
- } */
810
+ background:#fff;
811
+ color:#222;
812
+ font-weight:bold;
813
+ border-radius:6px;
814
+ border:1px solid #eee;
815
+ } */
816
+ .aio-loading {
817
+ z-index: 100000000000000000000000000000;
818
+ position: absolute;
819
+ direction: ltr;
820
+ width: 100%;
821
+ height: 100%;
822
+ top: 0;
823
+ left: 0;
824
+ display: flex;
825
+ align-items: center;
826
+ align-items: center;
827
+ justify-content: center;
828
+ }
829
+
830
+ .aio-loading-container-0 {
831
+ border-radius: 12px;
832
+ height: 72px;
833
+ width: 72px;
834
+ display: flex;
835
+ align-items: center;
836
+ justify-content: center;
837
+ background: rgba(0, 0, 0, 0.7);
838
+ opacity: 1;
839
+ animation-name: aioloadingopacity;
840
+ animation-duration: 2s;
841
+ animation-fill-mode: forwards;
842
+ }
843
+
844
+ .aio-loading-0 {
845
+ width: 60px;
846
+ display: flex;
847
+ align-items: center;
848
+ justify-content: center;
849
+ }
850
+
851
+ .aio-loading-item-0 {
852
+ width: 4px;
853
+ height: 36px;
854
+ background: rgb(255, 255, 255);
855
+ margin: 0px 1.5px;
856
+ border-radius: 0px;
857
+ }
858
+
859
+ @keyframes aioloading0 {
860
+
861
+ 0%,
862
+ 40%,
863
+ 100% {
864
+ transform: scaleY(0.4);
865
+ }
866
+
867
+ 20% {
868
+ transform: scaleY(1.0);
869
+ }
870
+ }
871
+
872
+ @keyframes aioloadingopacity {
873
+ 0% {
874
+ opacity: 0;
875
+ }
876
+
877
+ 50% {
878
+ opacity: 0;
879
+ }
880
+
881
+ 100% {
882
+ opacity: 1;
883
+ }
884
+ }