@syncfusion/blazor-themes 26.2.8 → 26.2.10

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 (201) hide show
  1. package/SCSS-Themes/bds-dark.scss +68 -7
  2. package/SCSS-Themes/bds.scss +68 -7
  3. package/SCSS-Themes/bootstrap-dark.scss +68 -7
  4. package/SCSS-Themes/bootstrap.scss +68 -7
  5. package/SCSS-Themes/bootstrap4.scss +68 -7
  6. package/SCSS-Themes/bootstrap5-dark.scss +72 -11
  7. package/SCSS-Themes/bootstrap5.scss +72 -11
  8. package/SCSS-Themes/calendars/datetimepicker/bds-dark.scss +20 -0
  9. package/SCSS-Themes/calendars/datetimepicker/bds.scss +20 -0
  10. package/SCSS-Themes/calendars/datetimepicker/bootstrap-dark.scss +20 -0
  11. package/SCSS-Themes/calendars/datetimepicker/bootstrap.scss +20 -0
  12. package/SCSS-Themes/calendars/datetimepicker/bootstrap4.scss +20 -0
  13. package/SCSS-Themes/calendars/datetimepicker/bootstrap5-dark.scss +20 -0
  14. package/SCSS-Themes/calendars/datetimepicker/bootstrap5.scss +20 -0
  15. package/SCSS-Themes/calendars/datetimepicker/fabric-dark.scss +20 -0
  16. package/SCSS-Themes/calendars/datetimepicker/fabric.scss +20 -0
  17. package/SCSS-Themes/calendars/datetimepicker/fluent-dark.scss +20 -0
  18. package/SCSS-Themes/calendars/datetimepicker/fluent.scss +20 -0
  19. package/SCSS-Themes/calendars/datetimepicker/fluent2-dark.scss +20 -0
  20. package/SCSS-Themes/calendars/datetimepicker/fluent2.scss +20 -0
  21. package/SCSS-Themes/calendars/datetimepicker/highcontrast.scss +20 -0
  22. package/SCSS-Themes/calendars/datetimepicker/material-dark.scss +20 -0
  23. package/SCSS-Themes/calendars/datetimepicker/material.scss +20 -0
  24. package/SCSS-Themes/calendars/datetimepicker/material3-dark.scss +20 -0
  25. package/SCSS-Themes/calendars/datetimepicker/material3.scss +20 -0
  26. package/SCSS-Themes/calendars/datetimepicker/tailwind-dark.scss +20 -0
  27. package/SCSS-Themes/calendars/datetimepicker/tailwind.scss +20 -0
  28. package/SCSS-Themes/dropdowns/drop-down-base/bds-dark.scss +2 -0
  29. package/SCSS-Themes/dropdowns/drop-down-base/bds.scss +2 -0
  30. package/SCSS-Themes/dropdowns/drop-down-base/bootstrap-dark.scss +2 -0
  31. package/SCSS-Themes/dropdowns/drop-down-base/bootstrap.scss +2 -0
  32. package/SCSS-Themes/dropdowns/drop-down-base/bootstrap4.scss +2 -0
  33. package/SCSS-Themes/dropdowns/drop-down-base/bootstrap5-dark.scss +2 -0
  34. package/SCSS-Themes/dropdowns/drop-down-base/bootstrap5.scss +2 -0
  35. package/SCSS-Themes/dropdowns/drop-down-base/fabric-dark.scss +2 -0
  36. package/SCSS-Themes/dropdowns/drop-down-base/fabric.scss +2 -0
  37. package/SCSS-Themes/dropdowns/drop-down-base/fluent-dark.scss +2 -0
  38. package/SCSS-Themes/dropdowns/drop-down-base/fluent.scss +2 -0
  39. package/SCSS-Themes/dropdowns/drop-down-base/fluent2-dark.scss +2 -0
  40. package/SCSS-Themes/dropdowns/drop-down-base/fluent2.scss +2 -0
  41. package/SCSS-Themes/dropdowns/drop-down-base/highcontrast.scss +2 -0
  42. package/SCSS-Themes/dropdowns/drop-down-base/material-dark.scss +2 -0
  43. package/SCSS-Themes/dropdowns/drop-down-base/material.scss +2 -0
  44. package/SCSS-Themes/dropdowns/drop-down-base/material3-dark.scss +2 -0
  45. package/SCSS-Themes/dropdowns/drop-down-base/material3.scss +2 -0
  46. package/SCSS-Themes/dropdowns/drop-down-base/tailwind-dark.scss +2 -0
  47. package/SCSS-Themes/dropdowns/drop-down-base/tailwind.scss +2 -0
  48. package/SCSS-Themes/dropdowns/list-box/bds-dark.scss +6 -0
  49. package/SCSS-Themes/dropdowns/list-box/bds.scss +6 -0
  50. package/SCSS-Themes/dropdowns/list-box/bootstrap-dark.scss +6 -0
  51. package/SCSS-Themes/dropdowns/list-box/bootstrap.scss +6 -0
  52. package/SCSS-Themes/dropdowns/list-box/bootstrap4.scss +6 -0
  53. package/SCSS-Themes/dropdowns/list-box/bootstrap5-dark.scss +6 -0
  54. package/SCSS-Themes/dropdowns/list-box/bootstrap5.scss +6 -0
  55. package/SCSS-Themes/dropdowns/list-box/fabric-dark.scss +6 -0
  56. package/SCSS-Themes/dropdowns/list-box/fabric.scss +6 -0
  57. package/SCSS-Themes/dropdowns/list-box/fluent-dark.scss +6 -0
  58. package/SCSS-Themes/dropdowns/list-box/fluent.scss +6 -0
  59. package/SCSS-Themes/dropdowns/list-box/fluent2-dark.scss +6 -0
  60. package/SCSS-Themes/dropdowns/list-box/fluent2.scss +6 -0
  61. package/SCSS-Themes/dropdowns/list-box/highcontrast.scss +6 -0
  62. package/SCSS-Themes/dropdowns/list-box/material-dark.scss +6 -0
  63. package/SCSS-Themes/dropdowns/list-box/material.scss +6 -0
  64. package/SCSS-Themes/dropdowns/list-box/material3-dark.scss +6 -0
  65. package/SCSS-Themes/dropdowns/list-box/material3.scss +6 -0
  66. package/SCSS-Themes/dropdowns/list-box/tailwind-dark.scss +6 -0
  67. package/SCSS-Themes/dropdowns/list-box/tailwind.scss +6 -0
  68. package/SCSS-Themes/dropdowns/multi-select/bds-dark.scss +1 -0
  69. package/SCSS-Themes/dropdowns/multi-select/bds.scss +1 -0
  70. package/SCSS-Themes/dropdowns/multi-select/bootstrap-dark.scss +1 -0
  71. package/SCSS-Themes/dropdowns/multi-select/bootstrap.scss +1 -0
  72. package/SCSS-Themes/dropdowns/multi-select/bootstrap4.scss +1 -0
  73. package/SCSS-Themes/dropdowns/multi-select/bootstrap5-dark.scss +1 -0
  74. package/SCSS-Themes/dropdowns/multi-select/bootstrap5.scss +1 -0
  75. package/SCSS-Themes/dropdowns/multi-select/fabric-dark.scss +1 -0
  76. package/SCSS-Themes/dropdowns/multi-select/fabric.scss +1 -0
  77. package/SCSS-Themes/dropdowns/multi-select/fluent-dark.scss +1 -0
  78. package/SCSS-Themes/dropdowns/multi-select/fluent.scss +1 -0
  79. package/SCSS-Themes/dropdowns/multi-select/fluent2-dark.scss +1 -0
  80. package/SCSS-Themes/dropdowns/multi-select/fluent2.scss +1 -0
  81. package/SCSS-Themes/dropdowns/multi-select/highcontrast.scss +1 -0
  82. package/SCSS-Themes/dropdowns/multi-select/material-dark.scss +1 -0
  83. package/SCSS-Themes/dropdowns/multi-select/material.scss +1 -0
  84. package/SCSS-Themes/dropdowns/multi-select/material3-dark.scss +1 -0
  85. package/SCSS-Themes/dropdowns/multi-select/material3.scss +1 -0
  86. package/SCSS-Themes/dropdowns/multi-select/tailwind-dark.scss +1 -0
  87. package/SCSS-Themes/dropdowns/multi-select/tailwind.scss +1 -0
  88. package/SCSS-Themes/fabric-dark.scss +68 -7
  89. package/SCSS-Themes/fabric.scss +68 -7
  90. package/SCSS-Themes/fluent-dark.scss +68 -7
  91. package/SCSS-Themes/fluent.scss +68 -7
  92. package/SCSS-Themes/fluent2-dark.scss +71 -9
  93. package/SCSS-Themes/fluent2.scss +71 -9
  94. package/SCSS-Themes/grids/excel-filter/bds-dark.scss +2 -1
  95. package/SCSS-Themes/grids/excel-filter/bds.scss +2 -1
  96. package/SCSS-Themes/grids/excel-filter/bootstrap-dark.scss +2 -1
  97. package/SCSS-Themes/grids/excel-filter/bootstrap.scss +2 -1
  98. package/SCSS-Themes/grids/excel-filter/bootstrap4.scss +2 -1
  99. package/SCSS-Themes/grids/excel-filter/bootstrap5-dark.scss +2 -1
  100. package/SCSS-Themes/grids/excel-filter/bootstrap5.scss +2 -1
  101. package/SCSS-Themes/grids/excel-filter/fabric-dark.scss +2 -1
  102. package/SCSS-Themes/grids/excel-filter/fabric.scss +2 -1
  103. package/SCSS-Themes/grids/excel-filter/fluent-dark.scss +2 -1
  104. package/SCSS-Themes/grids/excel-filter/fluent.scss +2 -1
  105. package/SCSS-Themes/grids/excel-filter/fluent2-dark.scss +2 -1
  106. package/SCSS-Themes/grids/excel-filter/fluent2.scss +2 -1
  107. package/SCSS-Themes/grids/excel-filter/highcontrast.scss +2 -1
  108. package/SCSS-Themes/grids/excel-filter/material-dark.scss +2 -1
  109. package/SCSS-Themes/grids/excel-filter/material.scss +2 -1
  110. package/SCSS-Themes/grids/excel-filter/material3-dark.scss +2 -1
  111. package/SCSS-Themes/grids/excel-filter/material3.scss +2 -1
  112. package/SCSS-Themes/grids/excel-filter/tailwind-dark.scss +2 -1
  113. package/SCSS-Themes/grids/excel-filter/tailwind.scss +2 -1
  114. package/SCSS-Themes/grids/grid/bds-dark.scss +28 -4
  115. package/SCSS-Themes/grids/grid/bds.scss +28 -4
  116. package/SCSS-Themes/grids/grid/bootstrap-dark.scss +28 -4
  117. package/SCSS-Themes/grids/grid/bootstrap.scss +28 -4
  118. package/SCSS-Themes/grids/grid/bootstrap4.scss +28 -4
  119. package/SCSS-Themes/grids/grid/bootstrap5-dark.scss +32 -8
  120. package/SCSS-Themes/grids/grid/bootstrap5.scss +32 -8
  121. package/SCSS-Themes/grids/grid/fabric-dark.scss +28 -4
  122. package/SCSS-Themes/grids/grid/fabric.scss +28 -4
  123. package/SCSS-Themes/grids/grid/fluent-dark.scss +28 -4
  124. package/SCSS-Themes/grids/grid/fluent.scss +28 -4
  125. package/SCSS-Themes/grids/grid/fluent2-dark.scss +31 -6
  126. package/SCSS-Themes/grids/grid/fluent2.scss +31 -6
  127. package/SCSS-Themes/grids/grid/highcontrast.scss +29 -5
  128. package/SCSS-Themes/grids/grid/material-dark.scss +28 -4
  129. package/SCSS-Themes/grids/grid/material.scss +29 -5
  130. package/SCSS-Themes/grids/grid/material3-dark.scss +28 -4
  131. package/SCSS-Themes/grids/grid/material3.scss +28 -4
  132. package/SCSS-Themes/grids/grid/tailwind-dark.scss +28 -4
  133. package/SCSS-Themes/grids/grid/tailwind.scss +28 -4
  134. package/SCSS-Themes/highcontrast.scss +69 -8
  135. package/SCSS-Themes/inputs/signature/bds-dark.scss +2 -2
  136. package/SCSS-Themes/inputs/signature/bds.scss +2 -2
  137. package/SCSS-Themes/inputs/signature/bootstrap-dark.scss +2 -2
  138. package/SCSS-Themes/inputs/signature/bootstrap.scss +2 -2
  139. package/SCSS-Themes/inputs/signature/bootstrap4.scss +2 -2
  140. package/SCSS-Themes/inputs/signature/bootstrap5-dark.scss +2 -2
  141. package/SCSS-Themes/inputs/signature/bootstrap5.scss +2 -2
  142. package/SCSS-Themes/inputs/signature/fabric-dark.scss +2 -2
  143. package/SCSS-Themes/inputs/signature/fabric.scss +2 -2
  144. package/SCSS-Themes/inputs/signature/fluent-dark.scss +2 -2
  145. package/SCSS-Themes/inputs/signature/fluent.scss +2 -2
  146. package/SCSS-Themes/inputs/signature/fluent2-dark.scss +2 -2
  147. package/SCSS-Themes/inputs/signature/fluent2.scss +2 -2
  148. package/SCSS-Themes/inputs/signature/highcontrast.scss +2 -2
  149. package/SCSS-Themes/inputs/signature/material-dark.scss +2 -2
  150. package/SCSS-Themes/inputs/signature/material.scss +2 -2
  151. package/SCSS-Themes/inputs/signature/material3-dark.scss +2 -2
  152. package/SCSS-Themes/inputs/signature/material3.scss +2 -2
  153. package/SCSS-Themes/inputs/signature/tailwind-dark.scss +2 -2
  154. package/SCSS-Themes/inputs/signature/tailwind.scss +2 -2
  155. package/SCSS-Themes/material-dark.scss +68 -7
  156. package/SCSS-Themes/material.scss +69 -8
  157. package/SCSS-Themes/material3-dark.scss +68 -7
  158. package/SCSS-Themes/material3.scss +68 -7
  159. package/SCSS-Themes/navigations/pager/bds-dark.scss +6 -0
  160. package/SCSS-Themes/navigations/pager/bds.scss +6 -0
  161. package/SCSS-Themes/navigations/pager/bootstrap-dark.scss +6 -0
  162. package/SCSS-Themes/navigations/pager/bootstrap.scss +6 -0
  163. package/SCSS-Themes/navigations/pager/bootstrap4.scss +6 -0
  164. package/SCSS-Themes/navigations/pager/bootstrap5-dark.scss +6 -0
  165. package/SCSS-Themes/navigations/pager/bootstrap5.scss +6 -0
  166. package/SCSS-Themes/navigations/pager/fabric-dark.scss +6 -0
  167. package/SCSS-Themes/navigations/pager/fabric.scss +6 -0
  168. package/SCSS-Themes/navigations/pager/fluent-dark.scss +6 -0
  169. package/SCSS-Themes/navigations/pager/fluent.scss +6 -0
  170. package/SCSS-Themes/navigations/pager/fluent2-dark.scss +6 -0
  171. package/SCSS-Themes/navigations/pager/fluent2.scss +6 -0
  172. package/SCSS-Themes/navigations/pager/highcontrast.scss +6 -0
  173. package/SCSS-Themes/navigations/pager/material-dark.scss +6 -0
  174. package/SCSS-Themes/navigations/pager/material.scss +6 -0
  175. package/SCSS-Themes/navigations/pager/material3-dark.scss +6 -0
  176. package/SCSS-Themes/navigations/pager/material3.scss +6 -0
  177. package/SCSS-Themes/navigations/pager/tailwind-dark.scss +6 -0
  178. package/SCSS-Themes/navigations/pager/tailwind.scss +6 -0
  179. package/SCSS-Themes/popups/dialog/bds-dark.scss +1 -0
  180. package/SCSS-Themes/popups/dialog/bds.scss +1 -0
  181. package/SCSS-Themes/popups/dialog/bootstrap-dark.scss +1 -0
  182. package/SCSS-Themes/popups/dialog/bootstrap.scss +1 -0
  183. package/SCSS-Themes/popups/dialog/bootstrap4.scss +1 -0
  184. package/SCSS-Themes/popups/dialog/bootstrap5-dark.scss +1 -0
  185. package/SCSS-Themes/popups/dialog/bootstrap5.scss +1 -0
  186. package/SCSS-Themes/popups/dialog/fabric-dark.scss +1 -0
  187. package/SCSS-Themes/popups/dialog/fabric.scss +1 -0
  188. package/SCSS-Themes/popups/dialog/fluent-dark.scss +1 -0
  189. package/SCSS-Themes/popups/dialog/fluent.scss +1 -0
  190. package/SCSS-Themes/popups/dialog/fluent2-dark.scss +1 -0
  191. package/SCSS-Themes/popups/dialog/fluent2.scss +1 -0
  192. package/SCSS-Themes/popups/dialog/highcontrast.scss +1 -0
  193. package/SCSS-Themes/popups/dialog/material-dark.scss +1 -0
  194. package/SCSS-Themes/popups/dialog/material.scss +1 -0
  195. package/SCSS-Themes/popups/dialog/material3-dark.scss +1 -0
  196. package/SCSS-Themes/popups/dialog/material3.scss +1 -0
  197. package/SCSS-Themes/popups/dialog/tailwind-dark.scss +1 -0
  198. package/SCSS-Themes/popups/dialog/tailwind.scss +1 -0
  199. package/SCSS-Themes/tailwind-dark.scss +68 -7
  200. package/SCSS-Themes/tailwind.scss +68 -7
  201. package/package.json +1 -1
@@ -1386,6 +1386,7 @@ $grid-checkmark-color: $accent-font !default;
1386
1386
  }
1387
1387
 
1388
1388
  .e-dropitemscount {
1389
+ font-size: 14px;
1389
1390
  @if $grid-skin == 'tailwind' {
1390
1391
  margin-left: 1px;
1391
1392
  }
@@ -4656,7 +4657,7 @@ $grid-checkmark-color: $accent-font !default;
4656
4657
  }
4657
4658
 
4658
4659
  & .e-cloneproperties {
4659
- border-width: $grid-border-size $grid-border-size 3px;
4660
+ border-width: $grid-border-size $grid-border-size 2px;
4660
4661
  }
4661
4662
 
4662
4663
  & tr {
@@ -5443,6 +5444,9 @@ $grid-checkmark-color: $accent-font !default;
5443
5444
  @if $grid-skin == 'fluent2' {
5444
5445
  margin-top: -8px;
5445
5446
  }
5447
+ @if $grid-skin == 'bootstrap5.3' {
5448
+ margin-top: -9px;
5449
+ }
5446
5450
  }
5447
5451
 
5448
5452
  .e-reorderdownarrow {
@@ -5707,6 +5711,12 @@ $grid-checkmark-color: $accent-font !default;
5707
5711
  }
5708
5712
  }
5709
5713
 
5714
+ & .e-tbar-btn.e-icon-btn:hover {
5715
+ @if $grid-skin == 'fluent2' {
5716
+ background-color: $group-header-hover-bg-color;
5717
+ }
5718
+ }
5719
+
5710
5720
  .e-search-icon {
5711
5721
  background: none;
5712
5722
  }
@@ -6376,7 +6386,9 @@ $grid-checkmark-color: $accent-font !default;
6376
6386
  }
6377
6387
 
6378
6388
  & .e-menu-item.e-focused {
6379
- background-color: transparent;
6389
+ @if $grid-skin != 'bootstrap5.3' {
6390
+ background-color: transparent;
6391
+ }
6380
6392
  }
6381
6393
  }
6382
6394
  }
@@ -6755,6 +6767,11 @@ $grid-checkmark-color: $accent-font !default;
6755
6767
  .e-emptyrow {
6756
6768
  &:not(.e-editedbatchcell):not(.e-updatedtd) {
6757
6769
  color: $grid-rowcell-color;
6770
+ &.e-active {
6771
+ @if $grid-skin == 'fluent2' or $grid-skin == 'highcontrast' {
6772
+ color: $grid-row-selection-color;
6773
+ }
6774
+ }
6758
6775
  }
6759
6776
  }
6760
6777
 
@@ -6841,9 +6858,9 @@ $grid-checkmark-color: $accent-font !default;
6841
6858
 
6842
6859
  &.e-gridhover .e-frozenhover,
6843
6860
  &.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
6844
- &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
6861
+ &.e-gridhover:not(.e-rowdrag) .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
6845
6862
  &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse,
6846
- &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
6863
+ &.e-gridhover:not(.e-rowdrag) .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
6847
6864
  &.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
6848
6865
  &.e-gridhover .e-row.e-addedrow:not(.e-disable-gridhover):not(.e-detailrow):hover .e-dragindentcell,
6849
6866
  &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
@@ -7043,6 +7060,10 @@ $grid-checkmark-color: $accent-font !default;
7043
7060
  color: $grid-filtered-color;
7044
7061
  }
7045
7062
 
7063
+ .e-focused .e-filtered::before {
7064
+ color: $grid-hover-icon-color;
7065
+ }
7066
+
7046
7067
  .e-gridpopup {
7047
7068
  .e-content {
7048
7069
  background-color: $grid-popup-bg-color;
@@ -7265,6 +7286,9 @@ $grid-checkmark-color: $accent-font !default;
7265
7286
  padding-top: 6px;
7266
7287
  padding-bottom: 6px;
7267
7288
  }
7289
+ @if $grid-skin == 'fluent2' {
7290
+ color: $grid-dragdrop-text-color;
7291
+ }
7268
7292
 
7269
7293
  &.e-focused {
7270
7294
  box-shadow: none;
@@ -498,7 +498,7 @@ $grid-dropitemscount-color: $primary-font !default;
498
498
  $grid-clone-prop-box-shadow: 0 3px 8px 0 rgba($grey-black, .26) !default;
499
499
  $grid-drag-icon-opacity: .54 !default;
500
500
  $grid-clone-dropitemscount-border: $primary-font !default;
501
- $grid-clone-dragdrop-bg-color: $grid-table-background-color !default;
501
+ $grid-clone-dragdrop-bg-color: $grey-200 !default;
502
502
  $grid-group-clone-box-shadow: 0 0 !default;
503
503
  $grid-unboundcelldiv-margin: 0 3.5px !default;
504
504
  $grid-bigger-flmenu-padding: $grid-flmenu-padding !default;
@@ -1386,6 +1386,7 @@ $grid-checkmark-color: $accent-font !default;
1386
1386
  }
1387
1387
 
1388
1388
  .e-dropitemscount {
1389
+ font-size: 14px;
1389
1390
  @if $grid-skin == 'tailwind' {
1390
1391
  margin-left: 1px;
1391
1392
  }
@@ -4656,7 +4657,7 @@ $grid-checkmark-color: $accent-font !default;
4656
4657
  }
4657
4658
 
4658
4659
  & .e-cloneproperties {
4659
- border-width: $grid-border-size $grid-border-size 3px;
4660
+ border-width: $grid-border-size $grid-border-size 2px;
4660
4661
  }
4661
4662
 
4662
4663
  & tr {
@@ -5443,6 +5444,9 @@ $grid-checkmark-color: $accent-font !default;
5443
5444
  @if $grid-skin == 'fluent2' {
5444
5445
  margin-top: -8px;
5445
5446
  }
5447
+ @if $grid-skin == 'bootstrap5.3' {
5448
+ margin-top: -9px;
5449
+ }
5446
5450
  }
5447
5451
 
5448
5452
  .e-reorderdownarrow {
@@ -5707,6 +5711,12 @@ $grid-checkmark-color: $accent-font !default;
5707
5711
  }
5708
5712
  }
5709
5713
 
5714
+ & .e-tbar-btn.e-icon-btn:hover {
5715
+ @if $grid-skin == 'fluent2' {
5716
+ background-color: $group-header-hover-bg-color;
5717
+ }
5718
+ }
5719
+
5710
5720
  .e-search-icon {
5711
5721
  background: none;
5712
5722
  }
@@ -6376,7 +6386,9 @@ $grid-checkmark-color: $accent-font !default;
6376
6386
  }
6377
6387
 
6378
6388
  & .e-menu-item.e-focused {
6379
- background-color: transparent;
6389
+ @if $grid-skin != 'bootstrap5.3' {
6390
+ background-color: transparent;
6391
+ }
6380
6392
  }
6381
6393
  }
6382
6394
  }
@@ -6755,6 +6767,11 @@ $grid-checkmark-color: $accent-font !default;
6755
6767
  .e-emptyrow {
6756
6768
  &:not(.e-editedbatchcell):not(.e-updatedtd) {
6757
6769
  color: $grid-rowcell-color;
6770
+ &.e-active {
6771
+ @if $grid-skin == 'fluent2' or $grid-skin == 'highcontrast' {
6772
+ color: $grid-row-selection-color;
6773
+ }
6774
+ }
6758
6775
  }
6759
6776
  }
6760
6777
 
@@ -6841,9 +6858,9 @@ $grid-checkmark-color: $accent-font !default;
6841
6858
 
6842
6859
  &.e-gridhover .e-frozenhover,
6843
6860
  &.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
6844
- &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
6861
+ &.e-gridhover:not(.e-rowdrag) .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
6845
6862
  &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse,
6846
- &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
6863
+ &.e-gridhover:not(.e-rowdrag) .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
6847
6864
  &.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
6848
6865
  &.e-gridhover .e-row.e-addedrow:not(.e-disable-gridhover):not(.e-detailrow):hover .e-dragindentcell,
6849
6866
  &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
@@ -7043,6 +7060,10 @@ $grid-checkmark-color: $accent-font !default;
7043
7060
  color: $grid-filtered-color;
7044
7061
  }
7045
7062
 
7063
+ .e-focused .e-filtered::before {
7064
+ color: $grid-hover-icon-color;
7065
+ }
7066
+
7046
7067
  .e-gridpopup {
7047
7068
  .e-content {
7048
7069
  background-color: $grid-popup-bg-color;
@@ -7265,6 +7286,9 @@ $grid-checkmark-color: $accent-font !default;
7265
7286
  padding-top: 6px;
7266
7287
  padding-bottom: 6px;
7267
7288
  }
7289
+ @if $grid-skin == 'fluent2' {
7290
+ color: $grid-dragdrop-text-color;
7291
+ }
7268
7292
 
7269
7293
  &.e-focused {
7270
7294
  box-shadow: none;
@@ -1389,6 +1389,7 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
1389
1389
  }
1390
1390
 
1391
1391
  .e-dropitemscount {
1392
+ font-size: 14px;
1392
1393
  @if $grid-skin == 'tailwind' {
1393
1394
  margin-left: 1px;
1394
1395
  }
@@ -4659,7 +4660,7 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
4659
4660
  }
4660
4661
 
4661
4662
  & .e-cloneproperties {
4662
- border-width: $grid-border-size $grid-border-size 3px;
4663
+ border-width: $grid-border-size $grid-border-size 2px;
4663
4664
  }
4664
4665
 
4665
4666
  & tr {
@@ -5446,6 +5447,9 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
5446
5447
  @if $grid-skin == 'fluent2' {
5447
5448
  margin-top: -8px;
5448
5449
  }
5450
+ @if $grid-skin == 'bootstrap5.3' {
5451
+ margin-top: -9px;
5452
+ }
5449
5453
  }
5450
5454
 
5451
5455
  .e-reorderdownarrow {
@@ -5710,6 +5714,12 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
5710
5714
  }
5711
5715
  }
5712
5716
 
5717
+ & .e-tbar-btn.e-icon-btn:hover {
5718
+ @if $grid-skin == 'fluent2' {
5719
+ background-color: $group-header-hover-bg-color;
5720
+ }
5721
+ }
5722
+
5713
5723
  .e-search-icon {
5714
5724
  background: none;
5715
5725
  }
@@ -6379,7 +6389,9 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
6379
6389
  }
6380
6390
 
6381
6391
  & .e-menu-item.e-focused {
6382
- background-color: transparent;
6392
+ @if $grid-skin != 'bootstrap5.3' {
6393
+ background-color: transparent;
6394
+ }
6383
6395
  }
6384
6396
  }
6385
6397
  }
@@ -6758,6 +6770,11 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
6758
6770
  .e-emptyrow {
6759
6771
  &:not(.e-editedbatchcell):not(.e-updatedtd) {
6760
6772
  color: $grid-rowcell-color;
6773
+ &.e-active {
6774
+ @if $grid-skin == 'fluent2' or $grid-skin == 'highcontrast' {
6775
+ color: $grid-row-selection-color;
6776
+ }
6777
+ }
6761
6778
  }
6762
6779
  }
6763
6780
 
@@ -6844,9 +6861,9 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
6844
6861
 
6845
6862
  &.e-gridhover .e-frozenhover,
6846
6863
  &.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
6847
- &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
6864
+ &.e-gridhover:not(.e-rowdrag) .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
6848
6865
  &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse,
6849
- &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
6866
+ &.e-gridhover:not(.e-rowdrag) .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
6850
6867
  &.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
6851
6868
  &.e-gridhover .e-row.e-addedrow:not(.e-disable-gridhover):not(.e-detailrow):hover .e-dragindentcell,
6852
6869
  &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
@@ -7046,6 +7063,10 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
7046
7063
  color: $grid-filtered-color;
7047
7064
  }
7048
7065
 
7066
+ .e-focused .e-filtered::before {
7067
+ color: $grid-hover-icon-color;
7068
+ }
7069
+
7049
7070
  .e-gridpopup {
7050
7071
  .e-content {
7051
7072
  background-color: $grid-popup-bg-color;
@@ -7268,6 +7289,9 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
7268
7289
  padding-top: 6px;
7269
7290
  padding-bottom: 6px;
7270
7291
  }
7292
+ @if $grid-skin == 'fluent2' {
7293
+ color: $grid-dragdrop-text-color;
7294
+ }
7271
7295
 
7272
7296
  &.e-focused {
7273
7297
  box-shadow: none;
@@ -1389,6 +1389,7 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
1389
1389
  }
1390
1390
 
1391
1391
  .e-dropitemscount {
1392
+ font-size: 14px;
1392
1393
  @if $grid-skin == 'tailwind' {
1393
1394
  margin-left: 1px;
1394
1395
  }
@@ -4659,7 +4660,7 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
4659
4660
  }
4660
4661
 
4661
4662
  & .e-cloneproperties {
4662
- border-width: $grid-border-size $grid-border-size 3px;
4663
+ border-width: $grid-border-size $grid-border-size 2px;
4663
4664
  }
4664
4665
 
4665
4666
  & tr {
@@ -5446,6 +5447,9 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
5446
5447
  @if $grid-skin == 'fluent2' {
5447
5448
  margin-top: -8px;
5448
5449
  }
5450
+ @if $grid-skin == 'bootstrap5.3' {
5451
+ margin-top: -9px;
5452
+ }
5449
5453
  }
5450
5454
 
5451
5455
  .e-reorderdownarrow {
@@ -5710,6 +5714,12 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
5710
5714
  }
5711
5715
  }
5712
5716
 
5717
+ & .e-tbar-btn.e-icon-btn:hover {
5718
+ @if $grid-skin == 'fluent2' {
5719
+ background-color: $group-header-hover-bg-color;
5720
+ }
5721
+ }
5722
+
5713
5723
  .e-search-icon {
5714
5724
  background: none;
5715
5725
  }
@@ -6379,7 +6389,9 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
6379
6389
  }
6380
6390
 
6381
6391
  & .e-menu-item.e-focused {
6382
- background-color: transparent;
6392
+ @if $grid-skin != 'bootstrap5.3' {
6393
+ background-color: transparent;
6394
+ }
6383
6395
  }
6384
6396
  }
6385
6397
  }
@@ -6758,6 +6770,11 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
6758
6770
  .e-emptyrow {
6759
6771
  &:not(.e-editedbatchcell):not(.e-updatedtd) {
6760
6772
  color: $grid-rowcell-color;
6773
+ &.e-active {
6774
+ @if $grid-skin == 'fluent2' or $grid-skin == 'highcontrast' {
6775
+ color: $grid-row-selection-color;
6776
+ }
6777
+ }
6761
6778
  }
6762
6779
  }
6763
6780
 
@@ -6844,9 +6861,9 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
6844
6861
 
6845
6862
  &.e-gridhover .e-frozenhover,
6846
6863
  &.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
6847
- &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
6864
+ &.e-gridhover:not(.e-rowdrag) .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
6848
6865
  &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse,
6849
- &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
6866
+ &.e-gridhover:not(.e-rowdrag) .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
6850
6867
  &.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
6851
6868
  &.e-gridhover .e-row.e-addedrow:not(.e-disable-gridhover):not(.e-detailrow):hover .e-dragindentcell,
6852
6869
  &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
@@ -7046,6 +7063,10 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
7046
7063
  color: $grid-filtered-color;
7047
7064
  }
7048
7065
 
7066
+ .e-focused .e-filtered::before {
7067
+ color: $grid-hover-icon-color;
7068
+ }
7069
+
7049
7070
  .e-gridpopup {
7050
7071
  .e-content {
7051
7072
  background-color: $grid-popup-bg-color;
@@ -7268,6 +7289,9 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
7268
7289
  padding-top: 6px;
7269
7290
  padding-bottom: 6px;
7270
7291
  }
7292
+ @if $grid-skin == 'fluent2' {
7293
+ color: $grid-dragdrop-text-color;
7294
+ }
7271
7295
 
7272
7296
  &.e-focused {
7273
7297
  box-shadow: none;
@@ -1395,6 +1395,7 @@ $grid-checkmark-color: $primary-text-color !default;
1395
1395
  }
1396
1396
 
1397
1397
  .e-dropitemscount {
1398
+ font-size: 14px;
1398
1399
  @if $grid-skin == 'tailwind' {
1399
1400
  margin-left: 1px;
1400
1401
  }
@@ -4665,7 +4666,7 @@ $grid-checkmark-color: $primary-text-color !default;
4665
4666
  }
4666
4667
 
4667
4668
  & .e-cloneproperties {
4668
- border-width: $grid-border-size $grid-border-size 3px;
4669
+ border-width: $grid-border-size $grid-border-size 2px;
4669
4670
  }
4670
4671
 
4671
4672
  & tr {
@@ -5452,6 +5453,9 @@ $grid-checkmark-color: $primary-text-color !default;
5452
5453
  @if $grid-skin == 'fluent2' {
5453
5454
  margin-top: -8px;
5454
5455
  }
5456
+ @if $grid-skin == 'bootstrap5.3' {
5457
+ margin-top: -9px;
5458
+ }
5455
5459
  }
5456
5460
 
5457
5461
  .e-reorderdownarrow {
@@ -5716,6 +5720,12 @@ $grid-checkmark-color: $primary-text-color !default;
5716
5720
  }
5717
5721
  }
5718
5722
 
5723
+ & .e-tbar-btn.e-icon-btn:hover {
5724
+ @if $grid-skin == 'fluent2' {
5725
+ background-color: $group-header-hover-bg-color;
5726
+ }
5727
+ }
5728
+
5719
5729
  .e-search-icon {
5720
5730
  background: none;
5721
5731
  }
@@ -6385,7 +6395,9 @@ $grid-checkmark-color: $primary-text-color !default;
6385
6395
  }
6386
6396
 
6387
6397
  & .e-menu-item.e-focused {
6388
- background-color: transparent;
6398
+ @if $grid-skin != 'bootstrap5.3' {
6399
+ background-color: transparent;
6400
+ }
6389
6401
  }
6390
6402
  }
6391
6403
  }
@@ -6764,6 +6776,11 @@ $grid-checkmark-color: $primary-text-color !default;
6764
6776
  .e-emptyrow {
6765
6777
  &:not(.e-editedbatchcell):not(.e-updatedtd) {
6766
6778
  color: $grid-rowcell-color;
6779
+ &.e-active {
6780
+ @if $grid-skin == 'fluent2' or $grid-skin == 'highcontrast' {
6781
+ color: $grid-row-selection-color;
6782
+ }
6783
+ }
6767
6784
  }
6768
6785
  }
6769
6786
 
@@ -6850,9 +6867,9 @@ $grid-checkmark-color: $primary-text-color !default;
6850
6867
 
6851
6868
  &.e-gridhover .e-frozenhover,
6852
6869
  &.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
6853
- &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
6870
+ &.e-gridhover:not(.e-rowdrag) .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
6854
6871
  &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse,
6855
- &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
6872
+ &.e-gridhover:not(.e-rowdrag) .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
6856
6873
  &.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
6857
6874
  &.e-gridhover .e-row.e-addedrow:not(.e-disable-gridhover):not(.e-detailrow):hover .e-dragindentcell,
6858
6875
  &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
@@ -7052,6 +7069,10 @@ $grid-checkmark-color: $primary-text-color !default;
7052
7069
  color: $grid-filtered-color;
7053
7070
  }
7054
7071
 
7072
+ .e-focused .e-filtered::before {
7073
+ color: $grid-hover-icon-color;
7074
+ }
7075
+
7055
7076
  .e-gridpopup {
7056
7077
  .e-content {
7057
7078
  background-color: $grid-popup-bg-color;
@@ -7274,6 +7295,9 @@ $grid-checkmark-color: $primary-text-color !default;
7274
7295
  padding-top: 6px;
7275
7296
  padding-bottom: 6px;
7276
7297
  }
7298
+ @if $grid-skin == 'fluent2' {
7299
+ color: $grid-dragdrop-text-color;
7300
+ }
7277
7301
 
7278
7302
  &.e-focused {
7279
7303
  box-shadow: none;
@@ -1395,6 +1395,7 @@ $grid-checkmark-color: $primary-text-color !default;
1395
1395
  }
1396
1396
 
1397
1397
  .e-dropitemscount {
1398
+ font-size: 14px;
1398
1399
  @if $grid-skin == 'tailwind' {
1399
1400
  margin-left: 1px;
1400
1401
  }
@@ -4665,7 +4666,7 @@ $grid-checkmark-color: $primary-text-color !default;
4665
4666
  }
4666
4667
 
4667
4668
  & .e-cloneproperties {
4668
- border-width: $grid-border-size $grid-border-size 3px;
4669
+ border-width: $grid-border-size $grid-border-size 2px;
4669
4670
  }
4670
4671
 
4671
4672
  & tr {
@@ -5452,6 +5453,9 @@ $grid-checkmark-color: $primary-text-color !default;
5452
5453
  @if $grid-skin == 'fluent2' {
5453
5454
  margin-top: -8px;
5454
5455
  }
5456
+ @if $grid-skin == 'bootstrap5.3' {
5457
+ margin-top: -9px;
5458
+ }
5455
5459
  }
5456
5460
 
5457
5461
  .e-reorderdownarrow {
@@ -5716,6 +5720,12 @@ $grid-checkmark-color: $primary-text-color !default;
5716
5720
  }
5717
5721
  }
5718
5722
 
5723
+ & .e-tbar-btn.e-icon-btn:hover {
5724
+ @if $grid-skin == 'fluent2' {
5725
+ background-color: $group-header-hover-bg-color;
5726
+ }
5727
+ }
5728
+
5719
5729
  .e-search-icon {
5720
5730
  background: none;
5721
5731
  }
@@ -6385,7 +6395,9 @@ $grid-checkmark-color: $primary-text-color !default;
6385
6395
  }
6386
6396
 
6387
6397
  & .e-menu-item.e-focused {
6388
- background-color: transparent;
6398
+ @if $grid-skin != 'bootstrap5.3' {
6399
+ background-color: transparent;
6400
+ }
6389
6401
  }
6390
6402
  }
6391
6403
  }
@@ -6764,6 +6776,11 @@ $grid-checkmark-color: $primary-text-color !default;
6764
6776
  .e-emptyrow {
6765
6777
  &:not(.e-editedbatchcell):not(.e-updatedtd) {
6766
6778
  color: $grid-rowcell-color;
6779
+ &.e-active {
6780
+ @if $grid-skin == 'fluent2' or $grid-skin == 'highcontrast' {
6781
+ color: $grid-row-selection-color;
6782
+ }
6783
+ }
6767
6784
  }
6768
6785
  }
6769
6786
 
@@ -6850,9 +6867,9 @@ $grid-checkmark-color: $primary-text-color !default;
6850
6867
 
6851
6868
  &.e-gridhover .e-frozenhover,
6852
6869
  &.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
6853
- &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
6870
+ &.e-gridhover:not(.e-rowdrag) .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
6854
6871
  &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse,
6855
- &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
6872
+ &.e-gridhover:not(.e-rowdrag) .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
6856
6873
  &.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
6857
6874
  &.e-gridhover .e-row.e-addedrow:not(.e-disable-gridhover):not(.e-detailrow):hover .e-dragindentcell,
6858
6875
  &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
@@ -7052,6 +7069,10 @@ $grid-checkmark-color: $primary-text-color !default;
7052
7069
  color: $grid-filtered-color;
7053
7070
  }
7054
7071
 
7072
+ .e-focused .e-filtered::before {
7073
+ color: $grid-hover-icon-color;
7074
+ }
7075
+
7055
7076
  .e-gridpopup {
7056
7077
  .e-content {
7057
7078
  background-color: $grid-popup-bg-color;
@@ -7274,6 +7295,9 @@ $grid-checkmark-color: $primary-text-color !default;
7274
7295
  padding-top: 6px;
7275
7296
  padding-bottom: 6px;
7276
7297
  }
7298
+ @if $grid-skin == 'fluent2' {
7299
+ color: $grid-dragdrop-text-color;
7300
+ }
7277
7301
 
7278
7302
  &.e-focused {
7279
7303
  box-shadow: none;