@syncfusion/blazor-themes 20.4.43 → 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 (189) hide show
  1. package/SCSS-Themes/base/tailwind.scss +1 -1
  2. package/SCSS-Themes/bootstrap-dark.scss +95 -47
  3. package/SCSS-Themes/bootstrap.scss +95 -47
  4. package/SCSS-Themes/bootstrap4.scss +96 -48
  5. package/SCSS-Themes/bootstrap5-dark.scss +96 -48
  6. package/SCSS-Themes/bootstrap5.scss +96 -48
  7. package/SCSS-Themes/buttons/check-box/bootstrap-dark.scss +4 -0
  8. package/SCSS-Themes/buttons/check-box/bootstrap.scss +4 -0
  9. package/SCSS-Themes/buttons/check-box/bootstrap4.scss +4 -0
  10. package/SCSS-Themes/buttons/check-box/bootstrap5-dark.scss +4 -0
  11. package/SCSS-Themes/buttons/check-box/bootstrap5.scss +4 -0
  12. package/SCSS-Themes/buttons/check-box/fabric-dark.scss +4 -0
  13. package/SCSS-Themes/buttons/check-box/fabric.scss +4 -0
  14. package/SCSS-Themes/buttons/check-box/fluent-dark.scss +4 -0
  15. package/SCSS-Themes/buttons/check-box/fluent.scss +4 -0
  16. package/SCSS-Themes/buttons/check-box/highcontrast.scss +4 -0
  17. package/SCSS-Themes/buttons/check-box/material-dark.scss +4 -0
  18. package/SCSS-Themes/buttons/check-box/material.scss +4 -0
  19. package/SCSS-Themes/buttons/check-box/tailwind-dark.scss +4 -0
  20. package/SCSS-Themes/buttons/check-box/tailwind.scss +4 -0
  21. package/SCSS-Themes/dropdowns/drop-down-list/bootstrap-dark.scss +3 -0
  22. package/SCSS-Themes/dropdowns/drop-down-list/bootstrap.scss +3 -0
  23. package/SCSS-Themes/dropdowns/drop-down-list/bootstrap4.scss +3 -0
  24. package/SCSS-Themes/dropdowns/drop-down-list/bootstrap5-dark.scss +3 -0
  25. package/SCSS-Themes/dropdowns/drop-down-list/bootstrap5.scss +3 -0
  26. package/SCSS-Themes/dropdowns/drop-down-list/fabric-dark.scss +3 -0
  27. package/SCSS-Themes/dropdowns/drop-down-list/fabric.scss +3 -0
  28. package/SCSS-Themes/dropdowns/drop-down-list/fluent-dark.scss +3 -0
  29. package/SCSS-Themes/dropdowns/drop-down-list/fluent.scss +3 -0
  30. package/SCSS-Themes/dropdowns/drop-down-list/highcontrast.scss +3 -0
  31. package/SCSS-Themes/dropdowns/drop-down-list/material-dark.scss +3 -0
  32. package/SCSS-Themes/dropdowns/drop-down-list/material.scss +3 -0
  33. package/SCSS-Themes/dropdowns/drop-down-list/tailwind-dark.scss +3 -0
  34. package/SCSS-Themes/dropdowns/drop-down-list/tailwind.scss +3 -0
  35. package/SCSS-Themes/dropdowns/multi-select/bootstrap-dark.scss +3 -2
  36. package/SCSS-Themes/dropdowns/multi-select/bootstrap.scss +3 -2
  37. package/SCSS-Themes/dropdowns/multi-select/bootstrap4.scss +3 -2
  38. package/SCSS-Themes/dropdowns/multi-select/bootstrap5-dark.scss +3 -2
  39. package/SCSS-Themes/dropdowns/multi-select/bootstrap5.scss +3 -2
  40. package/SCSS-Themes/dropdowns/multi-select/fabric-dark.scss +3 -2
  41. package/SCSS-Themes/dropdowns/multi-select/fabric.scss +3 -2
  42. package/SCSS-Themes/dropdowns/multi-select/fluent-dark.scss +3 -2
  43. package/SCSS-Themes/dropdowns/multi-select/fluent.scss +3 -2
  44. package/SCSS-Themes/dropdowns/multi-select/highcontrast.scss +3 -2
  45. package/SCSS-Themes/dropdowns/multi-select/material-dark.scss +3 -2
  46. package/SCSS-Themes/dropdowns/multi-select/material.scss +3 -2
  47. package/SCSS-Themes/dropdowns/multi-select/tailwind-dark.scss +3 -2
  48. package/SCSS-Themes/dropdowns/multi-select/tailwind.scss +3 -2
  49. package/SCSS-Themes/fabric-dark.scss +95 -47
  50. package/SCSS-Themes/fabric.scss +95 -47
  51. package/SCSS-Themes/fluent-dark.scss +96 -48
  52. package/SCSS-Themes/fluent.scss +96 -48
  53. package/SCSS-Themes/grids/grid/bootstrap-dark.scss +17 -1
  54. package/SCSS-Themes/grids/grid/bootstrap.scss +17 -1
  55. package/SCSS-Themes/grids/grid/bootstrap4.scss +17 -1
  56. package/SCSS-Themes/grids/grid/bootstrap5-dark.scss +17 -1
  57. package/SCSS-Themes/grids/grid/bootstrap5.scss +17 -1
  58. package/SCSS-Themes/grids/grid/fabric-dark.scss +17 -1
  59. package/SCSS-Themes/grids/grid/fabric.scss +17 -1
  60. package/SCSS-Themes/grids/grid/fluent-dark.scss +17 -1
  61. package/SCSS-Themes/grids/grid/fluent.scss +17 -1
  62. package/SCSS-Themes/grids/grid/highcontrast.scss +17 -1
  63. package/SCSS-Themes/grids/grid/material-dark.scss +17 -1
  64. package/SCSS-Themes/grids/grid/material.scss +17 -1
  65. package/SCSS-Themes/grids/grid/tailwind-dark.scss +17 -1
  66. package/SCSS-Themes/grids/grid/tailwind.scss +17 -1
  67. package/SCSS-Themes/highcontrast.scss +95 -47
  68. package/SCSS-Themes/image-editor/image-editor/bootstrap-dark.scss +6 -0
  69. package/SCSS-Themes/image-editor/image-editor/bootstrap.scss +6 -0
  70. package/SCSS-Themes/image-editor/image-editor/bootstrap4.scss +6 -0
  71. package/SCSS-Themes/image-editor/image-editor/bootstrap5-dark.scss +6 -0
  72. package/SCSS-Themes/image-editor/image-editor/bootstrap5.scss +6 -0
  73. package/SCSS-Themes/image-editor/image-editor/fabric-dark.scss +6 -0
  74. package/SCSS-Themes/image-editor/image-editor/fabric.scss +6 -0
  75. package/SCSS-Themes/image-editor/image-editor/fluent-dark.scss +6 -0
  76. package/SCSS-Themes/image-editor/image-editor/fluent.scss +6 -0
  77. package/SCSS-Themes/image-editor/image-editor/highcontrast.scss +6 -0
  78. package/SCSS-Themes/image-editor/image-editor/material-dark.scss +6 -0
  79. package/SCSS-Themes/image-editor/image-editor/material.scss +6 -0
  80. package/SCSS-Themes/image-editor/image-editor/tailwind-dark.scss +6 -0
  81. package/SCSS-Themes/image-editor/image-editor/tailwind.scss +6 -0
  82. package/SCSS-Themes/inputs/color-picker/bootstrap-dark.scss +14 -0
  83. package/SCSS-Themes/inputs/color-picker/bootstrap.scss +14 -0
  84. package/SCSS-Themes/inputs/color-picker/bootstrap4.scss +14 -0
  85. package/SCSS-Themes/inputs/color-picker/bootstrap5-dark.scss +14 -0
  86. package/SCSS-Themes/inputs/color-picker/bootstrap5.scss +14 -0
  87. package/SCSS-Themes/inputs/color-picker/fabric-dark.scss +14 -0
  88. package/SCSS-Themes/inputs/color-picker/fabric.scss +14 -0
  89. package/SCSS-Themes/inputs/color-picker/fluent-dark.scss +14 -0
  90. package/SCSS-Themes/inputs/color-picker/fluent.scss +14 -0
  91. package/SCSS-Themes/inputs/color-picker/highcontrast.scss +14 -0
  92. package/SCSS-Themes/inputs/color-picker/material-dark.scss +14 -0
  93. package/SCSS-Themes/inputs/color-picker/material.scss +14 -0
  94. package/SCSS-Themes/inputs/color-picker/tailwind-dark.scss +14 -0
  95. package/SCSS-Themes/inputs/color-picker/tailwind.scss +14 -0
  96. package/SCSS-Themes/inputs/input/bootstrap-dark.scss +1 -0
  97. package/SCSS-Themes/inputs/input/bootstrap.scss +1 -0
  98. package/SCSS-Themes/inputs/input/bootstrap4.scss +1 -0
  99. package/SCSS-Themes/inputs/input/bootstrap5-dark.scss +1 -0
  100. package/SCSS-Themes/inputs/input/bootstrap5.scss +1 -0
  101. package/SCSS-Themes/inputs/input/fabric-dark.scss +1 -0
  102. package/SCSS-Themes/inputs/input/fabric.scss +1 -0
  103. package/SCSS-Themes/inputs/input/fluent-dark.scss +1 -0
  104. package/SCSS-Themes/inputs/input/fluent.scss +1 -0
  105. package/SCSS-Themes/inputs/input/highcontrast.scss +1 -0
  106. package/SCSS-Themes/inputs/input/material-dark.scss +1 -0
  107. package/SCSS-Themes/inputs/input/material.scss +1 -0
  108. package/SCSS-Themes/inputs/input/tailwind-dark.scss +1 -0
  109. package/SCSS-Themes/inputs/input/tailwind.scss +1 -0
  110. package/SCSS-Themes/material-dark.scss +95 -47
  111. package/SCSS-Themes/material.scss +95 -47
  112. package/SCSS-Themes/navigations/context-menu/bootstrap-dark.scss +16 -12
  113. package/SCSS-Themes/navigations/context-menu/bootstrap.scss +16 -12
  114. package/SCSS-Themes/navigations/context-menu/bootstrap4.scss +16 -12
  115. package/SCSS-Themes/navigations/context-menu/bootstrap5-dark.scss +16 -12
  116. package/SCSS-Themes/navigations/context-menu/bootstrap5.scss +16 -12
  117. package/SCSS-Themes/navigations/context-menu/fabric-dark.scss +16 -12
  118. package/SCSS-Themes/navigations/context-menu/fabric.scss +16 -12
  119. package/SCSS-Themes/navigations/context-menu/fluent-dark.scss +16 -12
  120. package/SCSS-Themes/navigations/context-menu/fluent.scss +16 -12
  121. package/SCSS-Themes/navigations/context-menu/highcontrast.scss +16 -12
  122. package/SCSS-Themes/navigations/context-menu/material-dark.scss +16 -12
  123. package/SCSS-Themes/navigations/context-menu/material.scss +16 -12
  124. package/SCSS-Themes/navigations/context-menu/tailwind-dark.scss +16 -12
  125. package/SCSS-Themes/navigations/context-menu/tailwind.scss +16 -12
  126. package/SCSS-Themes/navigations/treeview/bootstrap4.scss +1 -1
  127. package/SCSS-Themes/navigations/treeview/bootstrap5-dark.scss +1 -1
  128. package/SCSS-Themes/navigations/treeview/bootstrap5.scss +1 -1
  129. package/SCSS-Themes/pivotview/pivotview/bootstrap-dark.scss +23 -27
  130. package/SCSS-Themes/pivotview/pivotview/bootstrap.scss +23 -27
  131. package/SCSS-Themes/pivotview/pivotview/bootstrap4.scss +23 -27
  132. package/SCSS-Themes/pivotview/pivotview/bootstrap5-dark.scss +23 -27
  133. package/SCSS-Themes/pivotview/pivotview/bootstrap5.scss +23 -27
  134. package/SCSS-Themes/pivotview/pivotview/fabric-dark.scss +23 -27
  135. package/SCSS-Themes/pivotview/pivotview/fabric.scss +23 -27
  136. package/SCSS-Themes/pivotview/pivotview/fluent-dark.scss +23 -27
  137. package/SCSS-Themes/pivotview/pivotview/fluent.scss +23 -27
  138. package/SCSS-Themes/pivotview/pivotview/highcontrast.scss +23 -27
  139. package/SCSS-Themes/pivotview/pivotview/material-dark.scss +23 -27
  140. package/SCSS-Themes/pivotview/pivotview/material.scss +23 -27
  141. package/SCSS-Themes/pivotview/pivotview/tailwind-dark.scss +23 -27
  142. package/SCSS-Themes/pivotview/pivotview/tailwind.scss +23 -27
  143. package/SCSS-Themes/popups/dialog/fluent-dark.scss +1 -1
  144. package/SCSS-Themes/popups/dialog/fluent.scss +1 -1
  145. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap-dark.scss +4 -4
  146. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap.scss +4 -4
  147. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap4.scss +4 -4
  148. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap5-dark.scss +4 -4
  149. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap5.scss +4 -4
  150. package/SCSS-Themes/richtexteditor/rich-text-editor/fabric-dark.scss +4 -4
  151. package/SCSS-Themes/richtexteditor/rich-text-editor/fabric.scss +4 -4
  152. package/SCSS-Themes/richtexteditor/rich-text-editor/fluent-dark.scss +4 -4
  153. package/SCSS-Themes/richtexteditor/rich-text-editor/fluent.scss +4 -4
  154. package/SCSS-Themes/richtexteditor/rich-text-editor/highcontrast.scss +4 -4
  155. package/SCSS-Themes/richtexteditor/rich-text-editor/material-dark.scss +4 -4
  156. package/SCSS-Themes/richtexteditor/rich-text-editor/material.scss +4 -4
  157. package/SCSS-Themes/richtexteditor/rich-text-editor/tailwind-dark.scss +4 -4
  158. package/SCSS-Themes/richtexteditor/rich-text-editor/tailwind.scss +4 -4
  159. package/SCSS-Themes/schedule/schedule/bootstrap-dark.scss +1 -1
  160. package/SCSS-Themes/schedule/schedule/bootstrap.scss +1 -1
  161. package/SCSS-Themes/schedule/schedule/bootstrap4.scss +1 -1
  162. package/SCSS-Themes/schedule/schedule/bootstrap5-dark.scss +1 -1
  163. package/SCSS-Themes/schedule/schedule/bootstrap5.scss +1 -1
  164. package/SCSS-Themes/schedule/schedule/fabric-dark.scss +1 -1
  165. package/SCSS-Themes/schedule/schedule/fabric.scss +1 -1
  166. package/SCSS-Themes/schedule/schedule/fluent-dark.scss +1 -1
  167. package/SCSS-Themes/schedule/schedule/fluent.scss +1 -1
  168. package/SCSS-Themes/schedule/schedule/highcontrast.scss +1 -1
  169. package/SCSS-Themes/schedule/schedule/material-dark.scss +1 -1
  170. package/SCSS-Themes/schedule/schedule/material.scss +1 -1
  171. package/SCSS-Themes/schedule/schedule/tailwind-dark.scss +1 -1
  172. package/SCSS-Themes/schedule/schedule/tailwind.scss +1 -1
  173. package/SCSS-Themes/splitbuttons/drop-down-button/bootstrap-dark.scss +3 -0
  174. package/SCSS-Themes/splitbuttons/drop-down-button/bootstrap.scss +3 -0
  175. package/SCSS-Themes/splitbuttons/drop-down-button/bootstrap4.scss +3 -0
  176. package/SCSS-Themes/splitbuttons/drop-down-button/bootstrap5-dark.scss +3 -0
  177. package/SCSS-Themes/splitbuttons/drop-down-button/bootstrap5.scss +3 -0
  178. package/SCSS-Themes/splitbuttons/drop-down-button/fabric-dark.scss +3 -0
  179. package/SCSS-Themes/splitbuttons/drop-down-button/fabric.scss +3 -0
  180. package/SCSS-Themes/splitbuttons/drop-down-button/fluent-dark.scss +3 -0
  181. package/SCSS-Themes/splitbuttons/drop-down-button/fluent.scss +3 -0
  182. package/SCSS-Themes/splitbuttons/drop-down-button/highcontrast.scss +3 -0
  183. package/SCSS-Themes/splitbuttons/drop-down-button/material-dark.scss +3 -0
  184. package/SCSS-Themes/splitbuttons/drop-down-button/material.scss +3 -0
  185. package/SCSS-Themes/splitbuttons/drop-down-button/tailwind-dark.scss +3 -0
  186. package/SCSS-Themes/splitbuttons/drop-down-button/tailwind.scss +3 -0
  187. package/SCSS-Themes/tailwind-dark.scss +95 -47
  188. package/SCSS-Themes/tailwind.scss +96 -48
  189. 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
 
@@ -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