@clayui/css 3.40.1 → 3.41.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.
- package/lib/css/atlas.css +232 -164
- package/lib/css/atlas.css.map +1 -1
- package/lib/css/base.css +196 -98
- package/lib/css/base.css.map +1 -1
- package/lib/css/cadmin.css +215 -152
- package/lib/css/cadmin.css.map +1 -1
- package/lib/images/icons/icons.svg +1 -1
- package/package.json +2 -2
- package/src/scss/atlas/variables/_forms.scss +33 -1
- package/src/scss/atlas/variables/_globals.scss +13 -0
- package/src/scss/cadmin/components/_form-validation.scss +10 -237
- package/src/scss/cadmin/components/_reboot.scss +1 -8
- package/src/scss/cadmin/components/_toggle-switch.scss +20 -358
- package/src/scss/cadmin/variables/_forms.scss +353 -2
- package/src/scss/cadmin/variables/_globals.scss +14 -0
- package/src/scss/cadmin/variables/_toggle-switch.scss +404 -1
- package/src/scss/components/_form-validation.scss +8 -237
- package/src/scss/components/_reboot.scss +1 -8
- package/src/scss/components/_toggle-switch.scss +36 -351
- package/src/scss/functions/_global-functions.scss +18 -0
- package/src/scss/mixins/_forms.scss +419 -4
- package/src/scss/mixins/_globals.scss +7 -0
- package/src/scss/mixins/_links.scss +248 -63
- package/src/scss/mixins/_toggle-switch.scss +1076 -14
- package/src/scss/variables/_forms.scss +295 -1
- package/src/scss/variables/_globals.scss +13 -0
- package/src/scss/variables/_toggle-switch.scss +404 -5
|
@@ -7,8 +7,62 @@
|
|
|
7
7
|
/// @example
|
|
8
8
|
/// (
|
|
9
9
|
/// enabled: {Bool}, // Set to false to prevent .dropdown-item styles from being output. Default: true
|
|
10
|
+
/// before: (
|
|
11
|
+
/// // .link::before
|
|
12
|
+
/// ),
|
|
13
|
+
/// after: (
|
|
14
|
+
/// // .link::after
|
|
15
|
+
/// ),
|
|
16
|
+
/// link: (
|
|
17
|
+
/// // .link:link
|
|
18
|
+
/// before: (
|
|
19
|
+
/// // .link:link::before
|
|
20
|
+
/// ),
|
|
21
|
+
/// after: (
|
|
22
|
+
/// // .link:link::after
|
|
23
|
+
/// ),
|
|
24
|
+
/// inline-item: (
|
|
25
|
+
/// // .link:link .inline-item
|
|
26
|
+
/// ),
|
|
27
|
+
/// inline-item:-before (
|
|
28
|
+
/// // .link:link .inline-item-before
|
|
29
|
+
/// ),
|
|
30
|
+
/// inline-item-middle: (
|
|
31
|
+
/// // .link:link .inline-item-middle
|
|
32
|
+
/// ),
|
|
33
|
+
/// inline-item-after: (
|
|
34
|
+
/// // .link:link .inline-item-after
|
|
35
|
+
/// ),
|
|
36
|
+
/// ),
|
|
37
|
+
/// visited: (
|
|
38
|
+
/// // .link:visited
|
|
39
|
+
/// before: (
|
|
40
|
+
/// // .link:visited::before
|
|
41
|
+
/// ),
|
|
42
|
+
/// after: (
|
|
43
|
+
/// // .link:visited::after
|
|
44
|
+
/// ),
|
|
45
|
+
/// inline-item: (
|
|
46
|
+
/// // .link:visited .inline-item
|
|
47
|
+
/// ),
|
|
48
|
+
/// inline-item:-before (
|
|
49
|
+
/// // .link:visited .inline-item-before
|
|
50
|
+
/// ),
|
|
51
|
+
/// inline-item-middle: (
|
|
52
|
+
/// // .link:visited .inline-item-middle
|
|
53
|
+
/// ),
|
|
54
|
+
/// inline-item-after: (
|
|
55
|
+
/// // .link:visited .inline-item-after
|
|
56
|
+
/// ),
|
|
57
|
+
/// ),
|
|
10
58
|
/// hover: (
|
|
11
59
|
/// // .link:hover
|
|
60
|
+
/// before: (
|
|
61
|
+
/// // .link:hover::before
|
|
62
|
+
/// ),
|
|
63
|
+
/// after: (
|
|
64
|
+
/// // .link:hover::after
|
|
65
|
+
/// ),
|
|
12
66
|
/// inline-item: (
|
|
13
67
|
/// // .link:hover .inline-item
|
|
14
68
|
/// ),
|
|
@@ -24,6 +78,12 @@
|
|
|
24
78
|
/// ),
|
|
25
79
|
/// focus: (
|
|
26
80
|
/// // .link:focus
|
|
81
|
+
/// before: (
|
|
82
|
+
/// // .link:focus::before
|
|
83
|
+
/// ),
|
|
84
|
+
/// after: (
|
|
85
|
+
/// // .link:focus::after
|
|
86
|
+
/// ),
|
|
27
87
|
/// inline-item: (
|
|
28
88
|
/// // .link:focus .inline-item
|
|
29
89
|
/// ),
|
|
@@ -39,6 +99,12 @@
|
|
|
39
99
|
/// ),
|
|
40
100
|
/// active: (
|
|
41
101
|
/// // .link:active
|
|
102
|
+
/// before: (
|
|
103
|
+
/// // .link:active::before
|
|
104
|
+
/// ),
|
|
105
|
+
/// after: (
|
|
106
|
+
/// // .link:active::after
|
|
107
|
+
/// ),
|
|
42
108
|
/// inline-item: (
|
|
43
109
|
/// // .link:active .inline-item
|
|
44
110
|
/// ),
|
|
@@ -54,6 +120,12 @@
|
|
|
54
120
|
/// ),
|
|
55
121
|
/// active-class: (
|
|
56
122
|
/// // .link.active
|
|
123
|
+
/// before: (
|
|
124
|
+
/// // .link.active::before
|
|
125
|
+
/// ),
|
|
126
|
+
/// after: (
|
|
127
|
+
/// // .link.active::after
|
|
128
|
+
/// ),
|
|
57
129
|
/// inline-item: (
|
|
58
130
|
/// // .link.active .inline-item
|
|
59
131
|
/// ),
|
|
@@ -69,8 +141,20 @@
|
|
|
69
141
|
/// ),
|
|
70
142
|
/// disabled: (
|
|
71
143
|
/// // .link:disabled, .link.disabled
|
|
144
|
+
/// before: (
|
|
145
|
+
/// // .link:disabled::before, .link.disabled::before
|
|
146
|
+
/// ),
|
|
147
|
+
/// after: (
|
|
148
|
+
/// // .link:disabled::after, .link.disabled::after
|
|
149
|
+
/// ),
|
|
72
150
|
/// active: (
|
|
73
|
-
/// // .link:disabled:active,
|
|
151
|
+
/// // .link:disabled:active, .link.disabled:active
|
|
152
|
+
/// before: (
|
|
153
|
+
/// // .link:disabled:active::before, .link.disabled:active::before
|
|
154
|
+
/// ),
|
|
155
|
+
/// after: (
|
|
156
|
+
/// // .link:disabled:active::after, .link.disabled:active::after
|
|
157
|
+
/// ),
|
|
74
158
|
/// ),
|
|
75
159
|
/// inline-item: (
|
|
76
160
|
/// // .link:disabled .inline-item
|
|
@@ -90,6 +174,12 @@
|
|
|
90
174
|
/// ),
|
|
91
175
|
/// show: (
|
|
92
176
|
/// // .link[aria-expanded='true'], .link.show, .show .link
|
|
177
|
+
/// before: (
|
|
178
|
+
/// // .link.show::before
|
|
179
|
+
/// ),
|
|
180
|
+
/// after: (
|
|
181
|
+
/// // .link.show::after, .link.disabled::after
|
|
182
|
+
/// ),
|
|
93
183
|
/// ),
|
|
94
184
|
/// c-inner: (
|
|
95
185
|
/// enabled: {Bool}, // Set to false to prevent .dropdown-item styles from being output. Default: true
|
|
@@ -342,8 +432,12 @@
|
|
|
342
432
|
)
|
|
343
433
|
);
|
|
344
434
|
|
|
345
|
-
$disabled-active: setter(map-get($
|
|
346
|
-
$disabled-active: map-merge(
|
|
435
|
+
$disabled-active: setter(map-get($disabled, active), ());
|
|
436
|
+
$disabled-active: map-deep-merge(
|
|
437
|
+
$disabled-active,
|
|
438
|
+
map-get($map, disabled-active)
|
|
439
|
+
);
|
|
440
|
+
$disabled-active: map-deep-merge(
|
|
347
441
|
$disabled-active,
|
|
348
442
|
(
|
|
349
443
|
pointer-events:
|
|
@@ -429,109 +523,185 @@
|
|
|
429
523
|
@if ($enabled) {
|
|
430
524
|
@include clay-css($base);
|
|
431
525
|
|
|
432
|
-
|
|
433
|
-
@include clay-css($
|
|
526
|
+
&::before {
|
|
527
|
+
@include clay-css(map-get($map, before));
|
|
528
|
+
}
|
|
529
|
+
|
|
530
|
+
&::after {
|
|
531
|
+
@include clay-css(map-get($map, after));
|
|
532
|
+
}
|
|
533
|
+
|
|
534
|
+
&:link {
|
|
535
|
+
@include clay-css(map-get($map, link));
|
|
536
|
+
|
|
537
|
+
&::before {
|
|
538
|
+
@include clay-css(map-deep-get($map, link, before));
|
|
539
|
+
}
|
|
540
|
+
|
|
541
|
+
&::after {
|
|
542
|
+
@include clay-css(map-deep-get($map, link, after));
|
|
543
|
+
}
|
|
434
544
|
|
|
435
545
|
.inline-item {
|
|
436
|
-
@include clay-css(
|
|
546
|
+
@include clay-css(map-deep-get($map, link, inline-item));
|
|
547
|
+
}
|
|
548
|
+
|
|
549
|
+
.inline-item-before {
|
|
550
|
+
@include clay-css(map-deep-get($map, link, inline-item-before));
|
|
551
|
+
}
|
|
552
|
+
|
|
553
|
+
.inline-item-middle {
|
|
554
|
+
@include clay-css(map-deep-get($map, link, inline-item-middle));
|
|
555
|
+
}
|
|
556
|
+
|
|
557
|
+
.inline-item-after {
|
|
558
|
+
@include clay-css(map-deep-get($map, link, inline-item-after));
|
|
559
|
+
}
|
|
560
|
+
}
|
|
561
|
+
|
|
562
|
+
&:visited {
|
|
563
|
+
@include clay-css(map-get($map, visited));
|
|
564
|
+
|
|
565
|
+
&::before {
|
|
566
|
+
@include clay-css(map-deep-get($map, visited, before));
|
|
567
|
+
}
|
|
568
|
+
|
|
569
|
+
&::after {
|
|
570
|
+
@include clay-css(map-deep-get($map, visited, after));
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
.inline-item {
|
|
574
|
+
@include clay-css(map-deep-get($map, visited, inline-item));
|
|
437
575
|
}
|
|
438
576
|
|
|
439
577
|
.inline-item-before {
|
|
440
578
|
@include clay-css(
|
|
441
|
-
|
|
579
|
+
map-deep-get($map, visited, inline-item-before)
|
|
442
580
|
);
|
|
443
581
|
}
|
|
444
582
|
|
|
445
583
|
.inline-item-middle {
|
|
446
584
|
@include clay-css(
|
|
447
|
-
|
|
585
|
+
map-deep-get($map, visited, inline-item-middle)
|
|
448
586
|
);
|
|
449
587
|
}
|
|
450
588
|
|
|
451
589
|
.inline-item-after {
|
|
452
590
|
@include clay-css(
|
|
453
|
-
|
|
591
|
+
map-deep-get($map, visited, inline-item-after)
|
|
454
592
|
);
|
|
455
593
|
}
|
|
456
594
|
}
|
|
457
595
|
|
|
596
|
+
&:hover {
|
|
597
|
+
@include clay-css($hover);
|
|
598
|
+
|
|
599
|
+
&::before {
|
|
600
|
+
@include clay-css(map-deep-get($map, hover, before));
|
|
601
|
+
}
|
|
602
|
+
|
|
603
|
+
&::after {
|
|
604
|
+
@include clay-css(map-deep-get($map, hover, after));
|
|
605
|
+
}
|
|
606
|
+
|
|
607
|
+
.inline-item {
|
|
608
|
+
@include clay-css(map-get($hover, inline-item));
|
|
609
|
+
}
|
|
610
|
+
|
|
611
|
+
.inline-item-before {
|
|
612
|
+
@include clay-css(map-get($hover, inline-item-before));
|
|
613
|
+
}
|
|
614
|
+
|
|
615
|
+
.inline-item-middle {
|
|
616
|
+
@include clay-css(map-get($hover, inline-item-middle));
|
|
617
|
+
}
|
|
618
|
+
|
|
619
|
+
.inline-item-after {
|
|
620
|
+
@include clay-css(map-get($hover, inline-item-after));
|
|
621
|
+
}
|
|
622
|
+
}
|
|
623
|
+
|
|
458
624
|
&:focus {
|
|
459
625
|
@include clay-css($focus);
|
|
460
626
|
|
|
627
|
+
&::before {
|
|
628
|
+
@include clay-css(map-deep-get($map, focus, before));
|
|
629
|
+
}
|
|
630
|
+
|
|
631
|
+
&::after {
|
|
632
|
+
@include clay-css(map-deep-get($map, focus, after));
|
|
633
|
+
}
|
|
634
|
+
|
|
461
635
|
.inline-item {
|
|
462
|
-
@include clay-css(
|
|
636
|
+
@include clay-css(map-get($focus, inline-item));
|
|
463
637
|
}
|
|
464
638
|
|
|
465
639
|
.inline-item-before {
|
|
466
|
-
@include clay-css(
|
|
467
|
-
setter(map-get($focus, inline-item-before), ())
|
|
468
|
-
);
|
|
640
|
+
@include clay-css(map-get($focus, inline-item-before));
|
|
469
641
|
}
|
|
470
642
|
|
|
471
643
|
.inline-item-middle {
|
|
472
|
-
@include clay-css(
|
|
473
|
-
setter(map-get($focus, inline-item-middle), ())
|
|
474
|
-
);
|
|
644
|
+
@include clay-css(map-get($focus, inline-item-middle));
|
|
475
645
|
}
|
|
476
646
|
|
|
477
647
|
.inline-item-after {
|
|
478
|
-
@include clay-css(
|
|
479
|
-
setter(map-get($focus, inline-item-after), ())
|
|
480
|
-
);
|
|
648
|
+
@include clay-css(map-get($focus, inline-item-after));
|
|
481
649
|
}
|
|
482
650
|
}
|
|
483
651
|
|
|
484
652
|
&:active {
|
|
485
653
|
@include clay-css($active);
|
|
486
654
|
|
|
655
|
+
&::before {
|
|
656
|
+
@include clay-css(map-deep-get($map, active, before));
|
|
657
|
+
}
|
|
658
|
+
|
|
659
|
+
&::after {
|
|
660
|
+
@include clay-css(map-deep-get($map, active, after));
|
|
661
|
+
}
|
|
662
|
+
|
|
487
663
|
.inline-item {
|
|
488
|
-
@include clay-css(
|
|
664
|
+
@include clay-css(map-get($active, inline-item));
|
|
489
665
|
}
|
|
490
666
|
|
|
491
667
|
.inline-item-before {
|
|
492
|
-
@include clay-css(
|
|
493
|
-
setter(map-get($active, inline-item-before), ())
|
|
494
|
-
);
|
|
668
|
+
@include clay-css(map-get($active, inline-item-before));
|
|
495
669
|
}
|
|
496
670
|
|
|
497
671
|
.inline-item-middle {
|
|
498
|
-
@include clay-css(
|
|
499
|
-
setter(map-get($active, inline-item-middle), ())
|
|
500
|
-
);
|
|
672
|
+
@include clay-css(map-get($active, inline-item-middle));
|
|
501
673
|
}
|
|
502
674
|
|
|
503
675
|
.inline-item-after {
|
|
504
|
-
@include clay-css(
|
|
505
|
-
setter(map-get($active, inline-item-after), ())
|
|
506
|
-
);
|
|
676
|
+
@include clay-css(map-get($active, inline-item-after));
|
|
507
677
|
}
|
|
508
678
|
}
|
|
509
679
|
|
|
510
680
|
&.active {
|
|
511
681
|
@include clay-css($active-class);
|
|
512
682
|
|
|
683
|
+
&::before {
|
|
684
|
+
@include clay-css(map-deep-get($map, active-class, before));
|
|
685
|
+
}
|
|
686
|
+
|
|
687
|
+
&::after {
|
|
688
|
+
@include clay-css(map-deep-get($map, active-class, after));
|
|
689
|
+
}
|
|
690
|
+
|
|
513
691
|
.inline-item {
|
|
514
|
-
@include clay-css(
|
|
515
|
-
setter(map-get($active-class, inline-item), ())
|
|
516
|
-
);
|
|
692
|
+
@include clay-css(map-get($active-class, inline-item));
|
|
517
693
|
}
|
|
518
694
|
|
|
519
695
|
.inline-item-before {
|
|
520
|
-
@include clay-css(
|
|
521
|
-
setter(map-get($active-class, inline-item-before), ())
|
|
522
|
-
);
|
|
696
|
+
@include clay-css(map-get($active-class, inline-item-before));
|
|
523
697
|
}
|
|
524
698
|
|
|
525
699
|
.inline-item-middle {
|
|
526
|
-
@include clay-css(
|
|
527
|
-
setter(map-get($active-class, inline-item-middle), ())
|
|
528
|
-
);
|
|
700
|
+
@include clay-css(map-get($active-class, inline-item-middle));
|
|
529
701
|
}
|
|
530
702
|
|
|
531
703
|
.inline-item-after {
|
|
532
|
-
@include clay-css(
|
|
533
|
-
setter(map-get($active-class, inline-item-after), ())
|
|
534
|
-
);
|
|
704
|
+
@include clay-css(map-get($active-class, inline-item-after));
|
|
535
705
|
}
|
|
536
706
|
}
|
|
537
707
|
|
|
@@ -539,30 +709,44 @@
|
|
|
539
709
|
&.disabled {
|
|
540
710
|
@include clay-css($disabled);
|
|
541
711
|
|
|
712
|
+
&::before {
|
|
713
|
+
@include clay-css(map-deep-get($map, disabled, before));
|
|
714
|
+
}
|
|
715
|
+
|
|
716
|
+
&::after {
|
|
717
|
+
@include clay-css(map-deep-get($map, disabled, after));
|
|
718
|
+
}
|
|
719
|
+
|
|
542
720
|
&:active {
|
|
543
721
|
@include clay-css($disabled-active);
|
|
722
|
+
|
|
723
|
+
&::before {
|
|
724
|
+
@include clay-css(
|
|
725
|
+
map-deep-get($map, disabled, active, before)
|
|
726
|
+
);
|
|
727
|
+
}
|
|
728
|
+
|
|
729
|
+
&::after {
|
|
730
|
+
@include clay-css(
|
|
731
|
+
map-deep-get($map, disabled, active, after)
|
|
732
|
+
);
|
|
733
|
+
}
|
|
544
734
|
}
|
|
545
735
|
|
|
546
736
|
.inline-item {
|
|
547
|
-
@include clay-css(
|
|
737
|
+
@include clay-css(map-get($disabled, inline-item));
|
|
548
738
|
}
|
|
549
739
|
|
|
550
740
|
.inline-item-before {
|
|
551
|
-
@include clay-css(
|
|
552
|
-
setter(map-get($disabled, inline-item-before), ())
|
|
553
|
-
);
|
|
741
|
+
@include clay-css(map-get($disabled, inline-item-before));
|
|
554
742
|
}
|
|
555
743
|
|
|
556
744
|
.inline-item-middle {
|
|
557
|
-
@include clay-css(
|
|
558
|
-
setter(map-get($disabled, inline-item-middle), ())
|
|
559
|
-
);
|
|
745
|
+
@include clay-css(map-get($disabled, inline-item-middle));
|
|
560
746
|
}
|
|
561
747
|
|
|
562
748
|
.inline-item-after {
|
|
563
|
-
@include clay-css(
|
|
564
|
-
setter(map-get($disabled, inline-item-after), ())
|
|
565
|
-
);
|
|
749
|
+
@include clay-css(map-get($disabled, inline-item-after));
|
|
566
750
|
}
|
|
567
751
|
}
|
|
568
752
|
|
|
@@ -576,6 +760,14 @@
|
|
|
576
760
|
&.show,
|
|
577
761
|
.show > & {
|
|
578
762
|
@include clay-css($show);
|
|
763
|
+
|
|
764
|
+
&::before {
|
|
765
|
+
@include clay-css(map-deep-get($map, show, before));
|
|
766
|
+
}
|
|
767
|
+
|
|
768
|
+
&::after {
|
|
769
|
+
@include clay-css(map-deep-get($map, show, after));
|
|
770
|
+
}
|
|
579
771
|
}
|
|
580
772
|
|
|
581
773
|
@if (map-get($c-inner, enabled)) {
|
|
@@ -585,32 +777,25 @@
|
|
|
585
777
|
}
|
|
586
778
|
|
|
587
779
|
.inline-item {
|
|
588
|
-
@include clay-css(
|
|
780
|
+
@include clay-css(map-get($map, inline-item));
|
|
589
781
|
}
|
|
590
782
|
|
|
591
783
|
.inline-item-before {
|
|
592
|
-
@include clay-css(
|
|
784
|
+
@include clay-css(map-get($map, inline-item-before));
|
|
593
785
|
}
|
|
594
786
|
|
|
595
787
|
.inline-item-middle {
|
|
596
|
-
@include clay-css(
|
|
788
|
+
@include clay-css(map-get($map, inline-item-middle));
|
|
597
789
|
|
|
598
790
|
+ .inline-item-middle {
|
|
599
791
|
@include clay-css(
|
|
600
|
-
|
|
601
|
-
map-deep-get(
|
|
602
|
-
$map,
|
|
603
|
-
inline-item-middle,
|
|
604
|
-
inline-item-middle
|
|
605
|
-
),
|
|
606
|
-
()
|
|
607
|
-
)
|
|
792
|
+
map-deep-get($map, inline-item-middle, inline-item-middle)
|
|
608
793
|
);
|
|
609
794
|
}
|
|
610
795
|
}
|
|
611
796
|
|
|
612
797
|
.inline-item-after {
|
|
613
|
-
@include clay-css(
|
|
798
|
+
@include clay-css(map-get($map, inline-item-after));
|
|
614
799
|
}
|
|
615
800
|
|
|
616
801
|
.lexicon-icon {
|