@syncfusion/blazor-themes 28.2.3 → 28.2.4

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 (107) hide show
  1. package/Compiled-Themes/fluent2-dark-lite.css +12 -3
  2. package/Compiled-Themes/fluent2-dark.css +12 -3
  3. package/Compiled-Themes/fluent2-highcontrast-lite.css +12 -3
  4. package/Compiled-Themes/fluent2-highcontrast.css +12 -3
  5. package/Compiled-Themes/fluent2-lite.css +12 -3
  6. package/Compiled-Themes/fluent2.css +12 -3
  7. package/SCSS-Themes/bds-dark-lite.scss +13 -4
  8. package/SCSS-Themes/bds-dark.scss +13 -4
  9. package/SCSS-Themes/bds-lite.scss +13 -4
  10. package/SCSS-Themes/bds.scss +13 -4
  11. package/SCSS-Themes/bootstrap-dark-lite.scss +13 -4
  12. package/SCSS-Themes/bootstrap-dark.scss +13 -4
  13. package/SCSS-Themes/bootstrap-lite.scss +13 -4
  14. package/SCSS-Themes/bootstrap.scss +13 -4
  15. package/SCSS-Themes/bootstrap4-lite.scss +13 -4
  16. package/SCSS-Themes/bootstrap4.scss +13 -4
  17. package/SCSS-Themes/bootstrap5-dark-lite.scss +13 -4
  18. package/SCSS-Themes/bootstrap5-dark.scss +13 -4
  19. package/SCSS-Themes/bootstrap5-lite.scss +13 -4
  20. package/SCSS-Themes/bootstrap5.3-dark-lite.scss +13 -4
  21. package/SCSS-Themes/bootstrap5.3-dark.scss +13 -4
  22. package/SCSS-Themes/bootstrap5.3-lite.scss +13 -4
  23. package/SCSS-Themes/bootstrap5.3.scss +13 -4
  24. package/SCSS-Themes/bootstrap5.scss +13 -4
  25. package/SCSS-Themes/fabric-dark-lite.scss +13 -4
  26. package/SCSS-Themes/fabric-dark.scss +13 -4
  27. package/SCSS-Themes/fabric-lite.scss +13 -4
  28. package/SCSS-Themes/fabric.scss +13 -4
  29. package/SCSS-Themes/fluent-dark-lite.scss +13 -4
  30. package/SCSS-Themes/fluent-dark.scss +13 -4
  31. package/SCSS-Themes/fluent-lite.scss +13 -4
  32. package/SCSS-Themes/fluent.scss +13 -4
  33. package/SCSS-Themes/fluent2-dark-lite.scss +13 -4
  34. package/SCSS-Themes/fluent2-dark.scss +13 -4
  35. package/SCSS-Themes/fluent2-highcontrast-lite.scss +13 -4
  36. package/SCSS-Themes/fluent2-highcontrast.scss +13 -4
  37. package/SCSS-Themes/fluent2-lite.scss +13 -4
  38. package/SCSS-Themes/fluent2.scss +13 -4
  39. package/SCSS-Themes/highcontrast-lite.scss +13 -4
  40. package/SCSS-Themes/highcontrast.scss +13 -4
  41. package/SCSS-Themes/material-dark-lite.scss +13 -4
  42. package/SCSS-Themes/material-dark.scss +13 -4
  43. package/SCSS-Themes/material-lite.scss +13 -4
  44. package/SCSS-Themes/material.scss +13 -4
  45. package/SCSS-Themes/material3-dark-lite.scss +13 -4
  46. package/SCSS-Themes/material3-dark.scss +13 -4
  47. package/SCSS-Themes/material3-lite.scss +13 -4
  48. package/SCSS-Themes/material3.scss +13 -4
  49. package/SCSS-Themes/navigations/menu/bds-dark-lite.scss +13 -4
  50. package/SCSS-Themes/navigations/menu/bds-dark.scss +13 -4
  51. package/SCSS-Themes/navigations/menu/bds-lite.scss +13 -4
  52. package/SCSS-Themes/navigations/menu/bds.scss +13 -4
  53. package/SCSS-Themes/navigations/menu/bootstrap-dark-lite.scss +13 -4
  54. package/SCSS-Themes/navigations/menu/bootstrap-dark.scss +13 -4
  55. package/SCSS-Themes/navigations/menu/bootstrap-lite.scss +13 -4
  56. package/SCSS-Themes/navigations/menu/bootstrap.scss +13 -4
  57. package/SCSS-Themes/navigations/menu/bootstrap4-lite.scss +13 -4
  58. package/SCSS-Themes/navigations/menu/bootstrap4.scss +13 -4
  59. package/SCSS-Themes/navigations/menu/bootstrap5-dark-lite.scss +13 -4
  60. package/SCSS-Themes/navigations/menu/bootstrap5-dark.scss +13 -4
  61. package/SCSS-Themes/navigations/menu/bootstrap5-lite.scss +13 -4
  62. package/SCSS-Themes/navigations/menu/bootstrap5.3-dark-lite.scss +13 -4
  63. package/SCSS-Themes/navigations/menu/bootstrap5.3-dark.scss +13 -4
  64. package/SCSS-Themes/navigations/menu/bootstrap5.3-lite.scss +13 -4
  65. package/SCSS-Themes/navigations/menu/bootstrap5.3.scss +13 -4
  66. package/SCSS-Themes/navigations/menu/bootstrap5.scss +13 -4
  67. package/SCSS-Themes/navigations/menu/fabric-dark-lite.scss +13 -4
  68. package/SCSS-Themes/navigations/menu/fabric-dark.scss +13 -4
  69. package/SCSS-Themes/navigations/menu/fabric-lite.scss +13 -4
  70. package/SCSS-Themes/navigations/menu/fabric.scss +13 -4
  71. package/SCSS-Themes/navigations/menu/fluent-dark-lite.scss +13 -4
  72. package/SCSS-Themes/navigations/menu/fluent-dark.scss +13 -4
  73. package/SCSS-Themes/navigations/menu/fluent-lite.scss +13 -4
  74. package/SCSS-Themes/navigations/menu/fluent.scss +13 -4
  75. package/SCSS-Themes/navigations/menu/fluent2-dark-lite.scss +13 -4
  76. package/SCSS-Themes/navigations/menu/fluent2-dark.scss +13 -4
  77. package/SCSS-Themes/navigations/menu/fluent2-highcontrast-lite.scss +13 -4
  78. package/SCSS-Themes/navigations/menu/fluent2-highcontrast.scss +13 -4
  79. package/SCSS-Themes/navigations/menu/fluent2-lite.scss +13 -4
  80. package/SCSS-Themes/navigations/menu/fluent2.scss +13 -4
  81. package/SCSS-Themes/navigations/menu/highcontrast-lite.scss +13 -4
  82. package/SCSS-Themes/navigations/menu/highcontrast.scss +13 -4
  83. package/SCSS-Themes/navigations/menu/material-dark-lite.scss +13 -4
  84. package/SCSS-Themes/navigations/menu/material-dark.scss +13 -4
  85. package/SCSS-Themes/navigations/menu/material-lite.scss +13 -4
  86. package/SCSS-Themes/navigations/menu/material.scss +13 -4
  87. package/SCSS-Themes/navigations/menu/material3-dark-lite.scss +13 -4
  88. package/SCSS-Themes/navigations/menu/material3-dark.scss +13 -4
  89. package/SCSS-Themes/navigations/menu/material3-lite.scss +13 -4
  90. package/SCSS-Themes/navigations/menu/material3.scss +13 -4
  91. package/SCSS-Themes/navigations/menu/tailwind-dark-lite.scss +13 -4
  92. package/SCSS-Themes/navigations/menu/tailwind-dark.scss +13 -4
  93. package/SCSS-Themes/navigations/menu/tailwind-lite.scss +13 -4
  94. package/SCSS-Themes/navigations/menu/tailwind.scss +13 -4
  95. package/SCSS-Themes/navigations/menu/tailwind3-dark-lite.scss +13 -4
  96. package/SCSS-Themes/navigations/menu/tailwind3-dark.scss +13 -4
  97. package/SCSS-Themes/navigations/menu/tailwind3-lite.scss +13 -4
  98. package/SCSS-Themes/navigations/menu/tailwind3.scss +13 -4
  99. package/SCSS-Themes/tailwind-dark-lite.scss +13 -4
  100. package/SCSS-Themes/tailwind-dark.scss +13 -4
  101. package/SCSS-Themes/tailwind-lite.scss +13 -4
  102. package/SCSS-Themes/tailwind.scss +13 -4
  103. package/SCSS-Themes/tailwind3-dark-lite.scss +13 -4
  104. package/SCSS-Themes/tailwind3-dark.scss +13 -4
  105. package/SCSS-Themes/tailwind3-lite.scss +13 -4
  106. package/SCSS-Themes/tailwind3.scss +13 -4
  107. package/package.json +1 -1
package/SCSS-Themes/navigations/menu/fabric-lite.scss CHANGED
@@ -645,6 +645,13 @@ $menu-header-icon-padding: 0 16px !default;
645
645
  }
646
646
  @if $skin-name == 'fluent2' {
647
647
  border-radius: 4px;
648
+ &:focus-visible {
649
+ color: $content-text-color;
650
+ & .e-caret,
651
+ & .e-menu-icon {
652
+ color: $icon-color;
653
+ }
654
+ }
648
655
  }
649
656
  }
650
657
  }
@@ -695,9 +702,11 @@ $menu-header-icon-padding: 0 16px !default;
695
702
 
696
703
  &:focus-visible {
697
704
  @if $skin-name == 'fluent2' {
698
- border-radius: 4px;
699
- background-color: $content-bg-color;
700
- box-shadow: $shadow-focus-ring1;
705
+ &:not(.e-selected) {
706
+ border-radius: 4px;
707
+ background-color: $content-bg-color;
708
+ box-shadow: $shadow-focus-ring1;
709
+ }
701
710
  }
702
711
  @if $skin-name == 'tailwind3' {
703
712
  box-shadow: $shadow-focus-ring2;
@@ -788,7 +797,7 @@ $menu-header-icon-padding: 0 16px !default;
788
797
 
789
798
  &:focus-visible {
790
799
  @if $skin-name == 'fluent2' {
791
- background-color: $content-bg-color;
800
+ background-color: $flyout-bg-color-focus;
792
801
  box-shadow: $shadow-focus-ring1;
793
802
  border-radius: 4px;
794
803
  }
package/SCSS-Themes/navigations/menu/fabric.scss CHANGED
@@ -645,6 +645,13 @@ $menu-header-icon-padding: 0 16px !default;
645
645
  }
646
646
  @if $skin-name == 'fluent2' {
647
647
  border-radius: 4px;
648
+ &:focus-visible {
649
+ color: $content-text-color;
650
+ & .e-caret,
651
+ & .e-menu-icon {
652
+ color: $icon-color;
653
+ }
654
+ }
648
655
  }
649
656
  }
650
657
  }
@@ -695,9 +702,11 @@ $menu-header-icon-padding: 0 16px !default;
695
702
 
696
703
  &:focus-visible {
697
704
  @if $skin-name == 'fluent2' {
698
- border-radius: 4px;
699
- background-color: $content-bg-color;
700
- box-shadow: $shadow-focus-ring1;
705
+ &:not(.e-selected) {
706
+ border-radius: 4px;
707
+ background-color: $content-bg-color;
708
+ box-shadow: $shadow-focus-ring1;
709
+ }
701
710
  }
702
711
  @if $skin-name == 'tailwind3' {
703
712
  box-shadow: $shadow-focus-ring2;
@@ -788,7 +797,7 @@ $menu-header-icon-padding: 0 16px !default;
788
797
 
789
798
  &:focus-visible {
790
799
  @if $skin-name == 'fluent2' {
791
- background-color: $content-bg-color;
800
+ background-color: $flyout-bg-color-focus;
792
801
  box-shadow: $shadow-focus-ring1;
793
802
  border-radius: 4px;
794
803
  }
package/SCSS-Themes/navigations/menu/fluent-dark-lite.scss CHANGED
@@ -647,6 +647,13 @@ $menu-caret-color: $cmenu-caret-color !default;
647
647
  }
648
648
  @if $skin-name == 'fluent2' {
649
649
  border-radius: 4px;
650
+ &:focus-visible {
651
+ color: $content-text-color;
652
+ & .e-caret,
653
+ & .e-menu-icon {
654
+ color: $icon-color;
655
+ }
656
+ }
650
657
  }
651
658
  }
652
659
  }
@@ -697,9 +704,11 @@ $menu-caret-color: $cmenu-caret-color !default;
697
704
 
698
705
  &:focus-visible {
699
706
  @if $skin-name == 'fluent2' {
700
- border-radius: 4px;
701
- background-color: $content-bg-color;
702
- box-shadow: $shadow-focus-ring1;
707
+ &:not(.e-selected) {
708
+ border-radius: 4px;
709
+ background-color: $content-bg-color;
710
+ box-shadow: $shadow-focus-ring1;
711
+ }
703
712
  }
704
713
  @if $skin-name == 'tailwind3' {
705
714
  box-shadow: $shadow-focus-ring2;
@@ -790,7 +799,7 @@ $menu-caret-color: $cmenu-caret-color !default;
790
799
 
791
800
  &:focus-visible {
792
801
  @if $skin-name == 'fluent2' {
793
- background-color: $content-bg-color;
802
+ background-color: $flyout-bg-color-focus;
794
803
  box-shadow: $shadow-focus-ring1;
795
804
  border-radius: 4px;
796
805
  }
package/SCSS-Themes/navigations/menu/fluent-dark.scss CHANGED
@@ -647,6 +647,13 @@ $menu-caret-color: $cmenu-caret-color !default;
647
647
  }
648
648
  @if $skin-name == 'fluent2' {
649
649
  border-radius: 4px;
650
+ &:focus-visible {
651
+ color: $content-text-color;
652
+ & .e-caret,
653
+ & .e-menu-icon {
654
+ color: $icon-color;
655
+ }
656
+ }
650
657
  }
651
658
  }
652
659
  }
@@ -697,9 +704,11 @@ $menu-caret-color: $cmenu-caret-color !default;
697
704
 
698
705
  &:focus-visible {
699
706
  @if $skin-name == 'fluent2' {
700
- border-radius: 4px;
701
- background-color: $content-bg-color;
702
- box-shadow: $shadow-focus-ring1;
707
+ &:not(.e-selected) {
708
+ border-radius: 4px;
709
+ background-color: $content-bg-color;
710
+ box-shadow: $shadow-focus-ring1;
711
+ }
703
712
  }
704
713
  @if $skin-name == 'tailwind3' {
705
714
  box-shadow: $shadow-focus-ring2;
@@ -790,7 +799,7 @@ $menu-caret-color: $cmenu-caret-color !default;
790
799
 
791
800
  &:focus-visible {
792
801
  @if $skin-name == 'fluent2' {
793
- background-color: $content-bg-color;
802
+ background-color: $flyout-bg-color-focus;
794
803
  box-shadow: $shadow-focus-ring1;
795
804
  border-radius: 4px;
796
805
  }
package/SCSS-Themes/navigations/menu/fluent-lite.scss CHANGED
@@ -647,6 +647,13 @@ $menu-caret-color: $cmenu-caret-color !default;
647
647
  }
648
648
  @if $skin-name == 'fluent2' {
649
649
  border-radius: 4px;
650
+ &:focus-visible {
651
+ color: $content-text-color;
652
+ & .e-caret,
653
+ & .e-menu-icon {
654
+ color: $icon-color;
655
+ }
656
+ }
650
657
  }
651
658
  }
652
659
  }
@@ -697,9 +704,11 @@ $menu-caret-color: $cmenu-caret-color !default;
697
704
 
698
705
  &:focus-visible {
699
706
  @if $skin-name == 'fluent2' {
700
- border-radius: 4px;
701
- background-color: $content-bg-color;
702
- box-shadow: $shadow-focus-ring1;
707
+ &:not(.e-selected) {
708
+ border-radius: 4px;
709
+ background-color: $content-bg-color;
710
+ box-shadow: $shadow-focus-ring1;
711
+ }
703
712
  }
704
713
  @if $skin-name == 'tailwind3' {
705
714
  box-shadow: $shadow-focus-ring2;
@@ -790,7 +799,7 @@ $menu-caret-color: $cmenu-caret-color !default;
790
799
 
791
800
  &:focus-visible {
792
801
  @if $skin-name == 'fluent2' {
793
- background-color: $content-bg-color;
802
+ background-color: $flyout-bg-color-focus;
794
803
  box-shadow: $shadow-focus-ring1;
795
804
  border-radius: 4px;
796
805
  }
package/SCSS-Themes/navigations/menu/fluent.scss CHANGED
@@ -647,6 +647,13 @@ $menu-caret-color: $cmenu-caret-color !default;
647
647
  }
648
648
  @if $skin-name == 'fluent2' {
649
649
  border-radius: 4px;
650
+ &:focus-visible {
651
+ color: $content-text-color;
652
+ & .e-caret,
653
+ & .e-menu-icon {
654
+ color: $icon-color;
655
+ }
656
+ }
650
657
  }
651
658
  }
652
659
  }
@@ -697,9 +704,11 @@ $menu-caret-color: $cmenu-caret-color !default;
697
704
 
698
705
  &:focus-visible {
699
706
  @if $skin-name == 'fluent2' {
700
- border-radius: 4px;
701
- background-color: $content-bg-color;
702
- box-shadow: $shadow-focus-ring1;
707
+ &:not(.e-selected) {
708
+ border-radius: 4px;
709
+ background-color: $content-bg-color;
710
+ box-shadow: $shadow-focus-ring1;
711
+ }
703
712
  }
704
713
  @if $skin-name == 'tailwind3' {
705
714
  box-shadow: $shadow-focus-ring2;
@@ -790,7 +799,7 @@ $menu-caret-color: $cmenu-caret-color !default;
790
799
 
791
800
  &:focus-visible {
792
801
  @if $skin-name == 'fluent2' {
793
- background-color: $content-bg-color;
802
+ background-color: $flyout-bg-color-focus;
794
803
  box-shadow: $shadow-focus-ring1;
795
804
  border-radius: 4px;
796
805
  }
package/SCSS-Themes/navigations/menu/fluent2-dark-lite.scss CHANGED
@@ -648,6 +648,13 @@ $menu-bigger-li-icon-height: 55px !default;
648
648
  }
649
649
  @if $skin-name == 'fluent2' {
650
650
  border-radius: 4px;
651
+ &:focus-visible {
652
+ color: $content-text-color;
653
+ & .e-caret,
654
+ & .e-menu-icon {
655
+ color: $icon-color;
656
+ }
657
+ }
651
658
  }
652
659
  }
653
660
  }
@@ -698,9 +705,11 @@ $menu-bigger-li-icon-height: 55px !default;
698
705
 
699
706
  &:focus-visible {
700
707
  @if $skin-name == 'fluent2' {
701
- border-radius: 4px;
702
- background-color: $content-bg-color;
703
- box-shadow: $shadow-focus-ring1;
708
+ &:not(.e-selected) {
709
+ border-radius: 4px;
710
+ background-color: $content-bg-color;
711
+ box-shadow: $shadow-focus-ring1;
712
+ }
704
713
  }
705
714
  @if $skin-name == 'tailwind3' {
706
715
  box-shadow: $shadow-focus-ring2;
@@ -791,7 +800,7 @@ $menu-bigger-li-icon-height: 55px !default;
791
800
 
792
801
  &:focus-visible {
793
802
  @if $skin-name == 'fluent2' {
794
- background-color: $content-bg-color;
803
+ background-color: $flyout-bg-color-focus;
795
804
  box-shadow: $shadow-focus-ring1;
796
805
  border-radius: 4px;
797
806
  }
package/SCSS-Themes/navigations/menu/fluent2-dark.scss CHANGED
@@ -648,6 +648,13 @@ $menu-bigger-li-icon-height: 55px !default;
648
648
  }
649
649
  @if $skin-name == 'fluent2' {
650
650
  border-radius: 4px;
651
+ &:focus-visible {
652
+ color: $content-text-color;
653
+ & .e-caret,
654
+ & .e-menu-icon {
655
+ color: $icon-color;
656
+ }
657
+ }
651
658
  }
652
659
  }
653
660
  }
@@ -698,9 +705,11 @@ $menu-bigger-li-icon-height: 55px !default;
698
705
 
699
706
  &:focus-visible {
700
707
  @if $skin-name == 'fluent2' {
701
- border-radius: 4px;
702
- background-color: $content-bg-color;
703
- box-shadow: $shadow-focus-ring1;
708
+ &:not(.e-selected) {
709
+ border-radius: 4px;
710
+ background-color: $content-bg-color;
711
+ box-shadow: $shadow-focus-ring1;
712
+ }
704
713
  }
705
714
  @if $skin-name == 'tailwind3' {
706
715
  box-shadow: $shadow-focus-ring2;
@@ -791,7 +800,7 @@ $menu-bigger-li-icon-height: 55px !default;
791
800
 
792
801
  &:focus-visible {
793
802
  @if $skin-name == 'fluent2' {
794
- background-color: $content-bg-color;
803
+ background-color: $flyout-bg-color-focus;
795
804
  box-shadow: $shadow-focus-ring1;
796
805
  border-radius: 4px;
797
806
  }
package/SCSS-Themes/navigations/menu/fluent2-highcontrast-lite.scss CHANGED
@@ -648,6 +648,13 @@ $menu-bigger-li-icon-height: 55px !default;
648
648
  }
649
649
  @if $skin-name == 'fluent2' {
650
650
  border-radius: 4px;
651
+ &:focus-visible {
652
+ color: $content-text-color;
653
+ & .e-caret,
654
+ & .e-menu-icon {
655
+ color: $icon-color;
656
+ }
657
+ }
651
658
  }
652
659
  }
653
660
  }
@@ -698,9 +705,11 @@ $menu-bigger-li-icon-height: 55px !default;
698
705
 
699
706
  &:focus-visible {
700
707
  @if $skin-name == 'fluent2' {
701
- border-radius: 4px;
702
- background-color: $content-bg-color;
703
- box-shadow: $shadow-focus-ring1;
708
+ &:not(.e-selected) {
709
+ border-radius: 4px;
710
+ background-color: $content-bg-color;
711
+ box-shadow: $shadow-focus-ring1;
712
+ }
704
713
  }
705
714
  @if $skin-name == 'tailwind3' {
706
715
  box-shadow: $shadow-focus-ring2;
@@ -791,7 +800,7 @@ $menu-bigger-li-icon-height: 55px !default;
791
800
 
792
801
  &:focus-visible {
793
802
  @if $skin-name == 'fluent2' {
794
- background-color: $content-bg-color;
803
+ background-color: $flyout-bg-color-focus;
795
804
  box-shadow: $shadow-focus-ring1;
796
805
  border-radius: 4px;
797
806
  }
package/SCSS-Themes/navigations/menu/fluent2-highcontrast.scss CHANGED
@@ -648,6 +648,13 @@ $menu-bigger-li-icon-height: 55px !default;
648
648
  }
649
649
  @if $skin-name == 'fluent2' {
650
650
  border-radius: 4px;
651
+ &:focus-visible {
652
+ color: $content-text-color;
653
+ & .e-caret,
654
+ & .e-menu-icon {
655
+ color: $icon-color;
656
+ }
657
+ }
651
658
  }
652
659
  }
653
660
  }
@@ -698,9 +705,11 @@ $menu-bigger-li-icon-height: 55px !default;
698
705
 
699
706
  &:focus-visible {
700
707
  @if $skin-name == 'fluent2' {
701
- border-radius: 4px;
702
- background-color: $content-bg-color;
703
- box-shadow: $shadow-focus-ring1;
708
+ &:not(.e-selected) {
709
+ border-radius: 4px;
710
+ background-color: $content-bg-color;
711
+ box-shadow: $shadow-focus-ring1;
712
+ }
704
713
  }
705
714
  @if $skin-name == 'tailwind3' {
706
715
  box-shadow: $shadow-focus-ring2;
@@ -791,7 +800,7 @@ $menu-bigger-li-icon-height: 55px !default;
791
800
 
792
801
  &:focus-visible {
793
802
  @if $skin-name == 'fluent2' {
794
- background-color: $content-bg-color;
803
+ background-color: $flyout-bg-color-focus;
795
804
  box-shadow: $shadow-focus-ring1;
796
805
  border-radius: 4px;
797
806
  }
package/SCSS-Themes/navigations/menu/fluent2-lite.scss CHANGED
@@ -648,6 +648,13 @@ $menu-bigger-li-icon-height: 55px !default;
648
648
  }
649
649
  @if $skin-name == 'fluent2' {
650
650
  border-radius: 4px;
651
+ &:focus-visible {
652
+ color: $content-text-color;
653
+ & .e-caret,
654
+ & .e-menu-icon {
655
+ color: $icon-color;
656
+ }
657
+ }
651
658
  }
652
659
  }
653
660
  }
@@ -698,9 +705,11 @@ $menu-bigger-li-icon-height: 55px !default;
698
705
 
699
706
  &:focus-visible {
700
707
  @if $skin-name == 'fluent2' {
701
- border-radius: 4px;
702
- background-color: $content-bg-color;
703
- box-shadow: $shadow-focus-ring1;
708
+ &:not(.e-selected) {
709
+ border-radius: 4px;
710
+ background-color: $content-bg-color;
711
+ box-shadow: $shadow-focus-ring1;
712
+ }
704
713
  }
705
714
  @if $skin-name == 'tailwind3' {
706
715
  box-shadow: $shadow-focus-ring2;
@@ -791,7 +800,7 @@ $menu-bigger-li-icon-height: 55px !default;
791
800
 
792
801
  &:focus-visible {
793
802
  @if $skin-name == 'fluent2' {
794
- background-color: $content-bg-color;
803
+ background-color: $flyout-bg-color-focus;
795
804
  box-shadow: $shadow-focus-ring1;
796
805
  border-radius: 4px;
797
806
  }
package/SCSS-Themes/navigations/menu/fluent2.scss CHANGED
@@ -648,6 +648,13 @@ $menu-bigger-li-icon-height: 55px !default;
648
648
  }
649
649
  @if $skin-name == 'fluent2' {
650
650
  border-radius: 4px;
651
+ &:focus-visible {
652
+ color: $content-text-color;
653
+ & .e-caret,
654
+ & .e-menu-icon {
655
+ color: $icon-color;
656
+ }
657
+ }
651
658
  }
652
659
  }
653
660
  }
@@ -698,9 +705,11 @@ $menu-bigger-li-icon-height: 55px !default;
698
705
 
699
706
  &:focus-visible {
700
707
  @if $skin-name == 'fluent2' {
701
- border-radius: 4px;
702
- background-color: $content-bg-color;
703
- box-shadow: $shadow-focus-ring1;
708
+ &:not(.e-selected) {
709
+ border-radius: 4px;
710
+ background-color: $content-bg-color;
711
+ box-shadow: $shadow-focus-ring1;
712
+ }
704
713
  }
705
714
  @if $skin-name == 'tailwind3' {
706
715
  box-shadow: $shadow-focus-ring2;
@@ -791,7 +800,7 @@ $menu-bigger-li-icon-height: 55px !default;
791
800
 
792
801
  &:focus-visible {
793
802
  @if $skin-name == 'fluent2' {
794
- background-color: $content-bg-color;
803
+ background-color: $flyout-bg-color-focus;
795
804
  box-shadow: $shadow-focus-ring1;
796
805
  border-radius: 4px;
797
806
  }
package/SCSS-Themes/navigations/menu/highcontrast-lite.scss CHANGED
@@ -646,6 +646,13 @@ $menu-header-icon-padding: 0 16px !default;
646
646
  }
647
647
  @if $skin-name == 'fluent2' {
648
648
  border-radius: 4px;
649
+ &:focus-visible {
650
+ color: $content-text-color;
651
+ & .e-caret,
652
+ & .e-menu-icon {
653
+ color: $icon-color;
654
+ }
655
+ }
649
656
  }
650
657
  }
651
658
  }
@@ -696,9 +703,11 @@ $menu-header-icon-padding: 0 16px !default;
696
703
 
697
704
  &:focus-visible {
698
705
  @if $skin-name == 'fluent2' {
699
- border-radius: 4px;
700
- background-color: $content-bg-color;
701
- box-shadow: $shadow-focus-ring1;
706
+ &:not(.e-selected) {
707
+ border-radius: 4px;
708
+ background-color: $content-bg-color;
709
+ box-shadow: $shadow-focus-ring1;
710
+ }
702
711
  }
703
712
  @if $skin-name == 'tailwind3' {
704
713
  box-shadow: $shadow-focus-ring2;
@@ -789,7 +798,7 @@ $menu-header-icon-padding: 0 16px !default;
789
798
 
790
799
  &:focus-visible {
791
800
  @if $skin-name == 'fluent2' {
792
- background-color: $content-bg-color;
801
+ background-color: $flyout-bg-color-focus;
793
802
  box-shadow: $shadow-focus-ring1;
794
803
  border-radius: 4px;
795
804
  }
package/SCSS-Themes/navigations/menu/highcontrast.scss CHANGED
@@ -646,6 +646,13 @@ $menu-header-icon-padding: 0 16px !default;
646
646
  }
647
647
  @if $skin-name == 'fluent2' {
648
648
  border-radius: 4px;
649
+ &:focus-visible {
650
+ color: $content-text-color;
651
+ & .e-caret,
652
+ & .e-menu-icon {
653
+ color: $icon-color;
654
+ }
655
+ }
649
656
  }
650
657
  }
651
658
  }
@@ -696,9 +703,11 @@ $menu-header-icon-padding: 0 16px !default;
696
703
 
697
704
  &:focus-visible {
698
705
  @if $skin-name == 'fluent2' {
699
- border-radius: 4px;
700
- background-color: $content-bg-color;
701
- box-shadow: $shadow-focus-ring1;
706
+ &:not(.e-selected) {
707
+ border-radius: 4px;
708
+ background-color: $content-bg-color;
709
+ box-shadow: $shadow-focus-ring1;
710
+ }
702
711
  }
703
712
  @if $skin-name == 'tailwind3' {
704
713
  box-shadow: $shadow-focus-ring2;
@@ -789,7 +798,7 @@ $menu-header-icon-padding: 0 16px !default;
789
798
 
790
799
  &:focus-visible {
791
800
  @if $skin-name == 'fluent2' {
792
- background-color: $content-bg-color;
801
+ background-color: $flyout-bg-color-focus;
793
802
  box-shadow: $shadow-focus-ring1;
794
803
  border-radius: 4px;
795
804
  }
package/SCSS-Themes/navigations/menu/material-dark-lite.scss CHANGED
@@ -642,6 +642,13 @@ $menu-header-icon-padding: 0 16px !default;
642
642
  }
643
643
  @if $skin-name == 'fluent2' {
644
644
  border-radius: 4px;
645
+ &:focus-visible {
646
+ color: $content-text-color;
647
+ & .e-caret,
648
+ & .e-menu-icon {
649
+ color: $icon-color;
650
+ }
651
+ }
645
652
  }
646
653
  }
647
654
  }
@@ -692,9 +699,11 @@ $menu-header-icon-padding: 0 16px !default;
692
699
 
693
700
  &:focus-visible {
694
701
  @if $skin-name == 'fluent2' {
695
- border-radius: 4px;
696
- background-color: $content-bg-color;
697
- box-shadow: $shadow-focus-ring1;
702
+ &:not(.e-selected) {
703
+ border-radius: 4px;
704
+ background-color: $content-bg-color;
705
+ box-shadow: $shadow-focus-ring1;
706
+ }
698
707
  }
699
708
  @if $skin-name == 'tailwind3' {
700
709
  box-shadow: $shadow-focus-ring2;
@@ -785,7 +794,7 @@ $menu-header-icon-padding: 0 16px !default;
785
794
 
786
795
  &:focus-visible {
787
796
  @if $skin-name == 'fluent2' {
788
- background-color: $content-bg-color;
797
+ background-color: $flyout-bg-color-focus;
789
798
  box-shadow: $shadow-focus-ring1;
790
799
  border-radius: 4px;
791
800
  }
package/SCSS-Themes/navigations/menu/material-dark.scss CHANGED
@@ -642,6 +642,13 @@ $menu-header-icon-padding: 0 16px !default;
642
642
  }
643
643
  @if $skin-name == 'fluent2' {
644
644
  border-radius: 4px;
645
+ &:focus-visible {
646
+ color: $content-text-color;
647
+ & .e-caret,
648
+ & .e-menu-icon {
649
+ color: $icon-color;
650
+ }
651
+ }
645
652
  }
646
653
  }
647
654
  }
@@ -692,9 +699,11 @@ $menu-header-icon-padding: 0 16px !default;
692
699
 
693
700
  &:focus-visible {
694
701
  @if $skin-name == 'fluent2' {
695
- border-radius: 4px;
696
- background-color: $content-bg-color;
697
- box-shadow: $shadow-focus-ring1;
702
+ &:not(.e-selected) {
703
+ border-radius: 4px;
704
+ background-color: $content-bg-color;
705
+ box-shadow: $shadow-focus-ring1;
706
+ }
698
707
  }
699
708
  @if $skin-name == 'tailwind3' {
700
709
  box-shadow: $shadow-focus-ring2;
@@ -785,7 +794,7 @@ $menu-header-icon-padding: 0 16px !default;
785
794
 
786
795
  &:focus-visible {
787
796
  @if $skin-name == 'fluent2' {
788
- background-color: $content-bg-color;
797
+ background-color: $flyout-bg-color-focus;
789
798
  box-shadow: $shadow-focus-ring1;
790
799
  border-radius: 4px;
791
800
  }
package/SCSS-Themes/navigations/menu/material-lite.scss CHANGED
@@ -645,6 +645,13 @@ $menu-header-icon-padding: 0 16px !default;
645
645
  }
646
646
  @if $skin-name == 'fluent2' {
647
647
  border-radius: 4px;
648
+ &:focus-visible {
649
+ color: $content-text-color;
650
+ & .e-caret,
651
+ & .e-menu-icon {
652
+ color: $icon-color;
653
+ }
654
+ }
648
655
  }
649
656
  }
650
657
  }
@@ -695,9 +702,11 @@ $menu-header-icon-padding: 0 16px !default;
695
702
 
696
703
  &:focus-visible {
697
704
  @if $skin-name == 'fluent2' {
698
- border-radius: 4px;
699
- background-color: $content-bg-color;
700
- box-shadow: $shadow-focus-ring1;
705
+ &:not(.e-selected) {
706
+ border-radius: 4px;
707
+ background-color: $content-bg-color;
708
+ box-shadow: $shadow-focus-ring1;
709
+ }
701
710
  }
702
711
  @if $skin-name == 'tailwind3' {
703
712
  box-shadow: $shadow-focus-ring2;
@@ -788,7 +797,7 @@ $menu-header-icon-padding: 0 16px !default;
788
797
 
789
798
  &:focus-visible {
790
799
  @if $skin-name == 'fluent2' {
791
- background-color: $content-bg-color;
800
+ background-color: $flyout-bg-color-focus;
792
801
  box-shadow: $shadow-focus-ring1;
793
802
  border-radius: 4px;
794
803
  }