jsuites 4.9.21 → 4.9.25

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.
@@ -1,1012 +0,0 @@
1
-
2
- /**
3
- * (c) jSuites Javascript Web Components
4
- *
5
- * Website: https://jsuites.net
6
- * Description: Create amazing web based applications.
7
- *
8
- * MIT License
9
- *
10
- */
11
-
12
- .japp {
13
- height: 100%;
14
- box-sizing: border-box;
15
- overflow: auto;
16
- line-height: 1.4;
17
- font-size: 16px;
18
- font-family:-apple-system,SF UI Text,Helvetica Neue,Helvetica,Arial,sans-serif !important;
19
- }
20
-
21
- .japp a {
22
- text-decoration: none;
23
- }
24
-
25
- .japp input, .japp textarea, .japp select, .japp div {
26
- font-family:-apple-system,SF UI Text,Helvetica Neue,Helvetica,Arial,sans-serif !important;
27
- }
28
-
29
- .japp .red {
30
- color: red;
31
- border-color: 1px solid red;
32
- }
33
-
34
- .japp .link {
35
- color: var(--active-color);
36
- cursor: pointer;
37
- }
38
-
39
- .japp.warning::before {
40
- content: 'No internet connection';
41
- background-color: red;
42
- color: #fff;
43
- padding: 2px;
44
- position: fixed;
45
- top: 0px;
46
- left: 0px;
47
- z-index: 10;
48
- width: 100%;
49
- font-size: 0.55em;
50
- text-align: center;
51
- }
52
-
53
- japp.jwarning .page {
54
- padding-top: 60px;
55
- }
56
-
57
- /** Navbar **/
58
-
59
- .japp .navbar {
60
- position:fixed;
61
- top: 0;
62
- width: 100%;
63
- z-index: 1;
64
- margin: 0;
65
- -webkit-backface-visibility: hidden;
66
- -webkit-transform: translate3d(0,0,0);
67
- -webkit-box-sizing: border-box;
68
- backface-visibility: hidden;
69
- box-sizing: border-box;
70
- transform: translate3d(0,0,0);
71
- height: 44px;
72
- background-color: #fff;
73
- box-shadow: 0 1px 2px rgba(0,0,0,.1);
74
- }
75
-
76
- .japp.jwarning .navbar {
77
- top:16px;
78
- }
79
-
80
- .japp .navbar-container {
81
- padding: 0 8px;
82
- position: absolute;
83
- left: 0;
84
- top: 0;
85
- width: 100%;
86
- height: 100%;
87
- -webkit-box-sizing: border-box;
88
- box-sizing: border-box;
89
- vertical-align:middle;
90
-
91
- display: flex;
92
-
93
- -webkit-flex-flow: row wrap;
94
- justify-content: space-between;
95
- align-items:center;
96
- }
97
-
98
- .japp .navbar-container div {
99
- text-align:center;
100
- }
101
-
102
- .japp .navbar-container div.title {
103
- display: flex;
104
- }
105
-
106
- .japp .navbar-container div.title div
107
- {
108
- line-height:24px;
109
- }
110
-
111
- .japp .navbar-container div.icon {
112
- width:24px;
113
- }
114
-
115
- .japp .navbar-container div i {
116
- display:block;
117
- }
118
-
119
- .japp .navbar-container div img {
120
- height:28px;
121
- display:block;
122
- }
123
-
124
- .japp .navbar-container div.title div img {
125
- border-radius:12px;
126
- width:24px;
127
- height:24px;
128
- margin-right:6px;
129
- }
130
-
131
- .japp .navbar .icon {
132
- color:var(--active-color);
133
- }
134
-
135
- .japp .title {
136
- font-size:1.2em;
137
- }
138
-
139
- .japp .block {
140
- padding:15px;
141
- color: #6d6d72;
142
- font-size:0.9em;
143
- box-sizing: border-box;
144
- }
145
-
146
- .japp .block-title {
147
- text-transform: uppercase;
148
- color: #6d6d72;
149
- margin: 25px 15px 10px;
150
- line-height: 17px;
151
- position: relative;
152
- overflow: hidden;
153
- white-space: nowrap;
154
- text-overflow: ellipsis;
155
- line-height: 1;
156
- font-size:0.9em;
157
- }
158
-
159
- .japp .block-strong {
160
- background-color:#fff;
161
- color: #000;
162
- }
163
-
164
- .japp .block-border {
165
- border-top:1px solid #ddd;
166
- border-bottom:1px solid #ddd;
167
- }
168
-
169
- .japp .block-footer {
170
- text-transform: uppercase;
171
- padding:15px;
172
- color: #6d6d72;
173
- font-size:0.7em;
174
- }
175
-
176
- .japp .block-collapse {
177
- max-height:100px;
178
- overflow-y:hidden;
179
- }
180
-
181
- .japp .block-instruction {
182
- text-transform: uppercase;
183
- padding:15px;
184
- color: #6d6d72;
185
- font-size:0.7em;
186
- text-align:center;
187
- }
188
-
189
- .japp .pages {
190
- display: flex;
191
- flex-wrap: nowrap;
192
- align-items: flex-start;
193
- height: 100%;
194
- width: 100%;
195
- }
196
-
197
- .japp .page {
198
- padding-top: 0px;
199
- padding-bottom: 45px;
200
- min-height: 100%;
201
- min-width: 100%;
202
- box-sizing: border-box;
203
- overflow-y: auto;
204
- /*will-change: scroll-position;
205
- -webkit-overflow-scrolling: touch;
206
- -webkit-transform: translateZ(0px);
207
- -webkit-transform: translate3d(0,0,0);
208
- -webkit-perspective: 1000;*/
209
- }
210
-
211
- .japp .page.with-navbar {
212
- padding-top: 45px;
213
- }
214
-
215
- .japp .panel {
216
- position:fixed;
217
- top: 0;
218
- left: 0;
219
- margin: 0;
220
- width:60vw;
221
- max-width:220px;
222
- height:100vh;
223
- background: #fff;
224
- z-index: 2;
225
- -webkit-box-sizing: border-box;
226
- box-sizing: border-box;
227
- box-shadow: 0 -1px 2px rgba(0,0,0,.1);
228
- padding:4px;
229
- }
230
-
231
- .japp .panel-left {
232
- -webkit-box-shadow: 0px 2px 15px -5px rgba(0, 0, 0, 0.7);
233
- box-shadow: 0px 2px 15px -5px rgba(0, 0, 0, 0.7);
234
- }
235
-
236
- .japp .panel a {
237
- color:var(--active-color);
238
- }
239
-
240
-
241
- /** Options **/
242
-
243
- .japp .options
244
- {
245
- background-color:#fff;
246
- border-top:1px solid #e6e6e8;
247
- border-bottom:1px solid #e6e6e8;
248
- padding-left:15px;
249
- margin-top:10px;
250
- }
251
-
252
- .japp .options:empty
253
- {
254
- display:none;
255
- }
256
-
257
- .japp .options .option
258
- {
259
- padding-top:10px;
260
- padding-bottom:10px;
261
- text-transform:uppercase;
262
- font-size:1em;
263
- border-bottom:1px solid #e6e6e8;
264
- overflow-x:hidden;
265
-
266
- -webkit-box-sizing: border-box;
267
- box-sizing: border-box;
268
- vertical-align:middle;
269
-
270
- display: -webkit-box;
271
- display: -moz-box;
272
- display: -ms-flexbox;
273
- display: -webkit-flex;
274
- display: flex;
275
-
276
- -webkit-flex-flow: row nowrap;
277
- justify-content: space-between;
278
- align-items:center;
279
- flex-wrap:nowrap;
280
- }
281
-
282
- .japp .options .option:last-child
283
- {
284
- border-bottom:0px;
285
- }
286
-
287
- .japp .options label
288
- {
289
- width:100%;
290
- }
291
-
292
- .japp .options input[type='text'], .japp .options textarea
293
- {
294
- outline:none;
295
- border:1px solid transparent;
296
- font-size:1em;
297
- margin:0px;
298
- padding:0px;
299
- width:100%;
300
- box-sizing:border-box;
301
- }
302
-
303
- .japp .options textarea
304
- {
305
- height:100px;
306
- }
307
-
308
- .japp .options input[type='checkbox'], .japp .options input[type='radio']
309
- {
310
- visibility: hidden;
311
- }
312
-
313
- .japp .options input[type='checkbox'] ~ i, .japp .options input[type='radio'] ~ i
314
- {
315
- background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTkgMTYuMTdMNC44MyAxMmwtMS40MiAxLjQxTDkgMTkgMjEgN2wtMS40MS0xLjQxeiIgZmlsbD0iIzAwN2FmZiIvPjwvc3ZnPg==');
316
- background-repeat: no-repeat;
317
- content:'';
318
- visibility: hidden;
319
- margin-right:10px;
320
- line-height:24px;
321
- width:24px;
322
- height:24px;
323
- }
324
-
325
- .japp .options input[type='checkbox']:checked ~ i, .japp .options input[type='radio']:checked ~ i
326
- {
327
- visibility: visible;
328
- }
329
-
330
- .japp .options .jdropdown {
331
- width: 100%;
332
- display: block;
333
- }
334
-
335
- .japp .options .jdropdown .jdropdown-header {
336
- border: 0px;
337
- padding: 0px !important;
338
- border-bottom: 1px solid #e6e6e8;
339
- text-transform: uppercase;
340
- outline: none;
341
- }
342
-
343
- .japp .options .jdropdown:last-child .jdropdown-header {
344
- border-bottom: 0px;
345
- }
346
-
347
- .japp .options .jdropdown-searchbar.jdropdown-focus .jdropdown-header {
348
- border:0px;
349
- padding: 5px;
350
- }
351
-
352
- .japp .options .jcalendar-input {
353
- background-position: top 50% right 8px;
354
- }
355
-
356
- .japp .options .icon {
357
- float:left;
358
- margin-right:10px;
359
- max-width:40px;
360
- max-height:40px;
361
- border-radius:20px;
362
- color:#929292;
363
- }
364
-
365
- .japp .options .option .option-actions {
366
- display:flex;
367
- transform: translateX(100%);
368
- width:0px;
369
- }
370
-
371
- .japp .options .option .option-actions > div {
372
- padding-right:5px;
373
- }
374
-
375
- .japp .options .option .option-actions > div > i {
376
- width:40px;
377
- height:40px;
378
- color:#fff;
379
- font-size:24px;
380
- line-height:40px;
381
- text-align:center;
382
- border-radius:30px;
383
- background-color:red;
384
- }
385
-
386
- .japp .options .option .option-actions.small > div > i
387
- {
388
- color:#000;
389
- width:24px;
390
- height:24px;
391
- font-size:24px;
392
- line-height:24px;
393
- border-radius:24px;
394
- background-color:transparent;
395
- }
396
-
397
- .japp .options .option-title {
398
- display:block;
399
- padding-top:10px;
400
- padding-bottom:10px;
401
- text-transform:uppercase;
402
- font-size:1em;
403
- vertical-align:center;
404
- }
405
-
406
- .japp .options .option-title::after {
407
- content:'\e313';
408
- font-family: 'material icons';
409
- font-size:24px;
410
- margin-right:10px;
411
- float:right;
412
- width:24px;
413
- height:24px;
414
- line-height:24px;
415
- }
416
-
417
- .japp .options .option-title.selected::after
418
- {
419
- content:'\e316';
420
- }
421
-
422
- .japp .options .option-title.selected ~ div {
423
- display:block;
424
- }
425
-
426
- .japp .options .option-group {
427
- border-top:1px solid #e6e6e8;
428
- background-color:#fff;
429
- display:none;
430
- }
431
-
432
- .japp .options .option-link:after {
433
- content:'\e315';
434
- font-family: 'material icons';
435
- color:var(--active-color);
436
- font-size:24px;
437
- margin-right:10px;
438
- float:right;
439
- width:24px;
440
- height:24px;
441
- line-height:24px;
442
- display:block;
443
- }
444
-
445
- .japp .options .option-header {
446
- padding-left:10px;
447
- padding-right:10px;
448
- flex-grow:10;
449
- white-space: nowrap;
450
- overflow: hidden;
451
- text-overflow: ellipsis;
452
- }
453
-
454
- .japp .options .option .option-name {
455
- font-size:1em;
456
- text-overflow: ellipsis;
457
- width: 100%;
458
- overflow: hidden;
459
- }
460
-
461
- .japp .options .option .option-small {
462
- font-size:0.7em;
463
- color: #6d6d72;
464
- text-overflow: ellipsis;
465
- overflow: hidden;
466
- white-space: nowrap;
467
- display:block;
468
- }
469
-
470
- .japp .options .option .option-image img {
471
- width:40px;
472
- height:40px;
473
- border-radius:20px;
474
- display:block;
475
- }
476
-
477
- .japp .options .option .option-image-small img {
478
- width:24px;
479
- height:auto;
480
- border-radius:50px;
481
- display:block;
482
- }
483
-
484
- .japp .options .option .option-image .option-badge {
485
- position: absolute;
486
- background-color: red;
487
- color: #fff;
488
- width: 16px;
489
- height: 16px;
490
- line-height: 16px;
491
- border-radius: 16px;
492
- text-align: center;
493
- font-size: 7px;
494
- margin: 28px;
495
- }
496
-
497
- .japp .options .option .option-image-small .option-badge {
498
- position: absolute;
499
- background-color: red;
500
- color: #fff;
501
- width: 16px;
502
- height: 16px;
503
- line-height: 16px;
504
- border-radius: 16px;
505
- text-align: center;
506
- font-size: 7px;
507
- margin: 12px;
508
- }
509
-
510
- .japp .options .option .option-badge.solid {
511
- background-color: red;
512
- color: red;
513
- }
514
-
515
- .japp .options .option .option-badge.solid-green {
516
- background-color: green;
517
- color: green;
518
- }
519
-
520
- .japp .options .option .option-badge:empty {
521
- display:none;
522
- }
523
-
524
- .japp .options .option .option-date {
525
- float:right;
526
- font-size:0.6em;
527
- color:#888;
528
- margin-right:15px;
529
- white-space: nowrap;
530
- }
531
-
532
- .japp .options .option .option-right {
533
- margin-right:15px;
534
- }
535
-
536
- .japp .options .option .option-badget {
537
- background-color:red;
538
- border-radius:12px;
539
- width:24px;
540
- height:24px;
541
- line-height:24px;
542
- font-size:0.7em;
543
- color:#fff;
544
- text-align:center;
545
- }
546
-
547
- .japp .options .option .option-badget:empty {
548
- display:none;
549
- }
550
-
551
- .japp .options input::-webkit-input-placeholder
552
- {
553
- text-transform:uppercase;
554
- }
555
-
556
- .japp .options input::-moz-placeholder
557
- {
558
- text-transform:uppercase;
559
- }
560
-
561
- .japp .options input:-ms-input-placeholder
562
- {
563
- text-transform:uppercase;
564
- }
565
-
566
- .japp .options input:-moz-placeholder
567
- {
568
- text-transform:uppercase;
569
- }
570
-
571
- /** Actionsheet **/
572
-
573
- .jactionsheet
574
- {
575
- position:fixed;
576
- left: 0;
577
- bottom: 0;
578
- width: 100%;
579
- min-height:100%;
580
- z-index:10;
581
-
582
- background-color:rgba(0,0,0,0.5);
583
- -webkit-transition-duration: .2s;
584
- transition-duration: .2s;
585
- display: flex;
586
- -ms-flex-align: baseline;
587
- -webkit-align-items: baseline;
588
- -webkit-box-align: baseline;
589
-
590
- align-items: baseline;
591
- }
592
-
593
- .jactionsheet .jactionsheet-content
594
- {
595
- width:100%;
596
- align-self: flex-end;
597
- }
598
-
599
- .jactionsheet .jactionsheet-title
600
- {
601
- font-size:1em;
602
- font-weight:bold;
603
- padding:8px;
604
- }
605
-
606
- .jactionsheet .jactionsheet-message
607
- {
608
- padding:4px;
609
- }
610
-
611
- .jactionsheet .jactionsheet-group
612
- {
613
- box-sizing: border-box;
614
- margin:10px;
615
- background-color:#fff;
616
- border-radius:5px;
617
- }
618
-
619
- .jactionsheet .jactionsheet-group > div
620
- {
621
- font-size:1.4em;
622
- font-weight:bold;
623
- padding:4px;
624
- border-top:1px solid #ccc;
625
- text-align:center;
626
- width:100%;
627
- box-sizing: border-box;
628
- }
629
- .jactionsheet .jactionsheet-group > div:first-child
630
- {
631
- border-top:0px;
632
- }
633
-
634
- .jactionsheet .jactionsheet-group input
635
- {
636
- border:0px;
637
- margin:0px;
638
- background-color:transparent;
639
- color:var(--active-color);
640
- width:100%;
641
- outline:none;
642
- font-size:1em;
643
- }
644
-
645
- .jactionsheet .jactionsheet-group input.jactionsheet-cancel
646
- {
647
- color:red;
648
- }
649
-
650
- /** Badge **/
651
-
652
- .japp .jbadge
653
- {
654
- position:relative;
655
- display:inline-block;
656
- top:-12px;
657
- left:-12px;
658
- }
659
-
660
- .japp .jbadge > div
661
- {
662
- background-color:red;
663
- color:#fff;
664
- width:16px;
665
- height:16px;
666
- line-height:16px;
667
- border-radius:16px;
668
- text-align:center;
669
- font-size:8px;
670
- position:absolute;
671
- }
672
-
673
- .japp .jbadge > div:empty
674
- {
675
- display:none;
676
- }
677
-
678
- /** Progressbar **/
679
-
680
-
681
- .japp .progressbar-container {
682
- margin: 15px;
683
- margin-left: 0px;
684
- margin-right: 0px;
685
- margin-top: 5px;
686
- }
687
-
688
- .japp .progressbar {
689
- width:100%;
690
- border:1px solid var(--active-color);
691
- border-radius:1px;
692
- }
693
-
694
- .japp .progressbar-title {
695
- margin-bottom:2px;
696
- text-transform:uppercase;
697
- display:flex;
698
- justify-content:space-between;
699
- }
700
-
701
- .japp .progressbar div {
702
- background-color:var(--active-color);
703
- height:4px;
704
- width:0%;
705
- }
706
-
707
-
708
- /** Topsearch **/
709
-
710
- .japp .top-search {
711
- margin: 0px;
712
- padding: 10px;
713
- border-bottom: 1px solid #ddd;
714
- }
715
-
716
- .japp .top-search input {
717
- background-color: #e6e6e6;
718
- border: 0px;
719
- border-radius: 4px;
720
- outline: none;
721
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='gray'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
722
- background-repeat: no-repeat;
723
- background-position: 5px center;
724
- width: 100%;
725
- padding: 8px;
726
- padding-left: 32px;
727
- }
728
-
729
- /** Range **/
730
-
731
- .japp .range
732
- {
733
- -webkit-appearance: none;
734
- margin: 18px 0;
735
- width: 100%;
736
- }
737
-
738
- .japp .range:focus
739
- {
740
- outline: none;
741
- }
742
-
743
- .japp .range::-webkit-slider-runnable-track
744
- {
745
- width: 100%;
746
- height: 4px;
747
- cursor: pointer;
748
- animation: 0.2s;
749
- background: #ccc;
750
- border-radius: 1.3px;
751
- }
752
-
753
- .japp .range::-webkit-slider-thumb
754
- {
755
- -webkit-appearance:none;
756
- appearance:none;
757
- width:24px;
758
- height:24px;
759
- background:#fff;
760
- cursor:pointer;
761
- border-radius:24px;
762
- margin-top:-10px;
763
- border:0px;
764
- box-shadow:0px 1px 3px 1px #bbb;
765
- }
766
-
767
- .japp .range::-moz-range-track
768
- {
769
- width:100%;
770
- cursor:pointer;
771
- animation:0.2s;
772
- background:#ccc;
773
- border-radius:1.3px;
774
- }
775
-
776
- .japp .range::-moz-range-thumb
777
- {
778
- width:24px;
779
- height:24px;
780
- background:#fff;
781
- cursor:pointer;
782
- border-radius:24px;
783
- border:0px;
784
- box-shadow:0px 1px 3px 1px #bbb;
785
- }
786
-
787
- .japp .range::-ms-track
788
- {
789
- width: 100%;
790
- cursor: pointer;
791
- animation: 0.2s;
792
- background: transparent;
793
- border-color: transparent;
794
- border-width: 16px 0;
795
- color: transparent;
796
- border-radius:1.3px;
797
- }
798
-
799
- .japp .range::-ms-fill-lower
800
- {
801
- background:#ccc;
802
- height:5px;
803
- }
804
-
805
- .japp .range::-ms-fill-upper
806
- {
807
- background:#ccc;
808
- height:5px;
809
- }
810
-
811
- .japp .range::-ms-thumb {
812
- width:24px;
813
- height:24px;
814
- background:#fff;
815
- cursor:pointer;
816
- border-radius:24px;
817
- border:0px;
818
- box-shadow:0px 1px 3px 1px #bbb;
819
- }
820
-
821
- .japp .range:focus::-ms-fill-lower
822
- {
823
- background: #ccc;
824
- }
825
-
826
- .japp .range:focus::-ms-fill-upper
827
- {
828
- background: #ccc;
829
- }
830
-
831
- /** Placeholders **/
832
-
833
- .japp *::placeholder
834
- {
835
- color: #cccccc;
836
- opacity: 1;
837
- }
838
-
839
- .japp *:-ms-input-placeholder
840
- {
841
- color: #cccccc;
842
- }
843
-
844
- .japp *::-ms-input-placeholder
845
- {
846
- color: #cccccc;
847
- }
848
-
849
- .japp *::-webkit-input-placeholder
850
- {
851
- color: #cccccc;
852
- }
853
-
854
- @supports (-webkit-overflow-scrolling: touch) {
855
- .app .options input:checked:before {
856
- top:-12px;
857
- }
858
- }
859
-
860
- @media only screen and (max-device-width : 800px)
861
- {
862
- .japp * {
863
- -webkit-tap-highlight-color: transparent;
864
- -webkit-touch-callout: none;
865
- }
866
-
867
- body {
868
- margin: 0px;
869
- padding: 0px;
870
- width: 100%;
871
- height: 100%;
872
- min-height: 100%;
873
- line-height: 1.4;
874
- font-family: -apple-system,SF UI Text,Helvetica Neue,Helvetica,Arial,sans-serif !important;
875
- background-color: #fff;
876
- }
877
-
878
- .japp input, .japp select, .japp textarea, .japp div {
879
- font-family:-apple-system,SF UI Text,Helvetica Neue,Helvetica,Arial,sans-serif !important;
880
- }
881
-
882
- .japp button {
883
- border-radius: 4px;
884
- width: 100%;
885
- border: 1px solid var(--active-color);
886
- color: var(--active-color);
887
- background-color: transparent;
888
- padding: 4px;
889
- outline: none;
890
- }
891
-
892
- .japp button:active {
893
- border: 1px solid #000;
894
- color: #000;
895
- }
896
- }
897
-
898
- .japp .jtemplate-empty {
899
- text-align:center;
900
- padding-top:10px;
901
- padding-bottom:10px;
902
- margin-right:10px;
903
- }
904
-
905
-
906
- .jdialog
907
- {
908
- position:fixed;
909
- left: 0;
910
- top: 0;
911
- width: 100%;
912
- min-height:100%;
913
- z-index:10;
914
-
915
- background-color:rgba(0,0,0,0.5);
916
- -webkit-transition-duration: .1s;
917
- transition-duration: .1s;
918
- display: flex;
919
- -ms-flex-align: center;
920
- -webkit-align-items: center;
921
- -webkit-box-align: center;
922
-
923
- align-items: center;
924
- }
925
-
926
- .jdialog .jdialog-container
927
- {
928
- width:100%;
929
- max-width:280px;
930
- box-sizing: border-box;
931
- margin:0 auto;
932
- vertical-align:middle;
933
- background-color:#fff;
934
- border-radius:10px;
935
-
936
- opacity: 0;
937
- transition: opacity .2s;
938
- -webkit-transition: opacity .2s;
939
- }
940
-
941
- .jdialog .jdialog-header
942
- {
943
- padding:10px;
944
- text-align:center;
945
- }
946
-
947
- .jdialog .jdialog-header .jdialog-title
948
- {
949
- font-size:1em;
950
- font-weight:bold;
951
- padding:8px;
952
- }
953
-
954
- .jdialog .jdialog-header .jdialog-message
955
- {
956
- padding: 4px;
957
- }
958
-
959
- .jdialog .jdialog-footer
960
- {
961
- border-top: 1px solid #ccc;
962
- display: flex;
963
- flex-wrap: wrap;
964
- align-content: stretch;
965
- align-items: center;
966
- text-align: center;
967
- }
968
-
969
- .jdialog .jdialog-footer > div
970
- {
971
- padding:4px;
972
- border-left:1px solid #ccc;
973
- text-align:center;
974
- flex: 1;
975
- }
976
- .jdialog .jdialog-footer > div:first-child
977
- {
978
- border-left:0px;
979
- }
980
-
981
- .jdialog .jdialog-footer input
982
- {
983
- border: 0px;
984
- margin: 0px;
985
- background-color: transparent;
986
- color: var(--active-color);
987
- width: 100%;
988
- outline: none;
989
- }
990
-
991
- .jrefresh {
992
- background-image: url("data:image/svg+xml,%3Csvg class='lds-typing' width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Ccircle cx='27.5' cy='38.1294' r='5' fill='%23df1317'%3E%3Canimate attributeName='cy' calcMode='spline' keySplines='0 0.5 0.5 1;0.5 0 1 0.5;0.5 0.5 0.5 0.5' repeatCount='indefinite' values='62.5;37.5;62.5;62.5' keyTimes='0;0.25;0.5;1' dur='1s' begin='-0.5s'%3E%3C/animate%3E%3C/circle%3E%3Ccircle cx='42.5' cy='38.9606' r='5' fill='%23e4934b'%3E%3Canimate attributeName='cy' calcMode='spline' keySplines='0 0.5 0.5 1;0.5 0 1 0.5;0.5 0.5 0.5 0.5' repeatCount='indefinite' values='62.5;37.5;62.5;62.5' keyTimes='0;0.25;0.5;1' dur='1s' begin='-0.375s'%3E%3C/animate%3E%3C/circle%3E%3Ccircle cx='57.5' cy='48.6466' r='5' fill='%23e2bb8b'%3E%3Canimate attributeName='cy' calcMode='spline' keySplines='0 0.5 0.5 1;0.5 0 1 0.5;0.5 0.5 0.5 0.5' repeatCount='indefinite' values='62.5;37.5;62.5;62.5' keyTimes='0;0.25;0.5;1' dur='1s' begin='-0.25s'%3E%3C/animate%3E%3C/circle%3E%3Ccircle cx='72.5' cy='62.5' r='5' fill='%23e1e7e7'%3E%3Canimate attributeName='cy' calcMode='spline' keySplines='0 0.5 0.5 1;0.5 0 1 0.5;0.5 0.5 0.5 0.5' repeatCount='indefinite' values='62.5;37.5;62.5;62.5' keyTimes='0;0.25;0.5;1' dur='1s' begin='-0.125s'%3E%3C/animate%3E%3C/circle%3E%3C/svg%3E");
993
- background-repeat: no-repeat;
994
- background-size: 70px;
995
- background-position: center;
996
- backgrounnd-color: transparent;
997
- width: 100%;
998
- height: 70px;
999
- }
1000
-
1001
- .jrefresh.holding {
1002
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
1003
- background-size: 24px;
1004
- }
1005
-
1006
- .jrefresh.ready {
1007
- transform: rotate(-180deg);
1008
- transition: transform 150ms ease;
1009
- }
1010
-
1011
-
1012
-