@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
package/SCSS-Themes/tailwind-dark.scss CHANGED
@@ -59085,7 +59085,7 @@ $ddt-chip-hover-font-color: $content-text-color !default;
59085
59085
  $ddt-nodata-font-color: $content-text-color !default;
59086
59086
  $ddt-select-all-font-color: $content-text-color !default;
59087
59087
  $ddt-remains-font-color: $content-text-color-alt3 !default;
59088
-
59088
+ $ddt-item-hover-bg: $content-bg-color-hover !default;
59089
59089
  @mixin ddt-rotate($position) {
59090
59090
  transform: rotate($position);
59091
59091
  transition: transform 300ms ease;
@@ -60636,6 +60636,9 @@ $ddt-remains-font-color: $content-text-color-alt3 !default;
60636
60636
  .e-selectall-parent {
60637
60637
  border-bottom-color: $ddt-popup-reorder-border;
60638
60638
 
60639
+ &:focus {
60640
+ background: $ddt-item-hover-bg;
60641
+ }
60639
60642
  .e-all-text {
60640
60643
  color: $ddt-select-all-font-color;
60641
60644
  }
@@ -75621,6 +75624,7 @@ $grid-xlfl-skin: 'tailwind' !default;
75621
75624
  .sf-grid .e-excelfilter {
75622
75625
  &.e-dialog .e-dlg-content {
75623
75626
  padding-left: 0;
75627
+ padding-right: 0;
75624
75628
  }
75625
75629
  .e-dlg-content {
75626
75630
  overflow: visible;
@@ -81698,7 +81702,7 @@ margin: $grid-group-animator-cell-margin;
81698
81702
 
81699
81703
  .e-gridheader .e-headercell,
81700
81704
  .e-gridheader .e-detailheadercell,
81701
- .e-gridheader .e-headercell .e-headercelldiv {
81705
+ .e-gridheader .e-headercell:not(.e-fltr-icon, .e-sort-icon) .e-headercelldiv {
81702
81706
  height: auto;
81703
81707
  }
81704
81708
 
@@ -87552,8 +87556,18 @@ $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;
87552
87556
 
87553
87557
  td.e-rowcell {
87554
87558
  &.e-dropbottom {
87555
- border-bottom: $treegrid-rowdd-topbottom-border;
87556
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
87559
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
87560
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
87561
+ }
87562
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
87563
+ box-shadow: 0 2px 0 0 #4f46e5;
87564
+ }
87565
+ @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' {
87566
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
87567
+ }
87568
+ @else {
87569
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
87570
+ }
87557
87571
  }
87558
87572
  &.e-droptop {
87559
87573
  border-top: $treegrid-rowdd-topbottom-border;
@@ -87563,8 +87577,18 @@ $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;
87563
87577
 
87564
87578
  td.e-rowdragdrop {
87565
87579
  &.e-dropbottom {
87566
- border-bottom: $treegrid-rowdd-topbottom-border;
87567
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
87580
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
87581
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
87582
+ }
87583
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
87584
+ box-shadow: 0 2px 0 0 #4f46e5;
87585
+ }
87586
+ @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' {
87587
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
87588
+ }
87589
+ @else {
87590
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
87591
+ }
87568
87592
  }
87569
87593
  &.e-droptop {
87570
87594
  border-top: $treegrid-rowdd-topbottom-border;
package/SCSS-Themes/tailwind.scss CHANGED
@@ -59082,7 +59082,7 @@ $ddt-chip-hover-font-color: $content-text-color !default;
59082
59082
  $ddt-nodata-font-color: $content-text-color !default;
59083
59083
  $ddt-select-all-font-color: $content-text-color !default;
59084
59084
  $ddt-remains-font-color: $content-text-color-alt3 !default;
59085
-
59085
+ $ddt-item-hover-bg: $content-bg-color-hover !default;
59086
59086
  @mixin ddt-rotate($position) {
59087
59087
  transform: rotate($position);
59088
59088
  transition: transform 300ms ease;
@@ -60633,6 +60633,9 @@ $ddt-remains-font-color: $content-text-color-alt3 !default;
60633
60633
  .e-selectall-parent {
60634
60634
  border-bottom-color: $ddt-popup-reorder-border;
60635
60635
 
60636
+ &:focus {
60637
+ background: $ddt-item-hover-bg;
60638
+ }
60636
60639
  .e-all-text {
60637
60640
  color: $ddt-select-all-font-color;
60638
60641
  }
@@ -75618,6 +75621,7 @@ $grid-xlfl-skin: 'tailwind' !default;
75618
75621
  .sf-grid .e-excelfilter {
75619
75622
  &.e-dialog .e-dlg-content {
75620
75623
  padding-left: 0;
75624
+ padding-right: 0;
75621
75625
  }
75622
75626
  .e-dlg-content {
75623
75627
  overflow: visible;
@@ -81695,7 +81699,7 @@ margin: $grid-group-animator-cell-margin;
81695
81699
 
81696
81700
  .e-gridheader .e-headercell,
81697
81701
  .e-gridheader .e-detailheadercell,
81698
- .e-gridheader .e-headercell .e-headercelldiv {
81702
+ .e-gridheader .e-headercell:not(.e-fltr-icon, .e-sort-icon) .e-headercelldiv {
81699
81703
  height: auto;
81700
81704
  }
81701
81705
 
@@ -87549,8 +87553,18 @@ $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;
87549
87553
 
87550
87554
  td.e-rowcell {
87551
87555
  &.e-dropbottom {
87552
- border-bottom: $treegrid-rowdd-topbottom-border;
87553
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
87556
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
87557
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
87558
+ }
87559
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
87560
+ box-shadow: 0 2px 0 0 #4f46e5;
87561
+ }
87562
+ @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' {
87563
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
87564
+ }
87565
+ @else {
87566
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
87567
+ }
87554
87568
  }
87555
87569
  &.e-droptop {
87556
87570
  border-top: $treegrid-rowdd-topbottom-border;
@@ -87560,8 +87574,18 @@ $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;
87560
87574
 
87561
87575
  td.e-rowdragdrop {
87562
87576
  &.e-dropbottom {
87563
- border-bottom: $treegrid-rowdd-topbottom-border;
87564
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
87577
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
87578
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
87579
+ }
87580
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
87581
+ box-shadow: 0 2px 0 0 #4f46e5;
87582
+ }
87583
+ @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' {
87584
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
87585
+ }
87586
+ @else {
87587
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
87588
+ }
87565
87589
  }
87566
87590
  &.e-droptop {
87567
87591
  border-top: $treegrid-rowdd-topbottom-border;
package/SCSS-Themes/treegrid/treegrid/bds-dark.scss CHANGED
@@ -427,8 +427,18 @@ $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;
427
427
 
428
428
  td.e-rowcell {
429
429
  &.e-dropbottom {
430
- border-bottom: $treegrid-rowdd-topbottom-border;
431
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
430
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
431
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
432
+ }
433
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
434
+ box-shadow: 0 2px 0 0 #4f46e5;
435
+ }
436
+ @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' {
437
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
438
+ }
439
+ @else {
440
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
441
+ }
432
442
  }
433
443
  &.e-droptop {
434
444
  border-top: $treegrid-rowdd-topbottom-border;
@@ -438,8 +448,18 @@ $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;
438
448
 
439
449
  td.e-rowdragdrop {
440
450
  &.e-dropbottom {
441
- border-bottom: $treegrid-rowdd-topbottom-border;
442
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
451
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
452
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
453
+ }
454
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
455
+ box-shadow: 0 2px 0 0 #4f46e5;
456
+ }
457
+ @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' {
458
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
459
+ }
460
+ @else {
461
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
462
+ }
443
463
  }
444
464
  &.e-droptop {
445
465
  border-top: $treegrid-rowdd-topbottom-border;
package/SCSS-Themes/treegrid/treegrid/bds.scss CHANGED
@@ -427,8 +427,18 @@ $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;
427
427
 
428
428
  td.e-rowcell {
429
429
  &.e-dropbottom {
430
- border-bottom: $treegrid-rowdd-topbottom-border;
431
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
430
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
431
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
432
+ }
433
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
434
+ box-shadow: 0 2px 0 0 #4f46e5;
435
+ }
436
+ @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' {
437
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
438
+ }
439
+ @else {
440
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
441
+ }
432
442
  }
433
443
  &.e-droptop {
434
444
  border-top: $treegrid-rowdd-topbottom-border;
@@ -438,8 +448,18 @@ $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;
438
448
 
439
449
  td.e-rowdragdrop {
440
450
  &.e-dropbottom {
441
- border-bottom: $treegrid-rowdd-topbottom-border;
442
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
451
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
452
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
453
+ }
454
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
455
+ box-shadow: 0 2px 0 0 #4f46e5;
456
+ }
457
+ @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' {
458
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
459
+ }
460
+ @else {
461
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
462
+ }
443
463
  }
444
464
  &.e-droptop {
445
465
  border-top: $treegrid-rowdd-topbottom-border;
package/SCSS-Themes/treegrid/treegrid/bootstrap-dark.scss CHANGED
@@ -429,8 +429,18 @@ $treegrid-rtl-rowdd-childborder-width: 1px 0 0 !default;
429
429
 
430
430
  td.e-rowcell {
431
431
  &.e-dropbottom {
432
- border-bottom: $treegrid-rowdd-topbottom-border;
433
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
432
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
433
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
434
+ }
435
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
436
+ box-shadow: 0 2px 0 0 #4f46e5;
437
+ }
438
+ @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' {
439
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
440
+ }
441
+ @else {
442
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
443
+ }
434
444
  }
435
445
  &.e-droptop {
436
446
  border-top: $treegrid-rowdd-topbottom-border;
@@ -440,8 +450,18 @@ $treegrid-rtl-rowdd-childborder-width: 1px 0 0 !default;
440
450
 
441
451
  td.e-rowdragdrop {
442
452
  &.e-dropbottom {
443
- border-bottom: $treegrid-rowdd-topbottom-border;
444
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
453
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
454
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
455
+ }
456
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
457
+ box-shadow: 0 2px 0 0 #4f46e5;
458
+ }
459
+ @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' {
460
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
461
+ }
462
+ @else {
463
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
464
+ }
445
465
  }
446
466
  &.e-droptop {
447
467
  border-top: $treegrid-rowdd-topbottom-border;
package/SCSS-Themes/treegrid/treegrid/bootstrap.scss CHANGED
@@ -429,8 +429,18 @@ $treegrid-rtl-rowdd-childborder-width: 1px 0 0 !default;
429
429
 
430
430
  td.e-rowcell {
431
431
  &.e-dropbottom {
432
- border-bottom: $treegrid-rowdd-topbottom-border;
433
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
432
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
433
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
434
+ }
435
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
436
+ box-shadow: 0 2px 0 0 #4f46e5;
437
+ }
438
+ @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' {
439
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
440
+ }
441
+ @else {
442
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
443
+ }
434
444
  }
435
445
  &.e-droptop {
436
446
  border-top: $treegrid-rowdd-topbottom-border;
@@ -440,8 +450,18 @@ $treegrid-rtl-rowdd-childborder-width: 1px 0 0 !default;
440
450
 
441
451
  td.e-rowdragdrop {
442
452
  &.e-dropbottom {
443
- border-bottom: $treegrid-rowdd-topbottom-border;
444
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
453
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
454
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
455
+ }
456
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
457
+ box-shadow: 0 2px 0 0 #4f46e5;
458
+ }
459
+ @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' {
460
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
461
+ }
462
+ @else {
463
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
464
+ }
445
465
  }
446
466
  &.e-droptop {
447
467
  border-top: $treegrid-rowdd-topbottom-border;
package/SCSS-Themes/treegrid/treegrid/bootstrap4.scss CHANGED
@@ -429,8 +429,18 @@ $treegrid-rtl-rowdd-childborder-width: 1px 0 0 !default;
429
429
 
430
430
  td.e-rowcell {
431
431
  &.e-dropbottom {
432
- border-bottom: $treegrid-rowdd-topbottom-border;
433
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
432
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
433
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
434
+ }
435
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
436
+ box-shadow: 0 2px 0 0 #4f46e5;
437
+ }
438
+ @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' {
439
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
440
+ }
441
+ @else {
442
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
443
+ }
434
444
  }
435
445
  &.e-droptop {
436
446
  border-top: $treegrid-rowdd-topbottom-border;
@@ -440,8 +450,18 @@ $treegrid-rtl-rowdd-childborder-width: 1px 0 0 !default;
440
450
 
441
451
  td.e-rowdragdrop {
442
452
  &.e-dropbottom {
443
- border-bottom: $treegrid-rowdd-topbottom-border;
444
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
453
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
454
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
455
+ }
456
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
457
+ box-shadow: 0 2px 0 0 #4f46e5;
458
+ }
459
+ @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' {
460
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
461
+ }
462
+ @else {
463
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
464
+ }
445
465
  }
446
466
  &.e-droptop {
447
467
  border-top: $treegrid-rowdd-topbottom-border;
package/SCSS-Themes/treegrid/treegrid/bootstrap5-dark.scss CHANGED
@@ -427,8 +427,18 @@ $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;
427
427
 
428
428
  td.e-rowcell {
429
429
  &.e-dropbottom {
430
- border-bottom: $treegrid-rowdd-topbottom-border;
431
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
430
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
431
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
432
+ }
433
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
434
+ box-shadow: 0 2px 0 0 #4f46e5;
435
+ }
436
+ @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' {
437
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
438
+ }
439
+ @else {
440
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
441
+ }
432
442
  }
433
443
  &.e-droptop {
434
444
  border-top: $treegrid-rowdd-topbottom-border;
@@ -438,8 +448,18 @@ $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;
438
448
 
439
449
  td.e-rowdragdrop {
440
450
  &.e-dropbottom {
441
- border-bottom: $treegrid-rowdd-topbottom-border;
442
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
451
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
452
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
453
+ }
454
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
455
+ box-shadow: 0 2px 0 0 #4f46e5;
456
+ }
457
+ @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' {
458
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
459
+ }
460
+ @else {
461
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
462
+ }
443
463
  }
444
464
  &.e-droptop {
445
465
  border-top: $treegrid-rowdd-topbottom-border;
package/SCSS-Themes/treegrid/treegrid/bootstrap5.scss CHANGED
@@ -427,8 +427,18 @@ $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;
427
427
 
428
428
  td.e-rowcell {
429
429
  &.e-dropbottom {
430
- border-bottom: $treegrid-rowdd-topbottom-border;
431
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
430
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
431
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
432
+ }
433
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
434
+ box-shadow: 0 2px 0 0 #4f46e5;
435
+ }
436
+ @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' {
437
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
438
+ }
439
+ @else {
440
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
441
+ }
432
442
  }
433
443
  &.e-droptop {
434
444
  border-top: $treegrid-rowdd-topbottom-border;
@@ -438,8 +448,18 @@ $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;
438
448
 
439
449
  td.e-rowdragdrop {
440
450
  &.e-dropbottom {
441
- border-bottom: $treegrid-rowdd-topbottom-border;
442
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
451
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
452
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
453
+ }
454
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
455
+ box-shadow: 0 2px 0 0 #4f46e5;
456
+ }
457
+ @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' {
458
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
459
+ }
460
+ @else {
461
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
462
+ }
443
463
  }
444
464
  &.e-droptop {
445
465
  border-top: $treegrid-rowdd-topbottom-border;
package/SCSS-Themes/treegrid/treegrid/fabric-dark.scss CHANGED
@@ -429,8 +429,18 @@ $treegrid-rtl-rowdd-childborder-width: 1px 0 0 !default;
429
429
 
430
430
  td.e-rowcell {
431
431
  &.e-dropbottom {
432
- border-bottom: $treegrid-rowdd-topbottom-border;
433
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
432
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
433
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
434
+ }
435
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
436
+ box-shadow: 0 2px 0 0 #4f46e5;
437
+ }
438
+ @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' {
439
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
440
+ }
441
+ @else {
442
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
443
+ }
434
444
  }
435
445
  &.e-droptop {
436
446
  border-top: $treegrid-rowdd-topbottom-border;
@@ -440,8 +450,18 @@ $treegrid-rtl-rowdd-childborder-width: 1px 0 0 !default;
440
450
 
441
451
  td.e-rowdragdrop {
442
452
  &.e-dropbottom {
443
- border-bottom: $treegrid-rowdd-topbottom-border;
444
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
453
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
454
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
455
+ }
456
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
457
+ box-shadow: 0 2px 0 0 #4f46e5;
458
+ }
459
+ @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' {
460
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
461
+ }
462
+ @else {
463
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
464
+ }
445
465
  }
446
466
  &.e-droptop {
447
467
  border-top: $treegrid-rowdd-topbottom-border;
package/SCSS-Themes/treegrid/treegrid/fabric.scss CHANGED
@@ -429,8 +429,18 @@ $treegrid-rtl-rowdd-childborder-width: 1px 0 0 !default;
429
429
 
430
430
  td.e-rowcell {
431
431
  &.e-dropbottom {
432
- border-bottom: $treegrid-rowdd-topbottom-border;
433
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
432
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
433
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
434
+ }
435
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
436
+ box-shadow: 0 2px 0 0 #4f46e5;
437
+ }
438
+ @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' {
439
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
440
+ }
441
+ @else {
442
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
443
+ }
434
444
  }
435
445
  &.e-droptop {
436
446
  border-top: $treegrid-rowdd-topbottom-border;
@@ -440,8 +450,18 @@ $treegrid-rtl-rowdd-childborder-width: 1px 0 0 !default;
440
450
 
441
451
  td.e-rowdragdrop {
442
452
  &.e-dropbottom {
443
- border-bottom: $treegrid-rowdd-topbottom-border;
444
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
453
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
454
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
455
+ }
456
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
457
+ box-shadow: 0 2px 0 0 #4f46e5;
458
+ }
459
+ @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' {
460
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
461
+ }
462
+ @else {
463
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
464
+ }
445
465
  }
446
466
  &.e-droptop {
447
467
  border-top: $treegrid-rowdd-topbottom-border;
package/SCSS-Themes/treegrid/treegrid/fluent-dark.scss CHANGED
@@ -428,8 +428,18 @@ $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;
428
428
 
429
429
  td.e-rowcell {
430
430
  &.e-dropbottom {
431
- border-bottom: $treegrid-rowdd-topbottom-border;
432
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
431
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
432
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
433
+ }
434
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
435
+ box-shadow: 0 2px 0 0 #4f46e5;
436
+ }
437
+ @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' {
438
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
439
+ }
440
+ @else {
441
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
442
+ }
433
443
  }
434
444
  &.e-droptop {
435
445
  border-top: $treegrid-rowdd-topbottom-border;
@@ -439,8 +449,18 @@ $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;
439
449
 
440
450
  td.e-rowdragdrop {
441
451
  &.e-dropbottom {
442
- border-bottom: $treegrid-rowdd-topbottom-border;
443
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
452
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
453
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
454
+ }
455
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
456
+ box-shadow: 0 2px 0 0 #4f46e5;
457
+ }
458
+ @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' {
459
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
460
+ }
461
+ @else {
462
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
463
+ }
444
464
  }
445
465
  &.e-droptop {
446
466
  border-top: $treegrid-rowdd-topbottom-border;
package/SCSS-Themes/treegrid/treegrid/fluent.scss CHANGED
@@ -428,8 +428,18 @@ $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;
428
428
 
429
429
  td.e-rowcell {
430
430
  &.e-dropbottom {
431
- border-bottom: $treegrid-rowdd-topbottom-border;
432
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
431
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
432
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
433
+ }
434
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
435
+ box-shadow: 0 2px 0 0 #4f46e5;
436
+ }
437
+ @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' {
438
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
439
+ }
440
+ @else {
441
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
442
+ }
433
443
  }
434
444
  &.e-droptop {
435
445
  border-top: $treegrid-rowdd-topbottom-border;
@@ -439,8 +449,18 @@ $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;
439
449
 
440
450
  td.e-rowdragdrop {
441
451
  &.e-dropbottom {
442
- border-bottom: $treegrid-rowdd-topbottom-border;
443
- box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
452
+ @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
453
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
454
+ }
455
+ @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
456
+ box-shadow: 0 2px 0 0 #4f46e5;
457
+ }
458
+ @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' {
459
+ box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
460
+ }
461
+ @else {
462
+ box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
463
+ }
444
464
  }
445
465
  &.e-droptop {
446
466
  border-top: $treegrid-rowdd-topbottom-border;