igniteui-angular 17.2.0-rc.1 → 17.2.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 (44) hide show
  1. package/esm2022/lib/calendar/month-picker/month-picker.component.mjs +224 -6
  2. package/esm2022/lib/core/utils.mjs +3 -1
  3. package/esm2022/lib/directives/button/button-base.mjs +39 -2
  4. package/esm2022/lib/directives/button/button.directive.mjs +2 -1
  5. package/esm2022/lib/directives/toggle/toggle.directive.mjs +18 -6
  6. package/fesm2022/igniteui-angular.mjs +276 -8
  7. package/fesm2022/igniteui-angular.mjs.map +1 -1
  8. package/lib/calendar/month-picker/month-picker.component.d.ts +83 -2
  9. package/lib/core/styles/components/button/_button-component.scss +16 -0
  10. package/lib/core/styles/components/button/_button-theme.scss +203 -273
  11. package/lib/core/styles/components/button-group/_button-group-theme.scss +314 -85
  12. package/lib/core/styles/components/icon-button/_icon-button-theme.scss +27 -51
  13. package/lib/core/styles/components/overlay/_overlay-component.scss +4 -0
  14. package/lib/core/styles/components/overlay/_overlay-theme.scss +17 -1
  15. package/lib/core/utils.d.ts +2 -0
  16. package/lib/directives/button/button-base.d.ts +21 -0
  17. package/lib/directives/toggle/toggle.directive.d.ts +5 -3
  18. package/package.json +3 -3
  19. package/styles/igniteui-angular-dark.css +1 -1
  20. package/styles/igniteui-angular.css +1 -1
  21. package/styles/igniteui-bootstrap-dark.css +1 -1
  22. package/styles/igniteui-bootstrap-light.css +1 -1
  23. package/styles/igniteui-dark-green.css +1 -1
  24. package/styles/igniteui-fluent-dark-excel.css +1 -1
  25. package/styles/igniteui-fluent-dark-word.css +1 -1
  26. package/styles/igniteui-fluent-dark.css +1 -1
  27. package/styles/igniteui-fluent-light-excel.css +1 -1
  28. package/styles/igniteui-fluent-light-word.css +1 -1
  29. package/styles/igniteui-fluent-light.css +1 -1
  30. package/styles/igniteui-indigo-dark.css +1 -1
  31. package/styles/igniteui-indigo-light.css +1 -1
  32. package/styles/maps/igniteui-angular-dark.css.map +1 -1
  33. package/styles/maps/igniteui-angular.css.map +1 -1
  34. package/styles/maps/igniteui-bootstrap-dark.css.map +1 -1
  35. package/styles/maps/igniteui-bootstrap-light.css.map +1 -1
  36. package/styles/maps/igniteui-dark-green.css.map +1 -1
  37. package/styles/maps/igniteui-fluent-dark-excel.css.map +1 -1
  38. package/styles/maps/igniteui-fluent-dark-word.css.map +1 -1
  39. package/styles/maps/igniteui-fluent-dark.css.map +1 -1
  40. package/styles/maps/igniteui-fluent-light-excel.css.map +1 -1
  41. package/styles/maps/igniteui-fluent-light-word.css.map +1 -1
  42. package/styles/maps/igniteui-fluent-light.css.map +1 -1
  43. package/styles/maps/igniteui-indigo-dark.css.map +1 -1
  44. package/styles/maps/igniteui-indigo-light.css.map +1 -1
package/lib/core/styles/components/button/_button-theme.scss CHANGED
@@ -400,14 +400,14 @@
400
400
  $contained-shadow--focus: map.get((
401
401
  material: var-get($contained-theme, 'focus-shadow'),
402
402
  fluent: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
403
- bootstrap: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
403
+ bootstrap: 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color'),
404
404
  indigo-design: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color')
405
405
  ), $variant);
406
406
 
407
407
  $contained-shadow--active: map.get((
408
408
  material: var-get($contained-theme, 'active-shadow'),
409
409
  fluent: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
410
- bootstrap: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
410
+ bootstrap: 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color'),
411
411
  indigo-design: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color')
412
412
  ), $variant);
413
413
 
@@ -428,17 +428,30 @@
428
428
  $fab-shadow--focus: map.get((
429
429
  material: var-get($fab-theme, 'focus-shadow'),
430
430
  fluent: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
431
- bootstrap: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
431
+ bootstrap: 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'),
432
432
  indigo-design: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color')
433
433
  ), $variant);
434
434
 
435
435
  $fab-shadow--active: map.get((
436
436
  material: var-get($fab-theme, 'active-shadow'),
437
437
  fluent: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
438
- bootstrap: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
438
+ bootstrap: 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'),
439
439
  indigo-design: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color')
440
440
  ), $variant);
441
441
 
442
+ %fluent-border {
443
+ &::after {
444
+ $btn-indent: rem(2px);
445
+ content: '';
446
+ position: absolute;
447
+ top: $btn-indent;
448
+ inset-inline-start: $btn-indent;
449
+ pointer-events: none;
450
+ width: calc(100% - (#{$btn-indent} * 2));
451
+ height: calc(100% - (#{$btn-indent} * 2));
452
+ }
453
+ }
454
+
442
455
  %igx-button-display {
443
456
  @include sizable();
444
457
 
@@ -473,27 +486,9 @@
473
486
  );
474
487
 
475
488
  @if $variant == 'indigo-design' {
476
- border: none;
477
489
  min-width: rem(28px);
478
490
  }
479
491
 
480
- @if ($variant == 'fluent') {
481
- border: none;
482
-
483
- &:focus-visible {
484
- &::after {
485
- $btn-indent: rem(3px);
486
- content: '';
487
- position: absolute;
488
- top: $btn-indent;
489
- inset-inline-start: $btn-indent;
490
- pointer-events: none;
491
- width: calc(100% - (#{$btn-indent} * 2));
492
- height: calc(100% - (#{$btn-indent} * 2));
493
- }
494
- }
495
- }
496
-
497
492
  igx-icon {
498
493
  --component-size: var(--ig-size, var(--ig-size-large));
499
494
  display: flex;
@@ -546,74 +541,81 @@
546
541
  }
547
542
  }
548
543
 
549
- &:focus {
550
- background: var-get($flat-theme, 'focus-background');
551
- color: var-get($flat-theme, 'focus-foreground');
552
- box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'shadow-color');
553
- border-color: var-get($flat-theme, 'focus-border-color');
544
+ &:active {
545
+ background: var-get($flat-theme, 'active-background');
546
+ color: var-get($flat-theme, 'active-foreground');
547
+ border-color: var-get($flat-theme, 'active-border-color');
554
548
 
555
549
  igx-icon {
556
- color: var-get($flat-theme, 'icon-color');
550
+ color: var-get($flat-theme, 'active-foreground');
557
551
  }
558
552
 
559
- &:hover {
560
- background: var-get($flat-theme, 'focus-hover-background');
561
- color: var-get($flat-theme, 'focus-hover-foreground');
562
-
553
+ @if ($variant == 'indigo-design') {
563
554
  igx-icon {
564
555
  color: var-get($flat-theme, 'icon-color-hover');
565
556
  }
566
557
  }
567
558
  }
568
559
 
569
- &:active {
570
- background: var-get($flat-theme, 'active-background');
571
- color: var-get($flat-theme, 'active-foreground');
572
- box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'shadow-color');
573
- border-color: var-get($flat-theme, 'active-border-color');
560
+ @if ($variant == 'indigo-design') {
561
+ border-width: rem(2px);
562
+ gap: pad-inline(
563
+ map.get($items-gap, 'compact'),
564
+ map.get($items-gap, 'cosy'),
565
+ $items-gap-indigo-comfortable
566
+ );
574
567
  }
568
+ }
575
569
 
576
- &:focus-visible {
577
- background: var-get($flat-theme, 'focus-visible-background');
578
- color: var-get($flat-theme, 'focus-visible-foreground');
579
- border-color: var-get($flat-theme, 'focus-visible-border-color');
570
+ %igx-button--flat-focused {
571
+ background: var-get($flat-theme, 'focus-visible-background');
572
+ color: var-get($flat-theme, 'focus-visible-foreground');
573
+ border-color: var-get($flat-theme, 'focus-visible-border-color');
574
+
575
+ igx-icon {
576
+ color: var-get($flat-theme, 'icon-color');
577
+ }
578
+
579
+ &:hover {
580
+ background: var-get($flat-theme, 'focus-hover-background');
581
+ color: var-get($flat-theme, 'focus-hover-foreground');
580
582
 
581
583
  igx-icon {
582
- color: var-get($flat-theme, 'icon-color');
584
+ color: var-get($flat-theme, 'icon-color-hover');
583
585
  }
586
+ }
584
587
 
585
- &:hover {
586
- background: var-get($flat-theme, 'focus-hover-background');
587
- color: var-get($flat-theme, 'focus-hover-foreground');
588
+ &:active {
589
+ background: var-get($flat-theme, 'focus-background');
590
+ color: var-get($flat-theme, 'focus-foreground');
588
591
 
589
- igx-icon {
590
- color: var-get($flat-theme, 'icon-color-hover');
591
- }
592
+ igx-icon {
593
+ color: var-get($flat-theme, 'focus-foreground');
592
594
  }
593
595
  }
594
-
595
- @if($variant == 'bootstrap') {
596
- &:focus,
597
- &:active,
598
- &:focus-visible {
599
- box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'shadow-color');
600
- }
596
+
597
+ @if ($variant == 'bootstrap') {
598
+ box-shadow: 0 0 0 rem(4px) var-get($flat-theme, 'shadow-color');
601
599
  }
602
600
 
603
601
  @if ($variant == 'fluent') {
604
- &:focus-visible {
605
- &::after {
606
- box-shadow: 0 0 0 rem(1px) var-get($flat-theme, 'focus-visible-border-color');
607
- }
602
+ border-color: var-get($flat-theme, 'active-border-color');
603
+
604
+ &::after {
605
+ @extend %fluent-border;
606
+
607
+ box-shadow: 0 0 0 rem(1px) var-get($flat-theme, 'focus-visible-border-color');
608
608
  }
609
609
  }
610
610
 
611
611
  @if ($variant == 'indigo-design') {
612
- gap: pad-inline(
613
- map.get($items-gap, 'compact'),
614
- map.get($items-gap, 'cosy'),
615
- $items-gap-indigo-comfortable
616
- );
612
+ box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'shadow-color');
613
+
614
+ &:active {
615
+ igx-icon {
616
+ color: var-get($flat-theme, 'icon-color-hover');
617
+ }
618
+ }
617
619
  }
618
620
  }
619
621
 
@@ -658,85 +660,75 @@
658
660
  }
659
661
  }
660
662
 
661
- &:focus {
662
- background: var-get($outlined-theme, 'focus-background');
663
- color: var-get($outlined-theme, 'focus-foreground');
664
- border-color: var-get($outlined-theme, 'focus-border-color');
665
-
666
- igx-icon {
667
- color: var-get($outlined-theme, 'icon-color');
668
- }
663
+ &:active {
664
+ background: var-get($outlined-theme, 'active-background');
665
+ color: var-get($outlined-theme, 'active-foreground');
666
+ border-color: var-get($outlined-theme, 'active-border-color');
669
667
 
670
- @if($variant == 'bootstrap' or $variant == 'indigo-design') {
671
- box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'shadow-color');
668
+ igx-icon {
669
+ color: var-get($outlined-theme, 'active-foreground');
672
670
  }
673
671
 
674
- &:hover {
675
- background: var-get($outlined-theme, 'focus-hover-background');
676
- color: var-get($outlined-theme, 'focus-hover-foreground');
677
- border-color: var-get($outlined-theme, 'hover-border-color');
678
-
672
+ @if $variant == 'indigo-design' {
679
673
  igx-icon {
680
674
  color: var-get($outlined-theme, 'icon-color-hover');
681
675
  }
682
676
  }
683
677
  }
684
678
 
685
- &:active {
686
- background: var-get($outlined-theme, 'active-background');
687
- color: var-get($outlined-theme, 'active-foreground');
688
- border-color: var-get($outlined-theme, 'active-border-color');
689
- box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'shadow-color');
679
+ @if ($variant == 'fluent') {
680
+ border: rem(1px) solid var-get($flat-theme, 'border-color');
690
681
  }
682
+ }
691
683
 
692
- &:focus-visible {
693
- background: var-get($outlined-theme, 'focus-visible-background');
684
+ %igx-button--outlined-focused {
685
+ background: var-get($outlined-theme, 'focus-visible-background');
686
+ color: var-get($outlined-theme, 'focus-visible-foreground');
687
+ border-color: var-get($outlined-theme, 'focus-visible-border-color');
688
+
689
+ igx-icon {
694
690
  color: var-get($outlined-theme, 'focus-visible-foreground');
695
- border-color: var-get($outlined-theme, 'focus-visible-border-color');
691
+ }
692
+
693
+ @if $variant == 'bootstrap' {
694
+ box-shadow: 0 0 0 rem(4px) var-get($outlined-theme, 'shadow-color');
695
+ } @else if $variant == 'indigo-design' {
696
+ box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'shadow-color');
696
697
 
697
698
  igx-icon {
698
699
  color: var-get($outlined-theme, 'icon-color');
699
700
  }
701
+ }
702
+
703
+ &:hover {
704
+ background: var-get($outlined-theme, 'focus-hover-background');
705
+ color: var-get($outlined-theme, 'focus-hover-foreground');
706
+ border-color: var-get($outlined-theme, 'hover-border-color');
707
+
708
+ igx-icon {
709
+ color: var-get($outlined-theme, 'icon-color-hover');
710
+ }
711
+ }
700
712
 
701
- &:hover {
702
- background: var-get($outlined-theme, 'focus-hover-background');
703
- color: var-get($outlined-theme, 'focus-hover-foreground');
704
- border-color: var-get($outlined-theme, 'hover-border-color');
713
+ &:active {
714
+ background: var-get($outlined-theme, 'focus-background');
715
+ color: var-get($outlined-theme, 'focus-foreground');
716
+ border-color: var-get($outlined-theme, 'active-border-color');
705
717
 
718
+ @if $variant == 'indigo-design' {
706
719
  igx-icon {
707
720
  color: var-get($outlined-theme, 'icon-color-hover');
708
721
  }
709
722
  }
710
-
711
- &:active {
712
- background: var-get($outlined-theme, 'active-background');
713
- color: var-get($outlined-theme, 'active-foreground');
714
- border-color: var-get($outlined-theme, 'active-border-color');
715
- }
716
723
  }
717
724
 
718
- @if($variant == 'fluent') {
719
- border: rem(1px) solid var-get($flat-theme, 'border-color');
720
-
721
- &:focus-visible {
722
- border-color: var-get($outlined-theme, 'focus-border-color');
725
+ @if ($variant == 'fluent') {
726
+ border-color: var-get($outlined-theme, 'focus-border-color');
723
727
 
724
- &::after {
725
- $outlined-btn-indent: rem(2px);
726
- top: $outlined-btn-indent;
727
- inset-inline-start: $outlined-btn-indent;
728
- width: calc(100% - (#{$outlined-btn-indent} * 2));
729
- height: calc(100% - (#{$outlined-btn-indent} * 2));
730
- box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'focus-visible-border-color');
731
- }
728
+ &::after {
729
+ @extend %fluent-border;
732
730
 
733
- /* stylelint-disable */
734
- &:active {
735
- &::after {
736
- box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'active-foreground');
737
- }
738
- }
739
- /* stylelint-enable */
731
+ box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'focus-visible-border-color');
740
732
  }
741
733
  }
742
734
  }
@@ -745,8 +737,9 @@
745
737
  --component-size: var(--ig-size, #{var-get($contained-theme, 'default-size')});
746
738
  color: var-get($contained-theme, 'foreground');
747
739
  background: var-get($contained-theme, 'background');
748
- box-shadow: $contained-shadow;
740
+ border-color: var-get($contained-theme, 'border-color');
749
741
  border-radius: var-get($contained-theme, 'border-radius');
742
+ box-shadow: var-get($contained-theme, 'resting-shadow');
750
743
 
751
744
  igx-icon {
752
745
  color: var-get($contained-theme, 'icon-color');
@@ -756,111 +749,85 @@
756
749
  color: var-get($contained-theme, 'hover-foreground');
757
750
  background: var-get($contained-theme, 'hover-background');
758
751
  border-color: var-get($contained-theme, 'hover-border-color');
759
- box-shadow: $contained-shadow--hover;
752
+ box-shadow: var-get($contained-theme, 'hover-shadow');
760
753
 
761
754
  igx-icon {
762
755
  color: var-get($contained-theme, 'icon-color-hover');
763
756
  }
764
757
  }
765
758
 
766
- &:focus {
767
- color: var-get($contained-theme, 'focus-foreground');
768
- background: var-get($contained-theme, 'focus-background');
769
- border-color: var-get($contained-theme, 'focus-border-color');
770
-
771
- igx-icon {
772
- color: var-get($contained-theme, 'icon-color');
773
- }
759
+ &:active {
760
+ color: var-get($contained-theme, 'active-foreground');
761
+ background: var-get($contained-theme, 'active-background');
762
+ border-color: var-get($contained-theme, 'active-border-color');
763
+ box-shadow: var-get($contained-theme, 'hover-shadow');
764
+ }
774
765
 
775
- @if $variant == 'material' {
776
- box-shadow: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'), $contained-shadow--focus;
777
- } @else {
778
- box-shadow: $contained-shadow--focus;
766
+ @if ($variant == 'indigo-design') {
767
+ border-width: rem(2px);
768
+ gap: pad-inline(
769
+ map.get($items-gap, 'compact'),
770
+ map.get($items-gap, 'cosy'),
771
+ $items-gap-indigo-comfortable
772
+ );
773
+
774
+ &:active {
775
+ igx-icon {
776
+ color: var-get($outlined-theme, 'icon-color-hover');
777
+ }
779
778
  }
779
+ }
780
+ }
780
781
 
781
- &:hover {
782
- color: var-get($contained-theme, 'focus-hover-foreground');
783
- background: var-get($contained-theme, 'focus-hover-background');
782
+ %igx-button--contained-focused {
783
+ background: var-get($contained-theme, 'focus-visible-background');
784
+ color: var-get($contained-theme, 'focus-visible-foreground');
785
+ border-color: var-get($contained-theme, 'focus-visible-border-color');
784
786
 
785
- igx-icon {
786
- color: var-get($contained-theme, 'icon-color-hover');
787
- }
787
+ igx-icon {
788
+ color: var-get($contained-theme, 'icon-color');
789
+ }
788
790
 
789
- @if $variant == 'material' {
790
- box-shadow: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'), $contained-shadow--focus;
791
- }
792
- }
791
+ @if $variant == 'material' {
792
+ box-shadow: var-get($contained-theme, 'focus-shadow');
793
+ } @else {
794
+ box-shadow: $contained-shadow--active;
793
795
  }
794
796
 
795
- &:active {
796
- color: var-get($contained-theme, 'active-foreground');
797
- background: var-get($contained-theme, 'active-background');
797
+ @if ($variant == 'fluent') {
798
798
  border-color: var-get($contained-theme, 'active-border-color');
799
799
 
800
- @if $variant == 'material' {
801
- box-shadow: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'), $contained-shadow--active;
802
- } @else {
803
- box-shadow: $contained-shadow--active;
800
+ &::after {
801
+ @extend %fluent-border;
802
+
803
+ box-shadow: 0 0 0 rem(1px) var-get($contained-theme, 'focus-visible-border-color');
804
804
  }
805
805
  }
806
806
 
807
- &:focus-visible {
808
- background: var-get($contained-theme, 'focus-visible-background');
809
- color: var-get($contained-theme, 'focus-visible-foreground');
810
- border-color: var-get($contained-theme, 'focus-visible-border-color');
807
+ &:hover {
808
+ color: var-get($contained-theme, 'focus-hover-foreground');
809
+ background: var-get($contained-theme, 'focus-hover-background');
810
+ border-color: var-get($contained-theme, 'hover-border-color');
811
811
 
812
812
  igx-icon {
813
- color: var-get($contained-theme, 'icon-color');
813
+ color: var-get($contained-theme, 'icon-color-hover');
814
814
  }
815
815
 
816
816
  @if $variant == 'material' {
817
- box-shadow: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'), $contained-shadow--focus;
818
- }
819
-
820
- &:hover {
821
- color: var-get($contained-theme, 'hover-foreground');
822
- background: var-get($contained-theme, 'hover-background');
823
- border-color: var-get($contained-theme, 'hover-border-color');
824
-
825
- igx-icon {
826
- color: var-get($contained-theme, 'icon-color-hover');
827
- }
828
-
829
- @if $variant == 'material' {
830
- box-shadow: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'), $contained-shadow--focus;
831
- }
832
- }
833
-
834
- &:active {
835
- color: var-get($contained-theme, 'active-foreground');
836
- background: var-get($contained-theme, 'active-background');
837
- border-color: var-get($contained-theme, 'active-border-color');
817
+ box-shadow: var-get($contained-theme, 'focus-shadow');
838
818
  }
839
819
  }
840
820
 
841
- @if($variant == 'fluent') {
842
- &:focus-visible {
843
- &::after {
844
- box-shadow: 0 0 0 rem(1px) var-get($contained-theme, 'focus-visible-foreground');
845
- }
821
+ &:active {
822
+ color: var-get($contained-theme, 'focus-foreground');
823
+ background: var-get($contained-theme, 'focus-background');
846
824
 
847
- /* stylelint-disable */
848
- &:active {
849
- &::after {
850
- box-shadow: 0 0 0 rem(1px) var-get($contained-theme, 'active-foreground');
851
- }
825
+ @if ($variant == 'indigo-design') {
826
+ igx-icon {
827
+ color: var-get($outlined-theme, 'icon-color-hover');
852
828
  }
853
- /* stylelint-enable */
854
829
  }
855
830
  }
856
-
857
- @if ($variant == 'indigo-design') {
858
- gap: pad-inline(
859
- map.get($items-gap, 'compact'),
860
- map.get($items-gap, 'cosy'),
861
- $items-gap-indigo-comfortable
862
- );
863
- }
864
831
  }
865
832
 
866
833
  %igx-button--round {
@@ -906,9 +873,9 @@
906
873
  white-space: nowrap;
907
874
  color: var-get($fab-theme, 'foreground');
908
875
  background: var-get($fab-theme, 'background');
909
- border-color: var-get($flat-theme, 'border-color');
910
- box-shadow: $fab-shadow;
876
+ border-color: var-get($fab-theme, 'border-color');
911
877
  border-radius: var-get($fab-theme, 'border-radius');
878
+ box-shadow: var-get($fab-theme, 'resting-shadow');
912
879
 
913
880
  igx-icon {
914
881
  color: var-get($fab-theme, 'icon-color');
@@ -917,109 +884,72 @@
917
884
  &:hover {
918
885
  color: var-get($fab-theme, 'hover-foreground');
919
886
  background: var-get($fab-theme, 'hover-background');
920
- border-color: var-get($flat-theme, 'hover-border-color');
921
- box-shadow: $fab-shadow;
887
+ border-color: var-get($fab-theme, 'hover-border-color');
888
+ box-shadow: var-get($fab-theme, 'hover-shadow');
922
889
 
923
890
  igx-icon {
924
891
  color: var-get($fab-theme, 'icon-color-hover');
925
892
  }
926
-
927
- @if $variant == 'material' {
928
- box-shadow: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'), $fab-shadow--hover;
929
- } @else {
930
- box-shadow: $contained-shadow--hover;
931
- }
932
893
  }
933
894
 
934
- &:focus {
935
- color: var-get($fab-theme, 'focus-foreground');
936
- background: var-get($fab-theme, 'focus-background');
937
- border-color: var-get($flat-theme, 'focus-border-color');
938
-
939
- igx-icon {
940
- color: var-get($fab-theme, 'icon-color');
941
- }
942
-
943
- @if $variant == 'material' {
944
- box-shadow: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'), $fab-shadow--focus;
945
- } @else {
946
- box-shadow: $contained-shadow--focus;
947
- }
948
-
949
- &:hover {
950
- color: var-get($fab-theme, 'focus-hover-foreground');
951
- background: var-get($fab-theme, 'focus-hover-background');
895
+ &:active {
896
+ color: var-get($fab-theme, 'active-foreground');
897
+ background: var-get($fab-theme, 'active-background');
898
+ border-color: var-get($fab-theme, 'active-border-color');
899
+ box-shadow: var-get($fab-theme, 'focus-shadow');
952
900
 
901
+ @if ($variant == 'indigo-design') {
953
902
  igx-icon {
954
- color: var-get($fab-theme, 'icon-color-hover');
903
+ color: var-get($outlined-theme, 'icon-color-hover');
955
904
  }
956
905
  }
957
906
  }
907
+ }
958
908
 
959
- &:active {
960
- color: var-get($fab-theme, 'active-foreground');
961
- background: var-get($fab-theme, 'active-background');
962
- border-color: var-get($flat-theme, 'active-border-color');
909
+ %igx-button--fab-focused {
910
+ background: var-get($fab-theme, 'focus-visible-background');
911
+ color: var-get($fab-theme, 'focus-visible-foreground');
912
+ border-color: var-get($fab-theme, 'focus-visible-border-color');
963
913
 
964
- @if $variant == 'material' {
965
- box-shadow: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'), $fab-shadow--active;
966
- } @else {
967
- box-shadow: $contained-shadow--active;
968
- }
914
+ igx-icon {
915
+ color: var-get($fab-theme, 'icon-color');
969
916
  }
970
917
 
971
- &:focus-visible {
972
- background: var-get($fab-theme, 'focus-visible-background');
973
- color: var-get($fab-theme, 'focus-visible-foreground');
974
- border-color: var-get($fab-theme, 'focus-visible-border-color');
918
+ @if $variant == 'material' {
919
+ box-shadow: var-get($fab-theme, 'focus-shadow');
920
+ } @else {
921
+ box-shadow: $contained-shadow--focus;
922
+ }
975
923
 
976
- igx-icon {
977
- color: var-get($fab-theme, 'icon-color');
978
- }
924
+ @if ($variant == 'fluent') {
925
+ border-color: var-get($contained-theme, 'active-border-color');
979
926
 
980
- @if $variant == 'material' {
981
- box-shadow: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'), $fab-shadow--focus;
982
- } @else {
983
- box-shadow: $contained-shadow--focus;
927
+ &::after {
928
+ @extend %fluent-border;
929
+ $btn-indent: rem(2px);
930
+ border-radius: calc(#{var-get($fab-theme, 'border-radius')} - #{$btn-indent});
931
+ box-shadow: 0 0 0 rem(1px) var-get($fab-theme, 'focus-visible-border-color');
984
932
  }
933
+ }
985
934
 
986
- &:hover {
987
- color: var-get($fab-theme, 'focus-hover-foreground');
988
- background: var-get($fab-theme, 'focus-hover-background');
989
- border-color: var-get($fab-theme, 'hover-border-color');
990
-
991
- igx-icon {
992
- color: var-get($fab-theme, 'icon-color-hover');
993
- }
994
- }
935
+ &:hover {
936
+ color: var-get($fab-theme, 'focus-hover-foreground');
937
+ background: var-get($fab-theme, 'focus-hover-background');
938
+ border-color: var-get($fab-theme, 'hover-border-color');
995
939
 
996
- &:active {
997
- color: var-get($fab-theme, 'active-foreground');
998
- background: var-get($fab-theme, 'active-background');
999
- border-color: var-get($fab-theme, 'active-border-color');
940
+ igx-icon {
941
+ color: var-get($fab-theme, 'icon-color-hover');
1000
942
  }
1001
943
  }
1002
944
 
1003
- @if($variant == 'fluent') {
1004
- &:focus-visible {
1005
- &::after {
1006
- $btn-indent: rem(3px);
1007
- content: '';
1008
- position: absolute;
1009
- top: $btn-indent;
1010
- inset-inline-start: $btn-indent;
1011
- pointer-events: none;
1012
- border-radius: calc(#{var-get($fab-theme, 'border-radius')} - #{$btn-indent});
1013
- box-shadow: 0 0 0 rem(1px) var-get($fab-theme, 'focus-visible-foreground');
1014
- }
945
+ &:active {
946
+ background: var-get($fab-theme, 'focus-background');
947
+ color: var-get($fab-theme, 'focus-foreground');
1015
948
 
1016
- /* stylelint-disable */
1017
- &:active {
1018
- &::after {
1019
- box-shadow: 0 0 0 rem(1px) var-get($fab-theme, 'active-foreground');
1020
- }
949
+ @if ($variant == 'indigo-design') {
950
+ igx-icon {
951
+ color: var-get($outlined-theme, 'icon-color-hover');
1021
952
  }
1022
- /* stylelint-enable */
1023
953
  }
1024
954
  }
1025
955
  }