@clayui/css 3.65.1 → 3.65.2

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 (36) hide show
  1. package/lib/css/atlas.css +1 -62
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +1 -61
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/cadmin.css +2 -26
  6. package/lib/css/cadmin.css.map +1 -1
  7. package/lib/images/icons/icons.svg +1 -1
  8. package/package.json +2 -2
  9. package/src/scss/_license-text.scss +1 -1
  10. package/src/scss/components/_alerts.scss +28 -80
  11. package/src/scss/components/_buttons.scss +2 -2
  12. package/src/scss/components/_custom-forms.scss +4 -12
  13. package/src/scss/components/_date-picker.scss +6 -23
  14. package/src/scss/components/_dropdowns.scss +10 -23
  15. package/src/scss/components/_forms.scss +16 -53
  16. package/src/scss/components/_icons.scss +4 -4
  17. package/src/scss/components/_labels.scss +6 -10
  18. package/src/scss/components/_list-group.scss +4 -9
  19. package/src/scss/components/_modals.scss +2 -6
  20. package/src/scss/components/_progress-bars.scss +2 -6
  21. package/src/scss/components/_stickers.scss +3 -15
  22. package/src/scss/components/_type.scss +3 -3
  23. package/src/scss/mixins/_alerts.scss +10 -24
  24. package/src/scss/mixins/_aspect-ratio.scss +51 -49
  25. package/src/scss/mixins/_badges.scss +140 -140
  26. package/src/scss/mixins/_buttons.scss +2 -6
  27. package/src/scss/mixins/_cards.scss +4 -10
  28. package/src/scss/mixins/_dropdown-menu.scss +19 -31
  29. package/src/scss/mixins/_grid.scss +59 -51
  30. package/src/scss/mixins/_labels.scss +228 -212
  31. package/src/scss/mixins/_menubar.scss +15 -46
  32. package/src/scss/mixins/_navbar.scss +41 -43
  33. package/src/scss/mixins/_pagination.scss +35 -71
  34. package/src/scss/mixins/_sheet.scss +2 -6
  35. package/src/scss/mixins/_stickers.scss +10 -19
  36. package/src/scss/mixins/_tbar.scss +10 -30
package/src/scss/mixins/_badges.scss CHANGED
@@ -62,181 +62,181 @@
62
62
  }
63
63
 
64
64
  @mixin clay-badge-variant($map) {
65
- $enabled: setter(map-get($map, enabled), true);
66
-
67
- $base: map-merge(
68
- $map,
69
- (
70
- background-color:
71
- setter(map-get($map, bg), map-get($map, background-color)),
72
- padding-bottom:
73
- setter(map-get($map, padding-y), map-get($map, padding-bottom)),
74
- padding-left:
75
- setter(map-get($map, padding-x), map-get($map, padding-left)),
76
- padding-right:
77
- setter(map-get($map, padding-x), map-get($map, padding-right)),
78
- padding-top:
79
- setter(map-get($map, padding-y), map-get($map, padding-top)),
80
- )
81
- );
82
-
83
- $empty: setter(map-get($map, empty), ());
65
+ @if (type-of($map) == 'map') {
66
+ $enabled: setter(map-get($map, enabled), true);
84
67
 
85
- $href: setter(map-get($map, href), ());
86
- $href: map-deep-merge(
87
- $href,
88
- (
89
- hover: (
68
+ $base: map-merge(
69
+ $map,
70
+ (
90
71
  background-color:
72
+ setter(map-get($map, bg), map-get($map, background-color)),
73
+ padding-bottom:
91
74
  setter(
92
- map-get($map, hover-bg),
93
- map-deep-get($href, hover, background-color)
94
- ),
95
- border-color:
96
- setter(
97
- map-get($map, hover-border-color),
98
- map-deep-get($href, hover, border-color)
99
- ),
100
- color:
101
- setter(
102
- map-get($map, hover-color),
103
- map-deep-get($href, hover, color)
75
+ map-get($map, padding-y),
76
+ map-get($map, padding-bottom)
104
77
  ),
105
- ),
106
- focus: (
107
- background-color:
78
+ padding-left:
108
79
  setter(
109
- map-get($map, hover-bg),
110
- map-deep-get($href, focus, background-color)
80
+ map-get($map, padding-x),
81
+ map-get($map, padding-left)
111
82
  ),
112
- border-color:
83
+ padding-right:
113
84
  setter(
114
- map-get($map, hover-border-color),
115
- map-deep-get($href, focus, border-color)
85
+ map-get($map, padding-x),
86
+ map-get($map, padding-right)
116
87
  ),
117
- color:
88
+ padding-top:
118
89
  setter(
119
- map-get($map, hover-color),
120
- map-deep-get($href, focus, color)
90
+ map-get($map, padding-y),
91
+ map-get($map, padding-top)
121
92
  ),
122
- ),
123
- )
124
- );
93
+ )
94
+ );
95
+
96
+ $href: setter(map-get($map, href), ());
97
+ $href: map-deep-merge(
98
+ $href,
99
+ (
100
+ hover: (
101
+ background-color:
102
+ setter(
103
+ map-get($map, hover-bg),
104
+ map-deep-get($href, hover, background-color)
105
+ ),
106
+ border-color:
107
+ setter(
108
+ map-get($map, hover-border-color),
109
+ map-deep-get($href, hover, border-color)
110
+ ),
111
+ color:
112
+ setter(
113
+ map-get($map, hover-color),
114
+ map-deep-get($href, hover, color)
115
+ ),
116
+ ),
117
+ focus: (
118
+ background-color:
119
+ setter(
120
+ map-get($map, hover-bg),
121
+ map-deep-get($href, focus, background-color)
122
+ ),
123
+ border-color:
124
+ setter(
125
+ map-get($map, hover-border-color),
126
+ map-deep-get($href, focus, border-color)
127
+ ),
128
+ color:
129
+ setter(
130
+ map-get($map, hover-color),
131
+ map-deep-get($href, focus, color)
132
+ ),
133
+ ),
134
+ )
135
+ );
136
+
137
+ $link: setter(map-get($map, link), ());
138
+ $link: map-deep-merge(
139
+ $link,
140
+ (
141
+ color: setter(map-get($map, link-color), map-get($link, color)),
142
+ hover: (
143
+ color:
144
+ setter(
145
+ map-get($map, link-hover-color),
146
+ map-deep-get($link, hover, color)
147
+ ),
148
+ ),
149
+ focus: (
150
+ color:
151
+ setter(
152
+ map-get($map, link-hover-color),
153
+ map-deep-get($link, focus, color)
154
+ ),
155
+ ),
156
+ )
157
+ );
125
158
 
126
- $link: setter(map-get($map, link), ());
127
- $link: map-deep-merge(
128
- $link,
129
- (
130
- color: setter(map-get($map, link-color), map-get($link, color)),
131
- hover: (
132
- color:
133
- setter(
134
- map-get($map, link-hover-color),
135
- map-deep-get($link, hover, color)
136
- ),
137
- ),
138
- focus: (
139
- color:
140
- setter(
141
- map-get($map, link-hover-color),
142
- map-deep-get($link, focus, color)
159
+ $c-inner: setter(map-get($map, c-inner), ());
160
+ $c-inner: map-merge(
161
+ (
162
+ enabled:
163
+ if(
164
+ variable-exists(enable-c-inner),
165
+ $enable-c-inner,
166
+ if(
167
+ variable-exists(cadmin-enable-c-inner),
168
+ $cadmin-enable-c-inner,
169
+ true
170
+ )
143
171
  ),
144
172
  ),
145
- )
146
- );
147
-
148
- $c-inner: setter(map-get($map, c-inner), ());
149
- $c-inner: map-merge(
150
- (
151
- enabled:
152
- if(
153
- variable-exists(enable-c-inner),
154
- $enable-c-inner,
155
- if(
156
- variable-exists(cadmin-enable-c-inner),
157
- $cadmin-enable-c-inner,
158
- true
159
- )
160
- ),
161
- ),
162
- $c-inner
163
- );
173
+ $c-inner
174
+ );
164
175
 
165
- $badge-item: setter(map-get($map, badge-item), ());
176
+ $badge-item: setter(map-get($map, badge-item), ());
166
177
 
167
- $badge-item-expand: setter(map-get($map, badge-item-expand), ());
178
+ $badge-item-expand: setter(map-get($map, badge-item-expand), ());
168
179
 
169
- $badge-item-before: setter(map-get($map, badge-item-before), ());
180
+ @if ($enabled) {
181
+ @include clay-css($base);
170
182
 
171
- $badge-item-after: setter(map-get($map, badge-item-after), ());
183
+ // Empty badges collapse automatically
172
184
 
173
- @if ($enabled) {
174
- @include clay-css($base);
175
-
176
- // Empty badges collapse automatically
177
-
178
- &:empty {
179
- @include clay-css($empty);
180
- }
181
-
182
- &[href],
183
- &[type] {
184
- @include clay-link($href);
185
- }
186
-
187
- a {
188
- @include clay-link($link);
189
- }
185
+ &:empty {
186
+ @include clay-css(map-get($map, empty));
187
+ }
190
188
 
191
- .badge-item {
192
- @include clay-css($badge-item);
189
+ &[href],
190
+ &[type] {
191
+ @include clay-link($href);
192
+ }
193
193
 
194
194
  a {
195
- $link: setter(map-get($badge-item, link), ());
196
-
197
195
  @include clay-link($link);
198
196
  }
199
197
 
200
- .btn-unstyled {
201
- $btn-unstyled: setter(map-get($badge-item, btn-unstyled), ());
198
+ .badge-item {
199
+ @include clay-css($badge-item);
202
200
 
203
- @include clay-button-variant($btn-unstyled);
204
- }
201
+ a {
202
+ @include clay-link(map-get($badge-item, link));
203
+ }
205
204
 
206
- .close {
207
- $close: setter(map-get($badge-item, close), ());
205
+ .btn-unstyled {
206
+ @include clay-button-variant(
207
+ map-get($badge-item, btn-unstyled)
208
+ );
209
+ }
208
210
 
209
- @include clay-close($close);
210
- }
211
+ .close {
212
+ @include clay-close(map-get($badge-item, close));
213
+ }
211
214
 
212
- .lexicon-icon {
213
- $lexicon-icon: setter(map-get($badge-item, lexicon-icon), ());
214
-
215
- @include clay-css($lexicon-icon);
215
+ .lexicon-icon {
216
+ @include clay-css(map-get($badge-item, lexicon-icon));
217
+ }
216
218
  }
217
- }
218
219
 
219
- .badge-item-expand {
220
- @include clay-css($badge-item-expand);
220
+ .badge-item-expand {
221
+ @include clay-css($badge-item-expand);
221
222
 
222
- a {
223
- $link: setter(map-get($badge-item-expand, link), ());
224
-
225
- @include clay-link($link);
223
+ a {
224
+ @include clay-link(map-get($badge-item-expand, link));
225
+ }
226
226
  }
227
- }
228
227
 
229
- .badge-item-before {
230
- @include clay-css($badge-item-before);
231
- }
228
+ .badge-item-before {
229
+ @include clay-css(map-get($map, badge-item-before));
230
+ }
232
231
 
233
- .badge-item-after {
234
- @include clay-css($badge-item-after);
235
- }
232
+ .badge-item-after {
233
+ @include clay-css(map-get($map, badge-item-after));
234
+ }
236
235
 
237
- @if (map-get($c-inner, enabled)) {
238
- > .c-inner {
239
- @include clay-css($c-inner);
236
+ @if (map-get($c-inner, enabled)) {
237
+ > .c-inner {
238
+ @include clay-css($c-inner);
239
+ }
240
240
  }
241
241
  }
242
242
  }
package/src/scss/mixins/_buttons.scss CHANGED
@@ -387,8 +387,6 @@
387
387
  $active-class: setter(map-get($map, active-class), ());
388
388
  $active-class: map-merge($active, $active-class);
389
389
 
390
- $active-class-after: setter(map-get($map, active-class-after), ());
391
-
392
390
  $show: map-deep-merge($active-class, map-get($map, show));
393
391
 
394
392
  $disabled: setter(map-get($map, disabled), ());
@@ -433,8 +431,6 @@
433
431
  )
434
432
  );
435
433
 
436
- $disabled-focus: setter(map-get($disabled, focus), ());
437
-
438
434
  $nested-disabled-active: setter(map-get($disabled, active), ());
439
435
  $disabled-active: setter(map-get($map, disabled-active), ());
440
436
  $disabled-active: map-merge($nested-disabled-active, $disabled-active);
@@ -729,7 +725,7 @@
729
725
  }
730
726
 
731
727
  &::after {
732
- @include clay-css($active-class-after);
728
+ @include clay-css(map-get($map, active-class-after));
733
729
  }
734
730
 
735
731
  &:focus {
@@ -772,7 +768,7 @@
772
768
  }
773
769
 
774
770
  &:focus {
775
- @include clay-css($disabled-focus);
771
+ @include clay-css(map-get($disabled, focus));
776
772
 
777
773
  &::before {
778
774
  @include clay-css(
package/src/scss/mixins/_cards.scss CHANGED
@@ -806,9 +806,7 @@
806
806
  }
807
807
 
808
808
  .aspect-ratio {
809
- @include clay-aspect-ratio-variant(
810
- setter(map-get($map, aspect-ratio), ())
811
- );
809
+ @include clay-aspect-ratio-variant(map-get($map, aspect-ratio));
812
810
 
813
811
  @if ($aspect-ratio-checkered-fg) {
814
812
  @include clay-bg-checkered($aspect-ratio-checkered-fg);
@@ -828,7 +826,7 @@
828
826
 
829
827
  .aspect-ratio-item {
830
828
  @include clay-aspect-ratio-item-variant(
831
- setter(map-get($map, aspect-ratio-item), ())
829
+ map-get($map, aspect-ratio-item)
832
830
  );
833
831
  }
834
832
 
@@ -879,9 +877,7 @@
879
877
  }
880
878
 
881
879
  .sticker {
882
- @include clay-sticker-variant(
883
- setter(map-get($map, sticker), ())
884
- );
880
+ @include clay-sticker-variant(map-get($map, sticker));
885
881
  }
886
882
 
887
883
  .card {
@@ -1311,8 +1307,6 @@
1311
1307
  @mixin clay-card-type-asset-variant($map) {
1312
1308
  $enabled: setter(map-get($map, enabled), true);
1313
1309
 
1314
- $base: setter($map, ());
1315
-
1316
1310
  $aspect-ratio: setter(map-get($map, aspect-ratio), ());
1317
1311
  $aspect-ratio: map-merge(
1318
1312
  $aspect-ratio,
@@ -1381,7 +1375,7 @@
1381
1375
  );
1382
1376
 
1383
1377
  @if ($enabled) {
1384
- @include clay-css($base);
1378
+ @include clay-css($map);
1385
1379
 
1386
1380
  .aspect-ratio {
1387
1381
  @include clay-css($aspect-ratio);
package/src/scss/mixins/_dropdown-menu.scss CHANGED
@@ -88,15 +88,15 @@
88
88
  }
89
89
 
90
90
  &::before {
91
- @include clay-css(setter(map-get($map, before), ()));
91
+ @include clay-css(map-get($map, before));
92
92
  }
93
93
 
94
94
  &::after {
95
- @include clay-css(setter(map-get($map, after), ()));
95
+ @include clay-css(map-get($map, after));
96
96
  }
97
97
 
98
98
  &.show {
99
- @include clay-css(setter(map-get($map, show), ()));
99
+ @include clay-css(map-get($map, show));
100
100
  }
101
101
 
102
102
  .dropdown-item {
@@ -451,10 +451,6 @@
451
451
  )
452
452
  );
453
453
 
454
- $autofit-row: setter(map-get($map, autofit-row), ());
455
-
456
- $c-kbd-inline: setter(map-get($map, c-kbd-inline), ());
457
-
458
454
  $c-inner: setter(map-get($map, c-inner), ());
459
455
  $c-inner: map-merge(
460
456
  (
@@ -485,11 +481,11 @@
485
481
  @include clay-css($hover);
486
482
 
487
483
  &::before {
488
- @include clay-css(setter(map-get($hover, before), ()));
484
+ @include clay-css(map-get($hover, before));
489
485
  }
490
486
 
491
487
  &::after {
492
- @include clay-css(setter(map-get($hover, after), ()));
488
+ @include clay-css(map-get($hover, after));
493
489
  }
494
490
 
495
491
  .c-kbd-inline {
@@ -501,11 +497,11 @@
501
497
  @include clay-css($focus);
502
498
 
503
499
  &::before {
504
- @include clay-css(setter(map-get($focus, before), ()));
500
+ @include clay-css(map-get($focus, before));
505
501
  }
506
502
 
507
503
  &::after {
508
- @include clay-css(setter(map-get($focus, after), ()));
504
+ @include clay-css(map-get($focus, after));
509
505
  }
510
506
 
511
507
  .c-kbd-inline {
@@ -517,11 +513,11 @@
517
513
  @include clay-css($active);
518
514
 
519
515
  &::before {
520
- @include clay-css(setter(map-get($active, before), ()));
516
+ @include clay-css(map-get($active, before));
521
517
  }
522
518
 
523
519
  &::after {
524
- @include clay-css(setter(map-get($active, after), ()));
520
+ @include clay-css(map-get($active, after));
525
521
  }
526
522
 
527
523
  label {
@@ -546,15 +542,11 @@
546
542
  @include clay-css($active-class);
547
543
 
548
544
  &::before {
549
- @include clay-css(
550
- setter(map-get($active-class, before), ())
551
- );
545
+ @include clay-css(map-get($active-class, before));
552
546
  }
553
547
 
554
548
  &::after {
555
- @include clay-css(
556
- setter(map-get($active-class, after), ())
557
- );
549
+ @include clay-css(map-get($active-class, after));
558
550
  }
559
551
 
560
552
  label {
@@ -590,11 +582,11 @@
590
582
  @include clay-css($disabled);
591
583
 
592
584
  &::before {
593
- @include clay-css(setter(map-get($disabled, before), ()));
585
+ @include clay-css(map-get($disabled, before));
594
586
  }
595
587
 
596
588
  &::after {
597
- @include clay-css(setter(map-get($disabled, after), ()));
589
+ @include clay-css(map-get($disabled, after));
598
590
  }
599
591
 
600
592
  label,
@@ -610,25 +602,21 @@
610
602
  @include clay-css($disabled-active);
611
603
 
612
604
  &::before {
613
- @include clay-css(
614
- setter(map-get($disabled-active, before), ())
615
- );
605
+ @include clay-css(map-get($disabled-active, before));
616
606
  }
617
607
 
618
608
  &::after {
619
- @include clay-css(
620
- setter(map-get($disabled-active, after), ())
621
- );
609
+ @include clay-css(map-get($disabled-active, after));
622
610
  }
623
611
  }
624
612
  }
625
613
 
626
614
  &::before {
627
- @include clay-css(setter(map-get($map, before), ()));
615
+ @include clay-css(map-get($map, before));
628
616
  }
629
617
 
630
618
  &::after {
631
- @include clay-css(setter(map-get($map, after), ()));
619
+ @include clay-css(map-get($map, after));
632
620
  }
633
621
 
634
622
  @if (map-get($c-inner, enabled)) {
@@ -654,7 +642,7 @@
654
642
  }
655
643
 
656
644
  .autofit-row {
657
- @include clay-css($autofit-row);
645
+ @include clay-css(map-get($map, autofit-row));
658
646
 
659
647
  > .autofit-col {
660
648
  @include clay-css(
@@ -670,7 +658,7 @@
670
658
  }
671
659
 
672
660
  .c-kbd-inline {
673
- @include clay-css($c-kbd-inline);
661
+ @include clay-css(map-get($map, c-kbd-inline));
674
662
  }
675
663
 
676
664
  .form-check-label {
package/src/scss/mixins/_grid.scss CHANGED
@@ -42,60 +42,68 @@
42
42
  /// - Add @link to documentation
43
43
 
44
44
  @mixin clay-container($map) {
45
- $enabled: setter(map-get($map, enabled), true);
46
- $breakpoint-up: map-get($map, breakpoint-up);
47
- $breakpoint-down: setter(clay-breakpoint-prev($breakpoint-up), null);
48
-
49
- $base: map-merge(
50
- $map,
51
- (
52
- background-color:
53
- setter(map-get($map, bg), map-get($map, background-color)),
54
- background-image:
55
- setter(map-get($map, bg-image), map-get($map, background-image)),
56
- background-position:
57
- setter(
58
- map-get($map, bg-position),
59
- map-get($map, background-position)
60
- ),
61
- background-size:
62
- setter(map-get($map, bg-size), map-get($map, background-size)),
63
- )
64
- );
45
+ @if (type-of($map) == 'map') {
46
+ $enabled: setter(map-get($map, enabled), true);
47
+ $breakpoint-up: map-get($map, breakpoint-up);
48
+ $breakpoint-down: setter(clay-breakpoint-prev($breakpoint-up), null);
49
+
50
+ $base: map-merge(
51
+ $map,
52
+ (
53
+ background-color:
54
+ setter(map-get($map, bg), map-get($map, background-color)),
55
+ background-image:
56
+ setter(
57
+ map-get($map, bg-image),
58
+ map-get($map, background-image)
59
+ ),
60
+ background-position:
61
+ setter(
62
+ map-get($map, bg-position),
63
+ map-get($map, background-position)
64
+ ),
65
+ background-size:
66
+ setter(
67
+ map-get($map, bg-size),
68
+ map-get($map, background-size)
69
+ ),
70
+ )
71
+ );
65
72
 
66
- $mobile: setter(map-get($map, mobile), ());
67
- $mobile: map-merge(
68
- $mobile,
69
- (
70
- padding-bottom:
71
- setter(
72
- map-get($map, padding-bottom-mobile),
73
- map-get($mobile, padding-bottom)
74
- ),
75
- padding-left:
76
- setter(
77
- map-get($map, padding-left-mobile),
78
- map-get($mobile, padding-left)
79
- ),
80
- padding-right:
81
- setter(
82
- map-get($map, padding-right-mobile),
83
- map-get($mobile, padding-right)
84
- ),
85
- padding-top:
86
- setter(
87
- map-get($map, padding-top-mobile),
88
- map-get($mobile, padding-top)
89
- ),
90
- )
91
- );
73
+ $mobile: setter(map-get($map, mobile), ());
74
+ $mobile: map-merge(
75
+ $mobile,
76
+ (
77
+ padding-bottom:
78
+ setter(
79
+ map-get($map, padding-bottom-mobile),
80
+ map-get($mobile, padding-bottom)
81
+ ),
82
+ padding-left:
83
+ setter(
84
+ map-get($map, padding-left-mobile),
85
+ map-get($mobile, padding-left)
86
+ ),
87
+ padding-right:
88
+ setter(
89
+ map-get($map, padding-right-mobile),
90
+ map-get($mobile, padding-right)
91
+ ),
92
+ padding-top:
93
+ setter(
94
+ map-get($map, padding-top-mobile),
95
+ map-get($mobile, padding-top)
96
+ ),
97
+ )
98
+ );
92
99
 
93
- @if ($enabled) {
94
- @include clay-css($base);
100
+ @if ($enabled) {
101
+ @include clay-css($base);
95
102
 
96
- @if ($breakpoint-down) {
97
- @include media-breakpoint-down($breakpoint-down) {
98
- @include clay-css($mobile);
103
+ @if ($breakpoint-down) {
104
+ @include media-breakpoint-down($breakpoint-down) {
105
+ @include clay-css($mobile);
106
+ }
99
107
  }
100
108
  }
101
109
  }