@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/bootstrap5-dark.scss CHANGED
@@ -61216,6 +61216,13 @@ $menu-caret-color: $cmenu-caret-color !default;
61216
61216
  }
61217
61217
  @if $skin-name == 'fluent2' {
61218
61218
  border-radius: 4px;
61219
+ &:focus-visible {
61220
+ color: $content-text-color;
61221
+ & .e-caret,
61222
+ & .e-menu-icon {
61223
+ color: $icon-color;
61224
+ }
61225
+ }
61219
61226
  }
61220
61227
  }
61221
61228
  }
@@ -61266,9 +61273,11 @@ $menu-caret-color: $cmenu-caret-color !default;
61266
61273
 
61267
61274
  &:focus-visible {
61268
61275
  @if $skin-name == 'fluent2' {
61269
- border-radius: 4px;
61270
- background-color: $content-bg-color;
61271
- box-shadow: $shadow-focus-ring1;
61276
+ &:not(.e-selected) {
61277
+ border-radius: 4px;
61278
+ background-color: $content-bg-color;
61279
+ box-shadow: $shadow-focus-ring1;
61280
+ }
61272
61281
  }
61273
61282
  @if $skin-name == 'tailwind3' {
61274
61283
  box-shadow: $shadow-focus-ring2;
@@ -61359,7 +61368,7 @@ $menu-caret-color: $cmenu-caret-color !default;
61359
61368
 
61360
61369
  &:focus-visible {
61361
61370
  @if $skin-name == 'fluent2' {
61362
- background-color: $content-bg-color;
61371
+ background-color: $flyout-bg-color-focus;
61363
61372
  box-shadow: $shadow-focus-ring1;
61364
61373
  border-radius: 4px;
61365
61374
  }
package/SCSS-Themes/bootstrap5-lite.scss CHANGED
@@ -44966,6 +44966,13 @@ $menu-caret-color: $cmenu-caret-color !default;
44966
44966
  }
44967
44967
  @if $skin-name == 'fluent2' {
44968
44968
  border-radius: 4px;
44969
+ &:focus-visible {
44970
+ color: $content-text-color;
44971
+ & .e-caret,
44972
+ & .e-menu-icon {
44973
+ color: $icon-color;
44974
+ }
44975
+ }
44969
44976
  }
44970
44977
  }
44971
44978
  }
@@ -45016,9 +45023,11 @@ $menu-caret-color: $cmenu-caret-color !default;
45016
45023
 
45017
45024
  &:focus-visible {
45018
45025
  @if $skin-name == 'fluent2' {
45019
- border-radius: 4px;
45020
- background-color: $content-bg-color;
45021
- box-shadow: $shadow-focus-ring1;
45026
+ &:not(.e-selected) {
45027
+ border-radius: 4px;
45028
+ background-color: $content-bg-color;
45029
+ box-shadow: $shadow-focus-ring1;
45030
+ }
45022
45031
  }
45023
45032
  @if $skin-name == 'tailwind3' {
45024
45033
  box-shadow: $shadow-focus-ring2;
@@ -45109,7 +45118,7 @@ $menu-caret-color: $cmenu-caret-color !default;
45109
45118
 
45110
45119
  &:focus-visible {
45111
45120
  @if $skin-name == 'fluent2' {
45112
- background-color: $content-bg-color;
45121
+ background-color: $flyout-bg-color-focus;
45113
45122
  box-shadow: $shadow-focus-ring1;
45114
45123
  border-radius: 4px;
45115
45124
  }
package/SCSS-Themes/bootstrap5.3-dark-lite.scss CHANGED
@@ -45729,6 +45729,13 @@ $menu-caret-color: $icon-color-pressed !default;
45729
45729
  }
45730
45730
  @if $skin-name == 'fluent2' {
45731
45731
  border-radius: 4px;
45732
+ &:focus-visible {
45733
+ color: $content-text-color;
45734
+ & .e-caret,
45735
+ & .e-menu-icon {
45736
+ color: $icon-color;
45737
+ }
45738
+ }
45732
45739
  }
45733
45740
  }
45734
45741
  }
@@ -45779,9 +45786,11 @@ $menu-caret-color: $icon-color-pressed !default;
45779
45786
 
45780
45787
  &:focus-visible {
45781
45788
  @if $skin-name == 'fluent2' {
45782
- border-radius: 4px;
45783
- background-color: $content-bg-color;
45784
- box-shadow: $shadow-focus-ring1;
45789
+ &:not(.e-selected) {
45790
+ border-radius: 4px;
45791
+ background-color: $content-bg-color;
45792
+ box-shadow: $shadow-focus-ring1;
45793
+ }
45785
45794
  }
45786
45795
  @if $skin-name == 'tailwind3' {
45787
45796
  box-shadow: $shadow-focus-ring2;
@@ -45872,7 +45881,7 @@ $menu-caret-color: $icon-color-pressed !default;
45872
45881
 
45873
45882
  &:focus-visible {
45874
45883
  @if $skin-name == 'fluent2' {
45875
- background-color: $content-bg-color;
45884
+ background-color: $flyout-bg-color-focus;
45876
45885
  box-shadow: $shadow-focus-ring1;
45877
45886
  border-radius: 4px;
45878
45887
  }
package/SCSS-Themes/bootstrap5.3-dark.scss CHANGED
@@ -61978,6 +61978,13 @@ $menu-caret-color: $icon-color-pressed !default;
61978
61978
  }
61979
61979
  @if $skin-name == 'fluent2' {
61980
61980
  border-radius: 4px;
61981
+ &:focus-visible {
61982
+ color: $content-text-color;
61983
+ & .e-caret,
61984
+ & .e-menu-icon {
61985
+ color: $icon-color;
61986
+ }
61987
+ }
61981
61988
  }
61982
61989
  }
61983
61990
  }
@@ -62028,9 +62035,11 @@ $menu-caret-color: $icon-color-pressed !default;
62028
62035
 
62029
62036
  &:focus-visible {
62030
62037
  @if $skin-name == 'fluent2' {
62031
- border-radius: 4px;
62032
- background-color: $content-bg-color;
62033
- box-shadow: $shadow-focus-ring1;
62038
+ &:not(.e-selected) {
62039
+ border-radius: 4px;
62040
+ background-color: $content-bg-color;
62041
+ box-shadow: $shadow-focus-ring1;
62042
+ }
62034
62043
  }
62035
62044
  @if $skin-name == 'tailwind3' {
62036
62045
  box-shadow: $shadow-focus-ring2;
@@ -62121,7 +62130,7 @@ $menu-caret-color: $icon-color-pressed !default;
62121
62130
 
62122
62131
  &:focus-visible {
62123
62132
  @if $skin-name == 'fluent2' {
62124
- background-color: $content-bg-color;
62133
+ background-color: $flyout-bg-color-focus;
62125
62134
  box-shadow: $shadow-focus-ring1;
62126
62135
  border-radius: 4px;
62127
62136
  }
package/SCSS-Themes/bootstrap5.3-lite.scss CHANGED
@@ -46076,6 +46076,13 @@ $menu-caret-color: $icon-color-pressed !default;
46076
46076
  }
46077
46077
  @if $skin-name == 'fluent2' {
46078
46078
  border-radius: 4px;
46079
+ &:focus-visible {
46080
+ color: $content-text-color;
46081
+ & .e-caret,
46082
+ & .e-menu-icon {
46083
+ color: $icon-color;
46084
+ }
46085
+ }
46079
46086
  }
46080
46087
  }
46081
46088
  }
@@ -46126,9 +46133,11 @@ $menu-caret-color: $icon-color-pressed !default;
46126
46133
 
46127
46134
  &:focus-visible {
46128
46135
  @if $skin-name == 'fluent2' {
46129
- border-radius: 4px;
46130
- background-color: $content-bg-color;
46131
- box-shadow: $shadow-focus-ring1;
46136
+ &:not(.e-selected) {
46137
+ border-radius: 4px;
46138
+ background-color: $content-bg-color;
46139
+ box-shadow: $shadow-focus-ring1;
46140
+ }
46132
46141
  }
46133
46142
  @if $skin-name == 'tailwind3' {
46134
46143
  box-shadow: $shadow-focus-ring2;
@@ -46219,7 +46228,7 @@ $menu-caret-color: $icon-color-pressed !default;
46219
46228
 
46220
46229
  &:focus-visible {
46221
46230
  @if $skin-name == 'fluent2' {
46222
- background-color: $content-bg-color;
46231
+ background-color: $flyout-bg-color-focus;
46223
46232
  box-shadow: $shadow-focus-ring1;
46224
46233
  border-radius: 4px;
46225
46234
  }
package/SCSS-Themes/bootstrap5.3.scss CHANGED
@@ -62325,6 +62325,13 @@ $menu-caret-color: $icon-color-pressed !default;
62325
62325
  }
62326
62326
  @if $skin-name == 'fluent2' {
62327
62327
  border-radius: 4px;
62328
+ &:focus-visible {
62329
+ color: $content-text-color;
62330
+ & .e-caret,
62331
+ & .e-menu-icon {
62332
+ color: $icon-color;
62333
+ }
62334
+ }
62328
62335
  }
62329
62336
  }
62330
62337
  }
@@ -62375,9 +62382,11 @@ $menu-caret-color: $icon-color-pressed !default;
62375
62382
 
62376
62383
  &:focus-visible {
62377
62384
  @if $skin-name == 'fluent2' {
62378
- border-radius: 4px;
62379
- background-color: $content-bg-color;
62380
- box-shadow: $shadow-focus-ring1;
62385
+ &:not(.e-selected) {
62386
+ border-radius: 4px;
62387
+ background-color: $content-bg-color;
62388
+ box-shadow: $shadow-focus-ring1;
62389
+ }
62381
62390
  }
62382
62391
  @if $skin-name == 'tailwind3' {
62383
62392
  box-shadow: $shadow-focus-ring2;
@@ -62468,7 +62477,7 @@ $menu-caret-color: $icon-color-pressed !default;
62468
62477
 
62469
62478
  &:focus-visible {
62470
62479
  @if $skin-name == 'fluent2' {
62471
- background-color: $content-bg-color;
62480
+ background-color: $flyout-bg-color-focus;
62472
62481
  box-shadow: $shadow-focus-ring1;
62473
62482
  border-radius: 4px;
62474
62483
  }
package/SCSS-Themes/bootstrap5.scss CHANGED
@@ -61215,6 +61215,13 @@ $menu-caret-color: $cmenu-caret-color !default;
61215
61215
  }
61216
61216
  @if $skin-name == 'fluent2' {
61217
61217
  border-radius: 4px;
61218
+ &:focus-visible {
61219
+ color: $content-text-color;
61220
+ & .e-caret,
61221
+ & .e-menu-icon {
61222
+ color: $icon-color;
61223
+ }
61224
+ }
61218
61225
  }
61219
61226
  }
61220
61227
  }
@@ -61265,9 +61272,11 @@ $menu-caret-color: $cmenu-caret-color !default;
61265
61272
 
61266
61273
  &:focus-visible {
61267
61274
  @if $skin-name == 'fluent2' {
61268
- border-radius: 4px;
61269
- background-color: $content-bg-color;
61270
- box-shadow: $shadow-focus-ring1;
61275
+ &:not(.e-selected) {
61276
+ border-radius: 4px;
61277
+ background-color: $content-bg-color;
61278
+ box-shadow: $shadow-focus-ring1;
61279
+ }
61271
61280
  }
61272
61281
  @if $skin-name == 'tailwind3' {
61273
61282
  box-shadow: $shadow-focus-ring2;
@@ -61358,7 +61367,7 @@ $menu-caret-color: $cmenu-caret-color !default;
61358
61367
 
61359
61368
  &:focus-visible {
61360
61369
  @if $skin-name == 'fluent2' {
61361
- background-color: $content-bg-color;
61370
+ background-color: $flyout-bg-color-focus;
61362
61371
  box-shadow: $shadow-focus-ring1;
61363
61372
  border-radius: 4px;
61364
61373
  }
package/SCSS-Themes/fabric-dark-lite.scss CHANGED
@@ -44773,6 +44773,13 @@ $menu-header-icon-padding: 0 16px !default;
44773
44773
  }
44774
44774
  @if $skin-name == 'fluent2' {
44775
44775
  border-radius: 4px;
44776
+ &:focus-visible {
44777
+ color: $content-text-color;
44778
+ & .e-caret,
44779
+ & .e-menu-icon {
44780
+ color: $icon-color;
44781
+ }
44782
+ }
44776
44783
  }
44777
44784
  }
44778
44785
  }
@@ -44823,9 +44830,11 @@ $menu-header-icon-padding: 0 16px !default;
44823
44830
 
44824
44831
  &:focus-visible {
44825
44832
  @if $skin-name == 'fluent2' {
44826
- border-radius: 4px;
44827
- background-color: $content-bg-color;
44828
- box-shadow: $shadow-focus-ring1;
44833
+ &:not(.e-selected) {
44834
+ border-radius: 4px;
44835
+ background-color: $content-bg-color;
44836
+ box-shadow: $shadow-focus-ring1;
44837
+ }
44829
44838
  }
44830
44839
  @if $skin-name == 'tailwind3' {
44831
44840
  box-shadow: $shadow-focus-ring2;
@@ -44916,7 +44925,7 @@ $menu-header-icon-padding: 0 16px !default;
44916
44925
 
44917
44926
  &:focus-visible {
44918
44927
  @if $skin-name == 'fluent2' {
44919
- background-color: $content-bg-color;
44928
+ background-color: $flyout-bg-color-focus;
44920
44929
  box-shadow: $shadow-focus-ring1;
44921
44930
  border-radius: 4px;
44922
44931
  }
package/SCSS-Themes/fabric-dark.scss CHANGED
@@ -61022,6 +61022,13 @@ $menu-header-icon-padding: 0 16px !default;
61022
61022
  }
61023
61023
  @if $skin-name == 'fluent2' {
61024
61024
  border-radius: 4px;
61025
+ &:focus-visible {
61026
+ color: $content-text-color;
61027
+ & .e-caret,
61028
+ & .e-menu-icon {
61029
+ color: $icon-color;
61030
+ }
61031
+ }
61025
61032
  }
61026
61033
  }
61027
61034
  }
@@ -61072,9 +61079,11 @@ $menu-header-icon-padding: 0 16px !default;
61072
61079
 
61073
61080
  &:focus-visible {
61074
61081
  @if $skin-name == 'fluent2' {
61075
- border-radius: 4px;
61076
- background-color: $content-bg-color;
61077
- box-shadow: $shadow-focus-ring1;
61082
+ &:not(.e-selected) {
61083
+ border-radius: 4px;
61084
+ background-color: $content-bg-color;
61085
+ box-shadow: $shadow-focus-ring1;
61086
+ }
61078
61087
  }
61079
61088
  @if $skin-name == 'tailwind3' {
61080
61089
  box-shadow: $shadow-focus-ring2;
@@ -61165,7 +61174,7 @@ $menu-header-icon-padding: 0 16px !default;
61165
61174
 
61166
61175
  &:focus-visible {
61167
61176
  @if $skin-name == 'fluent2' {
61168
- background-color: $content-bg-color;
61177
+ background-color: $flyout-bg-color-focus;
61169
61178
  box-shadow: $shadow-focus-ring1;
61170
61179
  border-radius: 4px;
61171
61180
  }
package/SCSS-Themes/fabric-lite.scss CHANGED
@@ -44559,6 +44559,13 @@ $menu-header-icon-padding: 0 16px !default;
44559
44559
  }
44560
44560
  @if $skin-name == 'fluent2' {
44561
44561
  border-radius: 4px;
44562
+ &:focus-visible {
44563
+ color: $content-text-color;
44564
+ & .e-caret,
44565
+ & .e-menu-icon {
44566
+ color: $icon-color;
44567
+ }
44568
+ }
44562
44569
  }
44563
44570
  }
44564
44571
  }
@@ -44609,9 +44616,11 @@ $menu-header-icon-padding: 0 16px !default;
44609
44616
 
44610
44617
  &:focus-visible {
44611
44618
  @if $skin-name == 'fluent2' {
44612
- border-radius: 4px;
44613
- background-color: $content-bg-color;
44614
- box-shadow: $shadow-focus-ring1;
44619
+ &:not(.e-selected) {
44620
+ border-radius: 4px;
44621
+ background-color: $content-bg-color;
44622
+ box-shadow: $shadow-focus-ring1;
44623
+ }
44615
44624
  }
44616
44625
  @if $skin-name == 'tailwind3' {
44617
44626
  box-shadow: $shadow-focus-ring2;
@@ -44702,7 +44711,7 @@ $menu-header-icon-padding: 0 16px !default;
44702
44711
 
44703
44712
  &:focus-visible {
44704
44713
  @if $skin-name == 'fluent2' {
44705
- background-color: $content-bg-color;
44714
+ background-color: $flyout-bg-color-focus;
44706
44715
  box-shadow: $shadow-focus-ring1;
44707
44716
  border-radius: 4px;
44708
44717
  }
package/SCSS-Themes/fabric.scss CHANGED
@@ -60808,6 +60808,13 @@ $menu-header-icon-padding: 0 16px !default;
60808
60808
  }
60809
60809
  @if $skin-name == 'fluent2' {
60810
60810
  border-radius: 4px;
60811
+ &:focus-visible {
60812
+ color: $content-text-color;
60813
+ & .e-caret,
60814
+ & .e-menu-icon {
60815
+ color: $icon-color;
60816
+ }
60817
+ }
60811
60818
  }
60812
60819
  }
60813
60820
  }
@@ -60858,9 +60865,11 @@ $menu-header-icon-padding: 0 16px !default;
60858
60865
 
60859
60866
  &:focus-visible {
60860
60867
  @if $skin-name == 'fluent2' {
60861
- border-radius: 4px;
60862
- background-color: $content-bg-color;
60863
- box-shadow: $shadow-focus-ring1;
60868
+ &:not(.e-selected) {
60869
+ border-radius: 4px;
60870
+ background-color: $content-bg-color;
60871
+ box-shadow: $shadow-focus-ring1;
60872
+ }
60864
60873
  }
60865
60874
  @if $skin-name == 'tailwind3' {
60866
60875
  box-shadow: $shadow-focus-ring2;
@@ -60951,7 +60960,7 @@ $menu-header-icon-padding: 0 16px !default;
60951
60960
 
60952
60961
  &:focus-visible {
60953
60962
  @if $skin-name == 'fluent2' {
60954
- background-color: $content-bg-color;
60963
+ background-color: $flyout-bg-color-focus;
60955
60964
  box-shadow: $shadow-focus-ring1;
60956
60965
  border-radius: 4px;
60957
60966
  }
package/SCSS-Themes/fluent-dark-lite.scss CHANGED
@@ -45048,6 +45048,13 @@ $menu-caret-color: $cmenu-caret-color !default;
45048
45048
  }
45049
45049
  @if $skin-name == 'fluent2' {
45050
45050
  border-radius: 4px;
45051
+ &:focus-visible {
45052
+ color: $content-text-color;
45053
+ & .e-caret,
45054
+ & .e-menu-icon {
45055
+ color: $icon-color;
45056
+ }
45057
+ }
45051
45058
  }
45052
45059
  }
45053
45060
  }
@@ -45098,9 +45105,11 @@ $menu-caret-color: $cmenu-caret-color !default;
45098
45105
 
45099
45106
  &:focus-visible {
45100
45107
  @if $skin-name == 'fluent2' {
45101
- border-radius: 4px;
45102
- background-color: $content-bg-color;
45103
- box-shadow: $shadow-focus-ring1;
45108
+ &:not(.e-selected) {
45109
+ border-radius: 4px;
45110
+ background-color: $content-bg-color;
45111
+ box-shadow: $shadow-focus-ring1;
45112
+ }
45104
45113
  }
45105
45114
  @if $skin-name == 'tailwind3' {
45106
45115
  box-shadow: $shadow-focus-ring2;
@@ -45191,7 +45200,7 @@ $menu-caret-color: $cmenu-caret-color !default;
45191
45200
 
45192
45201
  &:focus-visible {
45193
45202
  @if $skin-name == 'fluent2' {
45194
- background-color: $content-bg-color;
45203
+ background-color: $flyout-bg-color-focus;
45195
45204
  box-shadow: $shadow-focus-ring1;
45196
45205
  border-radius: 4px;
45197
45206
  }
package/SCSS-Themes/fluent-dark.scss CHANGED
@@ -61297,6 +61297,13 @@ $menu-caret-color: $cmenu-caret-color !default;
61297
61297
  }
61298
61298
  @if $skin-name == 'fluent2' {
61299
61299
  border-radius: 4px;
61300
+ &:focus-visible {
61301
+ color: $content-text-color;
61302
+ & .e-caret,
61303
+ & .e-menu-icon {
61304
+ color: $icon-color;
61305
+ }
61306
+ }
61300
61307
  }
61301
61308
  }
61302
61309
  }
@@ -61347,9 +61354,11 @@ $menu-caret-color: $cmenu-caret-color !default;
61347
61354
 
61348
61355
  &:focus-visible {
61349
61356
  @if $skin-name == 'fluent2' {
61350
- border-radius: 4px;
61351
- background-color: $content-bg-color;
61352
- box-shadow: $shadow-focus-ring1;
61357
+ &:not(.e-selected) {
61358
+ border-radius: 4px;
61359
+ background-color: $content-bg-color;
61360
+ box-shadow: $shadow-focus-ring1;
61361
+ }
61353
61362
  }
61354
61363
  @if $skin-name == 'tailwind3' {
61355
61364
  box-shadow: $shadow-focus-ring2;
@@ -61440,7 +61449,7 @@ $menu-caret-color: $cmenu-caret-color !default;
61440
61449
 
61441
61450
  &:focus-visible {
61442
61451
  @if $skin-name == 'fluent2' {
61443
- background-color: $content-bg-color;
61452
+ background-color: $flyout-bg-color-focus;
61444
61453
  box-shadow: $shadow-focus-ring1;
61445
61454
  border-radius: 4px;
61446
61455
  }
package/SCSS-Themes/fluent-lite.scss CHANGED
@@ -45048,6 +45048,13 @@ $menu-caret-color: $cmenu-caret-color !default;
45048
45048
  }
45049
45049
  @if $skin-name == 'fluent2' {
45050
45050
  border-radius: 4px;
45051
+ &:focus-visible {
45052
+ color: $content-text-color;
45053
+ & .e-caret,
45054
+ & .e-menu-icon {
45055
+ color: $icon-color;
45056
+ }
45057
+ }
45051
45058
  }
45052
45059
  }
45053
45060
  }
@@ -45098,9 +45105,11 @@ $menu-caret-color: $cmenu-caret-color !default;
45098
45105
 
45099
45106
  &:focus-visible {
45100
45107
  @if $skin-name == 'fluent2' {
45101
- border-radius: 4px;
45102
- background-color: $content-bg-color;
45103
- box-shadow: $shadow-focus-ring1;
45108
+ &:not(.e-selected) {
45109
+ border-radius: 4px;
45110
+ background-color: $content-bg-color;
45111
+ box-shadow: $shadow-focus-ring1;
45112
+ }
45104
45113
  }
45105
45114
  @if $skin-name == 'tailwind3' {
45106
45115
  box-shadow: $shadow-focus-ring2;
@@ -45191,7 +45200,7 @@ $menu-caret-color: $cmenu-caret-color !default;
45191
45200
 
45192
45201
  &:focus-visible {
45193
45202
  @if $skin-name == 'fluent2' {
45194
- background-color: $content-bg-color;
45203
+ background-color: $flyout-bg-color-focus;
45195
45204
  box-shadow: $shadow-focus-ring1;
45196
45205
  border-radius: 4px;
45197
45206
  }
package/SCSS-Themes/fluent.scss CHANGED
@@ -61297,6 +61297,13 @@ $menu-caret-color: $cmenu-caret-color !default;
61297
61297
  }
61298
61298
  @if $skin-name == 'fluent2' {
61299
61299
  border-radius: 4px;
61300
+ &:focus-visible {
61301
+ color: $content-text-color;
61302
+ & .e-caret,
61303
+ & .e-menu-icon {
61304
+ color: $icon-color;
61305
+ }
61306
+ }
61300
61307
  }
61301
61308
  }
61302
61309
  }
@@ -61347,9 +61354,11 @@ $menu-caret-color: $cmenu-caret-color !default;
61347
61354
 
61348
61355
  &:focus-visible {
61349
61356
  @if $skin-name == 'fluent2' {
61350
- border-radius: 4px;
61351
- background-color: $content-bg-color;
61352
- box-shadow: $shadow-focus-ring1;
61357
+ &:not(.e-selected) {
61358
+ border-radius: 4px;
61359
+ background-color: $content-bg-color;
61360
+ box-shadow: $shadow-focus-ring1;
61361
+ }
61353
61362
  }
61354
61363
  @if $skin-name == 'tailwind3' {
61355
61364
  box-shadow: $shadow-focus-ring2;
@@ -61440,7 +61449,7 @@ $menu-caret-color: $cmenu-caret-color !default;
61440
61449
 
61441
61450
  &:focus-visible {
61442
61451
  @if $skin-name == 'fluent2' {
61443
- background-color: $content-bg-color;
61452
+ background-color: $flyout-bg-color-focus;
61444
61453
  box-shadow: $shadow-focus-ring1;
61445
61454
  border-radius: 4px;
61446
61455
  }
package/SCSS-Themes/fluent2-dark-lite.scss CHANGED
@@ -46640,6 +46640,13 @@ $menu-bigger-li-icon-height: 55px !default;
46640
46640
  }
46641
46641
  @if $skin-name == 'fluent2' {
46642
46642
  border-radius: 4px;
46643
+ &:focus-visible {
46644
+ color: $content-text-color;
46645
+ & .e-caret,
46646
+ & .e-menu-icon {
46647
+ color: $icon-color;
46648
+ }
46649
+ }
46643
46650
  }
46644
46651
  }
46645
46652
  }
@@ -46690,9 +46697,11 @@ $menu-bigger-li-icon-height: 55px !default;
46690
46697
 
46691
46698
  &:focus-visible {
46692
46699
  @if $skin-name == 'fluent2' {
46693
- border-radius: 4px;
46694
- background-color: $content-bg-color;
46695
- box-shadow: $shadow-focus-ring1;
46700
+ &:not(.e-selected) {
46701
+ border-radius: 4px;
46702
+ background-color: $content-bg-color;
46703
+ box-shadow: $shadow-focus-ring1;
46704
+ }
46696
46705
  }
46697
46706
  @if $skin-name == 'tailwind3' {
46698
46707
  box-shadow: $shadow-focus-ring2;
@@ -46783,7 +46792,7 @@ $menu-bigger-li-icon-height: 55px !default;
46783
46792
 
46784
46793
  &:focus-visible {
46785
46794
  @if $skin-name == 'fluent2' {
46786
- background-color: $content-bg-color;
46795
+ background-color: $flyout-bg-color-focus;
46787
46796
  box-shadow: $shadow-focus-ring1;
46788
46797
  border-radius: 4px;
46789
46798
  }
package/SCSS-Themes/fluent2-dark.scss CHANGED
@@ -62889,6 +62889,13 @@ $menu-bigger-li-icon-height: 55px !default;
62889
62889
  }
62890
62890
  @if $skin-name == 'fluent2' {
62891
62891
  border-radius: 4px;
62892
+ &:focus-visible {
62893
+ color: $content-text-color;
62894
+ & .e-caret,
62895
+ & .e-menu-icon {
62896
+ color: $icon-color;
62897
+ }
62898
+ }
62892
62899
  }
62893
62900
  }
62894
62901
  }
@@ -62939,9 +62946,11 @@ $menu-bigger-li-icon-height: 55px !default;
62939
62946
 
62940
62947
  &:focus-visible {
62941
62948
  @if $skin-name == 'fluent2' {
62942
- border-radius: 4px;
62943
- background-color: $content-bg-color;
62944
- box-shadow: $shadow-focus-ring1;
62949
+ &:not(.e-selected) {
62950
+ border-radius: 4px;
62951
+ background-color: $content-bg-color;
62952
+ box-shadow: $shadow-focus-ring1;
62953
+ }
62945
62954
  }
62946
62955
  @if $skin-name == 'tailwind3' {
62947
62956
  box-shadow: $shadow-focus-ring2;
@@ -63032,7 +63041,7 @@ $menu-bigger-li-icon-height: 55px !default;
63032
63041
 
63033
63042
  &:focus-visible {
63034
63043
  @if $skin-name == 'fluent2' {
63035
- background-color: $content-bg-color;
63044
+ background-color: $flyout-bg-color-focus;
63036
63045
  box-shadow: $shadow-focus-ring1;
63037
63046
  border-radius: 4px;
63038
63047
  }