@clayui/css 3.43.0 → 3.44.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.
Files changed (21) hide show
  1. package/lib/css/atlas.css +154 -46
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +154 -46
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/cadmin.css +134 -0
  6. package/lib/css/cadmin.css.map +1 -1
  7. package/lib/images/icons/date-time.svg +12 -0
  8. package/lib/images/icons/icons.svg +1 -1
  9. package/package.json +2 -2
  10. package/src/images/icons/date-time.svg +12 -0
  11. package/src/scss/cadmin/components/_input-groups.scss +2 -0
  12. package/src/scss/cadmin/components/_navs.scss +12 -0
  13. package/src/scss/cadmin/variables/_navs.scss +43 -1
  14. package/src/scss/components/_cards.scss +16 -116
  15. package/src/scss/components/_navs.scss +13 -1
  16. package/src/scss/functions/_lx-icons-generated.scss +2 -0
  17. package/src/scss/mixins/_cards.scss +746 -560
  18. package/src/scss/mixins/_custom-forms.scss +404 -383
  19. package/src/scss/mixins/_navbar.scss +32 -0
  20. package/src/scss/variables/_cards.scss +273 -1
  21. package/src/scss/variables/_navs.scss +43 -1
package/src/scss/mixins/_cards.scss CHANGED
@@ -34,38 +34,40 @@
34
34
  /// - Add @link to documentation
35
35
 
36
36
  @mixin clay-card-section-variant($map) {
37
- $enabled: setter(map-get($map, enabled), true);
38
-
39
- $base: map-merge(
40
- $map,
41
- (
42
- background-color:
43
- setter(map-get($map, bg), map-get($map, background-color)),
44
- )
45
- );
37
+ @if (type-of($map) == 'map') {
38
+ $enabled: setter(map-get($map, enabled), true);
39
+
40
+ $base: map-merge(
41
+ $map,
42
+ (
43
+ background-color:
44
+ setter(map-get($map, bg), map-get($map, background-color)),
45
+ )
46
+ );
46
47
 
47
- $autofit-col: setter(map-get($map, autofit-col), ());
48
- $autofit-col: map-merge(
49
- $autofit-col,
50
- (
51
- padding-left:
52
- setter(
53
- map-get($map, autofit-col-padding-left),
54
- map-get($autofit-col, padding-left)
55
- ),
56
- padding-right:
57
- setter(
58
- map-get($map, autofit-col-padding-right),
59
- map-get($autofit-col, padding-right)
60
- ),
61
- )
62
- );
48
+ $autofit-col: setter(map-get($map, autofit-col), ());
49
+ $autofit-col: map-merge(
50
+ $autofit-col,
51
+ (
52
+ padding-left:
53
+ setter(
54
+ map-get($map, autofit-col-padding-left),
55
+ map-get($autofit-col, padding-left)
56
+ ),
57
+ padding-right:
58
+ setter(
59
+ map-get($map, autofit-col-padding-right),
60
+ map-get($autofit-col, padding-right)
61
+ ),
62
+ )
63
+ );
63
64
 
64
- @if ($enabled) {
65
- @include clay-css($base);
65
+ @if ($enabled) {
66
+ @include clay-css($base);
66
67
 
67
- .autofit-col {
68
- @include clay-css($autofit-col);
68
+ .autofit-col {
69
+ @include clay-css($autofit-col);
70
+ }
69
71
  }
70
72
  }
71
73
  }
@@ -270,641 +272,704 @@
270
272
  /// after-highlight: {Map | Null},
271
273
 
272
274
  @mixin clay-card-variant($map) {
273
- $enabled: setter(map-get($map, enabled), true);
274
-
275
- $base: setter($map, ());
276
- $base: map-merge(
277
- $map,
278
- (
279
- background-color:
280
- setter(map-get($map, bg), map-get($map, background-color)),
281
- )
282
- );
275
+ @if (type-of($map) == 'map') {
276
+ $enabled: setter(map-get($map, enabled), true);
277
+
278
+ $base: map-merge(
279
+ $map,
280
+ (
281
+ background-color:
282
+ setter(map-get($map, bg), map-get($map, background-color)),
283
+ )
284
+ );
283
285
 
284
- $hover: setter(map-get($map, hover), ());
285
- $hover: map-merge(
286
- $hover,
287
- (
288
- background-color:
289
- setter(
290
- map-get($map, hover-bg),
291
- map-get($hover, background-color)
292
- ),
293
- border-color:
294
- setter(
295
- map-get($map, hover-border-color),
296
- map-get($hover, border-color)
297
- ),
298
- box-shadow:
299
- setter(
300
- map-get($map, hover-box-shadow),
301
- map-get($hover, box-shadow)
302
- ),
303
- color: setter(map-get($map, hover-color), map-get($hover, color)),
304
- text-decoration:
305
- setter(
306
- map-get($map, hover-text-decoration),
307
- map-get($hover, text-decoration)
308
- ),
309
- )
310
- );
286
+ $hover: setter(map-get($map, hover), ());
287
+ $hover: map-merge(
288
+ $hover,
289
+ (
290
+ background-color:
291
+ setter(
292
+ map-get($map, hover-bg),
293
+ map-get($hover, background-color)
294
+ ),
295
+ border-color:
296
+ setter(
297
+ map-get($map, hover-border-color),
298
+ map-get($hover, border-color)
299
+ ),
300
+ box-shadow:
301
+ setter(
302
+ map-get($map, hover-box-shadow),
303
+ map-get($hover, box-shadow)
304
+ ),
305
+ color:
306
+ setter(map-get($map, hover-color), map-get($hover, color)),
307
+ text-decoration:
308
+ setter(
309
+ map-get($map, hover-text-decoration),
310
+ map-get($hover, text-decoration)
311
+ ),
312
+ )
313
+ );
311
314
 
312
- $old-hover-card-title: setter(map-get($map, hover-card-title), ());
313
- $hover-card-title: setter(map-get($hover, card-title), ());
314
- $hover-card-title: map-merge($hover-card-title, $old-hover-card-title);
315
+ $old-hover-card-title: setter(map-get($map, hover-card-title), ());
316
+ $hover-card-title: setter(map-get($hover, card-title), ());
317
+ $hover-card-title: map-merge($hover-card-title, $old-hover-card-title);
315
318
 
316
- $old-hover-card-subtitle: setter(map-get($map, hover-card-subtitle), ());
317
- $hover-card-subtitle: setter(map-get($hover, card-subtitle), ());
318
- $hover-card-subtitle: map-merge(
319
- $hover-card-subtitle,
320
- $old-hover-card-subtitle
321
- );
319
+ $old-hover-card-subtitle: setter(
320
+ map-get($map, hover-card-subtitle),
321
+ ()
322
+ );
323
+ $hover-card-subtitle: setter(map-get($hover, card-subtitle), ());
324
+ $hover-card-subtitle: map-merge(
325
+ $hover-card-subtitle,
326
+ $old-hover-card-subtitle
327
+ );
322
328
 
323
- $old-hover-card-text: setter(map-get($map, hover-card-text), ());
324
- $hover-card-text: setter(map-get($hover, card-text), ());
325
- $hover-card-text: map-merge($hover-card-text, $old-hover-card-text);
329
+ $old-hover-card-text: setter(map-get($map, hover-card-text), ());
330
+ $hover-card-text: setter(map-get($hover, card-text), ());
331
+ $hover-card-text: map-merge($hover-card-text, $old-hover-card-text);
326
332
 
327
- $old-hover-card-link: setter(map-get($map, hover-card-link), ());
328
- $hover-card-link: setter(map-get($hover, card-link), ());
329
- $hover-card-link: map-merge($hover-card-link, $old-hover-card-link);
333
+ $old-hover-card-link: setter(map-get($map, hover-card-link), ());
334
+ $hover-card-link: setter(map-get($hover, card-link), ());
335
+ $hover-card-link: map-merge($hover-card-link, $old-hover-card-link);
330
336
 
331
- $focus: setter(map-get($map, focus), ());
332
- $focus: map-merge(
333
- $focus,
334
- (
335
- background-color:
336
- setter(
337
- map-get($map, focus-bg),
338
- map-get($focus, background-color)
339
- ),
340
- border-color:
341
- setter(
342
- map-get($map, focus-border-color),
343
- map-get($focus, border-color)
344
- ),
345
- box-shadow:
346
- setter(
347
- map-get($map, focus-box-shadow),
348
- map-get($focus, box-shadow)
349
- ),
350
- color: setter(map-get($map, focus-color), map-get($focus, color)),
351
- text-decoration:
352
- setter(
353
- map-get($map, focus-text-decoration),
354
- map-get($focus, text-decoration)
355
- ),
356
- )
357
- );
337
+ $focus: setter(map-get($map, focus), ());
338
+ $focus: map-merge(
339
+ $focus,
340
+ (
341
+ background-color:
342
+ setter(
343
+ map-get($map, focus-bg),
344
+ map-get($focus, background-color)
345
+ ),
346
+ border-color:
347
+ setter(
348
+ map-get($map, focus-border-color),
349
+ map-get($focus, border-color)
350
+ ),
351
+ box-shadow:
352
+ setter(
353
+ map-get($map, focus-box-shadow),
354
+ map-get($focus, box-shadow)
355
+ ),
356
+ color:
357
+ setter(map-get($map, focus-color), map-get($focus, color)),
358
+ text-decoration:
359
+ setter(
360
+ map-get($map, focus-text-decoration),
361
+ map-get($focus, text-decoration)
362
+ ),
363
+ )
364
+ );
358
365
 
359
- $old-focus-card-title: setter(map-get($map, focus-card-title), ());
360
- $focus-card-title: setter(map-get($focus, card-title), ());
361
- $focus-card-title: map-merge($focus-card-title, $old-focus-card-title);
366
+ $old-focus-card-title: setter(map-get($map, focus-card-title), ());
367
+ $focus-card-title: setter(map-get($focus, card-title), ());
368
+ $focus-card-title: map-merge($focus-card-title, $old-focus-card-title);
362
369
 
363
- $old-focus-card-subtitle: setter(map-get($map, focus-card-subtitle), ());
364
- $focus-card-subtitle: setter(map-get($focus, card-subtitle), ());
365
- $focus-card-subtitle: map-merge(
366
- $focus-card-subtitle,
367
- $old-focus-card-subtitle
368
- );
370
+ $old-focus-card-subtitle: setter(
371
+ map-get($map, focus-card-subtitle),
372
+ ()
373
+ );
374
+ $focus-card-subtitle: setter(map-get($focus, card-subtitle), ());
375
+ $focus-card-subtitle: map-merge(
376
+ $focus-card-subtitle,
377
+ $old-focus-card-subtitle
378
+ );
369
379
 
370
- $old-focus-card-text: setter(map-get($map, focus-card-text), ());
371
- $focus-card-text: setter(map-get($focus, card-text), ());
372
- $focus-card-text: map-merge($focus-card-text, $old-focus-card-text);
380
+ $old-focus-card-text: setter(map-get($map, focus-card-text), ());
381
+ $focus-card-text: setter(map-get($focus, card-text), ());
382
+ $focus-card-text: map-merge($focus-card-text, $old-focus-card-text);
373
383
 
374
- $old-focus-card-link: setter(map-get($map, focus-card-link), ());
375
- $focus-card-link: setter(map-get($focus, card-link), ());
376
- $focus-card-link: map-merge($focus-card-link, $old-focus-card-link);
384
+ $old-focus-card-link: setter(map-get($map, focus-card-link), ());
385
+ $focus-card-link: setter(map-get($focus, card-link), ());
386
+ $focus-card-link: map-merge($focus-card-link, $old-focus-card-link);
377
387
 
378
- $active: setter(map-get($map, active), ());
379
- $active: map-merge(
380
- $active,
381
- (
382
- background-color:
383
- setter(
384
- map-get($map, active-bg),
385
- map-get($active, background-color)
386
- ),
387
- border-color:
388
- setter(
389
- map-get($map, active-border-color),
390
- map-get($active, border-color)
391
- ),
392
- color: setter(map-get($map, active-color), map-get($active, color)),
393
- )
394
- );
388
+ $active: setter(map-get($map, active), ());
389
+ $active: map-merge(
390
+ $active,
391
+ (
392
+ background-color:
393
+ setter(
394
+ map-get($map, active-bg),
395
+ map-get($active, background-color)
396
+ ),
397
+ border-color:
398
+ setter(
399
+ map-get($map, active-border-color),
400
+ map-get($active, border-color)
401
+ ),
402
+ color:
403
+ setter(
404
+ map-get($map, active-color),
405
+ map-get($active, color)
406
+ ),
407
+ )
408
+ );
395
409
 
396
- $old-active-card-title: setter(map-get($map, active-card-title), ());
397
- $active-card-title: setter(map-get($active, card-title), ());
398
- $active-card-title: map-merge($active-card-title, $old-active-card-title);
410
+ $old-active-card-title: setter(map-get($map, active-card-title), ());
411
+ $active-card-title: setter(map-get($active, card-title), ());
412
+ $active-card-title: map-merge(
413
+ $active-card-title,
414
+ $old-active-card-title
415
+ );
399
416
 
400
- $old-active-card-subtitle: setter(map-get($map, active-card-subtitle), ());
401
- $active-card-subtitle: setter(map-get($active, card-subtitle), ());
402
- $active-card-subtitle: map-merge(
403
- $active-card-subtitle,
404
- $old-active-card-subtitle
405
- );
417
+ $old-active-card-subtitle: setter(
418
+ map-get($map, active-card-subtitle),
419
+ ()
420
+ );
421
+ $active-card-subtitle: setter(map-get($active, card-subtitle), ());
422
+ $active-card-subtitle: map-merge(
423
+ $active-card-subtitle,
424
+ $old-active-card-subtitle
425
+ );
406
426
 
407
- $old-active-card-text: setter(map-get($map, active-card-text), ());
408
- $active-card-text: setter(map-get($active, card-text), ());
409
- $active-card-text: map-merge($active-card-text, $old-active-card-text);
427
+ $old-active-card-text: setter(map-get($map, active-card-text), ());
428
+ $active-card-text: setter(map-get($active, card-text), ());
429
+ $active-card-text: map-merge($active-card-text, $old-active-card-text);
410
430
 
411
- $old-active-card-link: setter(map-get($map, active-card-link), ());
412
- $active-card-link: setter(map-get($active, card-link), ());
413
- $active-card-link: map-merge($active-card-link, $old-active-card-link);
431
+ $old-active-card-link: setter(map-get($map, active-card-link), ());
432
+ $active-card-link: setter(map-get($active, card-link), ());
433
+ $active-card-link: map-merge($active-card-link, $old-active-card-link);
414
434
 
415
- $aspect-ratio: setter(map-get($map, aspect-ratio), ());
435
+ $aspect-ratio: setter(map-get($map, aspect-ratio), ());
416
436
 
417
- $aspect-ratio-custom-control-label: setter(
418
- map-deep-get($aspect-ratio, custom-control, label),
419
- ()
420
- );
437
+ $aspect-ratio-custom-control-label: setter(
438
+ map-deep-get($aspect-ratio, custom-control, label),
439
+ ()
440
+ );
421
441
 
422
- $checkbox: setter(map-get($map, checkbox), ());
423
- $checkbox: map-merge(
424
- $checkbox,
425
- (
426
- cursor:
427
- setter(
428
- map-get($map, checkbox-cursor),
429
- map-get($checkbox, cursor),
430
- map-get($aspect-ratio-custom-control-label, cursor)
431
- ),
432
- )
433
- );
442
+ $checkbox: setter(map-get($map, checkbox), ());
443
+ $checkbox: map-merge(
444
+ $checkbox,
445
+ (
446
+ cursor:
447
+ setter(
448
+ map-get($map, checkbox-cursor),
449
+ map-get($checkbox, cursor),
450
+ map-get($aspect-ratio-custom-control-label, cursor)
451
+ ),
452
+ )
453
+ );
434
454
 
435
- $aspect-ratio-custom-control-label: map-deep-merge(
436
- $aspect-ratio-custom-control-label,
437
- $checkbox
438
- );
455
+ $aspect-ratio-custom-control-label: map-deep-merge(
456
+ $aspect-ratio-custom-control-label,
457
+ $checkbox
458
+ );
439
459
 
440
- $aspect-ratio: map-deep-merge(
441
- $aspect-ratio,
442
- (
443
- background-color:
444
- setter(
445
- map-get($map, aspect-ratio-bg),
446
- map-get($map, aspect-ratio-checkered-bg),
447
- map-get($aspect-ratio, background-color)
448
- ),
449
- checkered-foreground-color:
450
- setter(
451
- map-get($map, aspect-ratio-checkered-fg),
452
- map-get($aspect-ratio, checkered-foreground-color)
453
- ),
454
- border-color:
455
- setter(
456
- map-get($map, aspect-ratio-border-color),
457
- map-get($aspect-ratio, border-color)
458
- ),
459
- border-style:
460
- setter(
461
- map-get($map, aspect-ratio-border-style),
462
- map-get($aspect-ratio, border-style)
463
- ),
464
- border-width:
465
- setter(
466
- map-get($map, aspect-ratio-border-bottom-width),
467
- map-get($map, aspect-ratio-border-width),
468
- map-get($aspect-ratio, border-width)
469
- ),
470
- horizontal:
471
- setter(
472
- map-get($map, aspect-ratio-horizontal),
473
- map-get($aspect-ratio, horizontal)
474
- ),
475
- vertical:
476
- setter(
477
- map-get($map, aspect-ratio-vertical),
478
- map-get($aspect-ratio, vertical)
460
+ $aspect-ratio: map-deep-merge(
461
+ $aspect-ratio,
462
+ (
463
+ background-color:
464
+ setter(
465
+ map-get($map, aspect-ratio-bg),
466
+ map-get($map, aspect-ratio-checkered-bg),
467
+ map-get($aspect-ratio, background-color)
468
+ ),
469
+ checkered-foreground-color:
470
+ setter(
471
+ map-get($map, aspect-ratio-checkered-fg),
472
+ map-get($aspect-ratio, checkered-foreground-color)
473
+ ),
474
+ border-color:
475
+ setter(
476
+ map-get($map, aspect-ratio-border-color),
477
+ map-get($aspect-ratio, border-color)
478
+ ),
479
+ border-style:
480
+ setter(
481
+ map-get($map, aspect-ratio-border-style),
482
+ map-get($aspect-ratio, border-style)
483
+ ),
484
+ border-width:
485
+ setter(
486
+ map-get($map, aspect-ratio-border-bottom-width),
487
+ map-get($map, aspect-ratio-border-width),
488
+ map-get($aspect-ratio, border-width)
489
+ ),
490
+ horizontal:
491
+ setter(
492
+ map-get($map, aspect-ratio-horizontal),
493
+ map-get($aspect-ratio, horizontal)
494
+ ),
495
+ vertical:
496
+ setter(
497
+ map-get($map, aspect-ratio-vertical),
498
+ map-get($aspect-ratio, vertical)
499
+ ),
500
+ custom-control: (
501
+ label: $aspect-ratio-custom-control-label,
479
502
  ),
480
- custom-control: (
481
- label: $aspect-ratio-custom-control-label,
482
- ),
483
- )
484
- );
503
+ )
504
+ );
485
505
 
486
- $aspect-ratio-checkered-fg: map-get(
487
- $aspect-ratio,
488
- checkered-foreground-color
489
- );
506
+ $aspect-ratio-checkered-fg: map-get(
507
+ $aspect-ratio,
508
+ checkered-foreground-color
509
+ );
490
510
 
491
- $card-body: setter(map-get($map, card-body), ());
492
- $card-body: map-merge(
493
- $card-body,
494
- (
495
- padding-bottom:
496
- setter(
497
- map-get($map, card-body-padding-bottom),
498
- map-get($card-body, padding-bottom)
499
- ),
500
- padding-left:
501
- setter(
502
- map-get($map, card-body-padding-left),
503
- map-get($card-body, padding-left)
504
- ),
505
- padding-right:
506
- setter(
507
- map-get($map, card-body-padding-right),
508
- map-get($card-body, padding-right)
509
- ),
510
- padding-top:
511
- setter(
512
- map-get($map, card-body-padding-top),
513
- map-get($card-body, padding-top)
514
- ),
515
- )
516
- );
511
+ $card-body: setter(map-get($map, card-body), ());
512
+ $card-body: map-merge(
513
+ $card-body,
514
+ (
515
+ padding-bottom:
516
+ setter(
517
+ map-get($map, card-body-padding-bottom),
518
+ map-get($card-body, padding-bottom)
519
+ ),
520
+ padding-left:
521
+ setter(
522
+ map-get($map, card-body-padding-left),
523
+ map-get($card-body, padding-left)
524
+ ),
525
+ padding-right:
526
+ setter(
527
+ map-get($map, card-body-padding-right),
528
+ map-get($card-body, padding-right)
529
+ ),
530
+ padding-top:
531
+ setter(
532
+ map-get($map, card-body-padding-top),
533
+ map-get($card-body, padding-top)
534
+ ),
535
+ )
536
+ );
517
537
 
518
- $card-row: setter(map-get($map, card-row), ());
519
- $card-row: map-merge(
520
- $card-row,
521
- (
522
- align-items:
523
- setter(
524
- map-get($map, card-row-align-items),
525
- map-get($card-row, align-items)
526
- ),
527
- )
528
- );
538
+ $card-row: setter(map-get($map, card-row), ());
539
+ $card-row: map-merge(
540
+ $card-row,
541
+ (
542
+ align-items:
543
+ setter(
544
+ map-get($map, card-row-align-items),
545
+ map-get($card-row, align-items)
546
+ ),
547
+ )
548
+ );
529
549
 
530
- $card-type-asset-icon: setter(map-get($map, card-type-asset-icon), ());
550
+ $card-type-asset-icon: setter(map-get($map, card-type-asset-icon), ());
531
551
 
532
- $asset-icon: setter(map-get($map, asset-icon), ());
552
+ $asset-icon: setter(map-get($map, asset-icon), ());
533
553
 
534
- $asset-icon-lexicon-icon: setter(map-get($asset-icon, lexicon-icon), ());
554
+ $asset-icon-lexicon-icon: setter(
555
+ map-get($asset-icon, lexicon-icon),
556
+ ()
557
+ );
535
558
 
536
- $card-type-asset-icon-lexicon-icon: setter(
537
- map-get($card-type-asset-icon, lexicon-icon),
538
- ()
539
- );
540
- $card-type-asset-icon-lexicon-icon: map-merge(
541
- $card-type-asset-icon-lexicon-icon,
542
- $asset-icon-lexicon-icon
543
- );
544
- $card-type-asset-icon-lexicon-icon: map-merge(
545
- $card-type-asset-icon-lexicon-icon,
546
- (
547
- height:
548
- setter(
549
- map-get($map, asset-icon-lexicon-icon-height),
550
- map-get($card-type-asset-icon-lexicon-icon, height)
551
- ),
552
- width:
553
- setter(
554
- map-get($map, asset-icon-lexicon-icon-width),
555
- map-get($card-type-asset-icon-lexicon-icon, width)
556
- ),
557
- )
558
- );
559
+ $card-type-asset-icon-lexicon-icon: setter(
560
+ map-get($card-type-asset-icon, lexicon-icon),
561
+ ()
562
+ );
563
+ $card-type-asset-icon-lexicon-icon: map-merge(
564
+ $card-type-asset-icon-lexicon-icon,
565
+ $asset-icon-lexicon-icon
566
+ );
567
+ $card-type-asset-icon-lexicon-icon: map-merge(
568
+ $card-type-asset-icon-lexicon-icon,
569
+ (
570
+ height:
571
+ setter(
572
+ map-get($map, asset-icon-lexicon-icon-height),
573
+ map-get($card-type-asset-icon-lexicon-icon, height)
574
+ ),
575
+ width:
576
+ setter(
577
+ map-get($map, asset-icon-lexicon-icon-width),
578
+ map-get($card-type-asset-icon-lexicon-icon, width)
579
+ ),
580
+ )
581
+ );
559
582
 
560
- $card-type-asset-icon: map-deep-merge($card-type-asset-icon, $asset-icon);
561
- $card-type-asset-icon: map-deep-merge(
562
- $card-type-asset-icon,
563
- (
564
- color:
565
- setter(
566
- map-get($map, asset-icon-color),
567
- map-get($card-type-asset-icon, color)
568
- ),
569
- max-width:
570
- setter(
571
- map-get($map, asset-icon-max-width),
572
- map-get($card-type-asset-icon, max-width)
573
- ),
574
- min-width:
575
- setter(
576
- map-get($map, asset-icon-min-width),
577
- map-get($card-type-asset-icon, min-width)
578
- ),
579
- width:
580
- setter(
581
- map-get($map, asset-icon-width),
582
- map-get($card-type-asset-icon, width)
583
- ),
584
- lexicon-icon: $card-type-asset-icon-lexicon-icon,
585
- )
586
- );
583
+ $card-type-asset-icon: map-deep-merge(
584
+ $card-type-asset-icon,
585
+ $asset-icon
586
+ );
587
+ $card-type-asset-icon: map-deep-merge(
588
+ $card-type-asset-icon,
589
+ (
590
+ color:
591
+ setter(
592
+ map-get($map, asset-icon-color),
593
+ map-get($card-type-asset-icon, color)
594
+ ),
595
+ max-width:
596
+ setter(
597
+ map-get($map, asset-icon-max-width),
598
+ map-get($card-type-asset-icon, max-width)
599
+ ),
600
+ min-width:
601
+ setter(
602
+ map-get($map, asset-icon-min-width),
603
+ map-get($card-type-asset-icon, min-width)
604
+ ),
605
+ width:
606
+ setter(
607
+ map-get($map, asset-icon-width),
608
+ map-get($card-type-asset-icon, width)
609
+ ),
610
+ lexicon-icon: $card-type-asset-icon-lexicon-icon,
611
+ )
612
+ );
587
613
 
588
- $card-type-asset-icon-sticker: setter(
589
- map-get($card-type-asset-icon, sticker),
590
- ()
591
- );
592
- $card-type-asset-icon-sticker: map-merge(
593
- $card-type-asset-icon-sticker,
594
- (
595
- border-radius:
596
- setter(
597
- map-get($map, asset-icon-sticker-border-radius),
598
- map-get($card-type-asset-icon-sticker, border-radius)
599
- ),
600
- font-size:
601
- setter(
602
- map-get($map, asset-icon-sticker-font-size),
603
- map-get($card-type-asset-icon-sticker, font-size)
604
- ),
605
- )
606
- );
614
+ $card-type-asset-icon-sticker: setter(
615
+ map-get($card-type-asset-icon, sticker),
616
+ ()
617
+ );
618
+ $card-type-asset-icon-sticker: map-merge(
619
+ $card-type-asset-icon-sticker,
620
+ (
621
+ border-radius:
622
+ setter(
623
+ map-get($map, asset-icon-sticker-border-radius),
624
+ map-get($card-type-asset-icon-sticker, border-radius)
625
+ ),
626
+ font-size:
627
+ setter(
628
+ map-get($map, asset-icon-sticker-font-size),
629
+ map-get($card-type-asset-icon-sticker, font-size)
630
+ ),
631
+ )
632
+ );
633
+
634
+ $dropdown-action: setter(map-get($map, dropdown-action), ());
635
+ $dropdown-action: map-merge(
636
+ $dropdown-action,
637
+ (
638
+ margin-bottom:
639
+ setter(
640
+ map-get($map, dropdown-action-offset-bottom),
641
+ map-get($dropdown-action, margin-bottom)
642
+ ),
643
+ margin-left:
644
+ setter(
645
+ map-get($map, dropdown-action-offset-left),
646
+ map-get($dropdown-action, margin-left)
647
+ ),
648
+ margin-right:
649
+ setter(
650
+ map-get($map, dropdown-action-offset-right),
651
+ map-get($dropdown-action, margin-right)
652
+ ),
653
+ margin-top:
654
+ setter(
655
+ map-get($map, dropdown-action-offset-top),
656
+ map-get($dropdown-action, margin-top)
657
+ ),
658
+ )
659
+ );
607
660
 
608
- $dropdown-action: setter(map-get($map, dropdown-action), ());
609
- $dropdown-action: map-merge(
610
- $dropdown-action,
611
- (
612
- margin-bottom:
613
- setter(
614
- map-get($map, dropdown-action-offset-bottom),
615
- map-get($dropdown-action, margin-bottom)
616
- ),
617
- margin-left:
618
- setter(
619
- map-get($map, dropdown-action-offset-left),
620
- map-get($dropdown-action, margin-left)
621
- ),
622
- margin-right:
623
- setter(
624
- map-get($map, dropdown-action-offset-right),
625
- map-get($dropdown-action, margin-right)
626
- ),
627
- margin-top:
628
- setter(
629
- map-get($map, dropdown-action-offset-top),
630
- map-get($dropdown-action, margin-top)
631
- ),
632
- )
633
- );
661
+ @if ($enabled) {
662
+ @include clay-css($base);
634
663
 
635
- @if ($enabled) {
636
- @include clay-css($base);
664
+ &:hover,
665
+ &.hover {
666
+ @include clay-css($hover);
637
667
 
638
- &:hover,
639
- &.hover {
640
- @include clay-css($hover);
668
+ &::after {
669
+ @include clay-css(map-get($hover, after));
670
+ }
641
671
 
642
- &::after {
643
- @include clay-css(setter(map-get($hover, after), ()));
644
- }
672
+ .card-title {
673
+ @include clay-link($hover-card-title);
674
+ }
645
675
 
646
- .card-title {
647
- @include clay-link($hover-card-title);
648
- }
676
+ .card-subtitle {
677
+ @include clay-link($hover-card-subtitle);
678
+ }
649
679
 
650
- .card-subtitle {
651
- @include clay-link($hover-card-subtitle);
652
- }
680
+ .card-text {
681
+ @include clay-link($hover-card-text);
682
+ }
653
683
 
654
- .card-text {
655
- @include clay-link($hover-card-text);
684
+ .card-link {
685
+ @include clay-link($hover-card-link);
686
+ }
656
687
  }
657
688
 
658
- .card-link {
659
- @include clay-link($hover-card-link);
660
- }
661
- }
689
+ &:focus,
690
+ &.focus {
691
+ @include clay-css($focus);
662
692
 
663
- &:focus,
664
- &.focus {
665
- @include clay-css($focus);
693
+ &::after {
694
+ @include clay-css(map-get($focus, after));
695
+ }
666
696
 
667
- &::after {
668
- @include clay-css(setter(map-get($focus, after), ()));
669
- }
697
+ .card-title {
698
+ @include clay-link($focus-card-title);
699
+ }
670
700
 
671
- .card-title {
672
- @include clay-link($focus-card-title);
673
- }
701
+ .card-subtitle {
702
+ @include clay-link($focus-card-subtitle);
703
+ }
674
704
 
675
- .card-subtitle {
676
- @include clay-link($focus-card-subtitle);
677
- }
705
+ .card-text {
706
+ @include clay-link($focus-card-text);
707
+ }
678
708
 
679
- .card-text {
680
- @include clay-link($focus-card-text);
709
+ .card-link {
710
+ @include clay-link($focus-card-link);
711
+ }
681
712
  }
682
713
 
683
- .card-link {
684
- @include clay-link($focus-card-link);
685
- }
686
- }
714
+ &:active,
715
+ &.active {
716
+ @include clay-css($active);
687
717
 
688
- &:active,
689
- &.active {
690
- @include clay-css($active);
718
+ &::after {
719
+ @include clay-css(map-get($active, after));
720
+ }
691
721
 
692
- &::after {
693
- @include clay-css(setter(map-get($active, after), ()));
694
- }
722
+ .card-title {
723
+ @include clay-link($active-card-title);
724
+ }
695
725
 
696
- .card-title {
697
- @include clay-link($active-card-title);
698
- }
726
+ .card-subtitle {
727
+ @include clay-link($active-card-subtitle);
728
+ }
699
729
 
700
- .card-subtitle {
701
- @include clay-link($active-card-subtitle);
702
- }
730
+ .card-text {
731
+ @include clay-link($active-card-text);
732
+ }
703
733
 
704
- .card-text {
705
- @include clay-link($active-card-text);
734
+ .card-link {
735
+ @include clay-link($active-card-link);
736
+ }
706
737
  }
707
738
 
708
- .card-link {
709
- @include clay-link($active-card-link);
710
- }
711
- }
739
+ &:disabled,
740
+ &.disabled {
741
+ @include clay-css(map-get($map, disabled));
712
742
 
713
- &:disabled,
714
- &.disabled {
715
- @include clay-css(setter(map-get($map, disabled), ()));
743
+ &::after {
744
+ @include clay-css(map-deep-get($map, disabled, after));
745
+ }
716
746
 
717
- &::after {
718
- @include clay-css(
719
- setter(map-deep-get($map, disabled, after), ())
720
- );
721
- }
747
+ .card-title {
748
+ @include clay-link(
749
+ map-deep-get($map, disabled, card-title)
750
+ );
751
+ }
722
752
 
723
- .card-title {
724
- @include clay-link(
725
- setter(map-deep-get($map, disabled, card-title), ())
726
- );
753
+ .card-subtitle {
754
+ @include clay-link(
755
+ map-deep-get($map, disabled, card-subtitle)
756
+ );
757
+ }
758
+
759
+ .card-text {
760
+ @include clay-link(map-deep-get($map, disabled, card-text));
761
+ }
762
+
763
+ .card-link {
764
+ @include clay-link(map-deep-get($map, disabled, card-link));
765
+ }
727
766
  }
728
767
 
729
- .card-subtitle {
730
- @include clay-link(
731
- setter(map-deep-get($map, disabled, card-subtitle), ())
768
+ @include clay-after-highlight-variant(
769
+ setter(map-get($map, after-highlight), ())
770
+ );
771
+
772
+ &.form-check-card {
773
+ @include clay-form-check-card-variant(
774
+ map-get($map, form-check-card)
732
775
  );
733
776
  }
734
777
 
735
- .card-text {
736
- @include clay-link(
737
- setter(map-deep-get($map, disabled, card-text), ())
778
+ .aspect-ratio {
779
+ @include clay-aspect-ratio-variant(
780
+ setter(map-get($map, aspect-ratio), ())
738
781
  );
782
+
783
+ @if ($aspect-ratio-checkered-fg) {
784
+ @include clay-bg-checkered($aspect-ratio-checkered-fg);
785
+ }
786
+
787
+ .custom-control label,
788
+ .form-check-label {
789
+ @include clay-css(
790
+ map-deep-get($aspect-ratio, custom-control, label)
791
+ );
792
+ }
793
+
794
+ .label {
795
+ @include clay-label-variant(map-get($aspect-ratio, label));
796
+ }
739
797
  }
740
798
 
741
- .card-link {
742
- @include clay-link(
743
- setter(map-deep-get($map, disabled, card-link), ())
799
+ .aspect-ratio-item {
800
+ @include clay-aspect-ratio-item-variant(
801
+ setter(map-get($map, aspect-ratio-item), ())
744
802
  );
745
803
  }
746
- }
747
804
 
748
- @include clay-after-highlight-variant(
749
- setter(map-get($map, after-highlight), ())
750
- );
805
+ .aspect-ratio-item-top-left {
806
+ @include clay-css(map-get($map, aspect-ratio-item-top-left));
807
+ }
751
808
 
752
- .aspect-ratio {
753
- @include clay-aspect-ratio-variant(
754
- setter(map-get($map, aspect-ratio), ())
755
- );
809
+ .aspect-ratio-item-top-center {
810
+ @include clay-css(map-get($map, aspect-ratio-item-top-center));
811
+ }
756
812
 
757
- @if ($aspect-ratio-checkered-fg) {
758
- @include clay-bg-checkered($aspect-ratio-checkered-fg);
813
+ .aspect-ratio-item-top-right {
814
+ @include clay-css(map-get($map, aspect-ratio-item-top-right));
759
815
  }
760
816
 
761
- .custom-control label,
762
- .form-check-label {
817
+ .aspect-ratio-item-right-middle {
763
818
  @include clay-css(
764
- setter(
765
- map-deep-get($aspect-ratio, custom-control, label),
766
- ()
767
- )
819
+ map-get($map, aspect-ratio-item-right-middle)
768
820
  );
769
821
  }
770
822
 
771
- .label {
772
- @include clay-label-variant(
773
- setter(map-get($aspect-ratio, label), ())
823
+ .aspect-ratio-item-bottom-right {
824
+ @include clay-css(
825
+ map-get($map, aspect-ratio-item-bottom-right)
774
826
  );
775
827
  }
776
- }
777
828
 
778
- .aspect-ratio-item {
779
- @include clay-aspect-ratio-item-variant(
780
- setter(map-get($map, aspect-ratio-item), ())
781
- );
782
- }
829
+ .aspect-ratio-item-bottom-center {
830
+ @include clay-css(
831
+ map-get($map, aspect-ratio-item-bottom-center)
832
+ );
833
+ }
783
834
 
784
- .aspect-ratio-item-top-left {
785
- @include clay-css(
786
- setter(map-get($map, aspect-ratio-item-top-left), ())
787
- );
788
- }
835
+ .aspect-ratio-item-bottom-left {
836
+ @include clay-css(map-get($map, aspect-ratio-item-bottom-left));
837
+ }
789
838
 
790
- .aspect-ratio-item-top-center {
791
- @include clay-css(
792
- setter(map-get($map, aspect-ratio-item-top-center), ())
793
- );
794
- }
839
+ .sticker {
840
+ @include clay-sticker-variant(
841
+ setter(map-get($map, sticker), ())
842
+ );
843
+ }
795
844
 
796
- .aspect-ratio-item-top-right {
797
- @include clay-css(
798
- setter(map-get($map, aspect-ratio-item-top-right), ())
799
- );
800
- }
845
+ .card {
846
+ @include clay-css(map-get($map, card));
847
+ }
801
848
 
802
- .aspect-ratio-item-right-middle {
803
- @include clay-css(
804
- setter(map-get($map, aspect-ratio-item-right-middle), ())
805
- );
806
- }
849
+ .card-header {
850
+ @include clay-card-section-variant(map-get($map, card-header));
851
+ }
807
852
 
808
- .aspect-ratio-item-bottom-right {
809
- @include clay-css(
810
- setter(map-get($map, aspect-ratio-item-bottom-right), ())
811
- );
812
- }
853
+ .card-body {
854
+ @include clay-card-section-variant($card-body);
855
+ }
813
856
 
814
- .aspect-ratio-item-bottom-center {
815
- @include clay-css(
816
- setter(map-get($map, aspect-ratio-item-bottom-center), ())
817
- );
818
- }
857
+ .card-footer {
858
+ @include clay-card-section-variant(map-get($map, card-footer));
859
+ }
819
860
 
820
- .aspect-ratio-item-bottom-left {
821
- @include clay-css(
822
- setter(map-get($map, aspect-ratio-item-bottom-left), ())
823
- );
824
- }
861
+ .card-row {
862
+ @include clay-card-section-variant($card-row);
863
+ }
825
864
 
826
- .sticker {
827
- @include clay-sticker-variant(setter(map-get($map, sticker), ()));
828
- }
865
+ .card-title {
866
+ @include clay-link(map-get($map, card-title));
867
+ }
829
868
 
830
- .card {
831
- @include clay-css(setter(map-get($map, card), ()));
832
- }
869
+ .card-subtitle {
870
+ @include clay-link(map-get($map, card-subtitle));
871
+ }
833
872
 
834
- .card-header {
835
- @include clay-card-section-variant(
836
- setter(map-get($map, card-header), ())
837
- );
838
- }
873
+ .card-text {
874
+ @include clay-link(map-get($map, card-text));
875
+ }
839
876
 
840
- .card-body {
841
- @include clay-card-section-variant($card-body);
842
- }
877
+ .card-link {
878
+ @include clay-link(map-get($map, card-link));
879
+ }
843
880
 
844
- .card-footer {
845
- @include clay-card-section-variant(
846
- setter(map-get($map, card-footer), ())
847
- );
848
- }
881
+ .card-divider {
882
+ @include clay-css(map-get($map, card-divider));
883
+ }
849
884
 
850
- .card-row {
851
- @include clay-card-section-variant($card-row);
852
- }
885
+ .card-type-asset-icon {
886
+ @include clay-css($card-type-asset-icon);
853
887
 
854
- .card-title {
855
- @include clay-link(setter(map-get($map, card-title), ()));
856
- }
888
+ .inline-item {
889
+ @include clay-css(
890
+ map-get($card-type-asset-icon, inline-item)
891
+ );
892
+ }
857
893
 
858
- .card-subtitle {
859
- @include clay-link(setter(map-get($map, card-subtitle), ()));
860
- }
894
+ > .lexicon-icon {
895
+ @include clay-css(
896
+ map-get($card-type-asset-icon, lexicon-icon)
897
+ );
898
+ }
861
899
 
862
- .card-text {
863
- @include clay-link(setter(map-get($map, card-text), ()));
864
- }
900
+ > .sticker {
901
+ @include clay-css($card-type-asset-icon-sticker);
865
902
 
866
- .card-link {
867
- @include clay-link(setter(map-get($map, card-link), ()));
868
- }
903
+ .sticker-overlay {
904
+ @include clay-css(
905
+ map-get(
906
+ $card-type-asset-icon-sticker,
907
+ sticker-overlay
908
+ )
909
+ );
910
+ }
911
+ }
912
+ }
869
913
 
870
- .card-divider {
871
- @include clay-css(setter(map-get($map, card-divider), ()));
872
- }
914
+ .form-check-input {
915
+ &:hover {
916
+ ~ .card {
917
+ @include clay-card-variant(
918
+ map-deep-get($map, custom-control, hover, card)
919
+ );
920
+ }
921
+ }
873
922
 
874
- .card-type-asset-icon {
875
- @include clay-css($card-type-asset-icon);
923
+ &:focus {
924
+ ~ .card {
925
+ @include clay-card-variant(
926
+ map-deep-get($map, custom-control, focus, card)
927
+ );
928
+ }
929
+ }
876
930
 
877
- .inline-item {
878
- @include clay-css(
879
- setter(map-get($card-type-asset-icon, inline-item), ())
880
- );
881
- }
931
+ &:active {
932
+ ~ .card {
933
+ @include clay-card-variant(
934
+ map-deep-get($map, custom-control, active, card)
935
+ );
936
+ }
937
+ }
882
938
 
883
- > .lexicon-icon {
884
- @include clay-css(
885
- setter(map-get($card-type-asset-icon, lexicon-icon), ())
886
- );
887
- }
939
+ &[disabled],
940
+ &:disabled {
941
+ ~ .card {
942
+ @include clay-card-variant(
943
+ map-deep-get($map, custom-control, disabled, card)
944
+ );
945
+ }
946
+ }
888
947
 
889
- > .sticker {
890
- @include clay-css($card-type-asset-icon-sticker);
948
+ &:checked {
949
+ ~ .card {
950
+ @include clay-card-variant(
951
+ map-deep-get($map, custom-control, checked, card)
952
+ );
953
+ }
954
+ }
891
955
 
892
- .sticker-overlay {
893
- @include clay-css(
894
- setter(
895
- map-get(
896
- $card-type-asset-icon-sticker,
897
- sticker-overlay
898
- ),
899
- ()
900
- )
901
- );
956
+ &:indeterminate {
957
+ ~ .card {
958
+ @include clay-card-variant(
959
+ map-deep-get(
960
+ $map,
961
+ custom-control,
962
+ indeterminate,
963
+ card
964
+ )
965
+ );
966
+ }
902
967
  }
903
968
  }
904
- }
905
969
 
906
- .dropdown-action {
907
- @include clay-button-variant($dropdown-action);
970
+ .dropdown-action {
971
+ @include clay-button-variant($dropdown-action);
972
+ }
908
973
  }
909
974
  }
910
975
  }
@@ -1405,3 +1470,124 @@
1405
1470
  }
1406
1471
  }
1407
1472
  }
1473
+
1474
+ /// A mixin to help create `form-check-card` variants.
1475
+ /// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
1476
+ /// @example
1477
+ /// (
1478
+ /// enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
1479
+ /// // .form-check-card
1480
+ /// hover: (
1481
+ /// // .form-check-card:hover
1482
+ /// card: (
1483
+ /// // .form-check-card:hover .card
1484
+ /// // @include clay-card-variant();
1485
+ /// ),
1486
+ /// ),
1487
+ /// focus: (
1488
+ /// // .form-check-card.focus
1489
+ /// card: (
1490
+ /// // .form-check-card.focus .card
1491
+ /// // @include clay-card-variant();
1492
+ /// ),
1493
+ /// ),
1494
+ /// active: (
1495
+ /// // .form-check-card.active
1496
+ /// card: (
1497
+ /// // .form-check-card.active .card
1498
+ /// // @include clay-card-variant();
1499
+ /// ),
1500
+ /// ),
1501
+ /// checked: (
1502
+ /// // .form-check-card.checked
1503
+ /// card: (
1504
+ /// // .form-check-card.checked .card
1505
+ /// // @include clay-card-variant();
1506
+ /// ),
1507
+ /// ),
1508
+ /// indeterminate: (
1509
+ /// // .form-check-card.indeterminate
1510
+ /// card: (
1511
+ /// // .form-check-card.indeterminate .card
1512
+ /// // @include clay-card-variant();
1513
+ /// ),
1514
+ /// ),
1515
+ /// card: (
1516
+ /// // .form-check-card .card
1517
+ /// // @include clay-card-variant();
1518
+ /// ),
1519
+ /// form-check-input: (
1520
+ /// // .form-check-card .form-check-input
1521
+ /// ),
1522
+ /// form-check-label: (
1523
+ /// // .form-check-card .form-check-label
1524
+ /// ),
1525
+ /// custom-control: (
1526
+ /// // .form-check-card .custom-control
1527
+ /// // @include clay-custom-control-variant();
1528
+ /// ),
1529
+ /// )
1530
+
1531
+ @mixin clay-form-check-card-variant($map) {
1532
+ @if (type-of($map) == 'map') {
1533
+ $enabled: setter(map-get($map, enabled), true);
1534
+
1535
+ @if ($enabled) {
1536
+ @include clay-css($map);
1537
+
1538
+ &:hover {
1539
+ .card {
1540
+ @include clay-card-variant(map-deep-get($map, hover, card));
1541
+ }
1542
+ }
1543
+
1544
+ &.focus {
1545
+ .card {
1546
+ @include clay-card-variant(map-deep-get($map, focus, card));
1547
+ }
1548
+ }
1549
+
1550
+ &.active {
1551
+ .card {
1552
+ @include clay-card-variant(
1553
+ map-deep-get($map, active, card)
1554
+ );
1555
+ }
1556
+ }
1557
+
1558
+ &.checked {
1559
+ .card {
1560
+ @include clay-card-variant(
1561
+ map-deep-get($map, checked, card)
1562
+ );
1563
+ }
1564
+ }
1565
+
1566
+ &.indeterminate {
1567
+ .card {
1568
+ @include clay-card-variant(
1569
+ map-deep-get($map, indeterminate, card)
1570
+ );
1571
+ }
1572
+ }
1573
+
1574
+ .card {
1575
+ @include clay-card-variant(map-get($map, card));
1576
+ }
1577
+
1578
+ .form-check-input {
1579
+ @include clay-css(map-get($map, form-check-input));
1580
+ }
1581
+
1582
+ .form-check-label {
1583
+ @include clay-css(map-get($map, form-check-label));
1584
+ }
1585
+
1586
+ .custom-control {
1587
+ @include clay-custom-control-variant(
1588
+ map-get($map, custom-control)
1589
+ );
1590
+ }
1591
+ }
1592
+ }
1593
+ }