@clayui/css 3.63.0 → 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 (78) hide show
  1. package/lib/css/atlas.css +30 -102
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +31 -101
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/cadmin.css +76 -49
  6. package/lib/css/cadmin.css.map +1 -1
  7. package/lib/images/icons/hierarchy.svg +10 -0
  8. package/lib/images/icons/icons.svg +1 -1
  9. package/package.json +2 -2
  10. package/src/images/icons/hierarchy.svg +10 -0
  11. package/src/scss/_license-text.scss +1 -1
  12. package/src/scss/atlas/variables/_alerts.scss +1 -0
  13. package/src/scss/atlas/variables/_forms.scss +22 -0
  14. package/src/scss/atlas/variables/_globals.scss +1 -1
  15. package/src/scss/cadmin/components/_alerts.scss +26 -6
  16. package/src/scss/cadmin/components/_aspect-ratio.scss +29 -14
  17. package/src/scss/cadmin/components/_badges.scss +26 -6
  18. package/src/scss/cadmin/components/_buttons.scss +129 -63
  19. package/src/scss/cadmin/components/_labels.scss +52 -12
  20. package/src/scss/cadmin/components/_popovers.scss +12 -4
  21. package/src/scss/cadmin/components/_print.scss +3 -3
  22. package/src/scss/cadmin/components/_reboot.scss +3 -3
  23. package/src/scss/cadmin/components/_stickers.scss +52 -12
  24. package/src/scss/cadmin/components/_treeview.scss +20 -0
  25. package/src/scss/cadmin/components/_utilities-functional-important.scss +49 -62
  26. package/src/scss/cadmin/components/_utilities.scss +7 -6
  27. package/src/scss/cadmin/variables/_alerts.scss +2 -0
  28. package/src/scss/cadmin/variables/_buttons.scss +23 -0
  29. package/src/scss/cadmin/variables/_forms.scss +13 -10
  30. package/src/scss/cadmin/variables/_globals.scss +1 -1
  31. package/src/scss/cadmin/variables/_treeview.scss +12 -0
  32. package/src/scss/cadmin/variables/_utilities.scss +309 -0
  33. package/src/scss/components/_alerts.scss +53 -85
  34. package/src/scss/components/_aspect-ratio.scss +29 -14
  35. package/src/scss/components/_badges.scss +25 -5
  36. package/src/scss/components/_buttons.scss +100 -72
  37. package/src/scss/components/_custom-forms.scss +4 -12
  38. package/src/scss/components/_date-picker.scss +6 -23
  39. package/src/scss/components/_dropdowns.scss +10 -23
  40. package/src/scss/components/_forms.scss +16 -53
  41. package/src/scss/components/_icons.scss +4 -4
  42. package/src/scss/components/_labels.scss +56 -20
  43. package/src/scss/components/_list-group.scss +4 -9
  44. package/src/scss/components/_modals.scss +2 -6
  45. package/src/scss/components/_popovers.scss +12 -4
  46. package/src/scss/components/_print.scss +3 -3
  47. package/src/scss/components/_progress-bars.scss +2 -6
  48. package/src/scss/components/_reboot.scss +3 -3
  49. package/src/scss/components/_sidebar.scss +3 -1
  50. package/src/scss/components/_stickers.scss +53 -25
  51. package/src/scss/components/_treeview.scss +12 -0
  52. package/src/scss/components/_type.scss +3 -3
  53. package/src/scss/components/_utilities-functional-important.scss +40 -18
  54. package/src/scss/components/_utilities.scss +7 -6
  55. package/src/scss/functions/_global-functions.scss +9 -9
  56. package/src/scss/functions/_lx-icons-generated.scss +2 -0
  57. package/src/scss/functions/_type-conversion-functions.scss +6 -6
  58. package/src/scss/mixins/_alerts.scss +10 -24
  59. package/src/scss/mixins/_aspect-ratio.scss +51 -49
  60. package/src/scss/mixins/_badges.scss +140 -140
  61. package/src/scss/mixins/_buttons.scss +2 -6
  62. package/src/scss/mixins/_cards.scss +4 -10
  63. package/src/scss/mixins/_dropdown-menu.scss +19 -31
  64. package/src/scss/mixins/_globals.scss +2 -0
  65. package/src/scss/mixins/_grid.scss +59 -51
  66. package/src/scss/mixins/_labels.scss +228 -212
  67. package/src/scss/mixins/_menubar.scss +15 -46
  68. package/src/scss/mixins/_navbar.scss +41 -43
  69. package/src/scss/mixins/_pagination.scss +35 -71
  70. package/src/scss/mixins/_sheet.scss +2 -6
  71. package/src/scss/mixins/_stickers.scss +10 -19
  72. package/src/scss/mixins/_tbar.scss +10 -30
  73. package/src/scss/mixins/_utilities.scss +6 -6
  74. package/src/scss/variables/_alerts.scss +3 -0
  75. package/src/scss/variables/_forms.scss +3 -0
  76. package/src/scss/variables/_globals.scss +1 -1
  77. package/src/scss/variables/_treeview.scss +12 -0
  78. package/src/scss/variables/_utilities.scss +22 -0
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
  }
package/src/scss/mixins/_labels.scss CHANGED
@@ -28,219 +28,238 @@
28
28
  /// c-inner: {Map | Null}, // Pass parameters to `clay-css` mixin
29
29
 
30
30
  @mixin clay-label-size($map) {
31
- $enabled: setter(map-get($map, enabled), true);
32
-
33
- $base: setter($map, ());
34
- $base: map-merge(
35
- $base,
36
- (
37
- border-width:
38
- setter(
39
- map-get($base, border-width),
40
- if(
41
- variable-exists(label-border-width),
42
- $label-border-width,
31
+ @if (type-of($map) == 'map') {
32
+ $enabled: setter(map-get($map, enabled), true);
33
+
34
+ $base: setter($map, ());
35
+ $base: map-merge(
36
+ $base,
37
+ (
38
+ border-width:
39
+ setter(
40
+ map-get($base, border-width),
43
41
  if(
44
- variable-exists(cadmin-label-border-width),
45
- $cadmin-label-border-width,
46
- null
42
+ variable-exists(label-border-width),
43
+ $label-border-width,
44
+ if(
45
+ variable-exists(cadmin-label-border-width),
46
+ $cadmin-label-border-width,
47
+ null
48
+ )
47
49
  )
48
- )
49
- ),
50
- padding-bottom:
51
- setter(map-get($map, padding-y), map-get($base, padding-bottom)),
52
- padding-left:
53
- setter(map-get($map, padding-x), map-get($base, padding-left)),
54
- padding-right:
55
- setter(map-get($map, padding-x), map-get($base, padding-right)),
56
- padding-top:
57
- setter(map-get($map, padding-y), map-get($base, padding-top)),
58
- )
59
- );
60
-
61
- $label-item: setter(map-get($map, label-item), ());
62
- $label-item: map-merge(
63
- $label-item,
64
- (
65
- margin-bottom:
66
- setter(
67
- map-get($map, item-spacer-y),
68
- map-get($label-item, margin-bottom)
69
- ),
70
- margin-top:
71
- setter(
72
- map-get($map, item-spacer-y),
73
- map-get($label-item, margin-top)
74
- ),
75
- )
76
- );
77
-
78
- $label-item-before: setter(map-get($map, label-item-before), ());
79
- $label-item-before: map-merge(
80
- $label-item-before,
81
- (
82
- margin-right:
83
- setter(
84
- map-get($map, item-spacer-x),
85
- map-get($label-item-before, margin-right)
86
- ),
87
- )
88
- );
89
-
90
- $label-item-after: setter(map-get($map, label-item-after), ());
91
- $label-item-after: map-merge(
92
- $label-item-after,
93
- (
94
- margin-left:
95
- setter(
96
- map-get($map, item-spacer-x),
97
- map-get($label-item-after, margin-left)
98
- ),
99
- )
100
- );
101
-
102
- $lexicon-icon: setter(map-get($map, lexicon-icon), ());
103
- $lexicon-icon: map-merge(
104
- $lexicon-icon,
105
- (
106
- height:
107
- setter(
108
- map-get($map, lexicon-icon-height),
109
- map-get($lexicon-icon, height),
110
- map-get($lexicon-icon, width)
111
- ),
112
- margin-top:
113
- setter(
114
- map-get($map, lexicon-icon-margin-top),
115
- map-get($lexicon-icon, margin-top)
116
- ),
117
- width:
118
- setter(
119
- map-get($map, lexicon-icon-width),
120
- map-get($lexicon-icon, width)
121
- ),
122
- )
123
- );
124
-
125
- $sticker: setter(map-get($map, sticker), ());
126
- $sticker: map-merge(
127
- $sticker,
128
- (
129
- border-radius:
130
- setter(
131
- map-get($map, sticker-border-radius),
132
- map-get($sticker, border-radius)
133
- ),
134
- height:
135
- setter(map-get($map, sticker-size), map-get($sticker, height)),
136
- line-height:
137
- setter(
138
- map-get($map, sticker-size),
139
- map-get($sticker, line-height)
140
- ),
141
- width: setter(map-get($map, sticker-size), map-get($sticker, width)),
142
- )
143
- );
144
-
145
- $sticker-overlay: setter(map-get($map, sticker-overlay), ());
146
- $sticker-overlay: map-merge(
147
- $sticker-overlay,
148
- (
149
- border-radius:
150
- setter(
151
- map-get($sticker-overlay, border-radius),
152
- map-get($sticker, border-radius)
153
- ),
154
- )
155
- );
156
-
157
- $close: setter(map-get($map, close), ());
158
-
159
- $c-inner: setter(map-get($map, c-inner), ());
160
- $c-inner: map-deep-merge(
161
- $c-inner,
162
- (
163
- enabled:
164
- if(
165
- variable-exists(enable-c-inner),
166
- $enable-c-inner,
50
+ ),
51
+ padding-bottom:
52
+ setter(
53
+ map-get($map, padding-y),
54
+ map-get($base, padding-bottom)
55
+ ),
56
+ padding-left:
57
+ setter(
58
+ map-get($map, padding-x),
59
+ map-get($base, padding-left)
60
+ ),
61
+ padding-right:
62
+ setter(
63
+ map-get($map, padding-x),
64
+ map-get($base, padding-right)
65
+ ),
66
+ padding-top:
67
+ setter(
68
+ map-get($map, padding-y),
69
+ map-get($base, padding-top)
70
+ ),
71
+ )
72
+ );
73
+
74
+ $label-item: setter(map-get($map, label-item), ());
75
+ $label-item: map-merge(
76
+ $label-item,
77
+ (
78
+ margin-bottom:
79
+ setter(
80
+ map-get($map, item-spacer-y),
81
+ map-get($label-item, margin-bottom)
82
+ ),
83
+ margin-top:
84
+ setter(
85
+ map-get($map, item-spacer-y),
86
+ map-get($label-item, margin-top)
87
+ ),
88
+ )
89
+ );
90
+
91
+ $label-item-before: setter(map-get($map, label-item-before), ());
92
+ $label-item-before: map-merge(
93
+ $label-item-before,
94
+ (
95
+ margin-right:
96
+ setter(
97
+ map-get($map, item-spacer-x),
98
+ map-get($label-item-before, margin-right)
99
+ ),
100
+ )
101
+ );
102
+
103
+ $label-item-after: setter(map-get($map, label-item-after), ());
104
+ $label-item-after: map-merge(
105
+ $label-item-after,
106
+ (
107
+ margin-left:
108
+ setter(
109
+ map-get($map, item-spacer-x),
110
+ map-get($label-item-after, margin-left)
111
+ ),
112
+ )
113
+ );
114
+
115
+ $lexicon-icon: setter(map-get($map, lexicon-icon), ());
116
+ $lexicon-icon: map-merge(
117
+ $lexicon-icon,
118
+ (
119
+ height:
120
+ setter(
121
+ map-get($map, lexicon-icon-height),
122
+ map-get($lexicon-icon, height),
123
+ map-get($lexicon-icon, width)
124
+ ),
125
+ margin-top:
126
+ setter(
127
+ map-get($map, lexicon-icon-margin-top),
128
+ map-get($lexicon-icon, margin-top)
129
+ ),
130
+ width:
131
+ setter(
132
+ map-get($map, lexicon-icon-width),
133
+ map-get($lexicon-icon, width)
134
+ ),
135
+ )
136
+ );
137
+
138
+ $sticker: setter(map-get($map, sticker), ());
139
+ $sticker: map-merge(
140
+ $sticker,
141
+ (
142
+ border-radius:
143
+ setter(
144
+ map-get($map, sticker-border-radius),
145
+ map-get($sticker, border-radius)
146
+ ),
147
+ height:
148
+ setter(
149
+ map-get($map, sticker-size),
150
+ map-get($sticker, height)
151
+ ),
152
+ line-height:
153
+ setter(
154
+ map-get($map, sticker-size),
155
+ map-get($sticker, line-height)
156
+ ),
157
+ width:
158
+ setter(
159
+ map-get($map, sticker-size),
160
+ map-get($sticker, width)
161
+ ),
162
+ )
163
+ );
164
+
165
+ $sticker-overlay: setter(map-get($map, sticker-overlay), ());
166
+ $sticker-overlay: map-merge(
167
+ $sticker-overlay,
168
+ (
169
+ border-radius:
170
+ setter(
171
+ map-get($sticker-overlay, border-radius),
172
+ map-get($sticker, border-radius)
173
+ ),
174
+ )
175
+ );
176
+
177
+ $c-inner: setter(map-get($map, c-inner), ());
178
+ $c-inner: map-deep-merge(
179
+ $c-inner,
180
+ (
181
+ enabled:
167
182
  if(
168
- variable-exists(cadmin-enable-c-inner),
169
- $cadmin-enable-c-inner,
170
- true
171
- )
172
- ),
173
- margin-bottom:
174
- setter(
175
- map-get($c-inner, margin-bottom),
176
- math-sign(map-get($base, padding-bottom))
177
- ),
178
- margin-left:
179
- setter(
180
- map-get($c-inner, margin-left),
181
- math-sign(map-get($base, padding-left))
182
- ),
183
- margin-right:
184
- setter(
185
- map-get($c-inner, margin-right),
186
- math-sign(map-get($base, padding-right))
187
- ),
188
- margin-top:
189
- setter(
190
- map-get($c-inner, margin-top),
191
- math-sign(map-get($base, padding-top))
192
- ),
193
- )
194
- );
183
+ variable-exists(enable-c-inner),
184
+ $enable-c-inner,
185
+ if(
186
+ variable-exists(cadmin-enable-c-inner),
187
+ $cadmin-enable-c-inner,
188
+ true
189
+ )
190
+ ),
191
+ margin-bottom:
192
+ setter(
193
+ map-get($c-inner, margin-bottom),
194
+ math-sign(map-get($base, padding-bottom))
195
+ ),
196
+ margin-left:
197
+ setter(
198
+ map-get($c-inner, margin-left),
199
+ math-sign(map-get($base, padding-left))
200
+ ),
201
+ margin-right:
202
+ setter(
203
+ map-get($c-inner, margin-right),
204
+ math-sign(map-get($base, padding-right))
205
+ ),
206
+ margin-top:
207
+ setter(
208
+ map-get($c-inner, margin-top),
209
+ math-sign(map-get($base, padding-top))
210
+ ),
211
+ )
212
+ );
195
213
 
196
- @if ($enabled) {
197
- @include clay-css($base);
214
+ @if ($enabled) {
215
+ @include clay-css($base);
198
216
 
199
- // Inline Item in Labels are deprecated in v2.0.0-rc.11 use .label-item
200
- // pattern instead
201
- .inline-item {
202
- a,
203
- .btn-unstyled,
204
- .close {
205
- margin-top: map-get($lexicon-icon, margin-top);
206
- }
217
+ // Inline Item in Labels are deprecated in v2.0.0-rc.11 use .label-item
218
+ // pattern instead
219
+ .inline-item {
220
+ a,
221
+ .btn-unstyled,
222
+ .close {
223
+ margin-top: map-get($lexicon-icon, margin-top);
224
+ }
207
225
 
208
- .lexicon-icon {
209
- @include clay-css($lexicon-icon);
226
+ .lexicon-icon {
227
+ @include clay-css($lexicon-icon);
228
+ }
210
229
  }
211
- }
212
230
 
213
- .label-item {
214
- @include clay-css($label-item);
231
+ .label-item {
232
+ @include clay-css($label-item);
215
233
 
216
- .lexicon-icon {
217
- @include clay-css($lexicon-icon);
234
+ .lexicon-icon {
235
+ @include clay-css($lexicon-icon);
236
+ }
218
237
  }
219
- }
220
238
 
221
- .label-item-before {
222
- @include clay-css($label-item-before);
223
- }
239
+ .label-item-before {
240
+ @include clay-css($label-item-before);
241
+ }
224
242
 
225
- .label-item-after {
226
- @include clay-css($label-item-after);
227
- }
243
+ .label-item-after {
244
+ @include clay-css($label-item-after);
245
+ }
228
246
 
229
- .close {
230
- @include clay-close($close);
231
- }
247
+ .close {
248
+ @include clay-close(map-get($map, close));
249
+ }
232
250
 
233
- .sticker {
234
- @include clay-css($sticker);
235
- }
251
+ .sticker {
252
+ @include clay-css($sticker);
253
+ }
236
254
 
237
- .sticker-overlay {
238
- @include clay-css($sticker-overlay);
239
- }
255
+ .sticker-overlay {
256
+ @include clay-css($sticker-overlay);
257
+ }
240
258
 
241
- @if (map-get($c-inner, enabled)) {
242
- > .c-inner {
243
- @include clay-css($c-inner);
259
+ @if (map-get($c-inner, enabled)) {
260
+ > .c-inner {
261
+ @include clay-css($c-inner);
262
+ }
244
263
  }
245
264
  }
246
265
  }
@@ -331,31 +350,30 @@
331
350
  @if (type-of($map) == 'map') {
332
351
  $enabled: setter(map-get($map, enabled), true);
333
352
 
334
- $base: setter($map, ());
335
353
  $base: map-merge(
336
- $base,
354
+ $map,
337
355
  (
338
356
  background-color:
339
- setter(map-get($map, bg), map-get($base, background-color)),
357
+ setter(map-get($map, bg), map-get($map, background-color)),
340
358
  padding-bottom:
341
359
  setter(
342
360
  map-get($map, padding-y),
343
- map-get($base, padding-bottom)
361
+ map-get($map, padding-bottom)
344
362
  ),
345
363
  padding-left:
346
364
  setter(
347
365
  map-get($map, padding-x),
348
- map-get($base, padding-left)
366
+ map-get($map, padding-left)
349
367
  ),
350
368
  padding-right:
351
369
  setter(
352
370
  map-get($map, padding-x),
353
- map-get($base, padding-right)
371
+ map-get($map, padding-right)
354
372
  ),
355
373
  padding-top:
356
374
  setter(
357
375
  map-get($map, padding-y),
358
- map-get($base, padding-top)
376
+ map-get($map, padding-top)
359
377
  ),
360
378
  )
361
379
  );
@@ -569,8 +587,6 @@
569
587
  )
570
588
  );
571
589
 
572
- $close: setter(map-get($map, close), ());
573
-
574
590
  $sticker: setter(map-get($map, sticker), ());
575
591
  $sticker: map-merge(
576
592
  $sticker,
@@ -629,28 +645,28 @@
629
645
  margin-bottom:
630
646
  setter(
631
647
  map-get($c-inner, margin-bottom),
632
- math-sign(map-get($base, padding-bottom))
648
+ math-sign(map-get($map, padding-bottom))
633
649
  ),
634
650
  margin-left:
635
651
  setter(
636
652
  map-get($c-inner, margin-left),
637
- math-sign(map-get($base, padding-left))
653
+ math-sign(map-get($map, padding-left))
638
654
  ),
639
655
  margin-right:
640
656
  setter(
641
657
  map-get($c-inner, margin-right),
642
- math-sign(map-get($base, padding-right))
658
+ math-sign(map-get($map, padding-right))
643
659
  ),
644
660
  margin-top:
645
661
  setter(
646
662
  map-get($c-inner, margin-top),
647
- math-sign(map-get($base, padding-top))
663
+ math-sign(map-get($map, padding-top))
648
664
  ),
649
665
  )
650
666
  );
651
667
 
652
668
  @if ($enabled) {
653
- @include clay-css($base);
669
+ @include clay-css($map);
654
670
 
655
671
  &:disabled,
656
672
  &.disabled {
@@ -689,7 +705,7 @@
689
705
  }
690
706
 
691
707
  .close {
692
- @include clay-close($close);
708
+ @include clay-close(map-get($map, close));
693
709
  }
694
710
 
695
711
  .sticker {