@syncfusion/blazor-themes 20.4.44 → 20.4.48

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 (160) hide show
  1. package/SCSS-Themes/bootstrap-dark.scss +86 -46
  2. package/SCSS-Themes/bootstrap.scss +86 -46
  3. package/SCSS-Themes/bootstrap4.scss +87 -47
  4. package/SCSS-Themes/bootstrap5-dark.scss +87 -47
  5. package/SCSS-Themes/bootstrap5.scss +87 -47
  6. package/SCSS-Themes/buttons/check-box/bootstrap-dark.scss +4 -0
  7. package/SCSS-Themes/buttons/check-box/bootstrap.scss +4 -0
  8. package/SCSS-Themes/buttons/check-box/bootstrap4.scss +4 -0
  9. package/SCSS-Themes/buttons/check-box/bootstrap5-dark.scss +4 -0
  10. package/SCSS-Themes/buttons/check-box/bootstrap5.scss +4 -0
  11. package/SCSS-Themes/buttons/check-box/fabric-dark.scss +4 -0
  12. package/SCSS-Themes/buttons/check-box/fabric.scss +4 -0
  13. package/SCSS-Themes/buttons/check-box/fluent-dark.scss +4 -0
  14. package/SCSS-Themes/buttons/check-box/fluent.scss +4 -0
  15. package/SCSS-Themes/buttons/check-box/highcontrast.scss +4 -0
  16. package/SCSS-Themes/buttons/check-box/material-dark.scss +4 -0
  17. package/SCSS-Themes/buttons/check-box/material.scss +4 -0
  18. package/SCSS-Themes/buttons/check-box/tailwind-dark.scss +4 -0
  19. package/SCSS-Themes/buttons/check-box/tailwind.scss +4 -0
  20. package/SCSS-Themes/dropdowns/multi-select/bootstrap-dark.scss +3 -2
  21. package/SCSS-Themes/dropdowns/multi-select/bootstrap.scss +3 -2
  22. package/SCSS-Themes/dropdowns/multi-select/bootstrap4.scss +3 -2
  23. package/SCSS-Themes/dropdowns/multi-select/bootstrap5-dark.scss +3 -2
  24. package/SCSS-Themes/dropdowns/multi-select/bootstrap5.scss +3 -2
  25. package/SCSS-Themes/dropdowns/multi-select/fabric-dark.scss +3 -2
  26. package/SCSS-Themes/dropdowns/multi-select/fabric.scss +3 -2
  27. package/SCSS-Themes/dropdowns/multi-select/fluent-dark.scss +3 -2
  28. package/SCSS-Themes/dropdowns/multi-select/fluent.scss +3 -2
  29. package/SCSS-Themes/dropdowns/multi-select/highcontrast.scss +3 -2
  30. package/SCSS-Themes/dropdowns/multi-select/material-dark.scss +3 -2
  31. package/SCSS-Themes/dropdowns/multi-select/material.scss +3 -2
  32. package/SCSS-Themes/dropdowns/multi-select/tailwind-dark.scss +3 -2
  33. package/SCSS-Themes/dropdowns/multi-select/tailwind.scss +3 -2
  34. package/SCSS-Themes/fabric-dark.scss +86 -46
  35. package/SCSS-Themes/fabric.scss +86 -46
  36. package/SCSS-Themes/fluent-dark.scss +87 -47
  37. package/SCSS-Themes/fluent.scss +87 -47
  38. package/SCSS-Themes/grids/grid/bootstrap-dark.scss +12 -0
  39. package/SCSS-Themes/grids/grid/bootstrap.scss +12 -0
  40. package/SCSS-Themes/grids/grid/bootstrap4.scss +12 -0
  41. package/SCSS-Themes/grids/grid/bootstrap5-dark.scss +12 -0
  42. package/SCSS-Themes/grids/grid/bootstrap5.scss +12 -0
  43. package/SCSS-Themes/grids/grid/fabric-dark.scss +12 -0
  44. package/SCSS-Themes/grids/grid/fabric.scss +12 -0
  45. package/SCSS-Themes/grids/grid/fluent-dark.scss +12 -0
  46. package/SCSS-Themes/grids/grid/fluent.scss +12 -0
  47. package/SCSS-Themes/grids/grid/highcontrast.scss +12 -0
  48. package/SCSS-Themes/grids/grid/material-dark.scss +12 -0
  49. package/SCSS-Themes/grids/grid/material.scss +12 -0
  50. package/SCSS-Themes/grids/grid/tailwind-dark.scss +12 -0
  51. package/SCSS-Themes/grids/grid/tailwind.scss +12 -0
  52. package/SCSS-Themes/highcontrast.scss +86 -46
  53. package/SCSS-Themes/image-editor/image-editor/bootstrap-dark.scss +6 -0
  54. package/SCSS-Themes/image-editor/image-editor/bootstrap.scss +6 -0
  55. package/SCSS-Themes/image-editor/image-editor/bootstrap4.scss +6 -0
  56. package/SCSS-Themes/image-editor/image-editor/bootstrap5-dark.scss +6 -0
  57. package/SCSS-Themes/image-editor/image-editor/bootstrap5.scss +6 -0
  58. package/SCSS-Themes/image-editor/image-editor/fabric-dark.scss +6 -0
  59. package/SCSS-Themes/image-editor/image-editor/fabric.scss +6 -0
  60. package/SCSS-Themes/image-editor/image-editor/fluent-dark.scss +6 -0
  61. package/SCSS-Themes/image-editor/image-editor/fluent.scss +6 -0
  62. package/SCSS-Themes/image-editor/image-editor/highcontrast.scss +6 -0
  63. package/SCSS-Themes/image-editor/image-editor/material-dark.scss +6 -0
  64. package/SCSS-Themes/image-editor/image-editor/material.scss +6 -0
  65. package/SCSS-Themes/image-editor/image-editor/tailwind-dark.scss +6 -0
  66. package/SCSS-Themes/image-editor/image-editor/tailwind.scss +6 -0
  67. package/SCSS-Themes/inputs/color-picker/bootstrap-dark.scss +14 -0
  68. package/SCSS-Themes/inputs/color-picker/bootstrap.scss +14 -0
  69. package/SCSS-Themes/inputs/color-picker/bootstrap4.scss +14 -0
  70. package/SCSS-Themes/inputs/color-picker/bootstrap5-dark.scss +14 -0
  71. package/SCSS-Themes/inputs/color-picker/bootstrap5.scss +14 -0
  72. package/SCSS-Themes/inputs/color-picker/fabric-dark.scss +14 -0
  73. package/SCSS-Themes/inputs/color-picker/fabric.scss +14 -0
  74. package/SCSS-Themes/inputs/color-picker/fluent-dark.scss +14 -0
  75. package/SCSS-Themes/inputs/color-picker/fluent.scss +14 -0
  76. package/SCSS-Themes/inputs/color-picker/highcontrast.scss +14 -0
  77. package/SCSS-Themes/inputs/color-picker/material-dark.scss +14 -0
  78. package/SCSS-Themes/inputs/color-picker/material.scss +14 -0
  79. package/SCSS-Themes/inputs/color-picker/tailwind-dark.scss +14 -0
  80. package/SCSS-Themes/inputs/color-picker/tailwind.scss +14 -0
  81. package/SCSS-Themes/material-dark.scss +86 -46
  82. package/SCSS-Themes/material.scss +86 -46
  83. package/SCSS-Themes/navigations/context-menu/bootstrap-dark.scss +16 -12
  84. package/SCSS-Themes/navigations/context-menu/bootstrap.scss +16 -12
  85. package/SCSS-Themes/navigations/context-menu/bootstrap4.scss +16 -12
  86. package/SCSS-Themes/navigations/context-menu/bootstrap5-dark.scss +16 -12
  87. package/SCSS-Themes/navigations/context-menu/bootstrap5.scss +16 -12
  88. package/SCSS-Themes/navigations/context-menu/fabric-dark.scss +16 -12
  89. package/SCSS-Themes/navigations/context-menu/fabric.scss +16 -12
  90. package/SCSS-Themes/navigations/context-menu/fluent-dark.scss +16 -12
  91. package/SCSS-Themes/navigations/context-menu/fluent.scss +16 -12
  92. package/SCSS-Themes/navigations/context-menu/highcontrast.scss +16 -12
  93. package/SCSS-Themes/navigations/context-menu/material-dark.scss +16 -12
  94. package/SCSS-Themes/navigations/context-menu/material.scss +16 -12
  95. package/SCSS-Themes/navigations/context-menu/tailwind-dark.scss +16 -12
  96. package/SCSS-Themes/navigations/context-menu/tailwind.scss +16 -12
  97. package/SCSS-Themes/navigations/treeview/bootstrap4.scss +1 -1
  98. package/SCSS-Themes/navigations/treeview/bootstrap5-dark.scss +1 -1
  99. package/SCSS-Themes/navigations/treeview/bootstrap5.scss +1 -1
  100. package/SCSS-Themes/pivotview/pivotview/bootstrap-dark.scss +23 -27
  101. package/SCSS-Themes/pivotview/pivotview/bootstrap.scss +23 -27
  102. package/SCSS-Themes/pivotview/pivotview/bootstrap4.scss +23 -27
  103. package/SCSS-Themes/pivotview/pivotview/bootstrap5-dark.scss +23 -27
  104. package/SCSS-Themes/pivotview/pivotview/bootstrap5.scss +23 -27
  105. package/SCSS-Themes/pivotview/pivotview/fabric-dark.scss +23 -27
  106. package/SCSS-Themes/pivotview/pivotview/fabric.scss +23 -27
  107. package/SCSS-Themes/pivotview/pivotview/fluent-dark.scss +23 -27
  108. package/SCSS-Themes/pivotview/pivotview/fluent.scss +23 -27
  109. package/SCSS-Themes/pivotview/pivotview/highcontrast.scss +23 -27
  110. package/SCSS-Themes/pivotview/pivotview/material-dark.scss +23 -27
  111. package/SCSS-Themes/pivotview/pivotview/material.scss +23 -27
  112. package/SCSS-Themes/pivotview/pivotview/tailwind-dark.scss +23 -27
  113. package/SCSS-Themes/pivotview/pivotview/tailwind.scss +23 -27
  114. package/SCSS-Themes/popups/dialog/fluent-dark.scss +1 -1
  115. package/SCSS-Themes/popups/dialog/fluent.scss +1 -1
  116. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap-dark.scss +4 -4
  117. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap.scss +4 -4
  118. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap4.scss +4 -4
  119. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap5-dark.scss +4 -4
  120. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap5.scss +4 -4
  121. package/SCSS-Themes/richtexteditor/rich-text-editor/fabric-dark.scss +4 -4
  122. package/SCSS-Themes/richtexteditor/rich-text-editor/fabric.scss +4 -4
  123. package/SCSS-Themes/richtexteditor/rich-text-editor/fluent-dark.scss +4 -4
  124. package/SCSS-Themes/richtexteditor/rich-text-editor/fluent.scss +4 -4
  125. package/SCSS-Themes/richtexteditor/rich-text-editor/highcontrast.scss +4 -4
  126. package/SCSS-Themes/richtexteditor/rich-text-editor/material-dark.scss +4 -4
  127. package/SCSS-Themes/richtexteditor/rich-text-editor/material.scss +4 -4
  128. package/SCSS-Themes/richtexteditor/rich-text-editor/tailwind-dark.scss +4 -4
  129. package/SCSS-Themes/richtexteditor/rich-text-editor/tailwind.scss +4 -4
  130. package/SCSS-Themes/schedule/schedule/bootstrap-dark.scss +1 -1
  131. package/SCSS-Themes/schedule/schedule/bootstrap.scss +1 -1
  132. package/SCSS-Themes/schedule/schedule/bootstrap4.scss +1 -1
  133. package/SCSS-Themes/schedule/schedule/bootstrap5-dark.scss +1 -1
  134. package/SCSS-Themes/schedule/schedule/bootstrap5.scss +1 -1
  135. package/SCSS-Themes/schedule/schedule/fabric-dark.scss +1 -1
  136. package/SCSS-Themes/schedule/schedule/fabric.scss +1 -1
  137. package/SCSS-Themes/schedule/schedule/fluent-dark.scss +1 -1
  138. package/SCSS-Themes/schedule/schedule/fluent.scss +1 -1
  139. package/SCSS-Themes/schedule/schedule/highcontrast.scss +1 -1
  140. package/SCSS-Themes/schedule/schedule/material-dark.scss +1 -1
  141. package/SCSS-Themes/schedule/schedule/material.scss +1 -1
  142. package/SCSS-Themes/schedule/schedule/tailwind-dark.scss +1 -1
  143. package/SCSS-Themes/schedule/schedule/tailwind.scss +1 -1
  144. package/SCSS-Themes/splitbuttons/drop-down-button/bootstrap-dark.scss +3 -0
  145. package/SCSS-Themes/splitbuttons/drop-down-button/bootstrap.scss +3 -0
  146. package/SCSS-Themes/splitbuttons/drop-down-button/bootstrap4.scss +3 -0
  147. package/SCSS-Themes/splitbuttons/drop-down-button/bootstrap5-dark.scss +3 -0
  148. package/SCSS-Themes/splitbuttons/drop-down-button/bootstrap5.scss +3 -0
  149. package/SCSS-Themes/splitbuttons/drop-down-button/fabric-dark.scss +3 -0
  150. package/SCSS-Themes/splitbuttons/drop-down-button/fabric.scss +3 -0
  151. package/SCSS-Themes/splitbuttons/drop-down-button/fluent-dark.scss +3 -0
  152. package/SCSS-Themes/splitbuttons/drop-down-button/fluent.scss +3 -0
  153. package/SCSS-Themes/splitbuttons/drop-down-button/highcontrast.scss +3 -0
  154. package/SCSS-Themes/splitbuttons/drop-down-button/material-dark.scss +3 -0
  155. package/SCSS-Themes/splitbuttons/drop-down-button/material.scss +3 -0
  156. package/SCSS-Themes/splitbuttons/drop-down-button/tailwind-dark.scss +3 -0
  157. package/SCSS-Themes/splitbuttons/drop-down-button/tailwind.scss +3 -0
  158. package/SCSS-Themes/tailwind-dark.scss +86 -46
  159. package/SCSS-Themes/tailwind.scss +86 -46
  160. package/package.json +1 -1
@@ -831,20 +831,6 @@ $pivotpager-single-size-title-padding: 8px !default;
831
831
 
832
832
  .e-toolbar-items {
833
833
  background: $pivotgrid-grp-bg-color;
834
-
835
- .e-toolbar-item {
836
- .e-tbar-btn.e-btn.e-control {
837
- @if ($skin-name =='fabric') or ($skin-name =='fabric-dark') or ($skin-name =='material') or ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') or ($skin-name =='bootstrap4') {
838
- background: $pivotgrid-grp-bg-color;
839
-
840
- &:hover {
841
- @if ($skin-name =='material') or ($skin-name =='material-dark') or ($skin-name =='fabric-dark') or ($skin-name =='bootstrap4') {
842
- background: $pivotgrid-grp-bg-hover-color;
843
- }
844
- }
845
- }
846
- }
847
- }
848
834
  }
849
835
 
850
836
  .e-toolbar-item .e-tbar-btn.e-btn {
@@ -937,20 +923,28 @@ $pivotpager-single-size-title-padding: 8px !default;
937
923
  @if ($pivotgrid-skin == 'bootstrap4') {
938
924
  background-color: $gray-600;
939
925
  border-radius: $pivotgrid-default-border-radius;
940
- }
926
+ }
941
927
 
942
- .e-menu-icon,
943
- .e-icons{
944
- @if ($pivotgrid-skin == 'bootstrap4') {
945
- color: $white;
928
+ .e-menu-icon,
929
+ .e-icons{
930
+ @if ($pivotgrid-skin == 'bootstrap4') {
931
+ color: $white;
932
+ }
933
+
934
+ @if ($pivotgrid-skin == 'FluentUI') {
935
+ color: $pivotgrid-active-color;
936
+ }
946
937
  }
938
+ }
947
939
 
948
- @if ($pivotgrid-skin == 'FluentUI') {
949
- color: $pivotgrid-active-color;
940
+ ul.e-menu {
941
+ @if ($pivotgrid-skin == 'fabric') or ($pivotgrid-skin == 'fabric-dark') or
942
+ ($pivotgrid-skin == 'highcontrast') or ($pivotgrid-skin == 'highcontrast-light') {
943
+ padding-right: 0 !important;
944
+ padding-left: 0 !important;
950
945
  }
951
946
  }
952
947
  }
953
- }
954
948
 
955
949
  .e-tab .e-tab-header .e-toolbar-item.e-active {
956
950
  margin-left: 18px !important;
@@ -1443,15 +1437,17 @@ $pivotpager-single-size-title-padding: 8px !default;
1443
1437
  }
1444
1438
 
1445
1439
  .e-toolbar .e-tbar-btn {
1446
- @if ($skin-name == 'tailwind') {
1447
- background-color: transparent;
1448
- }
1440
+ background-color: transparent;
1441
+
1442
+ @if ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
1443
+ border: none !important;
1444
+ }
1449
1445
 
1450
1446
  &:hover {
1451
1447
  @if ($skin-name == 'tailwind') {
1452
1448
  background-color: $pivot-toolbar-icon-hover-color;
1453
- }
1454
- }
1449
+ }
1450
+ }
1455
1451
  }
1456
1452
 
1457
1453
 
@@ -836,20 +836,6 @@ $pivotpager-single-size-title-padding: 8px !default;
836
836
 
837
837
  .e-toolbar-items {
838
838
  background: $pivotgrid-grp-bg-color;
839
-
840
- .e-toolbar-item {
841
- .e-tbar-btn.e-btn.e-control {
842
- @if ($skin-name =='fabric') or ($skin-name =='fabric-dark') or ($skin-name =='material') or ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') or ($skin-name =='bootstrap4') {
843
- background: $pivotgrid-grp-bg-color;
844
-
845
- &:hover {
846
- @if ($skin-name =='material') or ($skin-name =='material-dark') or ($skin-name =='fabric-dark') or ($skin-name =='bootstrap4') {
847
- background: $pivotgrid-grp-bg-hover-color;
848
- }
849
- }
850
- }
851
- }
852
- }
853
839
  }
854
840
 
855
841
  .e-toolbar-item .e-tbar-btn.e-btn {
@@ -942,20 +928,28 @@ $pivotpager-single-size-title-padding: 8px !default;
942
928
  @if ($pivotgrid-skin == 'bootstrap4') {
943
929
  background-color: $gray-600;
944
930
  border-radius: $pivotgrid-default-border-radius;
945
- }
931
+ }
946
932
 
947
- .e-menu-icon,
948
- .e-icons{
949
- @if ($pivotgrid-skin == 'bootstrap4') {
950
- color: $white;
933
+ .e-menu-icon,
934
+ .e-icons{
935
+ @if ($pivotgrid-skin == 'bootstrap4') {
936
+ color: $white;
937
+ }
938
+
939
+ @if ($pivotgrid-skin == 'FluentUI') {
940
+ color: $pivotgrid-active-color;
941
+ }
951
942
  }
943
+ }
952
944
 
953
- @if ($pivotgrid-skin == 'FluentUI') {
954
- color: $pivotgrid-active-color;
945
+ ul.e-menu {
946
+ @if ($pivotgrid-skin == 'fabric') or ($pivotgrid-skin == 'fabric-dark') or
947
+ ($pivotgrid-skin == 'highcontrast') or ($pivotgrid-skin == 'highcontrast-light') {
948
+ padding-right: 0 !important;
949
+ padding-left: 0 !important;
955
950
  }
956
951
  }
957
952
  }
958
- }
959
953
 
960
954
  .e-tab .e-tab-header .e-toolbar-item.e-active {
961
955
  margin-left: 18px !important;
@@ -1448,15 +1442,17 @@ $pivotpager-single-size-title-padding: 8px !default;
1448
1442
  }
1449
1443
 
1450
1444
  .e-toolbar .e-tbar-btn {
1451
- @if ($skin-name == 'tailwind') {
1452
- background-color: transparent;
1453
- }
1445
+ background-color: transparent;
1446
+
1447
+ @if ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
1448
+ border: none !important;
1449
+ }
1454
1450
 
1455
1451
  &:hover {
1456
1452
  @if ($skin-name == 'tailwind') {
1457
1453
  background-color: $pivot-toolbar-icon-hover-color;
1458
- }
1459
- }
1454
+ }
1455
+ }
1460
1456
  }
1461
1457
 
1462
1458
 
@@ -836,20 +836,6 @@ $pivotpager-single-size-title-padding: 8px !default;
836
836
 
837
837
  .e-toolbar-items {
838
838
  background: $pivotgrid-grp-bg-color;
839
-
840
- .e-toolbar-item {
841
- .e-tbar-btn.e-btn.e-control {
842
- @if ($skin-name =='fabric') or ($skin-name =='fabric-dark') or ($skin-name =='material') or ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') or ($skin-name =='bootstrap4') {
843
- background: $pivotgrid-grp-bg-color;
844
-
845
- &:hover {
846
- @if ($skin-name =='material') or ($skin-name =='material-dark') or ($skin-name =='fabric-dark') or ($skin-name =='bootstrap4') {
847
- background: $pivotgrid-grp-bg-hover-color;
848
- }
849
- }
850
- }
851
- }
852
- }
853
839
  }
854
840
 
855
841
  .e-toolbar-item .e-tbar-btn.e-btn {
@@ -942,20 +928,28 @@ $pivotpager-single-size-title-padding: 8px !default;
942
928
  @if ($pivotgrid-skin == 'bootstrap4') {
943
929
  background-color: $gray-600;
944
930
  border-radius: $pivotgrid-default-border-radius;
945
- }
931
+ }
946
932
 
947
- .e-menu-icon,
948
- .e-icons{
949
- @if ($pivotgrid-skin == 'bootstrap4') {
950
- color: $white;
933
+ .e-menu-icon,
934
+ .e-icons{
935
+ @if ($pivotgrid-skin == 'bootstrap4') {
936
+ color: $white;
937
+ }
938
+
939
+ @if ($pivotgrid-skin == 'FluentUI') {
940
+ color: $pivotgrid-active-color;
941
+ }
951
942
  }
943
+ }
952
944
 
953
- @if ($pivotgrid-skin == 'FluentUI') {
954
- color: $pivotgrid-active-color;
945
+ ul.e-menu {
946
+ @if ($pivotgrid-skin == 'fabric') or ($pivotgrid-skin == 'fabric-dark') or
947
+ ($pivotgrid-skin == 'highcontrast') or ($pivotgrid-skin == 'highcontrast-light') {
948
+ padding-right: 0 !important;
949
+ padding-left: 0 !important;
955
950
  }
956
951
  }
957
952
  }
958
- }
959
953
 
960
954
  .e-tab .e-tab-header .e-toolbar-item.e-active {
961
955
  margin-left: 18px !important;
@@ -1448,15 +1442,17 @@ $pivotpager-single-size-title-padding: 8px !default;
1448
1442
  }
1449
1443
 
1450
1444
  .e-toolbar .e-tbar-btn {
1451
- @if ($skin-name == 'tailwind') {
1452
- background-color: transparent;
1453
- }
1445
+ background-color: transparent;
1446
+
1447
+ @if ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
1448
+ border: none !important;
1449
+ }
1454
1450
 
1455
1451
  &:hover {
1456
1452
  @if ($skin-name == 'tailwind') {
1457
1453
  background-color: $pivot-toolbar-icon-hover-color;
1458
- }
1459
- }
1454
+ }
1455
+ }
1460
1456
  }
1461
1457
 
1462
1458
 
@@ -833,20 +833,6 @@ $pivotpager-single-size-title-padding: 4px !default;
833
833
 
834
834
  .e-toolbar-items {
835
835
  background: $pivotgrid-grp-bg-color;
836
-
837
- .e-toolbar-item {
838
- .e-tbar-btn.e-btn.e-control {
839
- @if ($skin-name =='fabric') or ($skin-name =='fabric-dark') or ($skin-name =='material') or ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') or ($skin-name =='bootstrap4') {
840
- background: $pivotgrid-grp-bg-color;
841
-
842
- &:hover {
843
- @if ($skin-name =='material') or ($skin-name =='material-dark') or ($skin-name =='fabric-dark') or ($skin-name =='bootstrap4') {
844
- background: $pivotgrid-grp-bg-hover-color;
845
- }
846
- }
847
- }
848
- }
849
- }
850
836
  }
851
837
 
852
838
  .e-toolbar-item .e-tbar-btn.e-btn {
@@ -939,20 +925,28 @@ $pivotpager-single-size-title-padding: 4px !default;
939
925
  @if ($pivotgrid-skin == 'bootstrap4') {
940
926
  background-color: $gray-600;
941
927
  border-radius: $pivotgrid-default-border-radius;
942
- }
928
+ }
943
929
 
944
- .e-menu-icon,
945
- .e-icons{
946
- @if ($pivotgrid-skin == 'bootstrap4') {
947
- color: $white;
930
+ .e-menu-icon,
931
+ .e-icons{
932
+ @if ($pivotgrid-skin == 'bootstrap4') {
933
+ color: $white;
934
+ }
935
+
936
+ @if ($pivotgrid-skin == 'FluentUI') {
937
+ color: $pivotgrid-active-color;
938
+ }
948
939
  }
940
+ }
949
941
 
950
- @if ($pivotgrid-skin == 'FluentUI') {
951
- color: $pivotgrid-active-color;
942
+ ul.e-menu {
943
+ @if ($pivotgrid-skin == 'fabric') or ($pivotgrid-skin == 'fabric-dark') or
944
+ ($pivotgrid-skin == 'highcontrast') or ($pivotgrid-skin == 'highcontrast-light') {
945
+ padding-right: 0 !important;
946
+ padding-left: 0 !important;
952
947
  }
953
948
  }
954
949
  }
955
- }
956
950
 
957
951
  .e-tab .e-tab-header .e-toolbar-item.e-active {
958
952
  margin-left: 18px !important;
@@ -1445,15 +1439,17 @@ $pivotpager-single-size-title-padding: 4px !default;
1445
1439
  }
1446
1440
 
1447
1441
  .e-toolbar .e-tbar-btn {
1448
- @if ($skin-name == 'tailwind') {
1449
- background-color: transparent;
1450
- }
1442
+ background-color: transparent;
1443
+
1444
+ @if ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
1445
+ border: none !important;
1446
+ }
1451
1447
 
1452
1448
  &:hover {
1453
1449
  @if ($skin-name == 'tailwind') {
1454
1450
  background-color: $pivot-toolbar-icon-hover-color;
1455
- }
1456
- }
1451
+ }
1452
+ }
1457
1453
  }
1458
1454
 
1459
1455
 
@@ -830,20 +830,6 @@ $pivotpager-single-size-title-padding: 4px !default;
830
830
 
831
831
  .e-toolbar-items {
832
832
  background: $pivotgrid-grp-bg-color;
833
-
834
- .e-toolbar-item {
835
- .e-tbar-btn.e-btn.e-control {
836
- @if ($skin-name =='fabric') or ($skin-name =='fabric-dark') or ($skin-name =='material') or ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') or ($skin-name =='bootstrap4') {
837
- background: $pivotgrid-grp-bg-color;
838
-
839
- &:hover {
840
- @if ($skin-name =='material') or ($skin-name =='material-dark') or ($skin-name =='fabric-dark') or ($skin-name =='bootstrap4') {
841
- background: $pivotgrid-grp-bg-hover-color;
842
- }
843
- }
844
- }
845
- }
846
- }
847
833
  }
848
834
 
849
835
  .e-toolbar-item .e-tbar-btn.e-btn {
@@ -936,20 +922,28 @@ $pivotpager-single-size-title-padding: 4px !default;
936
922
  @if ($pivotgrid-skin == 'bootstrap4') {
937
923
  background-color: $gray-600;
938
924
  border-radius: $pivotgrid-default-border-radius;
939
- }
925
+ }
940
926
 
941
- .e-menu-icon,
942
- .e-icons{
943
- @if ($pivotgrid-skin == 'bootstrap4') {
944
- color: $white;
927
+ .e-menu-icon,
928
+ .e-icons{
929
+ @if ($pivotgrid-skin == 'bootstrap4') {
930
+ color: $white;
931
+ }
932
+
933
+ @if ($pivotgrid-skin == 'FluentUI') {
934
+ color: $pivotgrid-active-color;
935
+ }
945
936
  }
937
+ }
946
938
 
947
- @if ($pivotgrid-skin == 'FluentUI') {
948
- color: $pivotgrid-active-color;
939
+ ul.e-menu {
940
+ @if ($pivotgrid-skin == 'fabric') or ($pivotgrid-skin == 'fabric-dark') or
941
+ ($pivotgrid-skin == 'highcontrast') or ($pivotgrid-skin == 'highcontrast-light') {
942
+ padding-right: 0 !important;
943
+ padding-left: 0 !important;
949
944
  }
950
945
  }
951
946
  }
952
- }
953
947
 
954
948
  .e-tab .e-tab-header .e-toolbar-item.e-active {
955
949
  margin-left: 18px !important;
@@ -1442,15 +1436,17 @@ $pivotpager-single-size-title-padding: 4px !default;
1442
1436
  }
1443
1437
 
1444
1438
  .e-toolbar .e-tbar-btn {
1445
- @if ($skin-name == 'tailwind') {
1446
- background-color: transparent;
1447
- }
1439
+ background-color: transparent;
1440
+
1441
+ @if ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
1442
+ border: none !important;
1443
+ }
1448
1444
 
1449
1445
  &:hover {
1450
1446
  @if ($skin-name == 'tailwind') {
1451
1447
  background-color: $pivot-toolbar-icon-hover-color;
1452
- }
1453
- }
1448
+ }
1449
+ }
1454
1450
  }
1455
1451
 
1456
1452
 
@@ -836,20 +836,6 @@ $pivotpager-single-size-title-padding: 8px !default;
836
836
 
837
837
  .e-toolbar-items {
838
838
  background: $pivotgrid-grp-bg-color;
839
-
840
- .e-toolbar-item {
841
- .e-tbar-btn.e-btn.e-control {
842
- @if ($skin-name =='fabric') or ($skin-name =='fabric-dark') or ($skin-name =='material') or ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') or ($skin-name =='bootstrap4') {
843
- background: $pivotgrid-grp-bg-color;
844
-
845
- &:hover {
846
- @if ($skin-name =='material') or ($skin-name =='material-dark') or ($skin-name =='fabric-dark') or ($skin-name =='bootstrap4') {
847
- background: $pivotgrid-grp-bg-hover-color;
848
- }
849
- }
850
- }
851
- }
852
- }
853
839
  }
854
840
 
855
841
  .e-toolbar-item .e-tbar-btn.e-btn {
@@ -942,20 +928,28 @@ $pivotpager-single-size-title-padding: 8px !default;
942
928
  @if ($pivotgrid-skin == 'bootstrap4') {
943
929
  background-color: $gray-600;
944
930
  border-radius: $pivotgrid-default-border-radius;
945
- }
931
+ }
946
932
 
947
- .e-menu-icon,
948
- .e-icons{
949
- @if ($pivotgrid-skin == 'bootstrap4') {
950
- color: $white;
933
+ .e-menu-icon,
934
+ .e-icons{
935
+ @if ($pivotgrid-skin == 'bootstrap4') {
936
+ color: $white;
937
+ }
938
+
939
+ @if ($pivotgrid-skin == 'FluentUI') {
940
+ color: $pivotgrid-active-color;
941
+ }
951
942
  }
943
+ }
952
944
 
953
- @if ($pivotgrid-skin == 'FluentUI') {
954
- color: $pivotgrid-active-color;
945
+ ul.e-menu {
946
+ @if ($pivotgrid-skin == 'fabric') or ($pivotgrid-skin == 'fabric-dark') or
947
+ ($pivotgrid-skin == 'highcontrast') or ($pivotgrid-skin == 'highcontrast-light') {
948
+ padding-right: 0 !important;
949
+ padding-left: 0 !important;
955
950
  }
956
951
  }
957
952
  }
958
- }
959
953
 
960
954
  .e-tab .e-tab-header .e-toolbar-item.e-active {
961
955
  margin-left: 18px !important;
@@ -1448,15 +1442,17 @@ $pivotpager-single-size-title-padding: 8px !default;
1448
1442
  }
1449
1443
 
1450
1444
  .e-toolbar .e-tbar-btn {
1451
- @if ($skin-name == 'tailwind') {
1452
- background-color: transparent;
1453
- }
1445
+ background-color: transparent;
1446
+
1447
+ @if ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
1448
+ border: none !important;
1449
+ }
1454
1450
 
1455
1451
  &:hover {
1456
1452
  @if ($skin-name == 'tailwind') {
1457
1453
  background-color: $pivot-toolbar-icon-hover-color;
1458
- }
1459
- }
1454
+ }
1455
+ }
1460
1456
  }
1461
1457
 
1462
1458
 
@@ -836,20 +836,6 @@ $pivotpager-single-size-title-padding: 8px !default;
836
836
 
837
837
  .e-toolbar-items {
838
838
  background: $pivotgrid-grp-bg-color;
839
-
840
- .e-toolbar-item {
841
- .e-tbar-btn.e-btn.e-control {
842
- @if ($skin-name =='fabric') or ($skin-name =='fabric-dark') or ($skin-name =='material') or ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') or ($skin-name =='bootstrap4') {
843
- background: $pivotgrid-grp-bg-color;
844
-
845
- &:hover {
846
- @if ($skin-name =='material') or ($skin-name =='material-dark') or ($skin-name =='fabric-dark') or ($skin-name =='bootstrap4') {
847
- background: $pivotgrid-grp-bg-hover-color;
848
- }
849
- }
850
- }
851
- }
852
- }
853
839
  }
854
840
 
855
841
  .e-toolbar-item .e-tbar-btn.e-btn {
@@ -942,20 +928,28 @@ $pivotpager-single-size-title-padding: 8px !default;
942
928
  @if ($pivotgrid-skin == 'bootstrap4') {
943
929
  background-color: $gray-600;
944
930
  border-radius: $pivotgrid-default-border-radius;
945
- }
931
+ }
946
932
 
947
- .e-menu-icon,
948
- .e-icons{
949
- @if ($pivotgrid-skin == 'bootstrap4') {
950
- color: $white;
933
+ .e-menu-icon,
934
+ .e-icons{
935
+ @if ($pivotgrid-skin == 'bootstrap4') {
936
+ color: $white;
937
+ }
938
+
939
+ @if ($pivotgrid-skin == 'FluentUI') {
940
+ color: $pivotgrid-active-color;
941
+ }
951
942
  }
943
+ }
952
944
 
953
- @if ($pivotgrid-skin == 'FluentUI') {
954
- color: $pivotgrid-active-color;
945
+ ul.e-menu {
946
+ @if ($pivotgrid-skin == 'fabric') or ($pivotgrid-skin == 'fabric-dark') or
947
+ ($pivotgrid-skin == 'highcontrast') or ($pivotgrid-skin == 'highcontrast-light') {
948
+ padding-right: 0 !important;
949
+ padding-left: 0 !important;
955
950
  }
956
951
  }
957
952
  }
958
- }
959
953
 
960
954
  .e-tab .e-tab-header .e-toolbar-item.e-active {
961
955
  margin-left: 18px !important;
@@ -1448,15 +1442,17 @@ $pivotpager-single-size-title-padding: 8px !default;
1448
1442
  }
1449
1443
 
1450
1444
  .e-toolbar .e-tbar-btn {
1451
- @if ($skin-name == 'tailwind') {
1452
- background-color: transparent;
1453
- }
1445
+ background-color: transparent;
1446
+
1447
+ @if ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
1448
+ border: none !important;
1449
+ }
1454
1450
 
1455
1451
  &:hover {
1456
1452
  @if ($skin-name == 'tailwind') {
1457
1453
  background-color: $pivot-toolbar-icon-hover-color;
1458
- }
1459
- }
1454
+ }
1455
+ }
1460
1456
  }
1461
1457
 
1462
1458
 
@@ -829,20 +829,6 @@ $pivotpager-single-size-title-padding: 4px !default;
829
829
 
830
830
  .e-toolbar-items {
831
831
  background: $pivotgrid-grp-bg-color;
832
-
833
- .e-toolbar-item {
834
- .e-tbar-btn.e-btn.e-control {
835
- @if ($skin-name =='fabric') or ($skin-name =='fabric-dark') or ($skin-name =='material') or ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') or ($skin-name =='bootstrap4') {
836
- background: $pivotgrid-grp-bg-color;
837
-
838
- &:hover {
839
- @if ($skin-name =='material') or ($skin-name =='material-dark') or ($skin-name =='fabric-dark') or ($skin-name =='bootstrap4') {
840
- background: $pivotgrid-grp-bg-hover-color;
841
- }
842
- }
843
- }
844
- }
845
- }
846
832
  }
847
833
 
848
834
  .e-toolbar-item .e-tbar-btn.e-btn {
@@ -935,20 +921,28 @@ $pivotpager-single-size-title-padding: 4px !default;
935
921
  @if ($pivotgrid-skin == 'bootstrap4') {
936
922
  background-color: $gray-600;
937
923
  border-radius: $pivotgrid-default-border-radius;
938
- }
924
+ }
939
925
 
940
- .e-menu-icon,
941
- .e-icons{
942
- @if ($pivotgrid-skin == 'bootstrap4') {
943
- color: $white;
926
+ .e-menu-icon,
927
+ .e-icons{
928
+ @if ($pivotgrid-skin == 'bootstrap4') {
929
+ color: $white;
930
+ }
931
+
932
+ @if ($pivotgrid-skin == 'FluentUI') {
933
+ color: $pivotgrid-active-color;
934
+ }
944
935
  }
936
+ }
945
937
 
946
- @if ($pivotgrid-skin == 'FluentUI') {
947
- color: $pivotgrid-active-color;
938
+ ul.e-menu {
939
+ @if ($pivotgrid-skin == 'fabric') or ($pivotgrid-skin == 'fabric-dark') or
940
+ ($pivotgrid-skin == 'highcontrast') or ($pivotgrid-skin == 'highcontrast-light') {
941
+ padding-right: 0 !important;
942
+ padding-left: 0 !important;
948
943
  }
949
944
  }
950
945
  }
951
- }
952
946
 
953
947
  .e-tab .e-tab-header .e-toolbar-item.e-active {
954
948
  margin-left: 18px !important;
@@ -1441,15 +1435,17 @@ $pivotpager-single-size-title-padding: 4px !default;
1441
1435
  }
1442
1436
 
1443
1437
  .e-toolbar .e-tbar-btn {
1444
- @if ($skin-name == 'tailwind') {
1445
- background-color: transparent;
1446
- }
1438
+ background-color: transparent;
1439
+
1440
+ @if ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
1441
+ border: none !important;
1442
+ }
1447
1443
 
1448
1444
  &:hover {
1449
1445
  @if ($skin-name == 'tailwind') {
1450
1446
  background-color: $pivot-toolbar-icon-hover-color;
1451
- }
1452
- }
1447
+ }
1448
+ }
1453
1449
  }
1454
1450
 
1455
1451