@clayui/css 3.41.0 → 3.44.1

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 +1117 -1163
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +1020 -1068
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/bootstrap.css.map +1 -1
  6. package/lib/css/cadmin.css +875 -931
  7. package/lib/css/cadmin.css.map +1 -1
  8. package/lib/images/icons/date-time.svg +12 -0
  9. package/lib/images/icons/filter.svg +1 -1
  10. package/lib/images/icons/icons.svg +1 -1
  11. package/package.json +2 -2
  12. package/src/images/icons/date-time.svg +12 -0
  13. package/src/images/icons/filter.svg +1 -1
  14. package/src/scss/_mixins.scss +2 -0
  15. package/src/scss/atlas/variables/_application-bar.scss +32 -12
  16. package/src/scss/atlas/variables/_buttons.scss +2 -31
  17. package/src/scss/atlas/variables/_management-bar.scss +53 -21
  18. package/src/scss/atlas/variables/_navigation-bar.scss +104 -18
  19. package/src/scss/atlas/variables/_navs.scss +20 -15
  20. package/src/scss/atlas/variables/_pagination.scss +2 -0
  21. package/src/scss/atlas/variables/_sidebar.scss +1 -1
  22. package/src/scss/cadmin/components/_dropdowns.scss +4 -0
  23. package/src/scss/cadmin/components/_input-groups.scss +12 -312
  24. package/src/scss/cadmin/components/_navs.scss +35 -113
  25. package/src/scss/cadmin/components/_pagination.scss +20 -236
  26. package/src/scss/cadmin/components/_popovers.scss +31 -252
  27. package/src/scss/cadmin/components/_tooltip.scss +29 -167
  28. package/src/scss/cadmin/components/_utilities-functional-important.scss +4 -3
  29. package/src/scss/cadmin/variables/_alerts.scss +3 -2
  30. package/src/scss/cadmin/variables/_dropdowns.scss +31 -2
  31. package/src/scss/cadmin/variables/_forms.scss +366 -5
  32. package/src/scss/cadmin/variables/_management-bar.scss +70 -30
  33. package/src/scss/cadmin/variables/_navigation-bar.scss +118 -22
  34. package/src/scss/cadmin/variables/_navs.scss +270 -53
  35. package/src/scss/cadmin/variables/_pagination.scss +274 -68
  36. package/src/scss/cadmin/variables/_popovers.scss +410 -0
  37. package/src/scss/cadmin/variables/_sidebar.scss +17 -5
  38. package/src/scss/cadmin/variables/_tooltip.scss +299 -0
  39. package/src/scss/components/_button-groups.scss +6 -6
  40. package/src/scss/components/_buttons.scss +87 -49
  41. package/src/scss/components/_cards.scss +16 -116
  42. package/src/scss/components/_dropdowns.scss +4 -0
  43. package/src/scss/components/_input-groups.scss +12 -308
  44. package/src/scss/components/_multi-step-nav.scss +12 -8
  45. package/src/scss/components/_navs.scss +45 -128
  46. package/src/scss/components/_pagination.scss +18 -234
  47. package/src/scss/components/_popovers.scss +30 -237
  48. package/src/scss/components/_toggle-switch.scss +2 -2
  49. package/src/scss/components/_tooltip.scss +29 -164
  50. package/src/scss/functions/_lx-icons-generated.scss +3 -1
  51. package/src/scss/mixins/_buttons.scss +674 -472
  52. package/src/scss/mixins/_cards.scss +751 -557
  53. package/src/scss/mixins/_close.scss +0 -1
  54. package/src/scss/mixins/_custom-forms.scss +442 -409
  55. package/src/scss/mixins/_dropdown-menu.scss +483 -406
  56. package/src/scss/mixins/_forms.scss +332 -256
  57. package/src/scss/mixins/_input-groups.scss +405 -11
  58. package/src/scss/mixins/_labels.scss +320 -296
  59. package/src/scss/mixins/_links.scss +522 -476
  60. package/src/scss/mixins/_nav.scss +202 -131
  61. package/src/scss/mixins/_navbar.scss +791 -140
  62. package/src/scss/mixins/_pagination.scss +422 -0
  63. package/src/scss/mixins/_popovers.scss +90 -0
  64. package/src/scss/mixins/_toggle-switch.scss +64 -0
  65. package/src/scss/mixins/_tooltip.scss +70 -0
  66. package/src/scss/variables/_alerts.scss +1 -0
  67. package/src/scss/variables/_application-bar.scss +18 -6
  68. package/src/scss/variables/_buttons.scss +26 -3
  69. package/src/scss/variables/_cards.scss +273 -1
  70. package/src/scss/variables/_dropdowns.scss +31 -2
  71. package/src/scss/variables/_forms.scss +405 -22
  72. package/src/scss/variables/_management-bar.scss +45 -12
  73. package/src/scss/variables/_navigation-bar.scss +95 -14
  74. package/src/scss/variables/_navs.scss +266 -33
  75. package/src/scss/variables/_pagination.scss +261 -61
  76. package/src/scss/variables/_popovers.scss +392 -0
  77. package/src/scss/variables/_sidebar.scss +17 -5
  78. package/src/scss/variables/_tooltip.scss +299 -0
@@ -29,61 +29,72 @@
29
29
  /// max-width-mobile: {Number | String | Null}, // deprecated after 3.9.0
30
30
 
31
31
  @mixin clay-dropdown-menu-variant($map) {
32
- $enabled: setter(map-get($map, enabled), true);
33
-
34
- $breakpoint-down: map-get($map, breakpoint-down);
35
-
36
- $base: map-merge(
37
- $map,
38
- (
39
- background-color:
40
- setter(map-get($map, bg), map-get($map, background-color)),
41
- background-clip:
42
- setter(map-get($map, bg-clip), map-get($map, background-clip)),
43
- )
44
- );
45
-
46
- $mobile: setter(map-get($map, mobile), ());
47
- $mobile: map-merge(
48
- $mobile,
49
- (
50
- font-size:
51
- setter(
52
- map-get($map, font-size-mobile),
53
- map-get($mobile, font-size)
54
- ),
55
- max-height:
56
- setter(
57
- map-get($map, max-height-mobile),
58
- map-get($mobile, max-height)
59
- ),
60
- max-width:
61
- setter(
62
- map-get($map, max-width-mobile),
63
- map-get($mobile, max-width)
64
- ),
65
- )
66
- );
67
-
68
- @if ($enabled) {
69
- @include clay-css($base);
70
-
71
- @if ($breakpoint-down) {
72
- @include media-breakpoint-down($breakpoint-down) {
73
- @include clay-css($mobile);
32
+ @if (type-of($map) == 'map') {
33
+ $enabled: setter(map-get($map, enabled), true);
34
+
35
+ $breakpoint-down: map-get($map, breakpoint-down);
36
+
37
+ $base: map-merge(
38
+ $map,
39
+ (
40
+ background-color:
41
+ setter(map-get($map, bg), map-get($map, background-color)),
42
+ background-clip:
43
+ setter(
44
+ map-get($map, bg-clip),
45
+ map-get($map, background-clip)
46
+ ),
47
+ )
48
+ );
49
+
50
+ $mobile: setter(map-get($map, mobile), ());
51
+ $mobile: map-merge(
52
+ $mobile,
53
+ (
54
+ font-size:
55
+ setter(
56
+ map-get($map, font-size-mobile),
57
+ map-get($mobile, font-size)
58
+ ),
59
+ max-height:
60
+ setter(
61
+ map-get($map, max-height-mobile),
62
+ map-get($mobile, max-height)
63
+ ),
64
+ max-width:
65
+ setter(
66
+ map-get($map, max-width-mobile),
67
+ map-get($mobile, max-width)
68
+ ),
69
+ )
70
+ );
71
+
72
+ @if ($enabled) {
73
+ @include clay-css($base);
74
+
75
+ @if ($breakpoint-down) {
76
+ @include media-breakpoint-down($breakpoint-down) {
77
+ @include clay-css($mobile);
78
+ }
74
79
  }
75
- }
76
80
 
77
- &::before {
78
- @include clay-css(setter(map-get($map, before), ()));
79
- }
81
+ &::before {
82
+ @include clay-css(setter(map-get($map, before), ()));
83
+ }
80
84
 
81
- &::after {
82
- @include clay-css(setter(map-get($map, after), ()));
83
- }
85
+ &::after {
86
+ @include clay-css(setter(map-get($map, after), ()));
87
+ }
88
+
89
+ &.show {
90
+ @include clay-css(setter(map-get($map, show), ()));
91
+ }
84
92
 
85
- &.show {
86
- @include clay-css(setter(map-get($map, show), ()));
93
+ .dropdown-item {
94
+ @include clay-dropdown-item-variant(
95
+ map-deep-get($map, dropdown-item)
96
+ );
97
+ }
87
98
  }
88
99
  }
89
100
  }
@@ -129,8 +140,23 @@
129
140
  /// enabled: {Bool}, // Set to false to prevent .c-inner styles from being output. Default: true
130
141
  /// // .dropdown-item .c-inner
131
142
  /// ),
143
+ /// '&.autofit-row': (
144
+ /// // .dropdown-item.autofit-row
145
+ /// autofit-col: (
146
+ /// // .dropdown-item.autofit-row > .autofit-col
147
+ /// ),
148
+ /// autofit-col-expand: (
149
+ /// // .dropdown-item.autofit-row > .autofit-col-expand
150
+ /// ),
151
+ /// ),
132
152
  /// autofit-row: (
133
- /// // .dropdown-item.autofit-row, .dropdown-item .autofit-row
153
+ /// // .dropdown-item .autofit-row
154
+ /// autofit-col: (
155
+ /// // .dropdown-item .autofit-row > .autofit-col
156
+ /// ),
157
+ /// autofit-col-expand: (
158
+ /// // .dropdown-item .autofit-row > .autofit-col-expand
159
+ /// ),
134
160
  /// ),
135
161
  /// c-kbd-inline: (
136
162
  /// // .dropdown-item .c-kbd-inline
@@ -177,414 +203,465 @@
177
203
  /// disabled-active: {Map},
178
204
 
179
205
  @mixin clay-dropdown-item-variant($map) {
180
- $enabled: setter(map-get($map, enabled), true);
181
-
182
- $base: map-merge(
183
- $map,
184
- (
185
- background-color:
186
- setter(map-get($map, bg), map-get($map, background-color)),
187
- )
188
- );
189
-
190
- $hover: setter(map-get($map, hover), ());
191
- $hover: map-deep-merge(
192
- $hover,
193
- (
194
- background-color:
195
- setter(
196
- map-get($map, hover-bg),
197
- map-get($hover, background-color)
198
- ),
199
- color: setter(map-get($map, hover-color), map-get($hover, color)),
200
- opacity:
201
- setter(map-get($map, hover-opacity), map-get($hover, opacity)),
202
- text-decoration:
203
- setter(
204
- map-get($map, hover-text-decoration),
205
- map-get($hover, text-decoration)
206
- ),
207
- )
208
- );
209
-
210
- $hover-c-kbd-inline: map-merge(
211
- setter(map-get($hover, c-kbd-inline), ()),
212
- setter(map-get($map, hover-c-kbd-inline), ())
213
- );
214
-
215
- $focus: setter(map-get($map, focus), ());
216
- $focus: map-deep-merge(
217
- $focus,
218
- (
219
- background-color:
220
- setter(
221
- map-get($map, focus-bg),
222
- map-get($focus, background-color)
223
- ),
224
- border-radius:
225
- setter(
226
- map-get($map, focus-border-radius),
227
- map-get($focus, border-radius)
228
- ),
229
- box-shadow:
230
- setter(
231
- map-get($map, focus-box-shadow),
232
- map-get($focus, box-shadow)
233
- ),
234
- color: setter(map-get($map, focus-color), map-get($focus, color)),
235
- opacity:
236
- setter(map-get($map, focus-opacity), map-get($focus, opacity)),
237
- outline:
238
- setter(map-get($map, focus-outline), map-get($focus, outline)),
239
- text-decoration:
240
- setter(
241
- map-get($map, focus-text-decoration),
242
- map-get($focus, text-decoration)
243
- ),
244
- )
245
- );
246
-
247
- $focus-c-kbd-inline: map-deep-merge(
248
- setter(map-get($focus, c-kbd-inline), ()),
249
- setter(map-get($map, focus-c-kbd-inline), ())
250
- );
251
-
252
- $active: setter(map-get($map, active), ());
253
- $active: map-deep-merge(
254
- $active,
255
- (
256
- background-color:
257
- setter(
258
- map-get($map, active-bg),
259
- map-get($active, background-color)
260
- ),
261
- border-color:
262
- setter(
263
- map-get($map, active-border-color),
264
- map-get($active, border-color)
265
- ),
266
- color: setter(map-get($map, active-color), map-get($active, color)),
267
- font-weight:
268
- setter(
269
- map-get($map, active-font-weight),
270
- map-get($active, font-weight)
271
- ),
272
- text-decoration:
273
- setter(
274
- map-get($map, active-text-decoration),
275
- map-get($active, text-decoration)
276
- ),
277
- )
278
- );
279
-
280
- $active-c-kbd-inline: map-merge(
281
- setter(map-get($active, c-kbd-inline), ()),
282
- setter(map-get($map, active-c-kbd-inline), ())
283
- );
284
-
285
- $active-class: setter(map-get($map, active-class), ());
286
- $active-class: map-deep-merge($active, $active-class);
287
- $active-class: map-deep-merge(
288
- $active-class,
289
- (
290
- background-color:
291
- setter(
292
- map-get($map, active-class-bg),
293
- map-get($active-class, background-color)
294
- ),
295
- border-color:
296
- setter(
297
- map-get($map, active-class-border-color),
298
- map-get($active-class, border-color)
299
- ),
300
- color:
301
- setter(
302
- map-get($map, active-class-color),
303
- map-get($active-class, color)
304
- ),
305
- font-weight:
306
- setter(
307
- map-get($map, active-class-font-weight),
308
- map-get($active-class, font-weight)
309
- ),
310
- text-decoration:
311
- setter(
312
- map-get($map, active-class-text-decoration),
313
- map-get($active-class, text-decoration)
314
- ),
315
- )
316
- );
317
-
318
- $active-class-c-kbd-inline: map-merge(
319
- setter(map-get($active-class, c-kbd-inline), ()),
320
- setter(map-get($map, active-class-c-kbd-inline), ())
321
- );
322
-
323
- $disabled: setter(map-get($map, disabled), ());
324
- $disabled: map-deep-merge(
325
- $disabled,
326
- (
327
- background-color:
328
- setter(
329
- map-get($map, disabled-bg),
330
- map-get($disabled, background-color)
331
- ),
332
- border-color:
333
- setter(
334
- map-get($map, disabled-border-color),
335
- map-get($disabled, border-color)
336
- ),
337
- box-shadow:
338
- setter(
339
- map-get($map, disabled-box-shadow),
340
- map-get($disabled, box-shadow)
341
- ),
342
- color:
343
- setter(map-get($map, disabled-color), map-get($disabled, color)),
344
- cursor:
345
- setter(
346
- map-get($map, disabled-cursor),
347
- map-get($disabled, cursor)
348
- ),
349
- opacity:
350
- setter(
351
- map-get($map, disabled-opacity),
352
- map-get($disabled, opacity)
353
- ),
354
- outline:
355
- setter(
356
- map-get($map, disabled-outline),
357
- map-get($disabled, outline)
358
- ),
359
- pointer-events:
360
- setter(
361
- map-get($map, disabled-pointer-events),
362
- map-get($disabled, pointer-events)
363
- ),
364
- text-decoration:
365
- setter(
366
- map-get($map, disabled-text-decoration),
367
- map-get($disabled, text-decoration)
368
- ),
369
- )
370
- );
371
-
372
- $disabled-c-kbd-inline: map-merge(
373
- setter(map-get($disabled, c-kbd-inline), ()),
374
- setter(map-get($map, disabled-c-kbd-inline), ())
375
- );
376
-
377
- $disabled-active: map-deep-merge(
378
- setter(map-get($disabled, active), ()),
379
- setter(map-get($map, disabled-active), ())
380
- );
381
- $disabled-active: map-deep-merge(
382
- $disabled-active,
383
- (
384
- pointer-events:
385
- setter(
386
- map-get($map, disabled-active-pointer-events),
387
- map-get($disabled-active, pointer-events)
388
- ),
389
- )
390
- );
391
-
392
- $autofit-row: setter(map-get($map, autofit-row), ());
393
-
394
- $c-kbd-inline: setter(map-get($map, c-kbd-inline), ());
395
-
396
- $c-inner: setter(map-get($map, c-inner), ());
397
- $c-inner: map-merge(
398
- (
399
- enabled:
400
- setter(
401
- if(
402
- variable-exists(enable-c-inner),
403
- $enable-c-inner,
404
- $cadmin-enable-c-inner
405
- ),
406
- true
407
- ),
408
- flex-grow: 1,
409
- margin-bottom: math-sign(map-get($map, padding-bottom)),
410
- margin-left: math-sign(map-get($map, padding-left)),
411
- margin-right: math-sign(map-get($map, padding-right)),
412
- margin-top: math-sign(map-get($map, padding-top)),
413
- width: auto,
414
- ),
415
- $c-inner
416
- );
417
-
418
- @if ($enabled) {
419
- @include clay-css($base);
420
-
421
- &:hover {
422
- @include clay-css($hover);
206
+ @if (type-of($map) == 'map') {
207
+ $enabled: setter(map-get($map, enabled), true);
208
+
209
+ $base: map-merge(
210
+ $map,
211
+ (
212
+ background-color:
213
+ setter(map-get($map, bg), map-get($map, background-color)),
214
+ )
215
+ );
216
+
217
+ $hover: setter(map-get($map, hover), ());
218
+ $hover: map-deep-merge(
219
+ $hover,
220
+ (
221
+ background-color:
222
+ setter(
223
+ map-get($map, hover-bg),
224
+ map-get($hover, background-color)
225
+ ),
226
+ color:
227
+ setter(map-get($map, hover-color), map-get($hover, color)),
228
+ opacity:
229
+ setter(
230
+ map-get($map, hover-opacity),
231
+ map-get($hover, opacity)
232
+ ),
233
+ text-decoration:
234
+ setter(
235
+ map-get($map, hover-text-decoration),
236
+ map-get($hover, text-decoration)
237
+ ),
238
+ )
239
+ );
240
+
241
+ $hover-c-kbd-inline: map-merge(
242
+ setter(map-get($hover, c-kbd-inline), ()),
243
+ setter(map-get($map, hover-c-kbd-inline), ())
244
+ );
245
+
246
+ $focus: setter(map-get($map, focus), ());
247
+ $focus: map-deep-merge(
248
+ $focus,
249
+ (
250
+ background-color:
251
+ setter(
252
+ map-get($map, focus-bg),
253
+ map-get($focus, background-color)
254
+ ),
255
+ border-radius:
256
+ setter(
257
+ map-get($map, focus-border-radius),
258
+ map-get($focus, border-radius)
259
+ ),
260
+ box-shadow:
261
+ setter(
262
+ map-get($map, focus-box-shadow),
263
+ map-get($focus, box-shadow)
264
+ ),
265
+ color:
266
+ setter(map-get($map, focus-color), map-get($focus, color)),
267
+ opacity:
268
+ setter(
269
+ map-get($map, focus-opacity),
270
+ map-get($focus, opacity)
271
+ ),
272
+ outline:
273
+ setter(
274
+ map-get($map, focus-outline),
275
+ map-get($focus, outline)
276
+ ),
277
+ text-decoration:
278
+ setter(
279
+ map-get($map, focus-text-decoration),
280
+ map-get($focus, text-decoration)
281
+ ),
282
+ )
283
+ );
284
+
285
+ $focus-c-kbd-inline: map-deep-merge(
286
+ setter(map-get($focus, c-kbd-inline), ()),
287
+ setter(map-get($map, focus-c-kbd-inline), ())
288
+ );
289
+
290
+ $active: setter(map-get($map, active), ());
291
+ $active: map-deep-merge(
292
+ $active,
293
+ (
294
+ background-color:
295
+ setter(
296
+ map-get($map, active-bg),
297
+ map-get($active, background-color)
298
+ ),
299
+ border-color:
300
+ setter(
301
+ map-get($map, active-border-color),
302
+ map-get($active, border-color)
303
+ ),
304
+ color:
305
+ setter(
306
+ map-get($map, active-color),
307
+ map-get($active, color)
308
+ ),
309
+ font-weight:
310
+ setter(
311
+ map-get($map, active-font-weight),
312
+ map-get($active, font-weight)
313
+ ),
314
+ text-decoration:
315
+ setter(
316
+ map-get($map, active-text-decoration),
317
+ map-get($active, text-decoration)
318
+ ),
319
+ )
320
+ );
321
+
322
+ $active-c-kbd-inline: map-merge(
323
+ setter(map-get($active, c-kbd-inline), ()),
324
+ setter(map-get($map, active-c-kbd-inline), ())
325
+ );
326
+
327
+ $active-class: setter(map-get($map, active-class), ());
328
+ $active-class: map-deep-merge($active, $active-class);
329
+ $active-class: map-deep-merge(
330
+ $active-class,
331
+ (
332
+ background-color:
333
+ setter(
334
+ map-get($map, active-class-bg),
335
+ map-get($active-class, background-color)
336
+ ),
337
+ border-color:
338
+ setter(
339
+ map-get($map, active-class-border-color),
340
+ map-get($active-class, border-color)
341
+ ),
342
+ color:
343
+ setter(
344
+ map-get($map, active-class-color),
345
+ map-get($active-class, color)
346
+ ),
347
+ font-weight:
348
+ setter(
349
+ map-get($map, active-class-font-weight),
350
+ map-get($active-class, font-weight)
351
+ ),
352
+ text-decoration:
353
+ setter(
354
+ map-get($map, active-class-text-decoration),
355
+ map-get($active-class, text-decoration)
356
+ ),
357
+ )
358
+ );
359
+
360
+ $active-class-c-kbd-inline: map-merge(
361
+ setter(map-get($active-class, c-kbd-inline), ()),
362
+ setter(map-get($map, active-class-c-kbd-inline), ())
363
+ );
364
+
365
+ $disabled: setter(map-get($map, disabled), ());
366
+ $disabled: map-deep-merge(
367
+ $disabled,
368
+ (
369
+ background-color:
370
+ setter(
371
+ map-get($map, disabled-bg),
372
+ map-get($disabled, background-color)
373
+ ),
374
+ border-color:
375
+ setter(
376
+ map-get($map, disabled-border-color),
377
+ map-get($disabled, border-color)
378
+ ),
379
+ box-shadow:
380
+ setter(
381
+ map-get($map, disabled-box-shadow),
382
+ map-get($disabled, box-shadow)
383
+ ),
384
+ color:
385
+ setter(
386
+ map-get($map, disabled-color),
387
+ map-get($disabled, color)
388
+ ),
389
+ cursor:
390
+ setter(
391
+ map-get($map, disabled-cursor),
392
+ map-get($disabled, cursor)
393
+ ),
394
+ opacity:
395
+ setter(
396
+ map-get($map, disabled-opacity),
397
+ map-get($disabled, opacity)
398
+ ),
399
+ outline:
400
+ setter(
401
+ map-get($map, disabled-outline),
402
+ map-get($disabled, outline)
403
+ ),
404
+ pointer-events:
405
+ setter(
406
+ map-get($map, disabled-pointer-events),
407
+ map-get($disabled, pointer-events)
408
+ ),
409
+ text-decoration:
410
+ setter(
411
+ map-get($map, disabled-text-decoration),
412
+ map-get($disabled, text-decoration)
413
+ ),
414
+ )
415
+ );
416
+
417
+ $disabled-c-kbd-inline: map-merge(
418
+ setter(map-get($disabled, c-kbd-inline), ()),
419
+ setter(map-get($map, disabled-c-kbd-inline), ())
420
+ );
421
+
422
+ $disabled-active: map-deep-merge(
423
+ setter(map-get($disabled, active), ()),
424
+ setter(map-get($map, disabled-active), ())
425
+ );
426
+ $disabled-active: map-deep-merge(
427
+ $disabled-active,
428
+ (
429
+ pointer-events:
430
+ setter(
431
+ map-get($map, disabled-active-pointer-events),
432
+ map-get($disabled-active, pointer-events)
433
+ ),
434
+ )
435
+ );
436
+
437
+ $autofit-row: setter(map-get($map, autofit-row), ());
438
+
439
+ $c-kbd-inline: setter(map-get($map, c-kbd-inline), ());
440
+
441
+ $c-inner: setter(map-get($map, c-inner), ());
442
+ $c-inner: map-merge(
443
+ (
444
+ enabled:
445
+ setter(
446
+ if(
447
+ variable-exists(enable-c-inner),
448
+ $enable-c-inner,
449
+ $cadmin-enable-c-inner
450
+ ),
451
+ true
452
+ ),
453
+ flex-grow: 1,
454
+ margin-bottom: math-sign(map-get($map, padding-bottom)),
455
+ margin-left: math-sign(map-get($map, padding-left)),
456
+ margin-right: math-sign(map-get($map, padding-right)),
457
+ margin-top: math-sign(map-get($map, padding-top)),
458
+ width: auto,
459
+ ),
460
+ $c-inner
461
+ );
462
+
463
+ @if ($enabled) {
464
+ @include clay-css($base);
465
+
466
+ &:hover {
467
+ @include clay-css($hover);
423
468
 
424
- &::before {
425
- @include clay-css(setter(map-get($hover, before), ()));
426
- }
469
+ &::before {
470
+ @include clay-css(setter(map-get($hover, before), ()));
471
+ }
427
472
 
428
- &::after {
429
- @include clay-css(setter(map-get($hover, after), ()));
430
- }
473
+ &::after {
474
+ @include clay-css(setter(map-get($hover, after), ()));
475
+ }
431
476
 
432
- .c-kbd-inline {
433
- @include clay-css($hover-c-kbd-inline);
477
+ .c-kbd-inline {
478
+ @include clay-css($hover-c-kbd-inline);
479
+ }
434
480
  }
435
- }
436
481
 
437
- &:focus {
438
- @include clay-css($focus);
482
+ &:focus {
483
+ @include clay-css($focus);
439
484
 
440
- &::before {
441
- @include clay-css(setter(map-get($focus, before), ()));
442
- }
485
+ &::before {
486
+ @include clay-css(setter(map-get($focus, before), ()));
487
+ }
443
488
 
444
- &::after {
445
- @include clay-css(setter(map-get($focus, after), ()));
446
- }
489
+ &::after {
490
+ @include clay-css(setter(map-get($focus, after), ()));
491
+ }
447
492
 
448
- .c-kbd-inline {
449
- @include clay-css($focus-c-kbd-inline);
493
+ .c-kbd-inline {
494
+ @include clay-css($focus-c-kbd-inline);
495
+ }
450
496
  }
451
- }
452
497
 
453
- &:active {
454
- @include clay-css($active);
498
+ &:active {
499
+ @include clay-css($active);
455
500
 
456
- &::before {
457
- @include clay-css(setter(map-get($active, before), ()));
458
- }
501
+ &::before {
502
+ @include clay-css(setter(map-get($active, before), ()));
503
+ }
459
504
 
460
- &::after {
461
- @include clay-css(setter(map-get($active, after), ()));
462
- }
505
+ &::after {
506
+ @include clay-css(setter(map-get($active, after), ()));
507
+ }
463
508
 
464
- label {
465
- color: map-get($active, color);
466
- }
509
+ label {
510
+ color: map-get($active, color);
511
+ }
467
512
 
468
- .form-check-label {
469
- color: map-get($active, color);
470
- font-weight: map-get($active, font-weight);
471
- }
513
+ .form-check-label {
514
+ color: map-get($active, color);
515
+ font-weight: map-get($active, font-weight);
516
+ }
472
517
 
473
- .custom-control-label {
474
- font-weight: map-get($active, font-weight);
475
- }
518
+ .custom-control-label {
519
+ font-weight: map-get($active, font-weight);
520
+ }
476
521
 
477
- .c-kbd-inline {
478
- @include clay-css($active-c-kbd-inline);
522
+ .c-kbd-inline {
523
+ @include clay-css($active-c-kbd-inline);
524
+ }
479
525
  }
480
- }
481
526
 
482
- &.active {
483
- @include clay-css($active-class);
527
+ &.active {
528
+ @include clay-css($active-class);
484
529
 
485
- &::before {
486
- @include clay-css(setter(map-get($active-class, before), ()));
487
- }
530
+ &::before {
531
+ @include clay-css(
532
+ setter(map-get($active-class, before), ())
533
+ );
534
+ }
488
535
 
489
- &::after {
490
- @include clay-css(setter(map-get($active-class, after), ()));
491
- }
536
+ &::after {
537
+ @include clay-css(
538
+ setter(map-get($active-class, after), ())
539
+ );
540
+ }
492
541
 
493
- label {
494
- color: map-get($active-class, color);
495
- }
542
+ label {
543
+ color: map-get($active-class, color);
544
+ }
496
545
 
497
- .form-check-label {
498
- color: map-get($active-class, color);
499
- font-weight: map-get($active-class, font-weight);
500
- }
546
+ .form-check-label {
547
+ color: map-get($active-class, color);
548
+ font-weight: map-get($active-class, font-weight);
549
+ }
501
550
 
502
- .custom-control-label {
503
- font-weight: map-get($active-class, font-weight);
504
- }
551
+ .custom-control-label {
552
+ font-weight: map-get($active-class, font-weight);
553
+ }
505
554
 
506
- .c-kbd-inline {
507
- @include clay-css($active-class-c-kbd-inline);
555
+ .c-kbd-inline {
556
+ @include clay-css($active-class-c-kbd-inline);
557
+ }
508
558
  }
509
- }
510
559
 
511
- // Overwrite Bootstrap's Ensure active button styles are not applied to disabled buttons
512
- // https://github.com/twbs/bootstrap/commit/de3973b5e74058e37fd15fecc4cb7b9fd3409def
560
+ // Overwrite Bootstrap's Ensure active button styles are not applied to disabled buttons
561
+ // https://github.com/twbs/bootstrap/commit/de3973b5e74058e37fd15fecc4cb7b9fd3409def
513
562
 
514
- &.btn:not([disabled]):not(.disabled):active,
515
- &.btn:not([disabled]):not(.disabled).active {
516
- &:focus {
517
- box-shadow: map-get($focus, box-shadow);
563
+ &.btn:not([disabled]):not(.disabled):active,
564
+ &.btn:not([disabled]):not(.disabled).active {
565
+ &:focus {
566
+ box-shadow: map-get($focus, box-shadow);
567
+ }
518
568
  }
519
- }
520
569
 
521
- &:disabled,
522
- &.disabled {
523
- @include clay-css($disabled);
570
+ &:disabled,
571
+ &.disabled {
572
+ @include clay-css($disabled);
524
573
 
525
- &::before {
526
- @include clay-css(setter(map-get($disabled, before), ()));
574
+ &::before {
575
+ @include clay-css(setter(map-get($disabled, before), ()));
576
+ }
577
+
578
+ &::after {
579
+ @include clay-css(setter(map-get($disabled, after), ()));
580
+ }
581
+
582
+ label,
583
+ .form-check-label {
584
+ color: map-get($disabled, color);
585
+ }
586
+
587
+ .c-kbd-inline {
588
+ @include clay-css($disabled-c-kbd-inline);
589
+ }
590
+
591
+ &:active {
592
+ @include clay-css($disabled-active);
593
+
594
+ &::before {
595
+ @include clay-css(
596
+ setter(map-get($disabled-active, before), ())
597
+ );
598
+ }
599
+
600
+ &::after {
601
+ @include clay-css(
602
+ setter(map-get($disabled-active, after), ())
603
+ );
604
+ }
605
+ }
527
606
  }
528
607
 
529
- &::after {
530
- @include clay-css(setter(map-get($disabled, after), ()));
608
+ &::before {
609
+ @include clay-css(setter(map-get($map, before), ()));
531
610
  }
532
611
 
533
- label,
534
- .form-check-label {
535
- color: map-get($disabled, color);
612
+ &::after {
613
+ @include clay-css(setter(map-get($map, after), ()));
536
614
  }
537
615
 
538
- .c-kbd-inline {
539
- @include clay-css($disabled-c-kbd-inline);
616
+ @if (map-get($c-inner, enabled)) {
617
+ .c-inner {
618
+ @include clay-css($c-inner);
619
+ }
540
620
  }
541
621
 
542
- &:active {
543
- @include clay-css($disabled-active);
622
+ &.autofit-row {
623
+ @include clay-css(map-deep-get($map, '&.autofit-row'));
544
624
 
545
- &::before {
625
+ > .autofit-col {
546
626
  @include clay-css(
547
- setter(map-get($disabled-active, before), ())
627
+ map-deep-get($map, '&.autofit-row', autofit-col)
548
628
  );
549
629
  }
550
630
 
551
- &::after {
631
+ > .autofit-col-expand {
552
632
  @include clay-css(
553
- setter(map-get($disabled-active, after), ())
633
+ map-deep-get($map, '&.autofit-row', autofit-col-expand)
554
634
  );
555
635
  }
556
636
  }
557
- }
558
637
 
559
- &::before {
560
- @include clay-css(setter(map-get($map, before), ()));
561
- }
638
+ .autofit-row {
639
+ @include clay-css($autofit-row);
562
640
 
563
- &::after {
564
- @include clay-css(setter(map-get($map, after), ()));
565
- }
641
+ > .autofit-col {
642
+ @include clay-css(
643
+ map-deep-get($map, autofit-row, autofit-col)
644
+ );
645
+ }
566
646
 
567
- @if (map-get($c-inner, enabled)) {
568
- .c-inner {
569
- @include clay-css($c-inner);
647
+ > .autofit-col-expand {
648
+ @include clay-css(
649
+ map-deep-get($map, autofit-row, autofit-col-expand)
650
+ );
651
+ }
570
652
  }
571
- }
572
653
 
573
- &.autofit-row,
574
- .autofit-row {
575
- @include clay-css($autofit-row);
576
- }
577
-
578
- .c-kbd-inline {
579
- @include clay-css($c-kbd-inline);
580
- }
654
+ .c-kbd-inline {
655
+ @include clay-css($c-kbd-inline);
656
+ }
581
657
 
582
- .form-check-label {
583
- font-weight: map-get($map, font-weight);
584
- }
658
+ .form-check-label {
659
+ font-weight: map-get($map, font-weight);
660
+ }
585
661
 
586
- .custom-control-label {
587
- font-weight: map-get($map, font-weight);
662
+ .custom-control-label {
663
+ font-weight: map-get($map, font-weight);
664
+ }
588
665
  }
589
666
  }
590
667
  }