@clayui/css 3.41.0 → 3.42.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 (51) hide show
  1. package/lib/css/atlas.css +713 -992
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +625 -904
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/bootstrap.css.map +1 -1
  6. package/lib/css/cadmin.css +634 -807
  7. package/lib/css/cadmin.css.map +1 -1
  8. package/lib/images/icons/filter.svg +1 -1
  9. package/lib/images/icons/icons.svg +1 -1
  10. package/package.json +2 -2
  11. package/src/images/icons/filter.svg +1 -1
  12. package/src/scss/_mixins.scss +2 -0
  13. package/src/scss/atlas/variables/_application-bar.scss +32 -12
  14. package/src/scss/atlas/variables/_management-bar.scss +53 -21
  15. package/src/scss/atlas/variables/_navigation-bar.scss +104 -18
  16. package/src/scss/atlas/variables/_pagination.scss +2 -0
  17. package/src/scss/atlas/variables/_sidebar.scss +1 -1
  18. package/src/scss/cadmin/components/_pagination.scss +20 -236
  19. package/src/scss/cadmin/components/_popovers.scss +31 -252
  20. package/src/scss/cadmin/components/_tooltip.scss +29 -167
  21. package/src/scss/cadmin/variables/_management-bar.scss +70 -30
  22. package/src/scss/cadmin/variables/_navigation-bar.scss +118 -22
  23. package/src/scss/cadmin/variables/_pagination.scss +274 -68
  24. package/src/scss/cadmin/variables/_popovers.scss +410 -0
  25. package/src/scss/cadmin/variables/_sidebar.scss +17 -5
  26. package/src/scss/cadmin/variables/_tooltip.scss +299 -0
  27. package/src/scss/components/_button-groups.scss +6 -6
  28. package/src/scss/components/_multi-step-nav.scss +12 -8
  29. package/src/scss/components/_pagination.scss +18 -234
  30. package/src/scss/components/_popovers.scss +30 -237
  31. package/src/scss/components/_toggle-switch.scss +2 -2
  32. package/src/scss/components/_tooltip.scss +29 -164
  33. package/src/scss/functions/_lx-icons-generated.scss +1 -1
  34. package/src/scss/mixins/_buttons.scss +674 -472
  35. package/src/scss/mixins/_close.scss +0 -1
  36. package/src/scss/mixins/_custom-forms.scss +46 -34
  37. package/src/scss/mixins/_dropdown-menu.scss +54 -49
  38. package/src/scss/mixins/_forms.scss +267 -248
  39. package/src/scss/mixins/_links.scss +522 -476
  40. package/src/scss/mixins/_navbar.scss +759 -140
  41. package/src/scss/mixins/_pagination.scss +422 -0
  42. package/src/scss/mixins/_popovers.scss +90 -0
  43. package/src/scss/mixins/_toggle-switch.scss +64 -0
  44. package/src/scss/mixins/_tooltip.scss +70 -0
  45. package/src/scss/variables/_application-bar.scss +18 -6
  46. package/src/scss/variables/_management-bar.scss +45 -12
  47. package/src/scss/variables/_navigation-bar.scss +95 -14
  48. package/src/scss/variables/_pagination.scss +261 -61
  49. package/src/scss/variables/_popovers.scss +392 -0
  50. package/src/scss/variables/_sidebar.scss +17 -5
  51. package/src/scss/variables/_tooltip.scss +299 -0
@@ -250,556 +250,600 @@
250
250
  /// lexicon-icon-margin-top: {Number | String | Null}, // deprecated after 3.9.0
251
251
 
252
252
  @mixin clay-link($map) {
253
- $enabled: setter(map-get($map, enabled), true);
254
-
255
- $base: map-merge(
256
- $map,
257
- (
258
- background-color:
259
- setter(map-get($map, bg), map-get($map, background-color)),
260
- )
261
- );
262
-
263
- $hover: setter(map-get($map, hover), ());
264
- $hover: map-merge(
265
- $hover,
266
- (
267
- background-color:
268
- setter(
269
- map-get($map, hover-bg),
270
- map-get($hover, background-color)
271
- ),
272
- border-color:
273
- setter(
274
- map-get($map, hover-border-color),
275
- map-get($hover, border-color)
276
- ),
277
- color: setter(map-get($map, hover-color), map-get($hover, color)),
278
- opacity:
279
- setter(map-get($map, hover-opacity), map-get($hover, opacity)),
280
- text-decoration:
281
- setter(
282
- map-get($map, hover-text-decoration),
283
- map-get($hover, text-decoration)
284
- ),
285
- z-index:
286
- setter(map-get($map, hover-z-index), map-get($hover, z-index)),
287
- )
288
- );
289
-
290
- $focus: setter(map-get($map, focus), ());
291
- $focus: map-merge(
292
- $focus,
293
- (
294
- background-color:
295
- setter(
296
- map-get($map, focus-bg),
297
- map-get($focus, background-color)
298
- ),
299
- border-color:
300
- setter(
301
- map-get($map, focus-border-color),
302
- map-get($focus, border-color)
303
- ),
304
- border-radius:
305
- setter(
306
- map-get($map, focus-border-radius),
307
- map-get($focus, border-radius)
308
- ),
309
- box-shadow:
310
- setter(
311
- map-get($map, focus-box-shadow),
312
- map-get($focus, box-shadow)
313
- ),
314
- color: setter(map-get($map, focus-color), map-get($focus, color)),
315
- opacity:
316
- setter(map-get($map, focus-opacity), map-get($focus, opacity)),
317
- outline:
318
- setter(map-get($map, focus-outline), map-get($focus, outline)),
319
- text-decoration:
320
- setter(
321
- map-get($map, focus-text-decoration),
322
- map-get($focus, text-decoration)
323
- ),
324
- z-index:
325
- setter(map-get($map, focus-z-index), map-get($focus, z-index)),
326
- )
327
- );
328
-
329
- $active: setter(map-get($map, active), ());
330
- $active: map-merge(
331
- $active,
332
- (
333
- background-color:
334
- setter(
335
- map-get($map, active-bg),
336
- map-get($active, background-color)
337
- ),
338
- border-color:
339
- setter(
340
- map-get($map, active-border-color),
341
- map-get($active, border-color)
342
- ),
343
- color: setter(map-get($map, active-color), map-get($active, color)),
344
- font-weight:
345
- setter(
346
- map-get($map, active-font-weight),
347
- map-get($active, font-weight)
348
- ),
349
- z-index:
350
- setter(map-get($map, active-z-index), map-get($active, z-index)),
351
- )
352
- );
353
-
354
- $active-class: setter(map-get($map, active-class), ());
355
- $active-class: map-merge(
356
- $active-class,
357
- (
358
- background-color:
359
- setter(
360
- map-get($map, active-class-bg),
361
- map-get($active-class, background-color),
362
- map-get($active, background-color)
363
- ),
364
- border-color:
365
- setter(
366
- map-get($map, active-class-border-color),
367
- map-get($active-class, border-color),
368
- map-get($active, border-color)
369
- ),
370
- color:
371
- setter(
372
- map-get($map, active-class-color),
373
- map-get($active-class, color),
374
- map-get($active, color)
375
- ),
376
- font-weight:
377
- setter(
378
- map-get($map, active-class-font-weight),
379
- map-get($active-class, font-weight),
380
- map-get($active, font-weight)
381
- ),
382
- z-index:
383
- setter(
384
- map-get($map, active-class-z-index),
385
- map-get($active-class, z-index),
386
- map-get($active, z-index)
387
- ),
388
- )
389
- );
390
-
391
- $disabled: setter(map-get($map, disabled), ());
392
- $disabled: map-merge(
393
- $disabled,
394
- (
395
- background-color:
396
- setter(
397
- map-get($map, disabled-bg),
398
- map-get($disabled, background-color)
399
- ),
400
- border-color:
401
- setter(
402
- map-get($map, disabled-border-color),
403
- map-get($disabled, border-color)
404
- ),
405
- box-shadow:
406
- setter(
407
- map-get($map, disabled-box-shadow),
408
- map-get($disabled, box-shadow)
409
- ),
410
- color:
411
- setter(map-get($map, disabled-color), map-get($disabled, color)),
412
- cursor:
413
- setter(
414
- map-get($map, disabled-cursor),
415
- map-get($disabled, cursor)
416
- ),
417
- opacity:
418
- setter(
419
- map-get($map, disabled-opacity),
420
- map-get($disabled, opacity)
421
- ),
422
- pointer-events:
423
- setter(
424
- map-get($map, disabled-pointer-events),
425
- map-get($disabled, pointer-events)
426
- ),
427
- text-decoration:
428
- setter(
429
- map-get($map, disabled-text-decoration),
430
- map-get($disabled, text-decoration)
431
- ),
432
- )
433
- );
434
-
435
- $disabled-active: setter(map-get($disabled, active), ());
436
- $disabled-active: map-deep-merge(
437
- $disabled-active,
438
- map-get($map, disabled-active)
439
- );
440
- $disabled-active: map-deep-merge(
441
- $disabled-active,
442
- (
443
- pointer-events:
444
- setter(
445
- map-get($map, disabled-active-pointer-events),
446
- map-get($disabled-active, pointer-events)
447
- ),
448
- )
449
- );
450
-
451
- $show: setter(map-get($map, show), ());
452
- $show: map-merge($active-class, $show);
453
-
454
- $btn-focus: setter(map-get($map, btn-focus), ());
455
- $btn-focus: map-merge(
456
- $btn-focus,
457
- (
458
- box-shadow:
459
- setter(
460
- map-get($map, btn-focus-box-shadow),
461
- map-get($btn-focus, box-shadow)
462
- ),
463
- outline:
464
- setter(
465
- map-get($map, btn-focus-outline),
466
- map-get($btn-focus, outline)
467
- ),
468
- )
469
- );
470
-
471
- $lexicon-icon: setter(map-get($map, lexicon-icon), ());
472
- $lexicon-icon: map-merge(
473
- $lexicon-icon,
474
- (
475
- font-size:
476
- setter(
477
- map-get($map, lexicon-icon-font-size),
478
- map-get($lexicon-icon, font-size)
479
- ),
480
- margin-bottom:
481
- setter(
482
- map-get($map, lexicon-icon-margin-bottom),
483
- map-get($lexicon-icon, margin-bottom)
484
- ),
485
- margin-left:
486
- setter(
487
- map-get($map, lexicon-icon-margin-left),
488
- map-get($lexicon-icon, margin-left)
489
- ),
490
- margin-right:
491
- setter(
492
- map-get($map, lexicon-icon-margin-right),
493
- map-get($lexicon-icon, margin-right)
494
- ),
495
- margin-top:
496
- setter(
497
- map-get($map, lexicon-icon-margin-top),
498
- map-get($lexicon-icon, margin-top)
499
- ),
500
- )
501
- );
502
-
503
- $c-inner: setter(map-get($map, c-inner), ());
504
- $c-inner: map-merge(
505
- (
506
- enabled:
507
- setter(
508
- if(
509
- variable-exists(enable-c-inner),
510
- $enable-c-inner,
511
- $cadmin-enable-c-inner
512
- ),
513
- true
514
- ),
515
- margin-bottom: math-sign(map-get($map, padding-bottom)),
516
- margin-left: math-sign(map-get($map, padding-left)),
517
- margin-right: math-sign(map-get($map, padding-right)),
518
- margin-top: math-sign(map-get($map, padding-top)),
519
- ),
520
- $c-inner
521
- );
522
-
523
- @if ($enabled) {
524
- @include clay-css($base);
525
-
526
- &::before {
527
- @include clay-css(map-get($map, before));
528
- }
529
-
530
- &::after {
531
- @include clay-css(map-get($map, after));
532
- }
253
+ @if (type-of($map) == 'map') {
254
+ $enabled: setter(map-get($map, enabled), true);
255
+
256
+ $base: map-merge(
257
+ $map,
258
+ (
259
+ background-color:
260
+ setter(map-get($map, bg), map-get($map, background-color)),
261
+ )
262
+ );
263
+
264
+ $hover: setter(map-get($map, hover), ());
265
+ $hover: map-merge(
266
+ $hover,
267
+ (
268
+ background-color:
269
+ setter(
270
+ map-get($map, hover-bg),
271
+ map-get($hover, background-color)
272
+ ),
273
+ border-color:
274
+ setter(
275
+ map-get($map, hover-border-color),
276
+ map-get($hover, border-color)
277
+ ),
278
+ color:
279
+ setter(map-get($map, hover-color), map-get($hover, color)),
280
+ opacity:
281
+ setter(
282
+ map-get($map, hover-opacity),
283
+ map-get($hover, opacity)
284
+ ),
285
+ text-decoration:
286
+ setter(
287
+ map-get($map, hover-text-decoration),
288
+ map-get($hover, text-decoration)
289
+ ),
290
+ z-index:
291
+ setter(
292
+ map-get($map, hover-z-index),
293
+ map-get($hover, z-index)
294
+ ),
295
+ )
296
+ );
297
+
298
+ $focus: setter(map-get($map, focus), ());
299
+ $focus: map-merge(
300
+ $focus,
301
+ (
302
+ background-color:
303
+ setter(
304
+ map-get($map, focus-bg),
305
+ map-get($focus, background-color)
306
+ ),
307
+ border-color:
308
+ setter(
309
+ map-get($map, focus-border-color),
310
+ map-get($focus, border-color)
311
+ ),
312
+ border-radius:
313
+ setter(
314
+ map-get($map, focus-border-radius),
315
+ map-get($focus, border-radius)
316
+ ),
317
+ box-shadow:
318
+ setter(
319
+ map-get($map, focus-box-shadow),
320
+ map-get($focus, box-shadow)
321
+ ),
322
+ color:
323
+ setter(map-get($map, focus-color), map-get($focus, color)),
324
+ opacity:
325
+ setter(
326
+ map-get($map, focus-opacity),
327
+ map-get($focus, opacity)
328
+ ),
329
+ outline:
330
+ setter(
331
+ map-get($map, focus-outline),
332
+ map-get($focus, outline)
333
+ ),
334
+ text-decoration:
335
+ setter(
336
+ map-get($map, focus-text-decoration),
337
+ map-get($focus, text-decoration)
338
+ ),
339
+ z-index:
340
+ setter(
341
+ map-get($map, focus-z-index),
342
+ map-get($focus, z-index)
343
+ ),
344
+ )
345
+ );
346
+
347
+ $active: setter(map-get($map, active), ());
348
+ $active: map-merge(
349
+ $active,
350
+ (
351
+ background-color:
352
+ setter(
353
+ map-get($map, active-bg),
354
+ map-get($active, background-color)
355
+ ),
356
+ border-color:
357
+ setter(
358
+ map-get($map, active-border-color),
359
+ map-get($active, border-color)
360
+ ),
361
+ color:
362
+ setter(
363
+ map-get($map, active-color),
364
+ map-get($active, color)
365
+ ),
366
+ font-weight:
367
+ setter(
368
+ map-get($map, active-font-weight),
369
+ map-get($active, font-weight)
370
+ ),
371
+ z-index:
372
+ setter(
373
+ map-get($map, active-z-index),
374
+ map-get($active, z-index)
375
+ ),
376
+ )
377
+ );
378
+
379
+ $active-class: setter(map-get($map, active-class), ());
380
+ $active-class: map-merge(
381
+ $active-class,
382
+ (
383
+ background-color:
384
+ setter(
385
+ map-get($map, active-class-bg),
386
+ map-get($active-class, background-color),
387
+ map-get($active, background-color)
388
+ ),
389
+ border-color:
390
+ setter(
391
+ map-get($map, active-class-border-color),
392
+ map-get($active-class, border-color),
393
+ map-get($active, border-color)
394
+ ),
395
+ color:
396
+ setter(
397
+ map-get($map, active-class-color),
398
+ map-get($active-class, color),
399
+ map-get($active, color)
400
+ ),
401
+ font-weight:
402
+ setter(
403
+ map-get($map, active-class-font-weight),
404
+ map-get($active-class, font-weight),
405
+ map-get($active, font-weight)
406
+ ),
407
+ z-index:
408
+ setter(
409
+ map-get($map, active-class-z-index),
410
+ map-get($active-class, z-index),
411
+ map-get($active, z-index)
412
+ ),
413
+ )
414
+ );
415
+
416
+ $disabled: setter(map-get($map, disabled), ());
417
+ $disabled: map-merge(
418
+ $disabled,
419
+ (
420
+ background-color:
421
+ setter(
422
+ map-get($map, disabled-bg),
423
+ map-get($disabled, background-color)
424
+ ),
425
+ border-color:
426
+ setter(
427
+ map-get($map, disabled-border-color),
428
+ map-get($disabled, border-color)
429
+ ),
430
+ box-shadow:
431
+ setter(
432
+ map-get($map, disabled-box-shadow),
433
+ map-get($disabled, box-shadow)
434
+ ),
435
+ color:
436
+ setter(
437
+ map-get($map, disabled-color),
438
+ map-get($disabled, color)
439
+ ),
440
+ cursor:
441
+ setter(
442
+ map-get($map, disabled-cursor),
443
+ map-get($disabled, cursor)
444
+ ),
445
+ opacity:
446
+ setter(
447
+ map-get($map, disabled-opacity),
448
+ map-get($disabled, opacity)
449
+ ),
450
+ pointer-events:
451
+ setter(
452
+ map-get($map, disabled-pointer-events),
453
+ map-get($disabled, pointer-events)
454
+ ),
455
+ text-decoration:
456
+ setter(
457
+ map-get($map, disabled-text-decoration),
458
+ map-get($disabled, text-decoration)
459
+ ),
460
+ )
461
+ );
462
+
463
+ $disabled-active: setter(map-get($disabled, active), ());
464
+ $disabled-active: map-deep-merge(
465
+ $disabled-active,
466
+ map-get($map, disabled-active)
467
+ );
468
+ $disabled-active: map-deep-merge(
469
+ $disabled-active,
470
+ (
471
+ pointer-events:
472
+ setter(
473
+ map-get($map, disabled-active-pointer-events),
474
+ map-get($disabled-active, pointer-events)
475
+ ),
476
+ )
477
+ );
478
+
479
+ $show: setter(map-get($map, show), ());
480
+ $show: map-merge($active-class, $show);
481
+
482
+ $btn-focus: setter(map-get($map, btn-focus), ());
483
+ $btn-focus: map-merge(
484
+ $btn-focus,
485
+ (
486
+ box-shadow:
487
+ setter(
488
+ map-get($map, btn-focus-box-shadow),
489
+ map-get($btn-focus, box-shadow)
490
+ ),
491
+ outline:
492
+ setter(
493
+ map-get($map, btn-focus-outline),
494
+ map-get($btn-focus, outline)
495
+ ),
496
+ )
497
+ );
498
+
499
+ $lexicon-icon: setter(map-get($map, lexicon-icon), ());
500
+ $lexicon-icon: map-merge(
501
+ $lexicon-icon,
502
+ (
503
+ font-size:
504
+ setter(
505
+ map-get($map, lexicon-icon-font-size),
506
+ map-get($lexicon-icon, font-size)
507
+ ),
508
+ margin-bottom:
509
+ setter(
510
+ map-get($map, lexicon-icon-margin-bottom),
511
+ map-get($lexicon-icon, margin-bottom)
512
+ ),
513
+ margin-left:
514
+ setter(
515
+ map-get($map, lexicon-icon-margin-left),
516
+ map-get($lexicon-icon, margin-left)
517
+ ),
518
+ margin-right:
519
+ setter(
520
+ map-get($map, lexicon-icon-margin-right),
521
+ map-get($lexicon-icon, margin-right)
522
+ ),
523
+ margin-top:
524
+ setter(
525
+ map-get($map, lexicon-icon-margin-top),
526
+ map-get($lexicon-icon, margin-top)
527
+ ),
528
+ )
529
+ );
530
+
531
+ $c-inner: setter(map-get($map, c-inner), ());
532
+ $c-inner: map-merge(
533
+ (
534
+ enabled:
535
+ setter(
536
+ if(
537
+ variable-exists(enable-c-inner),
538
+ $enable-c-inner,
539
+ $cadmin-enable-c-inner
540
+ ),
541
+ true
542
+ ),
543
+ margin-bottom: math-sign(map-get($map, padding-bottom)),
544
+ margin-left: math-sign(map-get($map, padding-left)),
545
+ margin-right: math-sign(map-get($map, padding-right)),
546
+ margin-top: math-sign(map-get($map, padding-top)),
547
+ ),
548
+ $c-inner
549
+ );
533
550
 
534
- &:link {
535
- @include clay-css(map-get($map, link));
551
+ @if ($enabled) {
552
+ @include clay-css($base);
536
553
 
537
554
  &::before {
538
- @include clay-css(map-deep-get($map, link, before));
555
+ @include clay-css(map-get($map, before));
539
556
  }
540
557
 
541
558
  &::after {
542
- @include clay-css(map-deep-get($map, link, after));
559
+ @include clay-css(map-get($map, after));
543
560
  }
544
561
 
545
- .inline-item {
546
- @include clay-css(map-deep-get($map, link, inline-item));
547
- }
562
+ &:link {
563
+ @include clay-css(map-get($map, link));
548
564
 
549
- .inline-item-before {
550
- @include clay-css(map-deep-get($map, link, inline-item-before));
551
- }
565
+ &::before {
566
+ @include clay-css(map-deep-get($map, link, before));
567
+ }
552
568
 
553
- .inline-item-middle {
554
- @include clay-css(map-deep-get($map, link, inline-item-middle));
555
- }
569
+ &::after {
570
+ @include clay-css(map-deep-get($map, link, after));
571
+ }
556
572
 
557
- .inline-item-after {
558
- @include clay-css(map-deep-get($map, link, inline-item-after));
559
- }
560
- }
573
+ .inline-item {
574
+ @include clay-css(map-deep-get($map, link, inline-item));
575
+ }
561
576
 
562
- &:visited {
563
- @include clay-css(map-get($map, visited));
577
+ .inline-item-before {
578
+ @include clay-css(
579
+ map-deep-get($map, link, inline-item-before)
580
+ );
581
+ }
564
582
 
565
- &::before {
566
- @include clay-css(map-deep-get($map, visited, before));
567
- }
583
+ .inline-item-middle {
584
+ @include clay-css(
585
+ map-deep-get($map, link, inline-item-middle)
586
+ );
587
+ }
568
588
 
569
- &::after {
570
- @include clay-css(map-deep-get($map, visited, after));
589
+ .inline-item-after {
590
+ @include clay-css(
591
+ map-deep-get($map, link, inline-item-after)
592
+ );
593
+ }
571
594
  }
572
595
 
573
- .inline-item {
574
- @include clay-css(map-deep-get($map, visited, inline-item));
575
- }
596
+ &:visited {
597
+ @include clay-css(map-get($map, visited));
576
598
 
577
- .inline-item-before {
578
- @include clay-css(
579
- map-deep-get($map, visited, inline-item-before)
580
- );
581
- }
599
+ &::before {
600
+ @include clay-css(map-deep-get($map, visited, before));
601
+ }
582
602
 
583
- .inline-item-middle {
584
- @include clay-css(
585
- map-deep-get($map, visited, inline-item-middle)
586
- );
587
- }
603
+ &::after {
604
+ @include clay-css(map-deep-get($map, visited, after));
605
+ }
588
606
 
589
- .inline-item-after {
590
- @include clay-css(
591
- map-deep-get($map, visited, inline-item-after)
592
- );
593
- }
594
- }
607
+ .inline-item {
608
+ @include clay-css(map-deep-get($map, visited, inline-item));
609
+ }
595
610
 
596
- &:hover {
597
- @include clay-css($hover);
611
+ .inline-item-before {
612
+ @include clay-css(
613
+ map-deep-get($map, visited, inline-item-before)
614
+ );
615
+ }
598
616
 
599
- &::before {
600
- @include clay-css(map-deep-get($map, hover, before));
601
- }
617
+ .inline-item-middle {
618
+ @include clay-css(
619
+ map-deep-get($map, visited, inline-item-middle)
620
+ );
621
+ }
602
622
 
603
- &::after {
604
- @include clay-css(map-deep-get($map, hover, after));
623
+ .inline-item-after {
624
+ @include clay-css(
625
+ map-deep-get($map, visited, inline-item-after)
626
+ );
627
+ }
605
628
  }
606
629
 
607
- .inline-item {
608
- @include clay-css(map-get($hover, inline-item));
609
- }
630
+ &:hover {
631
+ @include clay-css($hover);
610
632
 
611
- .inline-item-before {
612
- @include clay-css(map-get($hover, inline-item-before));
613
- }
633
+ &::before {
634
+ @include clay-css(map-deep-get($map, hover, before));
635
+ }
614
636
 
615
- .inline-item-middle {
616
- @include clay-css(map-get($hover, inline-item-middle));
617
- }
637
+ &::after {
638
+ @include clay-css(map-deep-get($map, hover, after));
639
+ }
618
640
 
619
- .inline-item-after {
620
- @include clay-css(map-get($hover, inline-item-after));
621
- }
622
- }
641
+ .inline-item {
642
+ @include clay-css(map-get($hover, inline-item));
643
+ }
623
644
 
624
- &:focus {
625
- @include clay-css($focus);
645
+ .inline-item-before {
646
+ @include clay-css(map-get($hover, inline-item-before));
647
+ }
626
648
 
627
- &::before {
628
- @include clay-css(map-deep-get($map, focus, before));
629
- }
649
+ .inline-item-middle {
650
+ @include clay-css(map-get($hover, inline-item-middle));
651
+ }
630
652
 
631
- &::after {
632
- @include clay-css(map-deep-get($map, focus, after));
653
+ .inline-item-after {
654
+ @include clay-css(map-get($hover, inline-item-after));
655
+ }
633
656
  }
634
657
 
635
- .inline-item {
636
- @include clay-css(map-get($focus, inline-item));
637
- }
658
+ &:focus {
659
+ @include clay-css($focus);
638
660
 
639
- .inline-item-before {
640
- @include clay-css(map-get($focus, inline-item-before));
641
- }
661
+ &::before {
662
+ @include clay-css(map-deep-get($map, focus, before));
663
+ }
642
664
 
643
- .inline-item-middle {
644
- @include clay-css(map-get($focus, inline-item-middle));
645
- }
665
+ &::after {
666
+ @include clay-css(map-deep-get($map, focus, after));
667
+ }
646
668
 
647
- .inline-item-after {
648
- @include clay-css(map-get($focus, inline-item-after));
649
- }
650
- }
669
+ .inline-item {
670
+ @include clay-css(map-get($focus, inline-item));
671
+ }
651
672
 
652
- &:active {
653
- @include clay-css($active);
673
+ .inline-item-before {
674
+ @include clay-css(map-get($focus, inline-item-before));
675
+ }
654
676
 
655
- &::before {
656
- @include clay-css(map-deep-get($map, active, before));
657
- }
677
+ .inline-item-middle {
678
+ @include clay-css(map-get($focus, inline-item-middle));
679
+ }
658
680
 
659
- &::after {
660
- @include clay-css(map-deep-get($map, active, after));
681
+ .inline-item-after {
682
+ @include clay-css(map-get($focus, inline-item-after));
683
+ }
661
684
  }
662
685
 
663
- .inline-item {
664
- @include clay-css(map-get($active, inline-item));
665
- }
686
+ &:active {
687
+ @include clay-css($active);
666
688
 
667
- .inline-item-before {
668
- @include clay-css(map-get($active, inline-item-before));
669
- }
689
+ &::before {
690
+ @include clay-css(map-deep-get($map, active, before));
691
+ }
670
692
 
671
- .inline-item-middle {
672
- @include clay-css(map-get($active, inline-item-middle));
673
- }
693
+ &::after {
694
+ @include clay-css(map-deep-get($map, active, after));
695
+ }
674
696
 
675
- .inline-item-after {
676
- @include clay-css(map-get($active, inline-item-after));
677
- }
678
- }
697
+ .inline-item {
698
+ @include clay-css(map-get($active, inline-item));
699
+ }
679
700
 
680
- &.active {
681
- @include clay-css($active-class);
701
+ .inline-item-before {
702
+ @include clay-css(map-get($active, inline-item-before));
703
+ }
682
704
 
683
- &::before {
684
- @include clay-css(map-deep-get($map, active-class, before));
685
- }
705
+ .inline-item-middle {
706
+ @include clay-css(map-get($active, inline-item-middle));
707
+ }
686
708
 
687
- &::after {
688
- @include clay-css(map-deep-get($map, active-class, after));
709
+ .inline-item-after {
710
+ @include clay-css(map-get($active, inline-item-after));
711
+ }
689
712
  }
690
713
 
691
- .inline-item {
692
- @include clay-css(map-get($active-class, inline-item));
693
- }
714
+ &.active {
715
+ @include clay-css($active-class);
694
716
 
695
- .inline-item-before {
696
- @include clay-css(map-get($active-class, inline-item-before));
697
- }
717
+ &::before {
718
+ @include clay-css(map-deep-get($map, active-class, before));
719
+ }
698
720
 
699
- .inline-item-middle {
700
- @include clay-css(map-get($active-class, inline-item-middle));
701
- }
721
+ &::after {
722
+ @include clay-css(map-deep-get($map, active-class, after));
723
+ }
702
724
 
703
- .inline-item-after {
704
- @include clay-css(map-get($active-class, inline-item-after));
705
- }
706
- }
725
+ .inline-item {
726
+ @include clay-css(map-get($active-class, inline-item));
727
+ }
707
728
 
708
- &:disabled,
709
- &.disabled {
710
- @include clay-css($disabled);
729
+ .inline-item-before {
730
+ @include clay-css(
731
+ map-get($active-class, inline-item-before)
732
+ );
733
+ }
711
734
 
712
- &::before {
713
- @include clay-css(map-deep-get($map, disabled, before));
714
- }
735
+ .inline-item-middle {
736
+ @include clay-css(
737
+ map-get($active-class, inline-item-middle)
738
+ );
739
+ }
715
740
 
716
- &::after {
717
- @include clay-css(map-deep-get($map, disabled, after));
741
+ .inline-item-after {
742
+ @include clay-css(
743
+ map-get($active-class, inline-item-after)
744
+ );
745
+ }
718
746
  }
719
747
 
720
- &:active {
721
- @include clay-css($disabled-active);
748
+ &:disabled,
749
+ &.disabled {
750
+ @include clay-css($disabled);
722
751
 
723
752
  &::before {
724
- @include clay-css(
725
- map-deep-get($map, disabled, active, before)
726
- );
753
+ @include clay-css(map-deep-get($map, disabled, before));
727
754
  }
728
755
 
729
756
  &::after {
730
- @include clay-css(
731
- map-deep-get($map, disabled, active, after)
732
- );
757
+ @include clay-css(map-deep-get($map, disabled, after));
733
758
  }
734
- }
735
759
 
736
- .inline-item {
737
- @include clay-css(map-get($disabled, inline-item));
738
- }
760
+ &:active {
761
+ @include clay-css($disabled-active);
739
762
 
740
- .inline-item-before {
741
- @include clay-css(map-get($disabled, inline-item-before));
742
- }
763
+ &::before {
764
+ @include clay-css(
765
+ map-deep-get($map, disabled, active, before)
766
+ );
767
+ }
743
768
 
744
- .inline-item-middle {
745
- @include clay-css(map-get($disabled, inline-item-middle));
746
- }
769
+ &::after {
770
+ @include clay-css(
771
+ map-deep-get($map, disabled, active, after)
772
+ );
773
+ }
774
+ }
747
775
 
748
- .inline-item-after {
749
- @include clay-css(map-get($disabled, inline-item-after));
776
+ .inline-item {
777
+ @include clay-css(map-get($disabled, inline-item));
778
+ }
779
+
780
+ .inline-item-before {
781
+ @include clay-css(map-get($disabled, inline-item-before));
782
+ }
783
+
784
+ .inline-item-middle {
785
+ @include clay-css(map-get($disabled, inline-item-middle));
786
+ }
787
+
788
+ .inline-item-after {
789
+ @include clay-css(map-get($disabled, inline-item-after));
790
+ }
750
791
  }
751
- }
752
792
 
753
- &[type] {
754
- &:focus {
755
- @include clay-css($btn-focus);
793
+ &[type] {
794
+ &:focus {
795
+ @include clay-css($btn-focus);
796
+ }
756
797
  }
757
- }
758
798
 
759
- &[aria-expanded='true'],
760
- &.show,
761
- .show > & {
762
- @include clay-css($show);
799
+ &[aria-expanded='true'],
800
+ &.show {
801
+ @include clay-css($show);
763
802
 
764
- &::before {
765
- @include clay-css(map-deep-get($map, show, before));
766
- }
803
+ &::before {
804
+ @include clay-css(map-deep-get($map, show, before));
805
+ }
767
806
 
768
- &::after {
769
- @include clay-css(map-deep-get($map, show, after));
807
+ &::after {
808
+ @include clay-css(map-deep-get($map, show, after));
809
+ }
770
810
  }
771
- }
772
811
 
773
- @if (map-get($c-inner, enabled)) {
774
- > .c-inner {
775
- @include clay-css($c-inner);
812
+ @if (map-get($c-inner, enabled)) {
813
+ > .c-inner {
814
+ @include clay-css($c-inner);
815
+ }
776
816
  }
777
- }
778
817
 
779
- .inline-item {
780
- @include clay-css(map-get($map, inline-item));
781
- }
818
+ .inline-item {
819
+ @include clay-css(map-get($map, inline-item));
820
+ }
782
821
 
783
- .inline-item-before {
784
- @include clay-css(map-get($map, inline-item-before));
785
- }
822
+ .inline-item-before {
823
+ @include clay-css(map-get($map, inline-item-before));
824
+ }
786
825
 
787
- .inline-item-middle {
788
- @include clay-css(map-get($map, inline-item-middle));
826
+ .inline-item-middle {
827
+ @include clay-css(map-get($map, inline-item-middle));
789
828
 
790
- + .inline-item-middle {
791
- @include clay-css(
792
- map-deep-get($map, inline-item-middle, inline-item-middle)
793
- );
829
+ + .inline-item-middle {
830
+ @include clay-css(
831
+ map-deep-get(
832
+ $map,
833
+ inline-item-middle,
834
+ inline-item-middle
835
+ )
836
+ );
837
+ }
794
838
  }
795
- }
796
839
 
797
- .inline-item-after {
798
- @include clay-css(map-get($map, inline-item-after));
799
- }
840
+ .inline-item-after {
841
+ @include clay-css(map-get($map, inline-item-after));
842
+ }
800
843
 
801
- .lexicon-icon {
802
- @include clay-css($lexicon-icon);
844
+ .lexicon-icon {
845
+ @include clay-css($lexicon-icon);
846
+ }
803
847
  }
804
848
  }
805
849
  }
@@ -817,18 +861,20 @@
817
861
  /// - Add @link to documentation
818
862
 
819
863
  @mixin clay-text-typography($map) {
820
- $enabled: setter(map-get($map, enabled), true);
864
+ @if (type-of($map) == 'map') {
865
+ $enabled: setter(map-get($map, enabled), true);
821
866
 
822
- @if ($enabled) {
823
- $clay-link: setter(map-get($map, clay-link), ());
867
+ @if ($enabled) {
868
+ $clay-link: setter(map-get($map, clay-link), ());
824
869
 
825
- $link: setter(map-get($map, link), ());
826
- $link: map-merge($link, $clay-link);
870
+ $link: setter(map-get($map, link), ());
871
+ $link: map-merge($link, $clay-link);
827
872
 
828
- @include clay-css($map);
873
+ @include clay-css($map);
829
874
 
830
- a {
831
- @include clay-link($link);
875
+ a {
876
+ @include clay-link($link);
877
+ }
832
878
  }
833
879
  }
834
880
  }