@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/material.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/material3-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/material3-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/material3-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/material3.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/tailwind-dark-lite.scss CHANGED
@@ -646,6 +646,13 @@ $menu-caret-color: $cmenu-caret-color !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-caret-color: $cmenu-caret-color !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-caret-color: $cmenu-caret-color !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/tailwind-dark.scss CHANGED
@@ -646,6 +646,13 @@ $menu-caret-color: $cmenu-caret-color !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-caret-color: $cmenu-caret-color !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-caret-color: $cmenu-caret-color !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/tailwind-lite.scss CHANGED
@@ -646,6 +646,13 @@ $menu-caret-color: $cmenu-caret-color !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-caret-color: $cmenu-caret-color !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-caret-color: $cmenu-caret-color !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/tailwind.scss CHANGED
@@ -646,6 +646,13 @@ $menu-caret-color: $cmenu-caret-color !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-caret-color: $cmenu-caret-color !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-caret-color: $cmenu-caret-color !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/tailwind3-dark-lite.scss CHANGED
@@ -647,6 +647,13 @@ $menu-caret-color: $icon-color-pressed !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: $icon-color-pressed !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: $icon-color-pressed !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/tailwind3-dark.scss CHANGED
@@ -647,6 +647,13 @@ $menu-caret-color: $icon-color-pressed !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: $icon-color-pressed !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: $icon-color-pressed !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/tailwind3-lite.scss CHANGED
@@ -647,6 +647,13 @@ $menu-caret-color: $icon-color-pressed !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: $icon-color-pressed !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: $icon-color-pressed !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/tailwind3.scss CHANGED
@@ -647,6 +647,13 @@ $menu-caret-color: $icon-color-pressed !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: $icon-color-pressed !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: $icon-color-pressed !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/tailwind-dark-lite.scss CHANGED
@@ -44899,6 +44899,13 @@ $menu-caret-color: $cmenu-caret-color !default;
44899
44899
  }
44900
44900
  @if $skin-name == 'fluent2' {
44901
44901
  border-radius: 4px;
44902
+ &:focus-visible {
44903
+ color: $content-text-color;
44904
+ & .e-caret,
44905
+ & .e-menu-icon {
44906
+ color: $icon-color;
44907
+ }
44908
+ }
44902
44909
  }
44903
44910
  }
44904
44911
  }
@@ -44949,9 +44956,11 @@ $menu-caret-color: $cmenu-caret-color !default;
44949
44956
 
44950
44957
  &:focus-visible {
44951
44958
  @if $skin-name == 'fluent2' {
44952
- border-radius: 4px;
44953
- background-color: $content-bg-color;
44954
- box-shadow: $shadow-focus-ring1;
44959
+ &:not(.e-selected) {
44960
+ border-radius: 4px;
44961
+ background-color: $content-bg-color;
44962
+ box-shadow: $shadow-focus-ring1;
44963
+ }
44955
44964
  }
44956
44965
  @if $skin-name == 'tailwind3' {
44957
44966
  box-shadow: $shadow-focus-ring2;
@@ -45042,7 +45051,7 @@ $menu-caret-color: $cmenu-caret-color !default;
45042
45051
 
45043
45052
  &:focus-visible {
45044
45053
  @if $skin-name == 'fluent2' {
45045
- background-color: $content-bg-color;
45054
+ background-color: $flyout-bg-color-focus;
45046
45055
  box-shadow: $shadow-focus-ring1;
45047
45056
  border-radius: 4px;
45048
45057
  }
package/SCSS-Themes/tailwind-dark.scss CHANGED
@@ -61148,6 +61148,13 @@ $menu-caret-color: $cmenu-caret-color !default;
61148
61148
  }
61149
61149
  @if $skin-name == 'fluent2' {
61150
61150
  border-radius: 4px;
61151
+ &:focus-visible {
61152
+ color: $content-text-color;
61153
+ & .e-caret,
61154
+ & .e-menu-icon {
61155
+ color: $icon-color;
61156
+ }
61157
+ }
61151
61158
  }
61152
61159
  }
61153
61160
  }
@@ -61198,9 +61205,11 @@ $menu-caret-color: $cmenu-caret-color !default;
61198
61205
 
61199
61206
  &:focus-visible {
61200
61207
  @if $skin-name == 'fluent2' {
61201
- border-radius: 4px;
61202
- background-color: $content-bg-color;
61203
- box-shadow: $shadow-focus-ring1;
61208
+ &:not(.e-selected) {
61209
+ border-radius: 4px;
61210
+ background-color: $content-bg-color;
61211
+ box-shadow: $shadow-focus-ring1;
61212
+ }
61204
61213
  }
61205
61214
  @if $skin-name == 'tailwind3' {
61206
61215
  box-shadow: $shadow-focus-ring2;
@@ -61291,7 +61300,7 @@ $menu-caret-color: $cmenu-caret-color !default;
61291
61300
 
61292
61301
  &:focus-visible {
61293
61302
  @if $skin-name == 'fluent2' {
61294
- background-color: $content-bg-color;
61303
+ background-color: $flyout-bg-color-focus;
61295
61304
  box-shadow: $shadow-focus-ring1;
61296
61305
  border-radius: 4px;
61297
61306
  }
package/SCSS-Themes/tailwind-lite.scss CHANGED
@@ -44897,6 +44897,13 @@ $menu-caret-color: $cmenu-caret-color !default;
44897
44897
  }
44898
44898
  @if $skin-name == 'fluent2' {
44899
44899
  border-radius: 4px;
44900
+ &:focus-visible {
44901
+ color: $content-text-color;
44902
+ & .e-caret,
44903
+ & .e-menu-icon {
44904
+ color: $icon-color;
44905
+ }
44906
+ }
44900
44907
  }
44901
44908
  }
44902
44909
  }
@@ -44947,9 +44954,11 @@ $menu-caret-color: $cmenu-caret-color !default;
44947
44954
 
44948
44955
  &:focus-visible {
44949
44956
  @if $skin-name == 'fluent2' {
44950
- border-radius: 4px;
44951
- background-color: $content-bg-color;
44952
- box-shadow: $shadow-focus-ring1;
44957
+ &:not(.e-selected) {
44958
+ border-radius: 4px;
44959
+ background-color: $content-bg-color;
44960
+ box-shadow: $shadow-focus-ring1;
44961
+ }
44953
44962
  }
44954
44963
  @if $skin-name == 'tailwind3' {
44955
44964
  box-shadow: $shadow-focus-ring2;
@@ -45040,7 +45049,7 @@ $menu-caret-color: $cmenu-caret-color !default;
45040
45049
 
45041
45050
  &:focus-visible {
45042
45051
  @if $skin-name == 'fluent2' {
45043
- background-color: $content-bg-color;
45052
+ background-color: $flyout-bg-color-focus;
45044
45053
  box-shadow: $shadow-focus-ring1;
45045
45054
  border-radius: 4px;
45046
45055
  }
package/SCSS-Themes/tailwind.scss CHANGED
@@ -61146,6 +61146,13 @@ $menu-caret-color: $cmenu-caret-color !default;
61146
61146
  }
61147
61147
  @if $skin-name == 'fluent2' {
61148
61148
  border-radius: 4px;
61149
+ &:focus-visible {
61150
+ color: $content-text-color;
61151
+ & .e-caret,
61152
+ & .e-menu-icon {
61153
+ color: $icon-color;
61154
+ }
61155
+ }
61149
61156
  }
61150
61157
  }
61151
61158
  }
@@ -61196,9 +61203,11 @@ $menu-caret-color: $cmenu-caret-color !default;
61196
61203
 
61197
61204
  &:focus-visible {
61198
61205
  @if $skin-name == 'fluent2' {
61199
- border-radius: 4px;
61200
- background-color: $content-bg-color;
61201
- box-shadow: $shadow-focus-ring1;
61206
+ &:not(.e-selected) {
61207
+ border-radius: 4px;
61208
+ background-color: $content-bg-color;
61209
+ box-shadow: $shadow-focus-ring1;
61210
+ }
61202
61211
  }
61203
61212
  @if $skin-name == 'tailwind3' {
61204
61213
  box-shadow: $shadow-focus-ring2;
@@ -61289,7 +61298,7 @@ $menu-caret-color: $cmenu-caret-color !default;
61289
61298
 
61290
61299
  &:focus-visible {
61291
61300
  @if $skin-name == 'fluent2' {
61292
- background-color: $content-bg-color;
61301
+ background-color: $flyout-bg-color-focus;
61293
61302
  box-shadow: $shadow-focus-ring1;
61294
61303
  border-radius: 4px;
61295
61304
  }