@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
@@ -4024,9 +4024,7 @@ $ddl-bigger-small-list-font-size: $text-sm !default;
4024
4024
 
4025
4025
  .e-ddl.e-popup .e-filter-parent .e-input-group input.e-input-filter {
4026
4026
  border-color: transparent;
4027
- @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'highcontrast' {
4028
- background: none;
4029
- }
4027
+ background: none;
4030
4028
  }
4031
4029
  }
4032
4030
 
@@ -30408,6 +30406,13 @@ $cbox-border-style: solid !default;
30408
30406
  }
30409
30407
  }
30410
30408
  }
30409
+
30410
+ &:hover .e-checkbox:focus + .e-frame.e-check {
30411
+ @if $theme-name == 'fluent2-highcontrast' {
30412
+ background-color: $primary-border-color-hover !important; /* stylelint-disable-line declaration-no-important */
30413
+ border-color: $primary-border-color-hover !important; /* stylelint-disable-line declaration-no-important */
30414
+ }
30415
+ }
30411
30416
  }
30412
30417
  }
30413
30418
  }
@@ -38110,7 +38115,7 @@ $cpicker-recent-color-tile-border: $border-light !default;
38110
38115
  color: $cpicker-handler-tooltip-color;
38111
38116
  }
38112
38117
  @else if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
38113
- background-color: $btn-hover-bgcolor !important; /* stylelint-disable-line declaration-no-important */
38118
+ background-color: $btn-hover-bgcolor;
38114
38119
  color: $cpicker-handler-tooltip-color;
38115
38120
  }
38116
38121
  }
@@ -49191,41 +49196,6 @@ $dialog-footer-flat-active-btn-bg-color: rgba($primary-bg-color, .12) !default;
49191
49196
  .e-footer-content {
49192
49197
  background-color: $dialog-footer-bg-color;
49193
49198
 
49194
- @if $skin-name == 'material' or $skin-name == 'material-dark' {
49195
- .e-btn.e-primary {
49196
- background: none;
49197
- box-shadow: none;
49198
- color: $dialog-primary-button-color;
49199
- }
49200
-
49201
- .e-btn:not(.e-primary) {
49202
- background: none;
49203
- box-shadow: none;
49204
- color: $dialog-secondary-button-color;
49205
- }
49206
- }
49207
-
49208
- @if $skin-name == 'material' or $skin-name == 'material-dark' {
49209
- .e-btn.e-primary:not([DISABLED]):focus-visible,
49210
- .e-btn.e-primary:not([DISABLED]):focus {
49211
- background: $dialog-footer-primary-focus-btn-bg-color;
49212
- }
49213
- .e-btn.e-primary:not([DISABLED]):hover {
49214
- background: $dialog-footer-primary-hover-btn-bg-color;
49215
- }
49216
- .e-btn.e-primary:not([DISABLED]):active {
49217
- background: $dialog-footer-primary-active-btn-bg-color;
49218
- }
49219
- .e-btn:not([DISABLED]):focus-visible,
49220
- .e-btn:not(.e-primary):not([DISABLED]):focus,
49221
- .e-btn:not([DISABLED]):hover {
49222
- background: $dialog-footer-flat-hover-btn-bg-color;
49223
- }
49224
- .e-btn:not([DISABLED]):active {
49225
- background: $dialog-footer-flat-active-btn-bg-color;
49226
- }
49227
- }
49228
-
49229
49199
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'fluent2' {
49230
49200
  .e-btn.e-primary.e-flat:not([DISABLED]) {
49231
49201
  background: $dialog-footer-btn-bg-color;
@@ -68558,6 +68528,7 @@ $listbox-ej2-filterselect-bigger-height: calc(100% - 92px) !default;
68558
68528
  }
68559
68529
  }
68560
68530
 
68531
+ & .e-list-wrap:focus-visible,
68561
68532
  &:focus {
68562
68533
  outline: none;
68563
68534
  }
@@ -83183,28 +83154,18 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
83183
83154
  }
83184
83155
 
83185
83156
  .e-bigger &.e-bothlines.e-rtl td.e-rowcell.e-cellselectionbackground,
83186
- &.e-bothlines.e-bigger.e-rtl td.e-rowcell.e-cellselectionbackground,
83187
- .e-bigger &.e-rtl td.e-rowcell.e-cellselectionbackground,
83188
- &.e-bigger.e-rtl td.e-rowcell.e-cellselectionbackground {
83157
+ &.e-bothlines.e-bigger.e-rtl td.e-rowcell.e-cellselectionbackground {
83189
83158
  @if $grid-skin == 'material3' {
83190
83159
  border: 1px solid rgba($content-text-color);
83191
83160
  }
83192
83161
  }
83193
83162
 
83194
- .e-bigger &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground,
83195
- .e-bigger & td.e-cellselectionbackground,
83196
- &.e-bigger:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground,
83197
- &.e-bigger td.e-cellselectionbackground {
83198
- @if $grid-skin == 'material3' {
83199
- padding-bottom: 13px;
83200
- @include grid-padding-left-right(11.5px, 11.5px);
83201
- }
83202
- }
83203
-
83204
- .e-bigger &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground,
83205
- &.e-bigger:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground {
83163
+ .e-bigger &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground:not(.e-gridchkbox-cell),
83164
+ &.e-bigger:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground:not(.e-gridchkbox-cell) {
83206
83165
  @if $grid-skin == 'material3' {
83207
- padding-top: 13px;
83166
+ padding-top: 0;
83167
+ padding-bottom: 0;
83168
+ @include grid-padding-left-right(12px, 12px);
83208
83169
  }
83209
83170
  }
83210
83171
 
@@ -83844,6 +83805,9 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
83844
83805
 
83845
83806
  & .e-res-apply-btn:disabled {
83846
83807
  color: $grid-btn-disabled-bgcolor;
83808
+ @if $grid-skin == 'fluent2' {
83809
+ color: $primary-text-disabled;
83810
+ }
83847
83811
  }
83848
83812
  & .e-btn {
83849
83813
  @if $grid-skin != 'fluent2' {
@@ -84942,6 +84906,18 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
84942
84906
  }
84943
84907
  }
84944
84908
 
84909
+ &:not(.sf-grid) .e-res-toolbar .e-toolbar-items .e-search-wrapper {
84910
+ & .e-search-icon {
84911
+ padding: $grid-res-toolbar-search-wrapper-icon-padding;
84912
+ @if $grid-skin == 'bootstrap5.3' {
84913
+ padding: 9px 8px;
84914
+ }
84915
+ @if $grid-skin == 'bootstrap4' {
84916
+ padding: 9px 9.5px;
84917
+ }
84918
+ }
84919
+ }
84920
+
84945
84921
  .e-res-toolbar {
84946
84922
  border-bottom: 1px solid;
84947
84923
  border-bottom-color: $grid-header-border-color;
@@ -85042,18 +85018,6 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
85042
85018
  }
85043
85019
  }
85044
85020
 
85045
- &:not(.sf-grid).e-search-wrapper {
85046
- & .e-search-icon {
85047
- padding: $grid-res-toolbar-search-wrapper-icon-padding;
85048
- @if $grid-skin == 'bootstrap5.3' {
85049
- padding: 9px 8px;
85050
- }
85051
- @if $grid-skin == 'bootstrap4' {
85052
- padding: 9px 9.5px;
85053
- }
85054
- }
85055
- }
85056
-
85057
85021
  & .e-responsive-right {
85058
85022
  & .e-search-wrapper {
85059
85023
  padding-left: 0;
@@ -85250,8 +85214,11 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
85250
85214
  }
85251
85215
  }
85252
85216
 
85253
- &.e-default .e-grouptopleftcell {
85254
- border-top: $grid-grouptopleftcell-border-top;
85217
+ &.e-default {
85218
+ .e-grouptopleftcell,
85219
+ .e-rowdragheader {
85220
+ border-top: $grid-grouptopleftcell-border-top;
85221
+ }
85255
85222
  }
85256
85223
 
85257
85224
  &.e-default .e-gridheader .e-headercell.e-firstheader,
@@ -85259,10 +85226,13 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
85259
85226
  border-left: 1px solid;
85260
85227
  }
85261
85228
 
85262
- &.e-default.e-verticallines .e-grouptopleftcell,
85263
- &.e-default.e-bothlines .e-grouptopleftcell,
85264
- &.e-default.e-hidelines .e-grouptopleftcell {
85265
- border-top-width: 0;
85229
+ &.e-default.e-verticallines,
85230
+ &.e-default.e-bothlines,
85231
+ &.e-default.e-hidelines {
85232
+ .e-grouptopleftcell,
85233
+ .e-rowdragheader {
85234
+ border-top-width: 0;
85235
+ }
85266
85236
  }
85267
85237
 
85268
85238
  &.e-default.e-verticallines,
@@ -85523,6 +85493,12 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
85523
85493
  width: auto;
85524
85494
  }
85525
85495
 
85496
+ .e-rowcell.e-gridchkbox {
85497
+ @if $grid-skin == 'fluent' {
85498
+ padding-left: 8px;
85499
+ }
85500
+ }
85501
+
85526
85502
  &.e-left-shadow,
85527
85503
  &.e-rtl.e-left-shadow,
85528
85504
  &.e-rtl.e-default.e-left-shadow,
@@ -86466,13 +86442,12 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
86466
86442
  font-weight: $grid-selection-font-weight;
86467
86443
  }
86468
86444
 
86469
- &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground,
86445
+ &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground:not(.e-gridchkbox-cell),
86470
86446
  td.e-cellselectionbackground {
86471
86447
  font-weight: $grid-selection-font-weight;
86472
86448
  @if $grid-skin == 'material3' {
86473
- border: 1px solid rgba($content-text-color);
86474
86449
  padding-bottom: 7px;
86475
- @include grid-padding-left-right(7.5px, 7.5px);
86450
+ @include grid-padding-left-right(8px, 8px);
86476
86451
  }
86477
86452
  }
86478
86453
 
@@ -86483,14 +86458,13 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
86483
86458
  }
86484
86459
 
86485
86460
  &.e-bothlines td.e-rowcell.e-cellselectionbackground,
86486
- &.e-bothlines.e-rtl td.e-rowcell.e-cellselectionbackground,
86487
- &.e-rtl td.e-rowcell.e-cellselectionbackground {
86461
+ &.e-bothlines.e-rtl td.e-rowcell.e-cellselectionbackground {
86488
86462
  @if $grid-skin == 'material3' {
86489
86463
  border: 1px solid rgba($content-text-color);
86490
86464
  }
86491
86465
  }
86492
86466
 
86493
- &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground {
86467
+ &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground:not(.e-gridchkbox-cell) {
86494
86468
  @if $grid-skin == 'material3' {
86495
86469
  padding-top: 7px;
86496
86470
  }
@@ -87570,7 +87544,8 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
87570
87544
  }
87571
87545
 
87572
87546
  &.e-wrap {
87573
- & .e-rowcell,
87547
+ & .e-gridheader .e-rowcell,
87548
+ & .e-gridcontent .e-rowcell,
87574
87549
  & .e-columnheader .e-stackedheadercelldiv,
87575
87550
  & .e-columnheader .e-headercelldiv,
87576
87551
  & .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
@@ -87583,6 +87558,10 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
87583
87558
  max-height: $grid-rowcell-wrap-max-height;
87584
87559
  }
87585
87560
  }
87561
+
87562
+ & .e-checkbox-wrapper {
87563
+ vertical-align: middle;
87564
+ }
87586
87565
  }
87587
87566
 
87588
87567
  &.e-wrap .e-columnheader {
@@ -87755,6 +87734,7 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
87755
87734
  }
87756
87735
 
87757
87736
  &.sf-grid {
87737
+
87758
87738
  span.e-ungroupbutton.e-icons {
87759
87739
  margin-left: $grid-group-ungroupicon-margin-left;
87760
87740
  @if $grid-skin == 'material3' {
@@ -88433,10 +88413,12 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
88433
88413
 
88434
88414
  .e-verticallines tr th,
88435
88415
  .e-grouptopleftcell,
88416
+ .e-rowdragheader,
88436
88417
  .e-gridpopup .e-content,
88437
88418
  .e-filterbarcell,
88438
88419
  .e-filterbarcelldisabled,
88439
88420
  &.e-default .e-grouptopleftcell,
88421
+ &.e-default .e-rowdragheader,
88440
88422
  .e-headercell,
88441
88423
  .e-summarycell,
88442
88424
  .e-detailheadercell,
@@ -96419,6 +96401,22 @@ $rte-dialog-upload-status-progress: $info;
96419
96401
  margin-block-start: 10px;
96420
96402
  }
96421
96403
 
96404
+ .e-content ul {
96405
+ list-style-type: disc;
96406
+ }
96407
+
96408
+ .e-content ul ul,
96409
+ .e-content ol ul {
96410
+ list-style-type: circle;
96411
+ }
96412
+
96413
+ .e-content ul ul ul,
96414
+ .e-content ol ul ul,
96415
+ .e-content ul ol ul,
96416
+ .e-content ol ol ul {
96417
+ list-style-type: square;
96418
+ }
96419
+
96422
96420
  .e-content h1 {
96423
96421
  font-size: 2.857em;
96424
96422
  font-weight: 600;
@@ -96487,7 +96485,7 @@ $rte-dialog-upload-status-progress: $info;
96487
96485
  word-break: inherit;
96488
96486
  word-wrap: break-word;
96489
96487
 
96490
- @if $skin-name == 'fluent2' or $skin-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
96488
+ @if $skin-name == 'fluent2' or $theme-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
96491
96489
  background-color: $rte-pre-bg-color;
96492
96490
  }
96493
96491
  }
@@ -98328,6 +98326,12 @@ $rte-dialog-upload-status-progress: $info;
98328
98326
  color: $rte-drop-btn-active-color;
98329
98327
  }
98330
98328
  }
98329
+
98330
+ .e-tbar-btn:hover {
98331
+ @if $theme-name == 'bootstrap5.3' {
98332
+ color: $rte-drop-btn-active-color;
98333
+ }
98334
+ }
98331
98335
  }
98332
98336
 
98333
98337
  .e-toolbar-extended {
@@ -98354,6 +98358,12 @@ $rte-dialog-upload-status-progress: $info;
98354
98358
  background: $rte-drop-btn-active-bg;
98355
98359
  }
98356
98360
 
98361
+ .e-toolbar-item .e-tbar-btn:hover {
98362
+ @if $theme-name == 'bootstrap5.3' {
98363
+ color: $rte-drop-btn-active-color;
98364
+ }
98365
+ }
98366
+
98357
98367
  @if $skin-name == 'bootstrap5' {
98358
98368
  .e-toolbar-item .e-tbar-btn:focus,
98359
98369
  .e-toolbar-item .e-tbar-btn:hover {
@@ -98372,7 +98382,7 @@ $rte-dialog-upload-status-progress: $info;
98372
98382
  background: transparent;
98373
98383
  color: transparent;
98374
98384
  }
98375
- @if $skin-name == 'Material3' or $skin-name == 'fluent2' or $skin-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
98385
+ @if $skin-name == 'Material3' or $skin-name == 'fluent2' or $theme-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
98376
98386
  ::selection {
98377
98387
  color: $rte-selection-color;
98378
98388
  background: $rte-selection-bg;
@@ -98490,7 +98500,7 @@ $rte-dialog-upload-status-progress: $info;
98490
98500
  .e-rte-list-primary-content {
98491
98501
 
98492
98502
  &:hover {
98493
- @if $skin-name == 'fluent2-highcontrast' {
98503
+ @if $theme-name == 'fluent2-highcontrast' {
98494
98504
  background: $rte-split-btn-span-active-bg;
98495
98505
  }
98496
98506
  @else {
@@ -98510,7 +98520,7 @@ $rte-dialog-upload-status-progress: $info;
98510
98520
  .e-caret {
98511
98521
 
98512
98522
  &:hover {
98513
- @if $skin-name == 'fluent2-highcontrast' {
98523
+ @if $theme-name == 'fluent2-highcontrast' {
98514
98524
  background: $rte-split-btn-span-active-bg;
98515
98525
  }
98516
98526
  @else {
@@ -98572,7 +98582,7 @@ $rte-dialog-upload-status-progress: $info;
98572
98582
  justify-content: center;
98573
98583
  }
98574
98584
  &:hover {
98575
- @if $skin-name == 'fluent2-highcontrast' {
98585
+ @if $theme-name == 'fluent2-highcontrast' {
98576
98586
  background: $rte-split-btn-span-active-bg;
98577
98587
  }
98578
98588
  @else {
@@ -98583,7 +98593,7 @@ $rte-dialog-upload-status-progress: $info;
98583
98593
 
98584
98594
  .e-caret {
98585
98595
  &:hover {
98586
- @if $skin-name == 'fluent2-highcontrast' {
98596
+ @if $theme-name == 'fluent2-highcontrast' {
98587
98597
  background: $rte-split-btn-span-active-bg;
98588
98598
  }
98589
98599
  @else {
@@ -98877,8 +98887,14 @@ $rte-dialog-upload-status-progress: $info;
98877
98887
  }
98878
98888
  }
98879
98889
  }
98890
+
98880
98891
  .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-active .e-icons {
98881
- color: $rte-tlbar-expand-active;
98892
+ @if $theme-name == 'fluent2-highcontrast' {
98893
+ color: $rte-drop-btn-active-color;
98894
+ }
98895
+ @else {
98896
+ color: $rte-tlbar-expand-active;
98897
+ }
98882
98898
  }
98883
98899
 
98884
98900
  .e-rte-emojipicker-popup.e-popup.e-popup-open {
@@ -672,41 +672,6 @@ $dialog-enable-resize-padding-bottom: 15px !default;
672
672
  .e-footer-content {
673
673
  background-color: $dialog-footer-bg-color;
674
674
 
675
- @if $skin-name == 'material' or $skin-name == 'material-dark' {
676
- .e-btn.e-primary {
677
- background: none;
678
- box-shadow: none;
679
- color: $dialog-primary-button-color;
680
- }
681
-
682
- .e-btn:not(.e-primary) {
683
- background: none;
684
- box-shadow: none;
685
- color: $dialog-secondary-button-color;
686
- }
687
- }
688
-
689
- @if $skin-name == 'material' or $skin-name == 'material-dark' {
690
- .e-btn.e-primary:not([DISABLED]):focus-visible,
691
- .e-btn.e-primary:not([DISABLED]):focus {
692
- background: $dialog-footer-primary-focus-btn-bg-color;
693
- }
694
- .e-btn.e-primary:not([DISABLED]):hover {
695
- background: $dialog-footer-primary-hover-btn-bg-color;
696
- }
697
- .e-btn.e-primary:not([DISABLED]):active {
698
- background: $dialog-footer-primary-active-btn-bg-color;
699
- }
700
- .e-btn:not([DISABLED]):focus-visible,
701
- .e-btn:not(.e-primary):not([DISABLED]):focus,
702
- .e-btn:not([DISABLED]):hover {
703
- background: $dialog-footer-flat-hover-btn-bg-color;
704
- }
705
- .e-btn:not([DISABLED]):active {
706
- background: $dialog-footer-flat-active-btn-bg-color;
707
- }
708
- }
709
-
710
675
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'fluent2' {
711
676
  .e-btn.e-primary.e-flat:not([DISABLED]) {
712
677
  background: $dialog-footer-btn-bg-color;
@@ -672,41 +672,6 @@ $dialog-enable-resize-padding-bottom: 15px !default;
672
672
  .e-footer-content {
673
673
  background-color: $dialog-footer-bg-color;
674
674
 
675
- @if $skin-name == 'material' or $skin-name == 'material-dark' {
676
- .e-btn.e-primary {
677
- background: none;
678
- box-shadow: none;
679
- color: $dialog-primary-button-color;
680
- }
681
-
682
- .e-btn:not(.e-primary) {
683
- background: none;
684
- box-shadow: none;
685
- color: $dialog-secondary-button-color;
686
- }
687
- }
688
-
689
- @if $skin-name == 'material' or $skin-name == 'material-dark' {
690
- .e-btn.e-primary:not([DISABLED]):focus-visible,
691
- .e-btn.e-primary:not([DISABLED]):focus {
692
- background: $dialog-footer-primary-focus-btn-bg-color;
693
- }
694
- .e-btn.e-primary:not([DISABLED]):hover {
695
- background: $dialog-footer-primary-hover-btn-bg-color;
696
- }
697
- .e-btn.e-primary:not([DISABLED]):active {
698
- background: $dialog-footer-primary-active-btn-bg-color;
699
- }
700
- .e-btn:not([DISABLED]):focus-visible,
701
- .e-btn:not(.e-primary):not([DISABLED]):focus,
702
- .e-btn:not([DISABLED]):hover {
703
- background: $dialog-footer-flat-hover-btn-bg-color;
704
- }
705
- .e-btn:not([DISABLED]):active {
706
- background: $dialog-footer-flat-active-btn-bg-color;
707
- }
708
- }
709
-
710
675
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'fluent2' {
711
676
  .e-btn.e-primary.e-flat:not([DISABLED]) {
712
677
  background: $dialog-footer-btn-bg-color;
@@ -651,41 +651,6 @@ $dialog-enable-resize-padding-bottom: 15px !default;
651
651
  .e-footer-content {
652
652
  background-color: $dialog-footer-bg-color;
653
653
 
654
- @if $skin-name == 'material' or $skin-name == 'material-dark' {
655
- .e-btn.e-primary {
656
- background: none;
657
- box-shadow: none;
658
- color: $dialog-primary-button-color;
659
- }
660
-
661
- .e-btn:not(.e-primary) {
662
- background: none;
663
- box-shadow: none;
664
- color: $dialog-secondary-button-color;
665
- }
666
- }
667
-
668
- @if $skin-name == 'material' or $skin-name == 'material-dark' {
669
- .e-btn.e-primary:not([DISABLED]):focus-visible,
670
- .e-btn.e-primary:not([DISABLED]):focus {
671
- background: $dialog-footer-primary-focus-btn-bg-color;
672
- }
673
- .e-btn.e-primary:not([DISABLED]):hover {
674
- background: $dialog-footer-primary-hover-btn-bg-color;
675
- }
676
- .e-btn.e-primary:not([DISABLED]):active {
677
- background: $dialog-footer-primary-active-btn-bg-color;
678
- }
679
- .e-btn:not([DISABLED]):focus-visible,
680
- .e-btn:not(.e-primary):not([DISABLED]):focus,
681
- .e-btn:not([DISABLED]):hover {
682
- background: $dialog-footer-flat-hover-btn-bg-color;
683
- }
684
- .e-btn:not([DISABLED]):active {
685
- background: $dialog-footer-flat-active-btn-bg-color;
686
- }
687
- }
688
-
689
654
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'fluent2' {
690
655
  .e-btn.e-primary.e-flat:not([DISABLED]) {
691
656
  background: $dialog-footer-btn-bg-color;
@@ -643,41 +643,6 @@ $dialog-enable-resize-padding-bottom: 15px !default;
643
643
  .e-footer-content {
644
644
  background-color: $dialog-footer-bg-color;
645
645
 
646
- @if $skin-name == 'material' or $skin-name == 'material-dark' {
647
- .e-btn.e-primary {
648
- background: none;
649
- box-shadow: none;
650
- color: $dialog-primary-button-color;
651
- }
652
-
653
- .e-btn:not(.e-primary) {
654
- background: none;
655
- box-shadow: none;
656
- color: $dialog-secondary-button-color;
657
- }
658
- }
659
-
660
- @if $skin-name == 'material' or $skin-name == 'material-dark' {
661
- .e-btn.e-primary:not([DISABLED]):focus-visible,
662
- .e-btn.e-primary:not([DISABLED]):focus {
663
- background: $dialog-footer-primary-focus-btn-bg-color;
664
- }
665
- .e-btn.e-primary:not([DISABLED]):hover {
666
- background: $dialog-footer-primary-hover-btn-bg-color;
667
- }
668
- .e-btn.e-primary:not([DISABLED]):active {
669
- background: $dialog-footer-primary-active-btn-bg-color;
670
- }
671
- .e-btn:not([DISABLED]):focus-visible,
672
- .e-btn:not(.e-primary):not([DISABLED]):focus,
673
- .e-btn:not([DISABLED]):hover {
674
- background: $dialog-footer-flat-hover-btn-bg-color;
675
- }
676
- .e-btn:not([DISABLED]):active {
677
- background: $dialog-footer-flat-active-btn-bg-color;
678
- }
679
- }
680
-
681
646
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'fluent2' {
682
647
  .e-btn.e-primary.e-flat:not([DISABLED]) {
683
648
  background: $dialog-footer-btn-bg-color;
@@ -643,41 +643,6 @@ $dialog-enable-resize-padding-bottom: 15px !default;
643
643
  .e-footer-content {
644
644
  background-color: $dialog-footer-bg-color;
645
645
 
646
- @if $skin-name == 'material' or $skin-name == 'material-dark' {
647
- .e-btn.e-primary {
648
- background: none;
649
- box-shadow: none;
650
- color: $dialog-primary-button-color;
651
- }
652
-
653
- .e-btn:not(.e-primary) {
654
- background: none;
655
- box-shadow: none;
656
- color: $dialog-secondary-button-color;
657
- }
658
- }
659
-
660
- @if $skin-name == 'material' or $skin-name == 'material-dark' {
661
- .e-btn.e-primary:not([DISABLED]):focus-visible,
662
- .e-btn.e-primary:not([DISABLED]):focus {
663
- background: $dialog-footer-primary-focus-btn-bg-color;
664
- }
665
- .e-btn.e-primary:not([DISABLED]):hover {
666
- background: $dialog-footer-primary-hover-btn-bg-color;
667
- }
668
- .e-btn.e-primary:not([DISABLED]):active {
669
- background: $dialog-footer-primary-active-btn-bg-color;
670
- }
671
- .e-btn:not([DISABLED]):focus-visible,
672
- .e-btn:not(.e-primary):not([DISABLED]):focus,
673
- .e-btn:not([DISABLED]):hover {
674
- background: $dialog-footer-flat-hover-btn-bg-color;
675
- }
676
- .e-btn:not([DISABLED]):active {
677
- background: $dialog-footer-flat-active-btn-bg-color;
678
- }
679
- }
680
-
681
646
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'fluent2' {
682
647
  .e-btn.e-primary.e-flat:not([DISABLED]) {
683
648
  background: $dialog-footer-btn-bg-color;
@@ -656,41 +656,6 @@ $dialog-enable-resize-padding-bottom: 15px !default;
656
656
  .e-footer-content {
657
657
  background-color: $dialog-footer-bg-color;
658
658
 
659
- @if $skin-name == 'material' or $skin-name == 'material-dark' {
660
- .e-btn.e-primary {
661
- background: none;
662
- box-shadow: none;
663
- color: $dialog-primary-button-color;
664
- }
665
-
666
- .e-btn:not(.e-primary) {
667
- background: none;
668
- box-shadow: none;
669
- color: $dialog-secondary-button-color;
670
- }
671
- }
672
-
673
- @if $skin-name == 'material' or $skin-name == 'material-dark' {
674
- .e-btn.e-primary:not([DISABLED]):focus-visible,
675
- .e-btn.e-primary:not([DISABLED]):focus {
676
- background: $dialog-footer-primary-focus-btn-bg-color;
677
- }
678
- .e-btn.e-primary:not([DISABLED]):hover {
679
- background: $dialog-footer-primary-hover-btn-bg-color;
680
- }
681
- .e-btn.e-primary:not([DISABLED]):active {
682
- background: $dialog-footer-primary-active-btn-bg-color;
683
- }
684
- .e-btn:not([DISABLED]):focus-visible,
685
- .e-btn:not(.e-primary):not([DISABLED]):focus,
686
- .e-btn:not([DISABLED]):hover {
687
- background: $dialog-footer-flat-hover-btn-bg-color;
688
- }
689
- .e-btn:not([DISABLED]):active {
690
- background: $dialog-footer-flat-active-btn-bg-color;
691
- }
692
- }
693
-
694
659
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'fluent2' {
695
660
  .e-btn.e-primary.e-flat:not([DISABLED]) {
696
661
  background: $dialog-footer-btn-bg-color;