@syncfusion/blazor-themes 20.4.48 → 20.4.49

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 (71) hide show
  1. package/SCSS-Themes/bootstrap-dark.scss +34 -11
  2. package/SCSS-Themes/bootstrap.scss +34 -11
  3. package/SCSS-Themes/bootstrap4.scss +34 -11
  4. package/SCSS-Themes/bootstrap5-dark.scss +34 -11
  5. package/SCSS-Themes/bootstrap5.scss +34 -11
  6. package/SCSS-Themes/fabric-dark.scss +38 -15
  7. package/SCSS-Themes/fabric.scss +38 -15
  8. package/SCSS-Themes/fluent-dark.scss +34 -11
  9. package/SCSS-Themes/fluent.scss +34 -11
  10. package/SCSS-Themes/highcontrast.scss +34 -11
  11. package/SCSS-Themes/material-dark.scss +34 -11
  12. package/SCSS-Themes/material.scss +34 -11
  13. package/SCSS-Themes/navigations/accordion/bootstrap-dark.scss +4 -4
  14. package/SCSS-Themes/navigations/accordion/bootstrap.scss +4 -4
  15. package/SCSS-Themes/navigations/accordion/bootstrap4.scss +4 -4
  16. package/SCSS-Themes/navigations/accordion/bootstrap5-dark.scss +4 -4
  17. package/SCSS-Themes/navigations/accordion/bootstrap5.scss +4 -4
  18. package/SCSS-Themes/navigations/accordion/fabric-dark.scss +4 -4
  19. package/SCSS-Themes/navigations/accordion/fabric.scss +4 -4
  20. package/SCSS-Themes/navigations/accordion/fluent-dark.scss +4 -4
  21. package/SCSS-Themes/navigations/accordion/fluent.scss +4 -4
  22. package/SCSS-Themes/navigations/accordion/highcontrast.scss +4 -4
  23. package/SCSS-Themes/navigations/accordion/material-dark.scss +4 -4
  24. package/SCSS-Themes/navigations/accordion/material.scss +4 -4
  25. package/SCSS-Themes/navigations/accordion/tailwind-dark.scss +4 -4
  26. package/SCSS-Themes/navigations/accordion/tailwind.scss +4 -4
  27. package/SCSS-Themes/navigations/context-menu/bootstrap-dark.scss +6 -2
  28. package/SCSS-Themes/navigations/context-menu/bootstrap.scss +6 -2
  29. package/SCSS-Themes/navigations/context-menu/bootstrap4.scss +6 -2
  30. package/SCSS-Themes/navigations/context-menu/bootstrap5-dark.scss +6 -2
  31. package/SCSS-Themes/navigations/context-menu/bootstrap5.scss +6 -2
  32. package/SCSS-Themes/navigations/context-menu/fabric-dark.scss +6 -2
  33. package/SCSS-Themes/navigations/context-menu/fabric.scss +6 -2
  34. package/SCSS-Themes/navigations/context-menu/fluent-dark.scss +6 -2
  35. package/SCSS-Themes/navigations/context-menu/fluent.scss +6 -2
  36. package/SCSS-Themes/navigations/context-menu/highcontrast.scss +6 -2
  37. package/SCSS-Themes/navigations/context-menu/material-dark.scss +6 -2
  38. package/SCSS-Themes/navigations/context-menu/material.scss +6 -2
  39. package/SCSS-Themes/navigations/context-menu/tailwind-dark.scss +6 -2
  40. package/SCSS-Themes/navigations/context-menu/tailwind.scss +6 -2
  41. package/SCSS-Themes/navigations/menu/bootstrap-dark.scss +2 -1
  42. package/SCSS-Themes/navigations/menu/bootstrap.scss +2 -1
  43. package/SCSS-Themes/navigations/menu/bootstrap4.scss +2 -1
  44. package/SCSS-Themes/navigations/menu/bootstrap5-dark.scss +2 -1
  45. package/SCSS-Themes/navigations/menu/bootstrap5.scss +2 -1
  46. package/SCSS-Themes/navigations/menu/fabric-dark.scss +6 -5
  47. package/SCSS-Themes/navigations/menu/fabric.scss +6 -5
  48. package/SCSS-Themes/navigations/menu/fluent-dark.scss +2 -1
  49. package/SCSS-Themes/navigations/menu/fluent.scss +2 -1
  50. package/SCSS-Themes/navigations/menu/highcontrast.scss +2 -1
  51. package/SCSS-Themes/navigations/menu/material-dark.scss +2 -1
  52. package/SCSS-Themes/navigations/menu/material.scss +2 -1
  53. package/SCSS-Themes/navigations/menu/tailwind-dark.scss +2 -1
  54. package/SCSS-Themes/navigations/menu/tailwind.scss +2 -1
  55. package/SCSS-Themes/pivotview/pivotview/bootstrap-dark.scss +22 -4
  56. package/SCSS-Themes/pivotview/pivotview/bootstrap.scss +22 -4
  57. package/SCSS-Themes/pivotview/pivotview/bootstrap4.scss +22 -4
  58. package/SCSS-Themes/pivotview/pivotview/bootstrap5-dark.scss +22 -4
  59. package/SCSS-Themes/pivotview/pivotview/bootstrap5.scss +22 -4
  60. package/SCSS-Themes/pivotview/pivotview/fabric-dark.scss +22 -4
  61. package/SCSS-Themes/pivotview/pivotview/fabric.scss +22 -4
  62. package/SCSS-Themes/pivotview/pivotview/fluent-dark.scss +22 -4
  63. package/SCSS-Themes/pivotview/pivotview/fluent.scss +22 -4
  64. package/SCSS-Themes/pivotview/pivotview/highcontrast.scss +22 -4
  65. package/SCSS-Themes/pivotview/pivotview/material-dark.scss +22 -4
  66. package/SCSS-Themes/pivotview/pivotview/material.scss +22 -4
  67. package/SCSS-Themes/pivotview/pivotview/tailwind-dark.scss +22 -4
  68. package/SCSS-Themes/pivotview/pivotview/tailwind.scss +22 -4
  69. package/SCSS-Themes/tailwind-dark.scss +34 -11
  70. package/SCSS-Themes/tailwind.scss +34 -11
  71. package/package.json +1 -1
package/SCSS-Themes/navigations/menu/fabric-dark.scss CHANGED
@@ -135,6 +135,7 @@ $menu-header-icon-padding: 0 16px !default;
135
135
  line-height: $menu-li-height;
136
136
  margin-right: $menu-icon-margin-right;
137
137
  text-align: center;
138
+ margin-bottom: 4px;
138
139
  }
139
140
 
140
141
  & .e-caret {
@@ -788,7 +789,7 @@ $menu-header-icon-padding: 0 16px !default;
788
789
 
789
790
  @at-root {
790
791
  & .e-menu {
791
- @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
792
+ @if $skin-name == 'bootstrap4' {
792
793
  background-color: $cmenu-ul-bgcolor;
793
794
  }
794
795
  @else {
@@ -1147,7 +1148,7 @@ $menu-header-icon-padding: 0 16px !default;
1147
1148
  &.e-vertical {
1148
1149
  & .e-caret {
1149
1150
  &::before {
1150
- content: '\e937';
1151
+ content: '\e98f';
1151
1152
  }
1152
1153
  }
1153
1154
  }
@@ -1155,7 +1156,7 @@ $menu-header-icon-padding: 0 16px !default;
1155
1156
  &.e-ul {
1156
1157
  & .e-caret {
1157
1158
  &::before {
1158
- content: '\e937';
1159
+ content: '\e98f';
1159
1160
  }
1160
1161
  }
1161
1162
  }
@@ -1168,7 +1169,7 @@ $menu-header-icon-padding: 0 16px !default;
1168
1169
  &.e-vertical {
1169
1170
  & .e-caret {
1170
1171
  &::before {
1171
- content: '\e937';
1172
+ content: '\e98f';
1172
1173
  }
1173
1174
  }
1174
1175
  }
@@ -1176,7 +1177,7 @@ $menu-header-icon-padding: 0 16px !default;
1176
1177
  &.e-ul {
1177
1178
  & .e-caret {
1178
1179
  &::before {
1179
- content: '\e937';
1180
+ content: '\e98f';
1180
1181
  }
1181
1182
  }
1182
1183
  }
package/SCSS-Themes/navigations/menu/fabric.scss CHANGED
@@ -135,6 +135,7 @@ $menu-header-icon-padding: 0 16px !default;
135
135
  line-height: $menu-li-height;
136
136
  margin-right: $menu-icon-margin-right;
137
137
  text-align: center;
138
+ margin-bottom: 4px;
138
139
  }
139
140
 
140
141
  & .e-caret {
@@ -788,7 +789,7 @@ $menu-header-icon-padding: 0 16px !default;
788
789
 
789
790
  @at-root {
790
791
  & .e-menu {
791
- @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
792
+ @if $skin-name == 'bootstrap4' {
792
793
  background-color: $cmenu-ul-bgcolor;
793
794
  }
794
795
  @else {
@@ -1147,7 +1148,7 @@ $menu-header-icon-padding: 0 16px !default;
1147
1148
  &.e-vertical {
1148
1149
  & .e-caret {
1149
1150
  &::before {
1150
- content: '\e937';
1151
+ content: '\e98f';
1151
1152
  }
1152
1153
  }
1153
1154
  }
@@ -1155,7 +1156,7 @@ $menu-header-icon-padding: 0 16px !default;
1155
1156
  &.e-ul {
1156
1157
  & .e-caret {
1157
1158
  &::before {
1158
- content: '\e937';
1159
+ content: '\e98f';
1159
1160
  }
1160
1161
  }
1161
1162
  }
@@ -1168,7 +1169,7 @@ $menu-header-icon-padding: 0 16px !default;
1168
1169
  &.e-vertical {
1169
1170
  & .e-caret {
1170
1171
  &::before {
1171
- content: '\e937';
1172
+ content: '\e98f';
1172
1173
  }
1173
1174
  }
1174
1175
  }
@@ -1176,7 +1177,7 @@ $menu-header-icon-padding: 0 16px !default;
1176
1177
  &.e-ul {
1177
1178
  & .e-caret {
1178
1179
  &::before {
1179
- content: '\e937';
1180
+ content: '\e98f';
1180
1181
  }
1181
1182
  }
1182
1183
  }
package/SCSS-Themes/navigations/menu/fluent-dark.scss CHANGED
@@ -138,6 +138,7 @@ $menu-caret-color: $cmenu-caret-color !default;
138
138
  line-height: $menu-li-height;
139
139
  margin-right: $menu-icon-margin-right;
140
140
  text-align: center;
141
+ margin-bottom: 4px;
141
142
  }
142
143
 
143
144
  & .e-caret {
@@ -791,7 +792,7 @@ $menu-caret-color: $cmenu-caret-color !default;
791
792
 
792
793
  @at-root {
793
794
  & .e-menu {
794
- @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
795
+ @if $skin-name == 'bootstrap4' {
795
796
  background-color: $cmenu-ul-bgcolor;
796
797
  }
797
798
  @else {
package/SCSS-Themes/navigations/menu/fluent.scss CHANGED
@@ -138,6 +138,7 @@ $menu-caret-color: $cmenu-caret-color !default;
138
138
  line-height: $menu-li-height;
139
139
  margin-right: $menu-icon-margin-right;
140
140
  text-align: center;
141
+ margin-bottom: 4px;
141
142
  }
142
143
 
143
144
  & .e-caret {
@@ -791,7 +792,7 @@ $menu-caret-color: $cmenu-caret-color !default;
791
792
 
792
793
  @at-root {
793
794
  & .e-menu {
794
- @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
795
+ @if $skin-name == 'bootstrap4' {
795
796
  background-color: $cmenu-ul-bgcolor;
796
797
  }
797
798
  @else {
package/SCSS-Themes/navigations/menu/highcontrast.scss CHANGED
@@ -136,6 +136,7 @@ $menu-header-icon-padding: 0 16px !default;
136
136
  line-height: $menu-li-height;
137
137
  margin-right: $menu-icon-margin-right;
138
138
  text-align: center;
139
+ margin-bottom: 4px;
139
140
  }
140
141
 
141
142
  & .e-caret {
@@ -789,7 +790,7 @@ $menu-header-icon-padding: 0 16px !default;
789
790
 
790
791
  @at-root {
791
792
  & .e-menu {
792
- @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
793
+ @if $skin-name == 'bootstrap4' {
793
794
  background-color: $cmenu-ul-bgcolor;
794
795
  }
795
796
  @else {
package/SCSS-Themes/navigations/menu/material-dark.scss CHANGED
@@ -135,6 +135,7 @@ $menu-header-icon-padding: 0 16px !default;
135
135
  line-height: $menu-li-height;
136
136
  margin-right: $menu-icon-margin-right;
137
137
  text-align: center;
138
+ margin-bottom: 4px;
138
139
  }
139
140
 
140
141
  & .e-caret {
@@ -788,7 +789,7 @@ $menu-header-icon-padding: 0 16px !default;
788
789
 
789
790
  @at-root {
790
791
  & .e-menu {
791
- @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
792
+ @if $skin-name == 'bootstrap4' {
792
793
  background-color: $cmenu-ul-bgcolor;
793
794
  }
794
795
  @else {
package/SCSS-Themes/navigations/menu/material.scss CHANGED
@@ -135,6 +135,7 @@ $menu-header-icon-padding: 0 16px !default;
135
135
  line-height: $menu-li-height;
136
136
  margin-right: $menu-icon-margin-right;
137
137
  text-align: center;
138
+ margin-bottom: 4px;
138
139
  }
139
140
 
140
141
  & .e-caret {
@@ -788,7 +789,7 @@ $menu-header-icon-padding: 0 16px !default;
788
789
 
789
790
  @at-root {
790
791
  & .e-menu {
791
- @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
792
+ @if $skin-name == 'bootstrap4' {
792
793
  background-color: $cmenu-ul-bgcolor;
793
794
  }
794
795
  @else {
package/SCSS-Themes/navigations/menu/tailwind-dark.scss CHANGED
@@ -137,6 +137,7 @@ $menu-caret-color: $cmenu-caret-color !default;
137
137
  line-height: $menu-li-height;
138
138
  margin-right: $menu-icon-margin-right;
139
139
  text-align: center;
140
+ margin-bottom: 4px;
140
141
  }
141
142
 
142
143
  & .e-caret {
@@ -790,7 +791,7 @@ $menu-caret-color: $cmenu-caret-color !default;
790
791
 
791
792
  @at-root {
792
793
  & .e-menu {
793
- @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
794
+ @if $skin-name == 'bootstrap4' {
794
795
  background-color: $cmenu-ul-bgcolor;
795
796
  }
796
797
  @else {
package/SCSS-Themes/navigations/menu/tailwind.scss CHANGED
@@ -137,6 +137,7 @@ $menu-caret-color: $cmenu-caret-color !default;
137
137
  line-height: $menu-li-height;
138
138
  margin-right: $menu-icon-margin-right;
139
139
  text-align: center;
140
+ margin-bottom: 4px;
140
141
  }
141
142
 
142
143
  & .e-caret {
@@ -790,7 +791,7 @@ $menu-caret-color: $cmenu-caret-color !default;
790
791
 
791
792
  @at-root {
792
793
  & .e-menu {
793
- @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
794
+ @if $skin-name == 'bootstrap4' {
794
795
  background-color: $cmenu-ul-bgcolor;
795
796
  }
796
797
  @else {
package/SCSS-Themes/pivotview/pivotview/bootstrap-dark.scss CHANGED
@@ -834,6 +834,26 @@ $pivotpager-single-size-title-padding: 8px !default;
834
834
 
835
835
  .e-toolbar-items {
836
836
  background: $pivotgrid-grp-bg-color;
837
+
838
+ .e-toolbar-item {
839
+ .e-tbar-btn.e-btn.e-control {
840
+ @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') {
841
+ background: $pivotgrid-grp-bg-color;
842
+
843
+ &:hover {
844
+ @if ($skin-name =='material') or ($skin-name =='material-dark') or ($skin-name =='fabric-dark') or ($skin-name =='bootstrap4') {
845
+ background: $pivotgrid-grp-bg-hover-color;
846
+ }
847
+ }
848
+
849
+ &:focus {
850
+ @if ($skin-name =='bootstrap4') {
851
+ background: $pivotgrid-grp-bg-hover-color;
852
+ }
853
+ }
854
+ }
855
+ }
856
+ }
837
857
  }
838
858
 
839
859
  .e-toolbar-item .e-tbar-btn.e-btn {
@@ -1440,10 +1460,8 @@ $pivotpager-single-size-title-padding: 8px !default;
1440
1460
  }
1441
1461
 
1442
1462
  .e-toolbar .e-tbar-btn {
1443
- background-color: transparent;
1444
-
1445
- @if ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
1446
- border: none !important;
1463
+ @if ($skin-name == 'tailwind') {
1464
+ background-color: transparent;
1447
1465
  }
1448
1466
 
1449
1467
  &:hover {
package/SCSS-Themes/pivotview/pivotview/bootstrap.scss CHANGED
@@ -831,6 +831,26 @@ $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
+ &:focus {
847
+ @if ($skin-name =='bootstrap4') {
848
+ background: $pivotgrid-grp-bg-hover-color;
849
+ }
850
+ }
851
+ }
852
+ }
853
+ }
834
854
  }
835
855
 
836
856
  .e-toolbar-item .e-tbar-btn.e-btn {
@@ -1437,10 +1457,8 @@ $pivotpager-single-size-title-padding: 8px !default;
1437
1457
  }
1438
1458
 
1439
1459
  .e-toolbar .e-tbar-btn {
1440
- background-color: transparent;
1441
-
1442
- @if ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
1443
- border: none !important;
1460
+ @if ($skin-name == 'tailwind') {
1461
+ background-color: transparent;
1444
1462
  }
1445
1463
 
1446
1464
  &:hover {
package/SCSS-Themes/pivotview/pivotview/bootstrap4.scss CHANGED
@@ -831,6 +831,26 @@ $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
+ &:focus {
847
+ @if ($skin-name =='bootstrap4') {
848
+ background: $pivotgrid-grp-bg-hover-color;
849
+ }
850
+ }
851
+ }
852
+ }
853
+ }
834
854
  }
835
855
 
836
856
  .e-toolbar-item .e-tbar-btn.e-btn {
@@ -1437,10 +1457,8 @@ $pivotpager-single-size-title-padding: 8px !default;
1437
1457
  }
1438
1458
 
1439
1459
  .e-toolbar .e-tbar-btn {
1440
- background-color: transparent;
1441
-
1442
- @if ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
1443
- border: none !important;
1460
+ @if ($skin-name == 'tailwind') {
1461
+ background-color: transparent;
1444
1462
  }
1445
1463
 
1446
1464
  &:hover {
package/SCSS-Themes/pivotview/pivotview/bootstrap5-dark.scss CHANGED
@@ -836,6 +836,26 @@ $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
+ &:focus {
852
+ @if ($skin-name =='bootstrap4') {
853
+ background: $pivotgrid-grp-bg-hover-color;
854
+ }
855
+ }
856
+ }
857
+ }
858
+ }
839
859
  }
840
860
 
841
861
  .e-toolbar-item .e-tbar-btn.e-btn {
@@ -1442,10 +1462,8 @@ $pivotpager-single-size-title-padding: 8px !default;
1442
1462
  }
1443
1463
 
1444
1464
  .e-toolbar .e-tbar-btn {
1445
- background-color: transparent;
1446
-
1447
- @if ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
1448
- border: none !important;
1465
+ @if ($skin-name == 'tailwind') {
1466
+ background-color: transparent;
1449
1467
  }
1450
1468
 
1451
1469
  &:hover {
package/SCSS-Themes/pivotview/pivotview/bootstrap5.scss CHANGED
@@ -836,6 +836,26 @@ $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
+ &:focus {
852
+ @if ($skin-name =='bootstrap4') {
853
+ background: $pivotgrid-grp-bg-hover-color;
854
+ }
855
+ }
856
+ }
857
+ }
858
+ }
839
859
  }
840
860
 
841
861
  .e-toolbar-item .e-tbar-btn.e-btn {
@@ -1442,10 +1462,8 @@ $pivotpager-single-size-title-padding: 8px !default;
1442
1462
  }
1443
1463
 
1444
1464
  .e-toolbar .e-tbar-btn {
1445
- background-color: transparent;
1446
-
1447
- @if ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
1448
- border: none !important;
1465
+ @if ($skin-name == 'tailwind') {
1466
+ background-color: transparent;
1449
1467
  }
1450
1468
 
1451
1469
  &:hover {
package/SCSS-Themes/pivotview/pivotview/fabric-dark.scss CHANGED
@@ -833,6 +833,26 @@ $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
+ &:focus {
849
+ @if ($skin-name =='bootstrap4') {
850
+ background: $pivotgrid-grp-bg-hover-color;
851
+ }
852
+ }
853
+ }
854
+ }
855
+ }
836
856
  }
837
857
 
838
858
  .e-toolbar-item .e-tbar-btn.e-btn {
@@ -1439,10 +1459,8 @@ $pivotpager-single-size-title-padding: 4px !default;
1439
1459
  }
1440
1460
 
1441
1461
  .e-toolbar .e-tbar-btn {
1442
- background-color: transparent;
1443
-
1444
- @if ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
1445
- border: none !important;
1462
+ @if ($skin-name == 'tailwind') {
1463
+ background-color: transparent;
1446
1464
  }
1447
1465
 
1448
1466
  &:hover {
package/SCSS-Themes/pivotview/pivotview/fabric.scss CHANGED
@@ -830,6 +830,26 @@ $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
+ &:focus {
846
+ @if ($skin-name =='bootstrap4') {
847
+ background: $pivotgrid-grp-bg-hover-color;
848
+ }
849
+ }
850
+ }
851
+ }
852
+ }
833
853
  }
834
854
 
835
855
  .e-toolbar-item .e-tbar-btn.e-btn {
@@ -1436,10 +1456,8 @@ $pivotpager-single-size-title-padding: 4px !default;
1436
1456
  }
1437
1457
 
1438
1458
  .e-toolbar .e-tbar-btn {
1439
- background-color: transparent;
1440
-
1441
- @if ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
1442
- border: none !important;
1459
+ @if ($skin-name == 'tailwind') {
1460
+ background-color: transparent;
1443
1461
  }
1444
1462
 
1445
1463
  &:hover {
package/SCSS-Themes/pivotview/pivotview/fluent-dark.scss CHANGED
@@ -836,6 +836,26 @@ $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
+ &:focus {
852
+ @if ($skin-name =='bootstrap4') {
853
+ background: $pivotgrid-grp-bg-hover-color;
854
+ }
855
+ }
856
+ }
857
+ }
858
+ }
839
859
  }
840
860
 
841
861
  .e-toolbar-item .e-tbar-btn.e-btn {
@@ -1442,10 +1462,8 @@ $pivotpager-single-size-title-padding: 8px !default;
1442
1462
  }
1443
1463
 
1444
1464
  .e-toolbar .e-tbar-btn {
1445
- background-color: transparent;
1446
-
1447
- @if ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
1448
- border: none !important;
1465
+ @if ($skin-name == 'tailwind') {
1466
+ background-color: transparent;
1449
1467
  }
1450
1468
 
1451
1469
  &:hover {
package/SCSS-Themes/pivotview/pivotview/fluent.scss CHANGED
@@ -836,6 +836,26 @@ $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
+ &:focus {
852
+ @if ($skin-name =='bootstrap4') {
853
+ background: $pivotgrid-grp-bg-hover-color;
854
+ }
855
+ }
856
+ }
857
+ }
858
+ }
839
859
  }
840
860
 
841
861
  .e-toolbar-item .e-tbar-btn.e-btn {
@@ -1442,10 +1462,8 @@ $pivotpager-single-size-title-padding: 8px !default;
1442
1462
  }
1443
1463
 
1444
1464
  .e-toolbar .e-tbar-btn {
1445
- background-color: transparent;
1446
-
1447
- @if ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
1448
- border: none !important;
1465
+ @if ($skin-name == 'tailwind') {
1466
+ background-color: transparent;
1449
1467
  }
1450
1468
 
1451
1469
  &:hover {
package/SCSS-Themes/pivotview/pivotview/highcontrast.scss CHANGED
@@ -829,6 +829,26 @@ $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
+ &:focus {
845
+ @if ($skin-name =='bootstrap4') {
846
+ background: $pivotgrid-grp-bg-hover-color;
847
+ }
848
+ }
849
+ }
850
+ }
851
+ }
832
852
  }
833
853
 
834
854
  .e-toolbar-item .e-tbar-btn.e-btn {
@@ -1435,10 +1455,8 @@ $pivotpager-single-size-title-padding: 4px !default;
1435
1455
  }
1436
1456
 
1437
1457
  .e-toolbar .e-tbar-btn {
1438
- background-color: transparent;
1439
-
1440
- @if ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
1441
- border: none !important;
1458
+ @if ($skin-name == 'tailwind') {
1459
+ background-color: transparent;
1442
1460
  }
1443
1461
 
1444
1462
  &:hover {
package/SCSS-Themes/pivotview/pivotview/material-dark.scss CHANGED
@@ -837,6 +837,26 @@ $pivotpager-single-size-title-padding: 14px !default;
837
837
 
838
838
  .e-toolbar-items {
839
839
  background: $pivotgrid-grp-bg-color;
840
+
841
+ .e-toolbar-item {
842
+ .e-tbar-btn.e-btn.e-control {
843
+ @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') {
844
+ background: $pivotgrid-grp-bg-color;
845
+
846
+ &:hover {
847
+ @if ($skin-name =='material') or ($skin-name =='material-dark') or ($skin-name =='fabric-dark') or ($skin-name =='bootstrap4') {
848
+ background: $pivotgrid-grp-bg-hover-color;
849
+ }
850
+ }
851
+
852
+ &:focus {
853
+ @if ($skin-name =='bootstrap4') {
854
+ background: $pivotgrid-grp-bg-hover-color;
855
+ }
856
+ }
857
+ }
858
+ }
859
+ }
840
860
  }
841
861
 
842
862
  .e-toolbar-item .e-tbar-btn.e-btn {
@@ -1443,10 +1463,8 @@ $pivotpager-single-size-title-padding: 14px !default;
1443
1463
  }
1444
1464
 
1445
1465
  .e-toolbar .e-tbar-btn {
1446
- background-color: transparent;
1447
-
1448
- @if ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
1449
- border: none !important;
1466
+ @if ($skin-name == 'tailwind') {
1467
+ background-color: transparent;
1450
1468
  }
1451
1469
 
1452
1470
  &:hover {