@syncfusion/blazor-themes 27.1.48 → 27.1.50

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 (169) hide show
  1. package/SCSS-Themes/bds-dark.scss +103 -87
  2. package/SCSS-Themes/bds.scss +103 -87
  3. package/SCSS-Themes/bootstrap-dark.scss +103 -87
  4. package/SCSS-Themes/bootstrap.scss +103 -87
  5. package/SCSS-Themes/bootstrap4.scss +103 -87
  6. package/SCSS-Themes/bootstrap5-dark.scss +103 -87
  7. package/SCSS-Themes/bootstrap5.3.scss +103 -87
  8. package/SCSS-Themes/bootstrap5.scss +103 -87
  9. package/SCSS-Themes/buttons/check-box/bds-dark.scss +7 -0
  10. package/SCSS-Themes/buttons/check-box/bds.scss +7 -0
  11. package/SCSS-Themes/buttons/check-box/bootstrap-dark.scss +7 -0
  12. package/SCSS-Themes/buttons/check-box/bootstrap.scss +7 -0
  13. package/SCSS-Themes/buttons/check-box/bootstrap4.scss +7 -0
  14. package/SCSS-Themes/buttons/check-box/bootstrap5-dark.scss +7 -0
  15. package/SCSS-Themes/buttons/check-box/bootstrap5.3.scss +7 -0
  16. package/SCSS-Themes/buttons/check-box/bootstrap5.scss +7 -0
  17. package/SCSS-Themes/buttons/check-box/fabric-dark.scss +7 -0
  18. package/SCSS-Themes/buttons/check-box/fabric.scss +7 -0
  19. package/SCSS-Themes/buttons/check-box/fluent-dark.scss +7 -0
  20. package/SCSS-Themes/buttons/check-box/fluent.scss +7 -0
  21. package/SCSS-Themes/buttons/check-box/fluent2-dark.scss +7 -0
  22. package/SCSS-Themes/buttons/check-box/fluent2.scss +7 -0
  23. package/SCSS-Themes/buttons/check-box/highcontrast.scss +7 -0
  24. package/SCSS-Themes/buttons/check-box/material-dark.scss +7 -0
  25. package/SCSS-Themes/buttons/check-box/material.scss +7 -0
  26. package/SCSS-Themes/buttons/check-box/material3-dark.scss +7 -0
  27. package/SCSS-Themes/buttons/check-box/material3.scss +7 -0
  28. package/SCSS-Themes/buttons/check-box/tailwind-dark.scss +7 -0
  29. package/SCSS-Themes/buttons/check-box/tailwind.scss +7 -0
  30. package/SCSS-Themes/dropdowns/drop-down-list/bds-dark.scss +1 -3
  31. package/SCSS-Themes/dropdowns/drop-down-list/bds.scss +1 -3
  32. package/SCSS-Themes/dropdowns/drop-down-list/bootstrap-dark.scss +1 -3
  33. package/SCSS-Themes/dropdowns/drop-down-list/bootstrap.scss +1 -3
  34. package/SCSS-Themes/dropdowns/drop-down-list/bootstrap4.scss +1 -3
  35. package/SCSS-Themes/dropdowns/drop-down-list/bootstrap5-dark.scss +1 -3
  36. package/SCSS-Themes/dropdowns/drop-down-list/bootstrap5.3.scss +1 -3
  37. package/SCSS-Themes/dropdowns/drop-down-list/bootstrap5.scss +1 -3
  38. package/SCSS-Themes/dropdowns/drop-down-list/fabric-dark.scss +1 -3
  39. package/SCSS-Themes/dropdowns/drop-down-list/fabric.scss +1 -3
  40. package/SCSS-Themes/dropdowns/drop-down-list/fluent-dark.scss +1 -3
  41. package/SCSS-Themes/dropdowns/drop-down-list/fluent.scss +1 -3
  42. package/SCSS-Themes/dropdowns/drop-down-list/fluent2-dark.scss +1 -3
  43. package/SCSS-Themes/dropdowns/drop-down-list/fluent2.scss +1 -3
  44. package/SCSS-Themes/dropdowns/drop-down-list/highcontrast.scss +1 -3
  45. package/SCSS-Themes/dropdowns/drop-down-list/material-dark.scss +1 -3
  46. package/SCSS-Themes/dropdowns/drop-down-list/material.scss +1 -3
  47. package/SCSS-Themes/dropdowns/drop-down-list/material3-dark.scss +1 -3
  48. package/SCSS-Themes/dropdowns/drop-down-list/material3.scss +1 -3
  49. package/SCSS-Themes/dropdowns/drop-down-list/tailwind-dark.scss +1 -3
  50. package/SCSS-Themes/dropdowns/drop-down-list/tailwind.scss +1 -3
  51. package/SCSS-Themes/dropdowns/list-box/bds-dark.scss +1 -0
  52. package/SCSS-Themes/dropdowns/list-box/bds.scss +1 -0
  53. package/SCSS-Themes/dropdowns/list-box/bootstrap-dark.scss +1 -0
  54. package/SCSS-Themes/dropdowns/list-box/bootstrap.scss +1 -0
  55. package/SCSS-Themes/dropdowns/list-box/bootstrap4.scss +1 -0
  56. package/SCSS-Themes/dropdowns/list-box/bootstrap5-dark.scss +1 -0
  57. package/SCSS-Themes/dropdowns/list-box/bootstrap5.3.scss +1 -0
  58. package/SCSS-Themes/dropdowns/list-box/bootstrap5.scss +1 -0
  59. package/SCSS-Themes/dropdowns/list-box/fabric-dark.scss +1 -0
  60. package/SCSS-Themes/dropdowns/list-box/fabric.scss +1 -0
  61. package/SCSS-Themes/dropdowns/list-box/fluent-dark.scss +1 -0
  62. package/SCSS-Themes/dropdowns/list-box/fluent.scss +1 -0
  63. package/SCSS-Themes/dropdowns/list-box/fluent2-dark.scss +1 -0
  64. package/SCSS-Themes/dropdowns/list-box/fluent2.scss +1 -0
  65. package/SCSS-Themes/dropdowns/list-box/highcontrast.scss +1 -0
  66. package/SCSS-Themes/dropdowns/list-box/material-dark.scss +1 -0
  67. package/SCSS-Themes/dropdowns/list-box/material.scss +1 -0
  68. package/SCSS-Themes/dropdowns/list-box/material3-dark.scss +1 -0
  69. package/SCSS-Themes/dropdowns/list-box/material3.scss +1 -0
  70. package/SCSS-Themes/dropdowns/list-box/tailwind-dark.scss +1 -0
  71. package/SCSS-Themes/dropdowns/list-box/tailwind.scss +1 -0
  72. package/SCSS-Themes/fabric-dark.scss +103 -87
  73. package/SCSS-Themes/fabric.scss +103 -87
  74. package/SCSS-Themes/fluent-dark.scss +104 -88
  75. package/SCSS-Themes/fluent.scss +104 -88
  76. package/SCSS-Themes/fluent2-dark.scss +104 -88
  77. package/SCSS-Themes/fluent2.scss +104 -88
  78. package/SCSS-Themes/grids/grid/bds-dark.scss +52 -41
  79. package/SCSS-Themes/grids/grid/bds.scss +52 -41
  80. package/SCSS-Themes/grids/grid/bootstrap-dark.scss +52 -41
  81. package/SCSS-Themes/grids/grid/bootstrap.scss +52 -41
  82. package/SCSS-Themes/grids/grid/bootstrap4.scss +52 -41
  83. package/SCSS-Themes/grids/grid/bootstrap5-dark.scss +52 -41
  84. package/SCSS-Themes/grids/grid/bootstrap5.3.scss +52 -41
  85. package/SCSS-Themes/grids/grid/bootstrap5.scss +52 -41
  86. package/SCSS-Themes/grids/grid/fabric-dark.scss +52 -41
  87. package/SCSS-Themes/grids/grid/fabric.scss +52 -41
  88. package/SCSS-Themes/grids/grid/fluent-dark.scss +53 -42
  89. package/SCSS-Themes/grids/grid/fluent.scss +53 -42
  90. package/SCSS-Themes/grids/grid/fluent2-dark.scss +53 -42
  91. package/SCSS-Themes/grids/grid/fluent2.scss +53 -42
  92. package/SCSS-Themes/grids/grid/highcontrast.scss +52 -41
  93. package/SCSS-Themes/grids/grid/material-dark.scss +52 -41
  94. package/SCSS-Themes/grids/grid/material.scss +52 -41
  95. package/SCSS-Themes/grids/grid/material3-dark.scss +52 -41
  96. package/SCSS-Themes/grids/grid/material3.scss +52 -41
  97. package/SCSS-Themes/grids/grid/tailwind-dark.scss +52 -41
  98. package/SCSS-Themes/grids/grid/tailwind.scss +52 -41
  99. package/SCSS-Themes/highcontrast.scss +103 -87
  100. package/SCSS-Themes/inputs/color-picker/bds-dark.scss +1 -1
  101. package/SCSS-Themes/inputs/color-picker/bds.scss +1 -1
  102. package/SCSS-Themes/inputs/color-picker/bootstrap-dark.scss +1 -1
  103. package/SCSS-Themes/inputs/color-picker/bootstrap.scss +1 -1
  104. package/SCSS-Themes/inputs/color-picker/bootstrap4.scss +1 -1
  105. package/SCSS-Themes/inputs/color-picker/bootstrap5-dark.scss +1 -1
  106. package/SCSS-Themes/inputs/color-picker/bootstrap5.3.scss +1 -1
  107. package/SCSS-Themes/inputs/color-picker/bootstrap5.scss +1 -1
  108. package/SCSS-Themes/inputs/color-picker/fabric-dark.scss +1 -1
  109. package/SCSS-Themes/inputs/color-picker/fabric.scss +1 -1
  110. package/SCSS-Themes/inputs/color-picker/fluent-dark.scss +1 -1
  111. package/SCSS-Themes/inputs/color-picker/fluent.scss +1 -1
  112. package/SCSS-Themes/inputs/color-picker/fluent2-dark.scss +1 -1
  113. package/SCSS-Themes/inputs/color-picker/fluent2.scss +1 -1
  114. package/SCSS-Themes/inputs/color-picker/highcontrast.scss +1 -1
  115. package/SCSS-Themes/inputs/color-picker/material-dark.scss +1 -1
  116. package/SCSS-Themes/inputs/color-picker/material.scss +1 -1
  117. package/SCSS-Themes/inputs/color-picker/material3-dark.scss +1 -1
  118. package/SCSS-Themes/inputs/color-picker/material3.scss +1 -1
  119. package/SCSS-Themes/inputs/color-picker/tailwind-dark.scss +1 -1
  120. package/SCSS-Themes/inputs/color-picker/tailwind.scss +1 -1
  121. package/SCSS-Themes/material-dark.scss +103 -87
  122. package/SCSS-Themes/material.scss +103 -87
  123. package/SCSS-Themes/material3-dark.scss +103 -87
  124. package/SCSS-Themes/material3.scss +103 -87
  125. package/SCSS-Themes/popups/dialog/bds-dark.scss +0 -35
  126. package/SCSS-Themes/popups/dialog/bds.scss +0 -35
  127. package/SCSS-Themes/popups/dialog/bootstrap-dark.scss +0 -35
  128. package/SCSS-Themes/popups/dialog/bootstrap.scss +0 -35
  129. package/SCSS-Themes/popups/dialog/bootstrap4.scss +0 -35
  130. package/SCSS-Themes/popups/dialog/bootstrap5-dark.scss +0 -35
  131. package/SCSS-Themes/popups/dialog/bootstrap5.3.scss +0 -35
  132. package/SCSS-Themes/popups/dialog/bootstrap5.scss +0 -35
  133. package/SCSS-Themes/popups/dialog/fabric-dark.scss +0 -35
  134. package/SCSS-Themes/popups/dialog/fabric.scss +0 -35
  135. package/SCSS-Themes/popups/dialog/fluent-dark.scss +0 -35
  136. package/SCSS-Themes/popups/dialog/fluent.scss +0 -35
  137. package/SCSS-Themes/popups/dialog/fluent2-dark.scss +0 -35
  138. package/SCSS-Themes/popups/dialog/fluent2.scss +0 -35
  139. package/SCSS-Themes/popups/dialog/highcontrast.scss +0 -35
  140. package/SCSS-Themes/popups/dialog/material-dark.scss +0 -35
  141. package/SCSS-Themes/popups/dialog/material.scss +0 -35
  142. package/SCSS-Themes/popups/dialog/material3-dark.scss +0 -35
  143. package/SCSS-Themes/popups/dialog/material3.scss +0 -35
  144. package/SCSS-Themes/popups/dialog/tailwind-dark.scss +0 -35
  145. package/SCSS-Themes/popups/dialog/tailwind.scss +0 -35
  146. package/SCSS-Themes/richtexteditor/rich-text-editor/bds-dark.scss +41 -7
  147. package/SCSS-Themes/richtexteditor/rich-text-editor/bds.scss +41 -7
  148. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap-dark.scss +41 -7
  149. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap.scss +41 -7
  150. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap4.scss +41 -7
  151. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap5-dark.scss +41 -7
  152. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap5.3.scss +41 -7
  153. package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap5.scss +41 -7
  154. package/SCSS-Themes/richtexteditor/rich-text-editor/fabric-dark.scss +41 -7
  155. package/SCSS-Themes/richtexteditor/rich-text-editor/fabric.scss +41 -7
  156. package/SCSS-Themes/richtexteditor/rich-text-editor/fluent-dark.scss +41 -7
  157. package/SCSS-Themes/richtexteditor/rich-text-editor/fluent.scss +41 -7
  158. package/SCSS-Themes/richtexteditor/rich-text-editor/fluent2-dark.scss +41 -7
  159. package/SCSS-Themes/richtexteditor/rich-text-editor/fluent2.scss +41 -7
  160. package/SCSS-Themes/richtexteditor/rich-text-editor/highcontrast.scss +41 -7
  161. package/SCSS-Themes/richtexteditor/rich-text-editor/material-dark.scss +41 -7
  162. package/SCSS-Themes/richtexteditor/rich-text-editor/material.scss +41 -7
  163. package/SCSS-Themes/richtexteditor/rich-text-editor/material3-dark.scss +41 -7
  164. package/SCSS-Themes/richtexteditor/rich-text-editor/material3.scss +41 -7
  165. package/SCSS-Themes/richtexteditor/rich-text-editor/tailwind-dark.scss +41 -7
  166. package/SCSS-Themes/richtexteditor/rich-text-editor/tailwind.scss +41 -7
  167. package/SCSS-Themes/tailwind-dark.scss +103 -87
  168. package/SCSS-Themes/tailwind.scss +103 -87
  169. package/package.json +1 -1
@@ -159,7 +159,7 @@ $grid-columnchooser-toolbar-div-padding: 0 10px !default;
159
159
  $grid-columnchooser-toolbar-icon-line-height: 1.9 !default;
160
160
  $grid-columnchooser-toolbar-icon-font-size: $font-icon-15 !default;
161
161
  $grid-columnchooser-btn-font-size: $text-base !default;
162
- $grid-columnchooser-toolbardiv-padding: 0 4px !default;
162
+ $grid-columnchooser-toolbardiv-padding: 0 4px 1px !default;
163
163
  $grid-columnchooser-toolbardiv-margin-top: 0 !default;
164
164
  $grid-columnchooser-toolbar-icon-vertical-align: middle !default;
165
165
  $grid-columnchooser-cancel-icon-content-f-opactiy: 1 !default;
@@ -1884,28 +1884,18 @@ $grid-checkmark-color: $primary-text-color !default;
1884
1884
  }
1885
1885
 
1886
1886
  .e-bigger &.e-bothlines.e-rtl td.e-rowcell.e-cellselectionbackground,
1887
- &.e-bothlines.e-bigger.e-rtl td.e-rowcell.e-cellselectionbackground,
1888
- .e-bigger &.e-rtl td.e-rowcell.e-cellselectionbackground,
1889
- &.e-bigger.e-rtl td.e-rowcell.e-cellselectionbackground {
1887
+ &.e-bothlines.e-bigger.e-rtl td.e-rowcell.e-cellselectionbackground {
1890
1888
  @if $grid-skin == 'material3' {
1891
1889
  border: 1px solid rgba($content-text-color);
1892
1890
  }
1893
1891
  }
1894
1892
 
1895
- .e-bigger &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground,
1896
- .e-bigger & td.e-cellselectionbackground,
1897
- &.e-bigger:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground,
1898
- &.e-bigger td.e-cellselectionbackground {
1893
+ .e-bigger &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground:not(.e-gridchkbox-cell),
1894
+ &.e-bigger:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground:not(.e-gridchkbox-cell) {
1899
1895
  @if $grid-skin == 'material3' {
1900
- padding-bottom: 13px;
1901
- @include grid-padding-left-right(11.5px, 11.5px);
1902
- }
1903
- }
1904
-
1905
- .e-bigger &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground,
1906
- &.e-bigger:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground {
1907
- @if $grid-skin == 'material3' {
1908
- padding-top: 13px;
1896
+ padding-top: 0;
1897
+ padding-bottom: 0;
1898
+ @include grid-padding-left-right(12px, 12px);
1909
1899
  }
1910
1900
  }
1911
1901
 
@@ -2545,6 +2535,9 @@ $grid-checkmark-color: $primary-text-color !default;
2545
2535
 
2546
2536
  & .e-res-apply-btn:disabled {
2547
2537
  color: $grid-btn-disabled-bgcolor;
2538
+ @if $grid-skin == 'fluent2' {
2539
+ color: $primary-text-disabled;
2540
+ }
2548
2541
  }
2549
2542
  & .e-btn {
2550
2543
  @if $grid-skin != 'fluent2' {
@@ -3643,6 +3636,18 @@ $grid-checkmark-color: $primary-text-color !default;
3643
3636
  }
3644
3637
  }
3645
3638
 
3639
+ &:not(.sf-grid) .e-res-toolbar .e-toolbar-items .e-search-wrapper {
3640
+ & .e-search-icon {
3641
+ padding: $grid-res-toolbar-search-wrapper-icon-padding;
3642
+ @if $grid-skin == 'bootstrap5.3' {
3643
+ padding: 9px 8px;
3644
+ }
3645
+ @if $grid-skin == 'bootstrap4' {
3646
+ padding: 9px 9.5px;
3647
+ }
3648
+ }
3649
+ }
3650
+
3646
3651
  .e-res-toolbar {
3647
3652
  border-bottom: 1px solid;
3648
3653
  border-bottom-color: $grid-header-border-color;
@@ -3743,18 +3748,6 @@ $grid-checkmark-color: $primary-text-color !default;
3743
3748
  }
3744
3749
  }
3745
3750
 
3746
- &:not(.sf-grid).e-search-wrapper {
3747
- & .e-search-icon {
3748
- padding: $grid-res-toolbar-search-wrapper-icon-padding;
3749
- @if $grid-skin == 'bootstrap5.3' {
3750
- padding: 9px 8px;
3751
- }
3752
- @if $grid-skin == 'bootstrap4' {
3753
- padding: 9px 9.5px;
3754
- }
3755
- }
3756
- }
3757
-
3758
3751
  & .e-responsive-right {
3759
3752
  & .e-search-wrapper {
3760
3753
  padding-left: 0;
@@ -3951,8 +3944,11 @@ $grid-checkmark-color: $primary-text-color !default;
3951
3944
  }
3952
3945
  }
3953
3946
 
3954
- &.e-default .e-grouptopleftcell {
3955
- border-top: $grid-grouptopleftcell-border-top;
3947
+ &.e-default {
3948
+ .e-grouptopleftcell,
3949
+ .e-rowdragheader {
3950
+ border-top: $grid-grouptopleftcell-border-top;
3951
+ }
3956
3952
  }
3957
3953
 
3958
3954
  &.e-default .e-gridheader .e-headercell.e-firstheader,
@@ -3960,10 +3956,13 @@ $grid-checkmark-color: $primary-text-color !default;
3960
3956
  border-left: 1px solid;
3961
3957
  }
3962
3958
 
3963
- &.e-default.e-verticallines .e-grouptopleftcell,
3964
- &.e-default.e-bothlines .e-grouptopleftcell,
3965
- &.e-default.e-hidelines .e-grouptopleftcell {
3966
- border-top-width: 0;
3959
+ &.e-default.e-verticallines,
3960
+ &.e-default.e-bothlines,
3961
+ &.e-default.e-hidelines {
3962
+ .e-grouptopleftcell,
3963
+ .e-rowdragheader {
3964
+ border-top-width: 0;
3965
+ }
3967
3966
  }
3968
3967
 
3969
3968
  &.e-default.e-verticallines,
@@ -4224,6 +4223,12 @@ $grid-checkmark-color: $primary-text-color !default;
4224
4223
  width: auto;
4225
4224
  }
4226
4225
 
4226
+ .e-rowcell.e-gridchkbox {
4227
+ @if $grid-skin == 'fluent' {
4228
+ padding-left: 8px;
4229
+ }
4230
+ }
4231
+
4227
4232
  &.e-left-shadow,
4228
4233
  &.e-rtl.e-left-shadow,
4229
4234
  &.e-rtl.e-default.e-left-shadow,
@@ -5167,13 +5172,12 @@ $grid-checkmark-color: $primary-text-color !default;
5167
5172
  font-weight: $grid-selection-font-weight;
5168
5173
  }
5169
5174
 
5170
- &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground,
5175
+ &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground:not(.e-gridchkbox-cell),
5171
5176
  td.e-cellselectionbackground {
5172
5177
  font-weight: $grid-selection-font-weight;
5173
5178
  @if $grid-skin == 'material3' {
5174
- border: 1px solid rgba($content-text-color);
5175
5179
  padding-bottom: 7px;
5176
- @include grid-padding-left-right(7.5px, 7.5px);
5180
+ @include grid-padding-left-right(8px, 8px);
5177
5181
  }
5178
5182
  }
5179
5183
 
@@ -5184,14 +5188,13 @@ $grid-checkmark-color: $primary-text-color !default;
5184
5188
  }
5185
5189
 
5186
5190
  &.e-bothlines td.e-rowcell.e-cellselectionbackground,
5187
- &.e-bothlines.e-rtl td.e-rowcell.e-cellselectionbackground,
5188
- &.e-rtl td.e-rowcell.e-cellselectionbackground {
5191
+ &.e-bothlines.e-rtl td.e-rowcell.e-cellselectionbackground {
5189
5192
  @if $grid-skin == 'material3' {
5190
5193
  border: 1px solid rgba($content-text-color);
5191
5194
  }
5192
5195
  }
5193
5196
 
5194
- &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground {
5197
+ &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground:not(.e-gridchkbox-cell) {
5195
5198
  @if $grid-skin == 'material3' {
5196
5199
  padding-top: 7px;
5197
5200
  }
@@ -6271,7 +6274,8 @@ $grid-checkmark-color: $primary-text-color !default;
6271
6274
  }
6272
6275
 
6273
6276
  &.e-wrap {
6274
- & .e-rowcell,
6277
+ & .e-gridheader .e-rowcell,
6278
+ & .e-gridcontent .e-rowcell,
6275
6279
  & .e-columnheader .e-stackedheadercelldiv,
6276
6280
  & .e-columnheader .e-headercelldiv,
6277
6281
  & .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
@@ -6284,6 +6288,10 @@ $grid-checkmark-color: $primary-text-color !default;
6284
6288
  max-height: $grid-rowcell-wrap-max-height;
6285
6289
  }
6286
6290
  }
6291
+
6292
+ & .e-checkbox-wrapper {
6293
+ vertical-align: middle;
6294
+ }
6287
6295
  }
6288
6296
 
6289
6297
  &.e-wrap .e-columnheader {
@@ -6456,6 +6464,7 @@ $grid-checkmark-color: $primary-text-color !default;
6456
6464
  }
6457
6465
 
6458
6466
  &.sf-grid {
6467
+
6459
6468
  span.e-ungroupbutton.e-icons {
6460
6469
  margin-left: $grid-group-ungroupicon-margin-left;
6461
6470
  @if $grid-skin == 'material3' {
@@ -7134,10 +7143,12 @@ $grid-checkmark-color: $primary-text-color !default;
7134
7143
 
7135
7144
  .e-verticallines tr th,
7136
7145
  .e-grouptopleftcell,
7146
+ .e-rowdragheader,
7137
7147
  .e-gridpopup .e-content,
7138
7148
  .e-filterbarcell,
7139
7149
  .e-filterbarcelldisabled,
7140
7150
  &.e-default .e-grouptopleftcell,
7151
+ &.e-default .e-rowdragheader,
7141
7152
  .e-headercell,
7142
7153
  .e-summarycell,
7143
7154
  .e-detailheadercell,
@@ -159,7 +159,7 @@ $grid-columnchooser-toolbar-div-padding: 0 10px !default;
159
159
  $grid-columnchooser-toolbar-icon-line-height: 1.9 !default;
160
160
  $grid-columnchooser-toolbar-icon-font-size: $font-icon-15 !default;
161
161
  $grid-columnchooser-btn-font-size: $text-base !default;
162
- $grid-columnchooser-toolbardiv-padding: 0 4px !default;
162
+ $grid-columnchooser-toolbardiv-padding: 0 4px 1px !default;
163
163
  $grid-columnchooser-toolbardiv-margin-top: 0 !default;
164
164
  $grid-columnchooser-toolbar-icon-vertical-align: middle !default;
165
165
  $grid-columnchooser-cancel-icon-content-f-opactiy: 1 !default;
@@ -1884,28 +1884,18 @@ $grid-checkmark-color: $primary-text-color !default;
1884
1884
  }
1885
1885
 
1886
1886
  .e-bigger &.e-bothlines.e-rtl td.e-rowcell.e-cellselectionbackground,
1887
- &.e-bothlines.e-bigger.e-rtl td.e-rowcell.e-cellselectionbackground,
1888
- .e-bigger &.e-rtl td.e-rowcell.e-cellselectionbackground,
1889
- &.e-bigger.e-rtl td.e-rowcell.e-cellselectionbackground {
1887
+ &.e-bothlines.e-bigger.e-rtl td.e-rowcell.e-cellselectionbackground {
1890
1888
  @if $grid-skin == 'material3' {
1891
1889
  border: 1px solid rgba($content-text-color);
1892
1890
  }
1893
1891
  }
1894
1892
 
1895
- .e-bigger &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground,
1896
- .e-bigger & td.e-cellselectionbackground,
1897
- &.e-bigger:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground,
1898
- &.e-bigger td.e-cellselectionbackground {
1893
+ .e-bigger &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground:not(.e-gridchkbox-cell),
1894
+ &.e-bigger:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground:not(.e-gridchkbox-cell) {
1899
1895
  @if $grid-skin == 'material3' {
1900
- padding-bottom: 13px;
1901
- @include grid-padding-left-right(11.5px, 11.5px);
1902
- }
1903
- }
1904
-
1905
- .e-bigger &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground,
1906
- &.e-bigger:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground {
1907
- @if $grid-skin == 'material3' {
1908
- padding-top: 13px;
1896
+ padding-top: 0;
1897
+ padding-bottom: 0;
1898
+ @include grid-padding-left-right(12px, 12px);
1909
1899
  }
1910
1900
  }
1911
1901
 
@@ -2545,6 +2535,9 @@ $grid-checkmark-color: $primary-text-color !default;
2545
2535
 
2546
2536
  & .e-res-apply-btn:disabled {
2547
2537
  color: $grid-btn-disabled-bgcolor;
2538
+ @if $grid-skin == 'fluent2' {
2539
+ color: $primary-text-disabled;
2540
+ }
2548
2541
  }
2549
2542
  & .e-btn {
2550
2543
  @if $grid-skin != 'fluent2' {
@@ -3643,6 +3636,18 @@ $grid-checkmark-color: $primary-text-color !default;
3643
3636
  }
3644
3637
  }
3645
3638
 
3639
+ &:not(.sf-grid) .e-res-toolbar .e-toolbar-items .e-search-wrapper {
3640
+ & .e-search-icon {
3641
+ padding: $grid-res-toolbar-search-wrapper-icon-padding;
3642
+ @if $grid-skin == 'bootstrap5.3' {
3643
+ padding: 9px 8px;
3644
+ }
3645
+ @if $grid-skin == 'bootstrap4' {
3646
+ padding: 9px 9.5px;
3647
+ }
3648
+ }
3649
+ }
3650
+
3646
3651
  .e-res-toolbar {
3647
3652
  border-bottom: 1px solid;
3648
3653
  border-bottom-color: $grid-header-border-color;
@@ -3743,18 +3748,6 @@ $grid-checkmark-color: $primary-text-color !default;
3743
3748
  }
3744
3749
  }
3745
3750
 
3746
- &:not(.sf-grid).e-search-wrapper {
3747
- & .e-search-icon {
3748
- padding: $grid-res-toolbar-search-wrapper-icon-padding;
3749
- @if $grid-skin == 'bootstrap5.3' {
3750
- padding: 9px 8px;
3751
- }
3752
- @if $grid-skin == 'bootstrap4' {
3753
- padding: 9px 9.5px;
3754
- }
3755
- }
3756
- }
3757
-
3758
3751
  & .e-responsive-right {
3759
3752
  & .e-search-wrapper {
3760
3753
  padding-left: 0;
@@ -3951,8 +3944,11 @@ $grid-checkmark-color: $primary-text-color !default;
3951
3944
  }
3952
3945
  }
3953
3946
 
3954
- &.e-default .e-grouptopleftcell {
3955
- border-top: $grid-grouptopleftcell-border-top;
3947
+ &.e-default {
3948
+ .e-grouptopleftcell,
3949
+ .e-rowdragheader {
3950
+ border-top: $grid-grouptopleftcell-border-top;
3951
+ }
3956
3952
  }
3957
3953
 
3958
3954
  &.e-default .e-gridheader .e-headercell.e-firstheader,
@@ -3960,10 +3956,13 @@ $grid-checkmark-color: $primary-text-color !default;
3960
3956
  border-left: 1px solid;
3961
3957
  }
3962
3958
 
3963
- &.e-default.e-verticallines .e-grouptopleftcell,
3964
- &.e-default.e-bothlines .e-grouptopleftcell,
3965
- &.e-default.e-hidelines .e-grouptopleftcell {
3966
- border-top-width: 0;
3959
+ &.e-default.e-verticallines,
3960
+ &.e-default.e-bothlines,
3961
+ &.e-default.e-hidelines {
3962
+ .e-grouptopleftcell,
3963
+ .e-rowdragheader {
3964
+ border-top-width: 0;
3965
+ }
3967
3966
  }
3968
3967
 
3969
3968
  &.e-default.e-verticallines,
@@ -4224,6 +4223,12 @@ $grid-checkmark-color: $primary-text-color !default;
4224
4223
  width: auto;
4225
4224
  }
4226
4225
 
4226
+ .e-rowcell.e-gridchkbox {
4227
+ @if $grid-skin == 'fluent' {
4228
+ padding-left: 8px;
4229
+ }
4230
+ }
4231
+
4227
4232
  &.e-left-shadow,
4228
4233
  &.e-rtl.e-left-shadow,
4229
4234
  &.e-rtl.e-default.e-left-shadow,
@@ -5167,13 +5172,12 @@ $grid-checkmark-color: $primary-text-color !default;
5167
5172
  font-weight: $grid-selection-font-weight;
5168
5173
  }
5169
5174
 
5170
- &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground,
5175
+ &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground:not(.e-gridchkbox-cell),
5171
5176
  td.e-cellselectionbackground {
5172
5177
  font-weight: $grid-selection-font-weight;
5173
5178
  @if $grid-skin == 'material3' {
5174
- border: 1px solid rgba($content-text-color);
5175
5179
  padding-bottom: 7px;
5176
- @include grid-padding-left-right(7.5px, 7.5px);
5180
+ @include grid-padding-left-right(8px, 8px);
5177
5181
  }
5178
5182
  }
5179
5183
 
@@ -5184,14 +5188,13 @@ $grid-checkmark-color: $primary-text-color !default;
5184
5188
  }
5185
5189
 
5186
5190
  &.e-bothlines td.e-rowcell.e-cellselectionbackground,
5187
- &.e-bothlines.e-rtl td.e-rowcell.e-cellselectionbackground,
5188
- &.e-rtl td.e-rowcell.e-cellselectionbackground {
5191
+ &.e-bothlines.e-rtl td.e-rowcell.e-cellselectionbackground {
5189
5192
  @if $grid-skin == 'material3' {
5190
5193
  border: 1px solid rgba($content-text-color);
5191
5194
  }
5192
5195
  }
5193
5196
 
5194
- &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground {
5197
+ &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground:not(.e-gridchkbox-cell) {
5195
5198
  @if $grid-skin == 'material3' {
5196
5199
  padding-top: 7px;
5197
5200
  }
@@ -6271,7 +6274,8 @@ $grid-checkmark-color: $primary-text-color !default;
6271
6274
  }
6272
6275
 
6273
6276
  &.e-wrap {
6274
- & .e-rowcell,
6277
+ & .e-gridheader .e-rowcell,
6278
+ & .e-gridcontent .e-rowcell,
6275
6279
  & .e-columnheader .e-stackedheadercelldiv,
6276
6280
  & .e-columnheader .e-headercelldiv,
6277
6281
  & .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
@@ -6284,6 +6288,10 @@ $grid-checkmark-color: $primary-text-color !default;
6284
6288
  max-height: $grid-rowcell-wrap-max-height;
6285
6289
  }
6286
6290
  }
6291
+
6292
+ & .e-checkbox-wrapper {
6293
+ vertical-align: middle;
6294
+ }
6287
6295
  }
6288
6296
 
6289
6297
  &.e-wrap .e-columnheader {
@@ -6456,6 +6464,7 @@ $grid-checkmark-color: $primary-text-color !default;
6456
6464
  }
6457
6465
 
6458
6466
  &.sf-grid {
6467
+
6459
6468
  span.e-ungroupbutton.e-icons {
6460
6469
  margin-left: $grid-group-ungroupicon-margin-left;
6461
6470
  @if $grid-skin == 'material3' {
@@ -7134,10 +7143,12 @@ $grid-checkmark-color: $primary-text-color !default;
7134
7143
 
7135
7144
  .e-verticallines tr th,
7136
7145
  .e-grouptopleftcell,
7146
+ .e-rowdragheader,
7137
7147
  .e-gridpopup .e-content,
7138
7148
  .e-filterbarcell,
7139
7149
  .e-filterbarcelldisabled,
7140
7150
  &.e-default .e-grouptopleftcell,
7151
+ &.e-default .e-rowdragheader,
7141
7152
  .e-headercell,
7142
7153
  .e-summarycell,
7143
7154
  .e-detailheadercell,
@@ -351,7 +351,7 @@ $grid-headercelldiv-padding: 0 18px 0 5px !default;
351
351
  $grid-headercelldiv-sort-centeralign-padding-right: 5px !default;
352
352
  $grid-headercell-div-padding: 0 1.5em 0 .4em !default;
353
353
  $grid-group-text-width: auto !default;
354
- $grid-grouptopleftcell-border-top: 2px solid !default;
354
+ $grid-grouptopleftcell-border-top: 1px solid !default;
355
355
  $grid-group-caption-font-size: $text-sm !default;
356
356
  $grid-group-caption-header-padding: 12px 8px 12px 8px !default;
357
357
  $group-sorticon-margin-left: -10px !default;
@@ -1897,28 +1897,18 @@ $grid-checkmark-color: $primary-text-color !default;
1897
1897
  }
1898
1898
 
1899
1899
  .e-bigger &.e-bothlines.e-rtl td.e-rowcell.e-cellselectionbackground,
1900
- &.e-bothlines.e-bigger.e-rtl td.e-rowcell.e-cellselectionbackground,
1901
- .e-bigger &.e-rtl td.e-rowcell.e-cellselectionbackground,
1902
- &.e-bigger.e-rtl td.e-rowcell.e-cellselectionbackground {
1900
+ &.e-bothlines.e-bigger.e-rtl td.e-rowcell.e-cellselectionbackground {
1903
1901
  @if $grid-skin == 'material3' {
1904
1902
  border: 1px solid rgba($content-text-color);
1905
1903
  }
1906
1904
  }
1907
1905
 
1908
- .e-bigger &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground,
1909
- .e-bigger & td.e-cellselectionbackground,
1910
- &.e-bigger:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground,
1911
- &.e-bigger td.e-cellselectionbackground {
1906
+ .e-bigger &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground:not(.e-gridchkbox-cell),
1907
+ &.e-bigger:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground:not(.e-gridchkbox-cell) {
1912
1908
  @if $grid-skin == 'material3' {
1913
- padding-bottom: 13px;
1914
- @include grid-padding-left-right(11.5px, 11.5px);
1915
- }
1916
- }
1917
-
1918
- .e-bigger &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground,
1919
- &.e-bigger:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground {
1920
- @if $grid-skin == 'material3' {
1921
- padding-top: 13px;
1909
+ padding-top: 0;
1910
+ padding-bottom: 0;
1911
+ @include grid-padding-left-right(12px, 12px);
1922
1912
  }
1923
1913
  }
1924
1914
 
@@ -2558,6 +2548,9 @@ $grid-checkmark-color: $primary-text-color !default;
2558
2548
 
2559
2549
  & .e-res-apply-btn:disabled {
2560
2550
  color: $grid-btn-disabled-bgcolor;
2551
+ @if $grid-skin == 'fluent2' {
2552
+ color: $primary-text-disabled;
2553
+ }
2561
2554
  }
2562
2555
  & .e-btn {
2563
2556
  @if $grid-skin != 'fluent2' {
@@ -3656,6 +3649,18 @@ $grid-checkmark-color: $primary-text-color !default;
3656
3649
  }
3657
3650
  }
3658
3651
 
3652
+ &:not(.sf-grid) .e-res-toolbar .e-toolbar-items .e-search-wrapper {
3653
+ & .e-search-icon {
3654
+ padding: $grid-res-toolbar-search-wrapper-icon-padding;
3655
+ @if $grid-skin == 'bootstrap5.3' {
3656
+ padding: 9px 8px;
3657
+ }
3658
+ @if $grid-skin == 'bootstrap4' {
3659
+ padding: 9px 9.5px;
3660
+ }
3661
+ }
3662
+ }
3663
+
3659
3664
  .e-res-toolbar {
3660
3665
  border-bottom: 1px solid;
3661
3666
  border-bottom-color: $grid-header-border-color;
@@ -3756,18 +3761,6 @@ $grid-checkmark-color: $primary-text-color !default;
3756
3761
  }
3757
3762
  }
3758
3763
 
3759
- &:not(.sf-grid).e-search-wrapper {
3760
- & .e-search-icon {
3761
- padding: $grid-res-toolbar-search-wrapper-icon-padding;
3762
- @if $grid-skin == 'bootstrap5.3' {
3763
- padding: 9px 8px;
3764
- }
3765
- @if $grid-skin == 'bootstrap4' {
3766
- padding: 9px 9.5px;
3767
- }
3768
- }
3769
- }
3770
-
3771
3764
  & .e-responsive-right {
3772
3765
  & .e-search-wrapper {
3773
3766
  padding-left: 0;
@@ -3964,8 +3957,11 @@ $grid-checkmark-color: $primary-text-color !default;
3964
3957
  }
3965
3958
  }
3966
3959
 
3967
- &.e-default .e-grouptopleftcell {
3968
- border-top: $grid-grouptopleftcell-border-top;
3960
+ &.e-default {
3961
+ .e-grouptopleftcell,
3962
+ .e-rowdragheader {
3963
+ border-top: $grid-grouptopleftcell-border-top;
3964
+ }
3969
3965
  }
3970
3966
 
3971
3967
  &.e-default .e-gridheader .e-headercell.e-firstheader,
@@ -3973,10 +3969,13 @@ $grid-checkmark-color: $primary-text-color !default;
3973
3969
  border-left: 1px solid;
3974
3970
  }
3975
3971
 
3976
- &.e-default.e-verticallines .e-grouptopleftcell,
3977
- &.e-default.e-bothlines .e-grouptopleftcell,
3978
- &.e-default.e-hidelines .e-grouptopleftcell {
3979
- border-top-width: 0;
3972
+ &.e-default.e-verticallines,
3973
+ &.e-default.e-bothlines,
3974
+ &.e-default.e-hidelines {
3975
+ .e-grouptopleftcell,
3976
+ .e-rowdragheader {
3977
+ border-top-width: 0;
3978
+ }
3980
3979
  }
3981
3980
 
3982
3981
  &.e-default.e-verticallines,
@@ -4237,6 +4236,12 @@ $grid-checkmark-color: $primary-text-color !default;
4237
4236
  width: auto;
4238
4237
  }
4239
4238
 
4239
+ .e-rowcell.e-gridchkbox {
4240
+ @if $grid-skin == 'fluent' {
4241
+ padding-left: 8px;
4242
+ }
4243
+ }
4244
+
4240
4245
  &.e-left-shadow,
4241
4246
  &.e-rtl.e-left-shadow,
4242
4247
  &.e-rtl.e-default.e-left-shadow,
@@ -5180,13 +5185,12 @@ $grid-checkmark-color: $primary-text-color !default;
5180
5185
  font-weight: $grid-selection-font-weight;
5181
5186
  }
5182
5187
 
5183
- &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground,
5188
+ &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground:not(.e-gridchkbox-cell),
5184
5189
  td.e-cellselectionbackground {
5185
5190
  font-weight: $grid-selection-font-weight;
5186
5191
  @if $grid-skin == 'material3' {
5187
- border: 1px solid rgba($content-text-color);
5188
5192
  padding-bottom: 7px;
5189
- @include grid-padding-left-right(7.5px, 7.5px);
5193
+ @include grid-padding-left-right(8px, 8px);
5190
5194
  }
5191
5195
  }
5192
5196
 
@@ -5197,14 +5201,13 @@ $grid-checkmark-color: $primary-text-color !default;
5197
5201
  }
5198
5202
 
5199
5203
  &.e-bothlines td.e-rowcell.e-cellselectionbackground,
5200
- &.e-bothlines.e-rtl td.e-rowcell.e-cellselectionbackground,
5201
- &.e-rtl td.e-rowcell.e-cellselectionbackground {
5204
+ &.e-bothlines.e-rtl td.e-rowcell.e-cellselectionbackground {
5202
5205
  @if $grid-skin == 'material3' {
5203
5206
  border: 1px solid rgba($content-text-color);
5204
5207
  }
5205
5208
  }
5206
5209
 
5207
- &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground {
5210
+ &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground:not(.e-gridchkbox-cell) {
5208
5211
  @if $grid-skin == 'material3' {
5209
5212
  padding-top: 7px;
5210
5213
  }
@@ -6284,7 +6287,8 @@ $grid-checkmark-color: $primary-text-color !default;
6284
6287
  }
6285
6288
 
6286
6289
  &.e-wrap {
6287
- & .e-rowcell,
6290
+ & .e-gridheader .e-rowcell,
6291
+ & .e-gridcontent .e-rowcell,
6288
6292
  & .e-columnheader .e-stackedheadercelldiv,
6289
6293
  & .e-columnheader .e-headercelldiv,
6290
6294
  & .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
@@ -6297,6 +6301,10 @@ $grid-checkmark-color: $primary-text-color !default;
6297
6301
  max-height: $grid-rowcell-wrap-max-height;
6298
6302
  }
6299
6303
  }
6304
+
6305
+ & .e-checkbox-wrapper {
6306
+ vertical-align: middle;
6307
+ }
6300
6308
  }
6301
6309
 
6302
6310
  &.e-wrap .e-columnheader {
@@ -6469,6 +6477,7 @@ $grid-checkmark-color: $primary-text-color !default;
6469
6477
  }
6470
6478
 
6471
6479
  &.sf-grid {
6480
+
6472
6481
  span.e-ungroupbutton.e-icons {
6473
6482
  margin-left: $grid-group-ungroupicon-margin-left;
6474
6483
  @if $grid-skin == 'material3' {
@@ -7147,10 +7156,12 @@ $grid-checkmark-color: $primary-text-color !default;
7147
7156
 
7148
7157
  .e-verticallines tr th,
7149
7158
  .e-grouptopleftcell,
7159
+ .e-rowdragheader,
7150
7160
  .e-gridpopup .e-content,
7151
7161
  .e-filterbarcell,
7152
7162
  .e-filterbarcelldisabled,
7153
7163
  &.e-default .e-grouptopleftcell,
7164
+ &.e-default .e-rowdragheader,
7154
7165
  .e-headercell,
7155
7166
  .e-summarycell,
7156
7167
  .e-detailheadercell,