@syncfusion/blazor-themes 25.2.5 → 25.2.6

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 (91) hide show
  1. package/SCSS-Themes/bds-dark.scss +30 -6
  2. package/SCSS-Themes/bds.scss +30 -6
  3. package/SCSS-Themes/bootstrap-dark.scss +30 -5
  4. package/SCSS-Themes/bootstrap.scss +30 -5
  5. package/SCSS-Themes/bootstrap4.scss +30 -5
  6. package/SCSS-Themes/bootstrap5-dark.scss +30 -5
  7. package/SCSS-Themes/bootstrap5.scss +30 -5
  8. package/SCSS-Themes/dropdowns/drop-down-tree/bds-dark.scss +4 -1
  9. package/SCSS-Themes/dropdowns/drop-down-tree/bds.scss +4 -1
  10. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap-dark.scss +4 -0
  11. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap.scss +4 -0
  12. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap4.scss +4 -0
  13. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap5-dark.scss +4 -0
  14. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap5.scss +4 -0
  15. package/SCSS-Themes/dropdowns/drop-down-tree/fabric-dark.scss +4 -0
  16. package/SCSS-Themes/dropdowns/drop-down-tree/fabric.scss +4 -0
  17. package/SCSS-Themes/dropdowns/drop-down-tree/fluent-dark.scss +4 -0
  18. package/SCSS-Themes/dropdowns/drop-down-tree/fluent.scss +4 -0
  19. package/SCSS-Themes/dropdowns/drop-down-tree/highcontrast.scss +4 -0
  20. package/SCSS-Themes/dropdowns/drop-down-tree/material-dark.scss +4 -0
  21. package/SCSS-Themes/dropdowns/drop-down-tree/material.scss +4 -0
  22. package/SCSS-Themes/dropdowns/drop-down-tree/material3-dark.scss +4 -1
  23. package/SCSS-Themes/dropdowns/drop-down-tree/material3.scss +4 -1
  24. package/SCSS-Themes/dropdowns/drop-down-tree/tailwind-dark.scss +4 -1
  25. package/SCSS-Themes/dropdowns/drop-down-tree/tailwind.scss +4 -1
  26. package/SCSS-Themes/fabric-dark.scss +30 -5
  27. package/SCSS-Themes/fabric.scss +30 -5
  28. package/SCSS-Themes/fluent-dark.scss +30 -5
  29. package/SCSS-Themes/fluent.scss +30 -5
  30. package/SCSS-Themes/grids/excel-filter/bds-dark.scss +1 -0
  31. package/SCSS-Themes/grids/excel-filter/bds.scss +1 -0
  32. package/SCSS-Themes/grids/excel-filter/bootstrap-dark.scss +1 -0
  33. package/SCSS-Themes/grids/excel-filter/bootstrap.scss +1 -0
  34. package/SCSS-Themes/grids/excel-filter/bootstrap4.scss +1 -0
  35. package/SCSS-Themes/grids/excel-filter/bootstrap5-dark.scss +1 -0
  36. package/SCSS-Themes/grids/excel-filter/bootstrap5.scss +1 -0
  37. package/SCSS-Themes/grids/excel-filter/fabric-dark.scss +1 -0
  38. package/SCSS-Themes/grids/excel-filter/fabric.scss +1 -0
  39. package/SCSS-Themes/grids/excel-filter/fluent-dark.scss +1 -0
  40. package/SCSS-Themes/grids/excel-filter/fluent.scss +1 -0
  41. package/SCSS-Themes/grids/excel-filter/highcontrast.scss +1 -0
  42. package/SCSS-Themes/grids/excel-filter/material-dark.scss +1 -0
  43. package/SCSS-Themes/grids/excel-filter/material.scss +1 -0
  44. package/SCSS-Themes/grids/excel-filter/material3-dark.scss +1 -0
  45. package/SCSS-Themes/grids/excel-filter/material3.scss +1 -0
  46. package/SCSS-Themes/grids/excel-filter/tailwind-dark.scss +1 -0
  47. package/SCSS-Themes/grids/excel-filter/tailwind.scss +1 -0
  48. package/SCSS-Themes/grids/grid/bds-dark.scss +1 -1
  49. package/SCSS-Themes/grids/grid/bds.scss +1 -1
  50. package/SCSS-Themes/grids/grid/bootstrap-dark.scss +1 -1
  51. package/SCSS-Themes/grids/grid/bootstrap.scss +1 -1
  52. package/SCSS-Themes/grids/grid/bootstrap4.scss +1 -1
  53. package/SCSS-Themes/grids/grid/bootstrap5-dark.scss +1 -1
  54. package/SCSS-Themes/grids/grid/bootstrap5.scss +1 -1
  55. package/SCSS-Themes/grids/grid/fabric-dark.scss +1 -1
  56. package/SCSS-Themes/grids/grid/fabric.scss +1 -1
  57. package/SCSS-Themes/grids/grid/fluent-dark.scss +1 -1
  58. package/SCSS-Themes/grids/grid/fluent.scss +1 -1
  59. package/SCSS-Themes/grids/grid/highcontrast.scss +1 -1
  60. package/SCSS-Themes/grids/grid/material-dark.scss +1 -1
  61. package/SCSS-Themes/grids/grid/material.scss +1 -1
  62. package/SCSS-Themes/grids/grid/material3-dark.scss +1 -1
  63. package/SCSS-Themes/grids/grid/material3.scss +1 -1
  64. package/SCSS-Themes/grids/grid/tailwind-dark.scss +1 -1
  65. package/SCSS-Themes/grids/grid/tailwind.scss +1 -1
  66. package/SCSS-Themes/highcontrast.scss +30 -5
  67. package/SCSS-Themes/material-dark.scss +30 -5
  68. package/SCSS-Themes/material.scss +30 -5
  69. package/SCSS-Themes/material3-dark.scss +30 -6
  70. package/SCSS-Themes/material3.scss +30 -6
  71. package/SCSS-Themes/tailwind-dark.scss +30 -6
  72. package/SCSS-Themes/tailwind.scss +30 -6
  73. package/SCSS-Themes/treegrid/treegrid/bds-dark.scss +24 -4
  74. package/SCSS-Themes/treegrid/treegrid/bds.scss +24 -4
  75. package/SCSS-Themes/treegrid/treegrid/bootstrap-dark.scss +24 -4
  76. package/SCSS-Themes/treegrid/treegrid/bootstrap.scss +24 -4
  77. package/SCSS-Themes/treegrid/treegrid/bootstrap4.scss +24 -4
  78. package/SCSS-Themes/treegrid/treegrid/bootstrap5-dark.scss +24 -4
  79. package/SCSS-Themes/treegrid/treegrid/bootstrap5.scss +24 -4
  80. package/SCSS-Themes/treegrid/treegrid/fabric-dark.scss +24 -4
  81. package/SCSS-Themes/treegrid/treegrid/fabric.scss +24 -4
  82. package/SCSS-Themes/treegrid/treegrid/fluent-dark.scss +24 -4
  83. package/SCSS-Themes/treegrid/treegrid/fluent.scss +24 -4
  84. package/SCSS-Themes/treegrid/treegrid/highcontrast.scss +24 -4
  85. package/SCSS-Themes/treegrid/treegrid/material-dark.scss +24 -4
  86. package/SCSS-Themes/treegrid/treegrid/material.scss +24 -4
  87. package/SCSS-Themes/treegrid/treegrid/material3-dark.scss +24 -4
  88. package/SCSS-Themes/treegrid/treegrid/material3.scss +24 -4
  89. package/SCSS-Themes/treegrid/treegrid/tailwind-dark.scss +24 -4
  90. package/SCSS-Themes/treegrid/treegrid/tailwind.scss +24 -4
  91. package/package.json +1 -1
@@ -65,6 +65,7 @@ $ddt-nodata-font-color: $content-text-color !default;
65
65
  $ddt-select-all-font-color: $content-text-color !default;
66
66
  $ddt-remains-font-color: $content-text-color-alt3 !default;
67
67
  $ddt-readonly-input-bg-color: $content-bg-color !default;
68
+ $ddt-item-hover-bg: $content-bg-color-hover !default;
68
69
  @mixin ddt-rotate($position) {
69
70
  transform: rotate($position);
70
71
  transition: transform 300ms ease;
@@ -1615,6 +1616,9 @@ $ddt-readonly-input-bg-color: $content-bg-color !default;
1615
1616
  .e-selectall-parent {
1616
1617
  border-bottom-color: $ddt-popup-reorder-border;
1617
1618
 
1619
+ &:focus {
1620
+ background: $ddt-item-hover-bg;
1621
+ }
1618
1622
  .e-all-text {
1619
1623
  color: $ddt-select-all-font-color;
1620
1624
  }
@@ -77,6 +77,7 @@ $ddt-overflow-count-padding-top: 6px !default;
77
77
  $ddt-delim-padding: 6px 10px 0 10px !default;
78
78
  $ddt-delim-bigger-padding: 8px 12px 0 12px !default;
79
79
  $ddt-remains-count-padding-top: 6px !default;
80
+ $ddt-item-hover-bg: $neutral-light !default;
80
81
  @mixin ddt-rotate($position) {
81
82
  transform: rotate($position);
82
83
  transition: transform 300ms ease;
@@ -1627,6 +1628,9 @@ $ddt-remains-count-padding-top: 6px !default;
1627
1628
  .e-selectall-parent {
1628
1629
  border-bottom-color: $ddt-popup-reorder-border;
1629
1630
 
1631
+ &:focus {
1632
+ background: $ddt-item-hover-bg;
1633
+ }
1630
1634
  .e-all-text {
1631
1635
  color: $ddt-select-all-font-color;
1632
1636
  }
@@ -77,6 +77,7 @@ $ddt-delim-padding: 6px 10px 0 10px !default;
77
77
  $ddt-overflow-count-padding-top: 6px !default;
78
78
  $ddt-delim-bigger-padding: 8px 12px 0 12px !default;
79
79
  $ddt-remains-count-padding-top: 6px !default;
80
+ $ddt-item-hover-bg: $neutral-lighter !default;
80
81
  @mixin ddt-rotate($position) {
81
82
  transform: rotate($position);
82
83
  transition: transform 300ms ease;
@@ -1627,6 +1628,9 @@ $ddt-remains-count-padding-top: 6px !default;
1627
1628
  .e-selectall-parent {
1628
1629
  border-bottom-color: $ddt-popup-reorder-border;
1629
1630
 
1631
+ &:focus {
1632
+ background: $ddt-item-hover-bg;
1633
+ }
1630
1634
  .e-all-text {
1631
1635
  color: $ddt-select-all-font-color;
1632
1636
  }
@@ -71,6 +71,7 @@ $ddt-nodata-font-color: $content-text-color-alt2 !default;
71
71
  $ddt-select-all-font-color: $content-text-color !default;
72
72
  $ddt-remains-font-color: $content-text-color-alt3 !default;
73
73
  $ddt-readonly-input-bg-color: $content-bg-color !default;
74
+ $ddt-item-hover-bg: $content-bg-color-hover !default;
74
75
  @mixin ddt-rotate($position) {
75
76
  transform: rotate($position);
76
77
  transition: transform 300ms ease;
@@ -1621,6 +1622,9 @@ $ddt-readonly-input-bg-color: $content-bg-color !default;
1621
1622
  .e-selectall-parent {
1622
1623
  border-bottom-color: $ddt-popup-reorder-border;
1623
1624
 
1625
+ &:focus {
1626
+ background: $ddt-item-hover-bg;
1627
+ }
1624
1628
  .e-all-text {
1625
1629
  color: $ddt-select-all-font-color;
1626
1630
  }
@@ -71,6 +71,7 @@ $ddt-nodata-font-color: $content-text-color-alt2 !default;
71
71
  $ddt-select-all-font-color: $content-text-color !default;
72
72
  $ddt-remains-font-color: $content-text-color-alt3 !default;
73
73
  $ddt-readonly-input-bg-color: $content-bg-color !default;
74
+ $ddt-item-hover-bg: $content-bg-color-hover !default;
74
75
  @mixin ddt-rotate($position) {
75
76
  transform: rotate($position);
76
77
  transition: transform 300ms ease;
@@ -1621,6 +1622,9 @@ $ddt-readonly-input-bg-color: $content-bg-color !default;
1621
1622
  .e-selectall-parent {
1622
1623
  border-bottom-color: $ddt-popup-reorder-border;
1623
1624
 
1625
+ &:focus {
1626
+ background: $ddt-item-hover-bg;
1627
+ }
1624
1628
  .e-all-text {
1625
1629
  color: $ddt-select-all-font-color;
1626
1630
  }
@@ -77,6 +77,7 @@ $ddt-overflow-count-padding-top: 6px !default;
77
77
  $ddt-delim-padding: 6px 10px 0 10px !default;
78
78
  $ddt-delim-bigger-padding: 8px 12px 0 12px !default;
79
79
  $ddt-remains-count-padding-top: 6px !default;
80
+ $ddt-item-hover-bg: $hover-bg !default;
80
81
  @mixin ddt-rotate($position) {
81
82
  transform: rotate($position);
82
83
  transition: transform 300ms ease;
@@ -1627,6 +1628,9 @@ $ddt-remains-count-padding-top: 6px !default;
1627
1628
  .e-selectall-parent {
1628
1629
  border-bottom-color: $ddt-popup-reorder-border;
1629
1630
 
1631
+ &:focus {
1632
+ background: $ddt-item-hover-bg;
1633
+ }
1630
1634
  .e-all-text {
1631
1635
  color: $ddt-select-all-font-color;
1632
1636
  }
@@ -78,6 +78,7 @@ $ddt-outline-padding: 10px 12px !default;
78
78
  $ddt-outline-chip-padding: 4px 12px !default;
79
79
  $ddt-outline-bigger-padding: 15px 16px !default;
80
80
  $ddt-bigger-outline-chip-padding: 8px 15px !default;
81
+ $ddt-item-hover-bg: rgba($grey-dark-font, .10) !default;
81
82
  @mixin ddt-rotate($position) {
82
83
  transform: rotate($position);
83
84
  transition: transform 300ms ease;
@@ -1628,6 +1629,9 @@ $ddt-bigger-outline-chip-padding: 8px 15px !default;
1628
1629
  .e-selectall-parent {
1629
1630
  border-bottom-color: $ddt-popup-reorder-border;
1630
1631
 
1632
+ &:focus {
1633
+ background: $ddt-item-hover-bg;
1634
+ }
1631
1635
  .e-all-text {
1632
1636
  color: $ddt-select-all-font-color;
1633
1637
  }
@@ -78,6 +78,7 @@ $ddt-outline-padding: 10px 12px !default;
78
78
  $ddt-outline-chip-padding: 4px 12px !default;
79
79
  $ddt-outline-bigger-padding: 15px 16px !default;
80
80
  $ddt-bigger-outline-chip-padding: 8px 15px !default;
81
+ $ddt-item-hover-bg: $grey-100 !default;
81
82
  @mixin ddt-rotate($position) {
82
83
  transform: rotate($position);
83
84
  transition: transform 300ms ease;
@@ -1628,6 +1629,9 @@ $ddt-bigger-outline-chip-padding: 8px 15px !default;
1628
1629
  .e-selectall-parent {
1629
1630
  border-bottom-color: $ddt-popup-reorder-border;
1630
1631
 
1632
+ &:focus {
1633
+ background: $ddt-item-hover-bg;
1634
+ }
1631
1635
  .e-all-text {
1632
1636
  color: $ddt-select-all-font-color;
1633
1637
  }
@@ -81,7 +81,7 @@ $ddt-nodata-font-color: rgba($content-text-color) !default;
81
81
  $ddt-select-all-font-color: rgba($content-text-color) !default;
82
82
  $ddt-remains-font-color: $grey-600 !default;
83
83
  $ddt-readonly-input-bg-color: rgba($content-bg-color) !default;
84
-
84
+ $ddt-item-hover-bg: $content-bg-color-hover !default;
85
85
  @mixin ddt-rotate($position) {
86
86
  transform: rotate($position);
87
87
  transition: transform 300ms ease;
@@ -1632,6 +1632,9 @@ $ddt-readonly-input-bg-color: rgba($content-bg-color) !default;
1632
1632
  .e-selectall-parent {
1633
1633
  border-bottom-color: $ddt-popup-reorder-border;
1634
1634
 
1635
+ &:focus {
1636
+ background: $ddt-item-hover-bg;
1637
+ }
1635
1638
  .e-all-text {
1636
1639
  color: $ddt-select-all-font-color;
1637
1640
  }
@@ -81,7 +81,7 @@ $ddt-nodata-font-color: rgba($content-text-color) !default;
81
81
  $ddt-select-all-font-color: rgba($content-text-color) !default;
82
82
  $ddt-remains-font-color: $grey-600 !default;
83
83
  $ddt-readonly-input-bg-color: rgba($content-bg-color) !default;
84
-
84
+ $ddt-item-hover-bg: $content-bg-color-hover !default;
85
85
  @mixin ddt-rotate($position) {
86
86
  transform: rotate($position);
87
87
  transition: transform 300ms ease;
@@ -1632,6 +1632,9 @@ $ddt-readonly-input-bg-color: rgba($content-bg-color) !default;
1632
1632
  .e-selectall-parent {
1633
1633
  border-bottom-color: $ddt-popup-reorder-border;
1634
1634
 
1635
+ &:focus {
1636
+ background: $ddt-item-hover-bg;
1637
+ }
1635
1638
  .e-all-text {
1636
1639
  color: $ddt-select-all-font-color;
1637
1640
  }
@@ -66,7 +66,7 @@ $ddt-chip-hover-font-color: $content-text-color !default;
66
66
  $ddt-nodata-font-color: $content-text-color !default;
67
67
  $ddt-select-all-font-color: $content-text-color !default;
68
68
  $ddt-remains-font-color: $content-text-color-alt3 !default;
69
-
69
+ $ddt-item-hover-bg: $content-bg-color-hover !default;
70
70
  @mixin ddt-rotate($position) {
71
71
  transform: rotate($position);
72
72
  transition: transform 300ms ease;
@@ -1617,6 +1617,9 @@ $ddt-remains-font-color: $content-text-color-alt3 !default;
1617
1617
  .e-selectall-parent {
1618
1618
  border-bottom-color: $ddt-popup-reorder-border;
1619
1619
 
1620
+ &:focus {
1621
+ background: $ddt-item-hover-bg;
1622
+ }
1620
1623
  .e-all-text {
1621
1624
  color: $ddt-select-all-font-color;
1622
1625
  }
@@ -66,7 +66,7 @@ $ddt-chip-hover-font-color: $content-text-color !default;
66
66
  $ddt-nodata-font-color: $content-text-color !default;
67
67
  $ddt-select-all-font-color: $content-text-color !default;
68
68
  $ddt-remains-font-color: $content-text-color-alt3 !default;
69
-
69
+ $ddt-item-hover-bg: $content-bg-color-hover !default;
70
70
  @mixin ddt-rotate($position) {
71
71
  transform: rotate($position);
72
72
  transition: transform 300ms ease;
@@ -1617,6 +1617,9 @@ $ddt-remains-font-color: $content-text-color-alt3 !default;
1617
1617
  .e-selectall-parent {
1618
1618
  border-bottom-color: $ddt-popup-reorder-border;
1619
1619
 
1620
+ &:focus {
1621
+ background: $ddt-item-hover-bg;
1622
+ }
1620
1623
  .e-all-text {
1621
1624
  color: $ddt-select-all-font-color;
1622
1625
  }
@@ -58897,6 +58897,7 @@ $ddt-overflow-count-padding-top: 6px !default;
58897
58897
  $ddt-delim-padding: 6px 10px 0 10px !default;
58898
58898
  $ddt-delim-bigger-padding: 8px 12px 0 12px !default;
58899
58899
  $ddt-remains-count-padding-top: 6px !default;
58900
+ $ddt-item-hover-bg: $neutral-light !default;
58900
58901
  @mixin ddt-rotate($position) {
58901
58902
  transform: rotate($position);
58902
58903
  transition: transform 300ms ease;
@@ -60447,6 +60448,9 @@ $ddt-remains-count-padding-top: 6px !default;
60447
60448
  .e-selectall-parent {
60448
60449
  border-bottom-color: $ddt-popup-reorder-border;
60449
60450
 
60451
+ &:focus {
60452
+ background: $ddt-item-hover-bg;
60453
+ }
60450
60454
  .e-all-text {
60451
60455
  color: $ddt-select-all-font-color;
60452
60456
  }
@@ -75304,6 +75308,7 @@ $grid-xlfl-skin: 'fabric' !default;
75304
75308
  .sf-grid .e-excelfilter {
75305
75309
  &.e-dialog .e-dlg-content {
75306
75310
  padding-left: 0;
75311
+ padding-right: 0;
75307
75312
  }
75308
75313
  .e-dlg-content {
75309
75314
  overflow: visible;
@@ -81367,7 +81372,7 @@ margin: $grid-group-animator-cell-margin;
81367
81372
 
81368
81373
  .e-gridheader .e-headercell,
81369
81374
  .e-gridheader .e-detailheadercell,
81370
- .e-gridheader .e-headercell .e-headercelldiv {
81375
+ .e-gridheader .e-headercell:not(.e-fltr-icon, .e-sort-icon) .e-headercelldiv {
81371
81376
  height: auto;
81372
81377
  }
81373
81378
 
@@ -87202,8 +87207,18 @@ $treegrid-rtl-rowdd-childborder-width: 1px 0 0 !default;
87202
87207
 
87203
87208
  td.e-rowcell {
87204
87209
  &.e-dropbottom {
87205
- border-bottom: $treegrid-rowdd-topbottom-border;
87206
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
87210
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
87211
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
87212
+ }
87213
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
87214
+ box-shadow: 0 2px 0 0 #4f46e5;
87215
+ }
87216
+ @else if $skin-name == 'bootstrap4' or $skin-name == 'material' or $skin-name == 'FluentUI2' or $skin-name == 'fluent2' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'highcontrast' {
87217
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
87218
+ }
87219
+ @else {
87220
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
87221
+ }
87207
87222
  }
87208
87223
  &.e-droptop {
87209
87224
  border-top: $treegrid-rowdd-topbottom-border;
@@ -87213,8 +87228,18 @@ $treegrid-rtl-rowdd-childborder-width: 1px 0 0 !default;
87213
87228
 
87214
87229
  td.e-rowdragdrop {
87215
87230
  &.e-dropbottom {
87216
- border-bottom: $treegrid-rowdd-topbottom-border;
87217
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
87231
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
87232
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
87233
+ }
87234
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
87235
+ box-shadow: 0 2px 0 0 #4f46e5;
87236
+ }
87237
+ @else if $skin-name == 'bootstrap4' or $skin-name == 'material' or $skin-name == 'FluentUI2' or $skin-name == 'fluent2' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'highcontrast' {
87238
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
87239
+ }
87240
+ @else {
87241
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
87242
+ }
87218
87243
  }
87219
87244
  &.e-droptop {
87220
87245
  border-top: $treegrid-rowdd-topbottom-border;
@@ -58672,6 +58672,7 @@ $ddt-delim-padding: 6px 10px 0 10px !default;
58672
58672
  $ddt-overflow-count-padding-top: 6px !default;
58673
58673
  $ddt-delim-bigger-padding: 8px 12px 0 12px !default;
58674
58674
  $ddt-remains-count-padding-top: 6px !default;
58675
+ $ddt-item-hover-bg: $neutral-lighter !default;
58675
58676
  @mixin ddt-rotate($position) {
58676
58677
  transform: rotate($position);
58677
58678
  transition: transform 300ms ease;
@@ -60222,6 +60223,9 @@ $ddt-remains-count-padding-top: 6px !default;
60222
60223
  .e-selectall-parent {
60223
60224
  border-bottom-color: $ddt-popup-reorder-border;
60224
60225
 
60226
+ &:focus {
60227
+ background: $ddt-item-hover-bg;
60228
+ }
60225
60229
  .e-all-text {
60226
60230
  color: $ddt-select-all-font-color;
60227
60231
  }
@@ -75062,6 +75066,7 @@ $grid-xlfl-skin: 'fabric' !default;
75062
75066
  .sf-grid .e-excelfilter {
75063
75067
  &.e-dialog .e-dlg-content {
75064
75068
  padding-left: 0;
75069
+ padding-right: 0;
75065
75070
  }
75066
75071
  .e-dlg-content {
75067
75072
  overflow: visible;
@@ -81125,7 +81130,7 @@ margin: $grid-group-animator-cell-margin;
81125
81130
 
81126
81131
  .e-gridheader .e-headercell,
81127
81132
  .e-gridheader .e-detailheadercell,
81128
- .e-gridheader .e-headercell .e-headercelldiv {
81133
+ .e-gridheader .e-headercell:not(.e-fltr-icon, .e-sort-icon) .e-headercelldiv {
81129
81134
  height: auto;
81130
81135
  }
81131
81136
 
@@ -86962,8 +86967,18 @@ $treegrid-rtl-rowdd-childborder-width: 1px 0 0 !default;
86962
86967
 
86963
86968
  td.e-rowcell {
86964
86969
  &.e-dropbottom {
86965
- border-bottom: $treegrid-rowdd-topbottom-border;
86966
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
86970
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
86971
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
86972
+ }
86973
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
86974
+ box-shadow: 0 2px 0 0 #4f46e5;
86975
+ }
86976
+ @else if $skin-name == 'bootstrap4' or $skin-name == 'material' or $skin-name == 'FluentUI2' or $skin-name == 'fluent2' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'highcontrast' {
86977
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
86978
+ }
86979
+ @else {
86980
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
86981
+ }
86967
86982
  }
86968
86983
  &.e-droptop {
86969
86984
  border-top: $treegrid-rowdd-topbottom-border;
@@ -86973,8 +86988,18 @@ $treegrid-rtl-rowdd-childborder-width: 1px 0 0 !default;
86973
86988
 
86974
86989
  td.e-rowdragdrop {
86975
86990
  &.e-dropbottom {
86976
- border-bottom: $treegrid-rowdd-topbottom-border;
86977
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
86991
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
86992
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
86993
+ }
86994
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
86995
+ box-shadow: 0 2px 0 0 #4f46e5;
86996
+ }
86997
+ @else if $skin-name == 'bootstrap4' or $skin-name == 'material' or $skin-name == 'FluentUI2' or $skin-name == 'fluent2' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'highcontrast' {
86998
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
86999
+ }
87000
+ @else {
87001
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
87002
+ }
86978
87003
  }
86979
87004
  &.e-droptop {
86980
87005
  border-top: $treegrid-rowdd-topbottom-border;
@@ -59276,6 +59276,7 @@ $ddt-nodata-font-color: $content-text-color-alt2 !default;
59276
59276
  $ddt-select-all-font-color: $content-text-color !default;
59277
59277
  $ddt-remains-font-color: $content-text-color-alt3 !default;
59278
59278
  $ddt-readonly-input-bg-color: $content-bg-color !default;
59279
+ $ddt-item-hover-bg: $content-bg-color-hover !default;
59279
59280
  @mixin ddt-rotate($position) {
59280
59281
  transform: rotate($position);
59281
59282
  transition: transform 300ms ease;
@@ -60826,6 +60827,9 @@ $ddt-readonly-input-bg-color: $content-bg-color !default;
60826
60827
  .e-selectall-parent {
60827
60828
  border-bottom-color: $ddt-popup-reorder-border;
60828
60829
 
60830
+ &:focus {
60831
+ background: $ddt-item-hover-bg;
60832
+ }
60829
60833
  .e-all-text {
60830
60834
  color: $ddt-select-all-font-color;
60831
60835
  }
@@ -75874,6 +75878,7 @@ $grid-xlfl-skin: 'fluent' !default;
75874
75878
  .sf-grid .e-excelfilter {
75875
75879
  &.e-dialog .e-dlg-content {
75876
75880
  padding-left: 0;
75881
+ padding-right: 0;
75877
75882
  }
75878
75883
  .e-dlg-content {
75879
75884
  overflow: visible;
@@ -81936,7 +81941,7 @@ margin: $grid-group-animator-cell-margin;
81936
81941
 
81937
81942
  .e-gridheader .e-headercell,
81938
81943
  .e-gridheader .e-detailheadercell,
81939
- .e-gridheader .e-headercell .e-headercelldiv {
81944
+ .e-gridheader .e-headercell:not(.e-fltr-icon, .e-sort-icon) .e-headercelldiv {
81940
81945
  height: auto;
81941
81946
  }
81942
81947
 
@@ -87804,8 +87809,18 @@ $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;
87804
87809
 
87805
87810
  td.e-rowcell {
87806
87811
  &.e-dropbottom {
87807
- border-bottom: $treegrid-rowdd-topbottom-border;
87808
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
87812
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
87813
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
87814
+ }
87815
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
87816
+ box-shadow: 0 2px 0 0 #4f46e5;
87817
+ }
87818
+ @else if $skin-name == 'bootstrap4' or $skin-name == 'material' or $skin-name == 'FluentUI2' or $skin-name == 'fluent2' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'highcontrast' {
87819
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
87820
+ }
87821
+ @else {
87822
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
87823
+ }
87809
87824
  }
87810
87825
  &.e-droptop {
87811
87826
  border-top: $treegrid-rowdd-topbottom-border;
@@ -87815,8 +87830,18 @@ $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;
87815
87830
 
87816
87831
  td.e-rowdragdrop {
87817
87832
  &.e-dropbottom {
87818
- border-bottom: $treegrid-rowdd-topbottom-border;
87819
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
87833
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
87834
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
87835
+ }
87836
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
87837
+ box-shadow: 0 2px 0 0 #4f46e5;
87838
+ }
87839
+ @else if $skin-name == 'bootstrap4' or $skin-name == 'material' or $skin-name == 'FluentUI2' or $skin-name == 'fluent2' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'highcontrast' {
87840
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
87841
+ }
87842
+ @else {
87843
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
87844
+ }
87820
87845
  }
87821
87846
  &.e-droptop {
87822
87847
  border-top: $treegrid-rowdd-topbottom-border;
@@ -59277,6 +59277,7 @@ $ddt-nodata-font-color: $content-text-color-alt2 !default;
59277
59277
  $ddt-select-all-font-color: $content-text-color !default;
59278
59278
  $ddt-remains-font-color: $content-text-color-alt3 !default;
59279
59279
  $ddt-readonly-input-bg-color: $content-bg-color !default;
59280
+ $ddt-item-hover-bg: $content-bg-color-hover !default;
59280
59281
  @mixin ddt-rotate($position) {
59281
59282
  transform: rotate($position);
59282
59283
  transition: transform 300ms ease;
@@ -60827,6 +60828,9 @@ $ddt-readonly-input-bg-color: $content-bg-color !default;
60827
60828
  .e-selectall-parent {
60828
60829
  border-bottom-color: $ddt-popup-reorder-border;
60829
60830
 
60831
+ &:focus {
60832
+ background: $ddt-item-hover-bg;
60833
+ }
60830
60834
  .e-all-text {
60831
60835
  color: $ddt-select-all-font-color;
60832
60836
  }
@@ -75875,6 +75879,7 @@ $grid-xlfl-skin: 'fluent' !default;
75875
75879
  .sf-grid .e-excelfilter {
75876
75880
  &.e-dialog .e-dlg-content {
75877
75881
  padding-left: 0;
75882
+ padding-right: 0;
75878
75883
  }
75879
75884
  .e-dlg-content {
75880
75885
  overflow: visible;
@@ -81937,7 +81942,7 @@ margin: $grid-group-animator-cell-margin;
81937
81942
 
81938
81943
  .e-gridheader .e-headercell,
81939
81944
  .e-gridheader .e-detailheadercell,
81940
- .e-gridheader .e-headercell .e-headercelldiv {
81945
+ .e-gridheader .e-headercell:not(.e-fltr-icon, .e-sort-icon) .e-headercelldiv {
81941
81946
  height: auto;
81942
81947
  }
81943
81948
 
@@ -87805,8 +87810,18 @@ $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;
87805
87810
 
87806
87811
  td.e-rowcell {
87807
87812
  &.e-dropbottom {
87808
- border-bottom: $treegrid-rowdd-topbottom-border;
87809
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
87813
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
87814
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
87815
+ }
87816
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
87817
+ box-shadow: 0 2px 0 0 #4f46e5;
87818
+ }
87819
+ @else if $skin-name == 'bootstrap4' or $skin-name == 'material' or $skin-name == 'FluentUI2' or $skin-name == 'fluent2' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'highcontrast' {
87820
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
87821
+ }
87822
+ @else {
87823
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
87824
+ }
87810
87825
  }
87811
87826
  &.e-droptop {
87812
87827
  border-top: $treegrid-rowdd-topbottom-border;
@@ -87816,8 +87831,18 @@ $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;
87816
87831
 
87817
87832
  td.e-rowdragdrop {
87818
87833
  &.e-dropbottom {
87819
- border-bottom: $treegrid-rowdd-topbottom-border;
87820
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
87834
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
87835
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
87836
+ }
87837
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
87838
+ box-shadow: 0 2px 0 0 #4f46e5;
87839
+ }
87840
+ @else if $skin-name == 'bootstrap4' or $skin-name == 'material' or $skin-name == 'FluentUI2' or $skin-name == 'fluent2' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'highcontrast' {
87841
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
87842
+ }
87843
+ @else {
87844
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
87845
+ }
87821
87846
  }
87822
87847
  &.e-droptop {
87823
87848
  border-top: $treegrid-rowdd-topbottom-border;
@@ -95,6 +95,7 @@ $grid-xlfl-skin: $skin-name !default;
95
95
  .sf-grid .e-excelfilter {
96
96
  &.e-dialog .e-dlg-content {
97
97
  padding-left: 0;
98
+ padding-right: 0;
98
99
  }
99
100
  .e-dlg-content {
100
101
  overflow: visible;
@@ -95,6 +95,7 @@ $grid-xlfl-skin: $skin-name !default;
95
95
  .sf-grid .e-excelfilter {
96
96
  &.e-dialog .e-dlg-content {
97
97
  padding-left: 0;
98
+ padding-right: 0;
98
99
  }
99
100
  .e-dlg-content {
100
101
  overflow: visible;
@@ -85,6 +85,7 @@ $grid-xlfl-skin: 'bootstrap' !default;
85
85
  .sf-grid .e-excelfilter {
86
86
  &.e-dialog .e-dlg-content {
87
87
  padding-left: 0;
88
+ padding-right: 0;
88
89
  }
89
90
  .e-dlg-content {
90
91
  overflow: visible;
@@ -90,6 +90,7 @@ $grid-xlfl-skin: 'bootstrap' !default;
90
90
  .sf-grid .e-excelfilter {
91
91
  &.e-dialog .e-dlg-content {
92
92
  padding-left: 0;
93
+ padding-right: 0;
93
94
  }
94
95
  .e-dlg-content {
95
96
  overflow: visible;
@@ -95,6 +95,7 @@ $grid-xlfl-skin: 'bootstrap4' !default;
95
95
  .sf-grid .e-excelfilter {
96
96
  &.e-dialog .e-dlg-content {
97
97
  padding-left: 0;
98
+ padding-right: 0;
98
99
  }
99
100
  .e-dlg-content {
100
101
  overflow: visible;
@@ -96,6 +96,7 @@ $grid-xlfl-skin: 'bootstrap5' !default;
96
96
  .sf-grid .e-excelfilter {
97
97
  &.e-dialog .e-dlg-content {
98
98
  padding-left: 0;
99
+ padding-right: 0;
99
100
  }
100
101
  .e-dlg-content {
101
102
  overflow: visible;
@@ -96,6 +96,7 @@ $grid-xlfl-skin: 'bootstrap5' !default;
96
96
  .sf-grid .e-excelfilter {
97
97
  &.e-dialog .e-dlg-content {
98
98
  padding-left: 0;
99
+ padding-right: 0;
99
100
  }
100
101
  .e-dlg-content {
101
102
  overflow: visible;
@@ -85,6 +85,7 @@ $grid-xlfl-skin: 'fabric' !default;
85
85
  .sf-grid .e-excelfilter {
86
86
  &.e-dialog .e-dlg-content {
87
87
  padding-left: 0;
88
+ padding-right: 0;
88
89
  }
89
90
  .e-dlg-content {
90
91
  overflow: visible;
@@ -90,6 +90,7 @@ $grid-xlfl-skin: 'fabric' !default;
90
90
  .sf-grid .e-excelfilter {
91
91
  &.e-dialog .e-dlg-content {
92
92
  padding-left: 0;
93
+ padding-right: 0;
93
94
  }
94
95
  .e-dlg-content {
95
96
  overflow: visible;
@@ -96,6 +96,7 @@ $grid-xlfl-skin: 'fluent' !default;
96
96
  .sf-grid .e-excelfilter {
97
97
  &.e-dialog .e-dlg-content {
98
98
  padding-left: 0;
99
+ padding-right: 0;
99
100
  }
100
101
  .e-dlg-content {
101
102
  overflow: visible;
@@ -96,6 +96,7 @@ $grid-xlfl-skin: 'fluent' !default;
96
96
  .sf-grid .e-excelfilter {
97
97
  &.e-dialog .e-dlg-content {
98
98
  padding-left: 0;
99
+ padding-right: 0;
99
100
  }
100
101
  .e-dlg-content {
101
102
  overflow: visible;
@@ -85,6 +85,7 @@ $grid-xlfl-skin: 'highcontrast' !default;
85
85
  .sf-grid .e-excelfilter {
86
86
  &.e-dialog .e-dlg-content {
87
87
  padding-left: 0;
88
+ padding-right: 0;
88
89
  }
89
90
  .e-dlg-content {
90
91
  overflow: visible;
@@ -87,6 +87,7 @@ $grid-xlfl-skin: 'material' !default;
87
87
  .sf-grid .e-excelfilter {
88
88
  &.e-dialog .e-dlg-content {
89
89
  padding-left: 0;
90
+ padding-right: 0;
90
91
  }
91
92
  .e-dlg-content {
92
93
  overflow: visible;