npm - @syncfusion/blazor-themes - Versions diffs - 25.2.4 → 25.2.6 - Mend

@syncfusion/blazor-themes 25.2.4 → 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 (113) hide show

package/SCSS-Themes/base/bootstrap5-dark.scss CHANGED Viewed

@@ -491,6 +491,7 @@ $error-font-color: $danger !default;
 $warning-font-color: $yellow !default;
 $success-font-color: lighten($green, 10%) !default;
 $information-font-color: $cyan !default;
+$accordion-text-active-color: tint-color($primary, 40%) !default;
 $font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;

package/SCSS-Themes/base/bootstrap5.scss CHANGED Viewed

@@ -492,6 +492,7 @@ $error-font-color: $danger !default;
 $warning-font-color: $yellow !default;
 $success-font-color: #198754 !default;
 $information-font-color: #0dcaf0 !default;
+$accordion-text-active-color: shade-color($primary, 10%) !default;
 $font-size: 12px !default;

package/SCSS-Themes/bds-dark.scss CHANGED Viewed

@@ -60349,7 +60349,7 @@ $ddt-chip-hover-font-color: $content-text-color !default;
 $ddt-nodata-font-color: $content-text-color !default;
 $ddt-select-all-font-color: $content-text-color !default;
 $ddt-remains-font-color: $content-text-color-alt3 !default;
+$ddt-item-hover-bg: $content-bg-color-hover !default;
 @mixin ddt-rotate($position) {
   transform: rotate($position);
   transition: transform 300ms ease;
@@ -61900,6 +61900,9 @@ $ddt-remains-font-color: $content-text-color-alt3 !default;
       .e-selectall-parent {
         border-bottom-color: $ddt-popup-reorder-border;
+        &:focus {
+          background: $ddt-item-hover-bg;
+        }
         .e-all-text {
           color: $ddt-select-all-font-color;
         }
@@ -63177,7 +63180,7 @@ $ddl-close-icon-hover-color: $icon-color-hover !default;
   }
 }
-.e-small .e-multiselect .e-input-group-icon.e-ddl-icon {
+.e-small .e-multiselect:not(.e-outline):not(.e-filled) .e-input-group-icon.e-ddl-icon {
   @if $ddl-multiselect-skin-name == 'Material3' {
     top: 6px;
   }
@@ -63315,7 +63318,7 @@ ejs-multiselect {
     margin-top: $ddl-small-close-hooker-margin-top;
     height: $ddl-small-chip-close-hooker-height;
     width: $ddl-small-chip-close-hooker-width;
-    line-height: 2px;
+    line-height: normal;
   }
 }
@@ -76902,6 +76905,7 @@ $grid-xlfl-skin: $skin-name !default;
   .sf-grid .e-excelfilter {
     &.e-dialog .e-dlg-content {
       padding-left: 0;
+      padding-right: 0;
     }
     .e-dlg-content {
       overflow: visible;
@@ -82985,7 +82989,7 @@ margin: $grid-group-animator-cell-margin;
   .e-gridheader .e-headercell,
   .e-gridheader .e-detailheadercell,
-  .e-gridheader .e-headercell .e-headercelldiv {
+  .e-gridheader .e-headercell:not(.e-fltr-icon, .e-sort-icon) .e-headercelldiv {
     height: auto;
   }
@@ -88839,8 +88843,18 @@ $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;
       td.e-rowcell {
         &.e-dropbottom {
-          border-bottom: $treegrid-rowdd-topbottom-border;
-          box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
+          @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
+            box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
+          }
+          @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
+            box-shadow: 0 2px 0 0 #4f46e5;
+          }
+          @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' {
+            box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
+          }
+          @else {
+            box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
+          }
         }
         &.e-droptop {
           border-top: $treegrid-rowdd-topbottom-border;
@@ -88850,8 +88864,18 @@ $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;
       td.e-rowdragdrop {
         &.e-dropbottom {
-          border-bottom: $treegrid-rowdd-topbottom-border;
-          box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
+          @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
+            box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
+          }
+          @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
+            box-shadow: 0 2px 0 0 #4f46e5;
+          }
+          @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' {
+            box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
+          }
+          @else {
+            box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
+          }
         }
         &.e-droptop {
           border-top: $treegrid-rowdd-topbottom-border;

package/SCSS-Themes/bds.scss CHANGED Viewed

@@ -60629,7 +60629,7 @@ $ddt-chip-hover-font-color: $content-text-color !default;
 $ddt-nodata-font-color: $content-text-color !default;
 $ddt-select-all-font-color: $content-text-color !default;
 $ddt-remains-font-color: $content-text-color-alt3 !default;
+$ddt-item-hover-bg: $content-bg-color-hover !default;
 @mixin ddt-rotate($position) {
   transform: rotate($position);
   transition: transform 300ms ease;
@@ -62180,6 +62180,9 @@ $ddt-remains-font-color: $content-text-color-alt3 !default;
       .e-selectall-parent {
         border-bottom-color: $ddt-popup-reorder-border;
+        &:focus {
+          background: $ddt-item-hover-bg;
+        }
         .e-all-text {
           color: $ddt-select-all-font-color;
         }
@@ -63457,7 +63460,7 @@ $ddl-close-icon-hover-color: $icon-color-hover !default;
   }
 }
-.e-small .e-multiselect .e-input-group-icon.e-ddl-icon {
+.e-small .e-multiselect:not(.e-outline):not(.e-filled) .e-input-group-icon.e-ddl-icon {
   @if $ddl-multiselect-skin-name == 'Material3' {
     top: 6px;
   }
@@ -63595,7 +63598,7 @@ ejs-multiselect {
     margin-top: $ddl-small-close-hooker-margin-top;
     height: $ddl-small-chip-close-hooker-height;
     width: $ddl-small-chip-close-hooker-width;
-    line-height: 2px;
+    line-height: normal;
   }
 }
@@ -77182,6 +77185,7 @@ $grid-xlfl-skin: $skin-name !default;
   .sf-grid .e-excelfilter {
     &.e-dialog .e-dlg-content {
       padding-left: 0;
+      padding-right: 0;
     }
     .e-dlg-content {
       overflow: visible;
@@ -83265,7 +83269,7 @@ margin: $grid-group-animator-cell-margin;
   .e-gridheader .e-headercell,
   .e-gridheader .e-detailheadercell,
-  .e-gridheader .e-headercell .e-headercelldiv {
+  .e-gridheader .e-headercell:not(.e-fltr-icon, .e-sort-icon) .e-headercelldiv {
     height: auto;
   }
@@ -89119,8 +89123,18 @@ $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;
       td.e-rowcell {
         &.e-dropbottom {
-          border-bottom: $treegrid-rowdd-topbottom-border;
-          box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
+          @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
+            box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
+          }
+          @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
+            box-shadow: 0 2px 0 0 #4f46e5;
+          }
+          @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' {
+            box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
+          }
+          @else {
+            box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
+          }
         }
         &.e-droptop {
           border-top: $treegrid-rowdd-topbottom-border;
@@ -89130,8 +89144,18 @@ $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;
       td.e-rowdragdrop {
         &.e-dropbottom {
-          border-bottom: $treegrid-rowdd-topbottom-border;
-          box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
+          @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
+            box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
+          }
+          @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
+            box-shadow: 0 2px 0 0 #4f46e5;
+          }
+          @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' {
+            box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
+          }
+          @else {
+            box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
+          }
         }
         &.e-droptop {
           border-top: $treegrid-rowdd-topbottom-border;

package/SCSS-Themes/bootstrap-dark.scss CHANGED Viewed

@@ -59027,6 +59027,7 @@ $ddt-overflow-count-padding-top: 6px !default;
 $ddt-delim-padding: 6px 12px 0 12px !default;
 $ddt-delim-bigger-padding: 7.5px 14px 0 14px !default;
 $ddt-remains-count-padding-top: 5.5px !default;
+$ddt-item-hover-bg: $grey-44 !default;
 @mixin ddt-rotate($position) {
   transform: rotate($position);
   transition: transform 300ms ease;
@@ -60577,6 +60578,9 @@ $ddt-remains-count-padding-top: 5.5px !default;
       .e-selectall-parent {
         border-bottom-color: $ddt-popup-reorder-border;
+        &:focus {
+          background: $ddt-item-hover-bg;
+        }
         .e-all-text {
           color: $ddt-select-all-font-color;
         }
@@ -61826,7 +61830,7 @@ $ddl-closer-margin-top-bigger-small: -4em !default;
   }
 }
-.e-small .e-multiselect .e-input-group-icon.e-ddl-icon {
+.e-small .e-multiselect:not(.e-outline):not(.e-filled) .e-input-group-icon.e-ddl-icon {
   @if $ddl-multiselect-skin-name == 'Material3' {
     top: 6px;
   }
@@ -61964,7 +61968,7 @@ ejs-multiselect {
     margin-top: $ddl-small-close-hooker-margin-top;
     height: $ddl-small-chip-close-hooker-height;
     width: $ddl-small-chip-close-hooker-width;
-    line-height: 2px;
+    line-height: normal;
   }
 }
@@ -75443,6 +75447,7 @@ $grid-xlfl-skin: 'bootstrap' !default;
   .sf-grid .e-excelfilter {
     &.e-dialog .e-dlg-content {
       padding-left: 0;
+      padding-right: 0;
     }
     .e-dlg-content {
       overflow: visible;
@@ -81509,7 +81514,7 @@ margin: $grid-group-animator-cell-margin;
   .e-gridheader .e-headercell,
   .e-gridheader .e-detailheadercell,
-  .e-gridheader .e-headercell .e-headercelldiv {
+  .e-gridheader .e-headercell:not(.e-fltr-icon, .e-sort-icon) .e-headercelldiv {
     height: auto;
   }
@@ -87354,8 +87359,18 @@ $treegrid-rtl-rowdd-childborder-width: 1px 0 0 !default;
       td.e-rowcell {
         &.e-dropbottom {
-          border-bottom: $treegrid-rowdd-topbottom-border;
-          box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
+          @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
+            box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
+          }
+          @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
+            box-shadow: 0 2px 0 0 #4f46e5;
+          }
+          @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' {
+            box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
+          }
+          @else {
+            box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
+          }
         }
         &.e-droptop {
           border-top: $treegrid-rowdd-topbottom-border;
@@ -87365,8 +87380,18 @@ $treegrid-rtl-rowdd-childborder-width: 1px 0 0 !default;
       td.e-rowdragdrop {
         &.e-dropbottom {
-          border-bottom: $treegrid-rowdd-topbottom-border;
-          box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
+          @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
+            box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
+          }
+          @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
+            box-shadow: 0 2px 0 0 #4f46e5;
+          }
+          @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' {
+            box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
+          }
+          @else {
+            box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
+          }
         }
         &.e-droptop {
           border-top: $treegrid-rowdd-topbottom-border;

package/SCSS-Themes/bootstrap.scss CHANGED Viewed

@@ -58748,6 +58748,7 @@ $ddt-overflow-count-padding-top: 6px !default;
 $ddt-delim-padding: 6px 12px 0 12px !default;
 $ddt-delim-bigger-padding: 7.5px 14px 0 14px !default;
 $ddt-remains-count-padding-top: 5.5px !default;
+$ddt-item-hover-bg: $grey-f5 !default;
 @mixin ddt-rotate($position) {
   transform: rotate($position);
   transition: transform 300ms ease;
@@ -60298,6 +60299,9 @@ $ddt-remains-count-padding-top: 5.5px !default;
       .e-selectall-parent {
         border-bottom-color: $ddt-popup-reorder-border;
+        &:focus {
+          background: $ddt-item-hover-bg;
+        }
         .e-all-text {
           color: $ddt-select-all-font-color;
         }
@@ -61536,7 +61540,7 @@ $ddl-closer-margin-top-bigger-small: -4em !default;
   }
 }
-.e-small .e-multiselect .e-input-group-icon.e-ddl-icon {
+.e-small .e-multiselect:not(.e-outline):not(.e-filled) .e-input-group-icon.e-ddl-icon {
   @if $ddl-multiselect-skin-name == 'Material3' {
     top: 6px;
   }
@@ -61674,7 +61678,7 @@ ejs-multiselect {
     margin-top: $ddl-small-close-hooker-margin-top;
     height: $ddl-small-chip-close-hooker-height;
     width: $ddl-small-chip-close-hooker-width;
-    line-height: 2px;
+    line-height: normal;
   }
 }
@@ -75150,6 +75154,7 @@ $grid-xlfl-skin: 'bootstrap' !default;
   .sf-grid .e-excelfilter {
     &.e-dialog .e-dlg-content {
       padding-left: 0;
+      padding-right: 0;
     }
     .e-dlg-content {
       overflow: visible;
@@ -81218,7 +81223,7 @@ margin: $grid-group-animator-cell-margin;
   .e-gridheader .e-headercell,
   .e-gridheader .e-detailheadercell,
-  .e-gridheader .e-headercell .e-headercelldiv {
+  .e-gridheader .e-headercell:not(.e-fltr-icon, .e-sort-icon) .e-headercelldiv {
     height: auto;
   }
@@ -87063,8 +87068,18 @@ $treegrid-rtl-rowdd-childborder-width: 1px 0 0 !default;
       td.e-rowcell {
         &.e-dropbottom {
-          border-bottom: $treegrid-rowdd-topbottom-border;
-          box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
+          @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
+            box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
+          }
+          @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
+            box-shadow: 0 2px 0 0 #4f46e5;
+          }
+          @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' {
+            box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
+          }
+          @else {
+            box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
+          }
         }
         &.e-droptop {
           border-top: $treegrid-rowdd-topbottom-border;
@@ -87074,8 +87089,18 @@ $treegrid-rtl-rowdd-childborder-width: 1px 0 0 !default;
       td.e-rowdragdrop {
         &.e-dropbottom {
-          border-bottom: $treegrid-rowdd-topbottom-border;
-          box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
+          @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
+            box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
+          }
+          @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
+            box-shadow: 0 2px 0 0 #4f46e5;
+          }
+          @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' {
+            box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
+          }
+          @else {
+            box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
+          }
         }
         &.e-droptop {
           border-top: $treegrid-rowdd-topbottom-border;

package/SCSS-Themes/bootstrap4.scss CHANGED Viewed

@@ -58807,6 +58807,7 @@ $ddt-overflow-count-padding-top: 4px !default;
 $ddt-delim-padding: 4px 8px 0 8px !default;
 $ddt-delim-bigger-padding: 6px 12px 0 12px !default;
 $ddt-remains-count-padding-top: 4px !default;
+$ddt-item-hover-bg: darken($gray-100,2%) !default;
 @mixin ddt-rotate($position) {
   transform: rotate($position);
   transition: transform 300ms ease;
@@ -60357,6 +60358,9 @@ $ddt-remains-count-padding-top: 4px !default;
       .e-selectall-parent {
         border-bottom-color: $ddt-popup-reorder-border;
+        &:focus {
+          background: $ddt-item-hover-bg;
+        }
         .e-all-text {
           color: $ddt-select-all-font-color;
         }
@@ -61677,7 +61681,7 @@ $multiselect-dropicon-closer-bigger-width: 34px !default;
   }
 }
-.e-small .e-multiselect .e-input-group-icon.e-ddl-icon {
+.e-small .e-multiselect:not(.e-outline):not(.e-filled) .e-input-group-icon.e-ddl-icon {
   @if $ddl-multiselect-skin-name == 'Material3' {
     top: 6px;
   }
@@ -61815,7 +61819,7 @@ ejs-multiselect {
     margin-top: $ddl-small-close-hooker-margin-top;
     height: $ddl-small-chip-close-hooker-height;
     width: $ddl-small-chip-close-hooker-width;
-    line-height: 2px;
+    line-height: normal;
   }
 }
@@ -75325,6 +75329,7 @@ $grid-xlfl-skin: 'bootstrap4' !default;
   .sf-grid .e-excelfilter {
     &.e-dialog .e-dlg-content {
       padding-left: 0;
+      padding-right: 0;
     }
     .e-dlg-content {
       overflow: visible;
@@ -81402,7 +81407,7 @@ margin: $grid-group-animator-cell-margin;
   .e-gridheader .e-headercell,
   .e-gridheader .e-detailheadercell,
-  .e-gridheader .e-headercell .e-headercelldiv {
+  .e-gridheader .e-headercell:not(.e-fltr-icon, .e-sort-icon) .e-headercelldiv {
     height: auto;
   }
@@ -87247,8 +87252,18 @@ $treegrid-rtl-rowdd-childborder-width: 1px 0 0 !default;
       td.e-rowcell {
         &.e-dropbottom {
-          border-bottom: $treegrid-rowdd-topbottom-border;
-          box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
+          @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
+            box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
+          }
+          @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
+            box-shadow: 0 2px 0 0 #4f46e5;
+          }
+          @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' {
+            box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
+          }
+          @else {
+            box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
+          }
         }
         &.e-droptop {
           border-top: $treegrid-rowdd-topbottom-border;
@@ -87258,8 +87273,18 @@ $treegrid-rtl-rowdd-childborder-width: 1px 0 0 !default;
       td.e-rowdragdrop {
         &.e-dropbottom {
-          border-bottom: $treegrid-rowdd-topbottom-border;
-          box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
+          @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
+            box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
+          }
+          @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
+            box-shadow: 0 2px 0 0 #4f46e5;
+          }
+          @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' {
+            box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
+          }
+          @else {
+            box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
+          }
         }
         &.e-droptop {
           border-top: $treegrid-rowdd-topbottom-border;

package/SCSS-Themes/bootstrap5-dark.scss CHANGED Viewed

@@ -492,6 +492,7 @@ $error-font-color: $danger !default;
 $warning-font-color: $yellow !default;
 $success-font-color: lighten($green, 10%) !default;
 $information-font-color: $cyan !default;
+$accordion-text-active-color: tint-color($primary, 40%) !default;
 $font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
@@ -1880,12 +1881,12 @@ $acrdn-item-select-exp-hdr-hover-color: $primary !default;
 $acrdn-item-selected-exp-hdr-border-color: $border-light !default;
 $acrdn-item-selected-exp-hdr-border-size: 0 0 1px 0 !default;
 $acrdn-item-selected-exp-hdr-bg: $primary-lighter !default;
-$acrdn-item-selected-exp-hdr-hover-color: $primary !default;
-$acrdn-item-selected-exp-hdr-hover-focus-color: $primary !default;
+$acrdn-item-selected-exp-hdr-hover-color: $accordion-text-active-color !default;
+$acrdn-item-selected-exp-hdr-hover-focus-color: $accordion-text-active-color !default;
 $acrdn-item-selected-exp-hdr-icon-color: $icon-color !default;
 $acrdn-item-selected-exp-hdr-hover-border-color: $border-light !default;
-$acrdn-item-selected-tgl-icon-color: $primary !default;
-$acrdn-item-selected-hdr-font: $primary !default;
+$acrdn-item-selected-tgl-icon-color: $accordion-text-active-color !default;
+$acrdn-item-selected-hdr-font: $accordion-text-active-color !default;
 $acrdn-item-select-hdr-focus-border-color: $border-light !default;
 $acrdn-item-selected-border-color: $border-light !default;
 $acrdn-item-selected-border-size: 0 0 1px 0 !default;
@@ -1896,16 +1897,16 @@ $acrdn-item-selected-header-background: $primary-lighter !default;
 $acrdn-item-selected-hdr-border-color: $border-light !default;
 $acrdn-item-selected-hdr-border-size:  0 0 1px 0 !default;
 $acrdn-item-selected-header-border-radius: 0 !default;
-$acrdn-item-selected-hdr-con-font: $primary !default;
+$acrdn-item-selected-hdr-con-font: $accordion-text-active-color !default;
 $acrdn-item-selected-select-border-color: $border-light !default;
 $acrdn-item-selected-select-border-size: 0 0 1px 0 !default;
-$acrdn-item-selected-hdr-icon-font: $primary !default;
-$acrdn-item-selected-exp-hdr-con-hover-color: $primary !default;
+$acrdn-item-selected-hdr-icon-font: $accordion-text-active-color !default;
+$acrdn-item-selected-exp-hdr-con-hover-color: $accordion-text-active-color !default;
 $acrdn-item-selected-exp-hdr-icon-hover-color: $icon-color !default;
 $acrdn-item-selected-select-active-bg: $content-bg-color !default;
 $acrdn-item-nes-pan-exp-hdr-color: $content-text-color !default;
 $acrdn-item-selected-hdr-hover-border-color: $border-light !default;
-$acrdn-item-selected-hdr-tgl-icon-hover-font: $primary !default;
+$acrdn-item-selected-hdr-tgl-icon-hover-font: $accordion-text-active-color !default;
 $acrdn-item-nes-selected-exp-hover-hdr-icons-font: $primary !default;
 $acrdn-item-nes-selected-exp-hover-hdr-con-font: $content-text-color !default;
 $acrdn-item-exp-not-selected-hdr-focus-bg: none !default;
@@ -59142,6 +59143,7 @@ $ddt-nodata-font-color: $content-text-color !default;
 $ddt-select-all-font-color: $content-text-color !default;
 $ddt-remains-font-color: $content-text-color-alt3 !default;
 $ddt-readonly-input-bg-color: $content-bg-color !default;
+$ddt-item-hover-bg: $content-bg-color-hover !default;
 @mixin ddt-rotate($position) {
   transform: rotate($position);
   transition: transform 300ms ease;
@@ -60692,6 +60694,9 @@ $ddt-readonly-input-bg-color: $content-bg-color !default;
       .e-selectall-parent {
         border-bottom-color: $ddt-popup-reorder-border;
+        &:focus {
+          background: $ddt-item-hover-bg;
+        }
         .e-all-text {
           color: $ddt-select-all-font-color;
         }
@@ -61964,7 +61969,7 @@ $ddl-close-down-icon-left: 35px !default;
   }
 }
-.e-small .e-multiselect .e-input-group-icon.e-ddl-icon {
+.e-small .e-multiselect:not(.e-outline):not(.e-filled) .e-input-group-icon.e-ddl-icon {
   @if $ddl-multiselect-skin-name == 'Material3' {
     top: 6px;
   }
@@ -62102,7 +62107,7 @@ ejs-multiselect {
     margin-top: $ddl-small-close-hooker-margin-top;
     height: $ddl-small-chip-close-hooker-height;
     width: $ddl-small-chip-close-hooker-width;
-    line-height: 2px;
+    line-height: normal;
   }
 }
@@ -75698,6 +75703,7 @@ $grid-xlfl-skin: 'bootstrap5' !default;
   .sf-grid .e-excelfilter {
     &.e-dialog .e-dlg-content {
       padding-left: 0;
+      padding-right: 0;
     }
     .e-dlg-content {
       overflow: visible;
@@ -81768,7 +81774,7 @@ margin: $grid-group-animator-cell-margin;
   .e-gridheader .e-headercell,
   .e-gridheader .e-detailheadercell,
-  .e-gridheader .e-headercell .e-headercelldiv {
+  .e-gridheader .e-headercell:not(.e-fltr-icon, .e-sort-icon) .e-headercelldiv {
     height: auto;
   }
@@ -87624,8 +87630,18 @@ $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;
       td.e-rowcell {
         &.e-dropbottom {
-          border-bottom: $treegrid-rowdd-topbottom-border;
-          box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
+          @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
+            box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
+          }
+          @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
+            box-shadow: 0 2px 0 0 #4f46e5;
+          }
+          @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' {
+            box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
+          }
+          @else {
+            box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
+          }
         }
         &.e-droptop {
           border-top: $treegrid-rowdd-topbottom-border;
@@ -87635,8 +87651,18 @@ $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;
       td.e-rowdragdrop {
         &.e-dropbottom {
-          border-bottom: $treegrid-rowdd-topbottom-border;
-          box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
+          @if $skin-name == 'fluent-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent' {
+            box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
+          }
+          @else if $skin-name == 'bootstrap5' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'material3' {
+            box-shadow: 0 2px 0 0 #4f46e5;
+          }
+          @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' {
+            box-shadow: 0 1px 0 0 $treegrid-rowdd-boxshadow;
+          }
+          @else {
+            box-shadow: 0 2px 0 0 $treegrid-rowdd-boxshadow;
+          }
         }
         &.e-droptop {
           border-top: $treegrid-rowdd-topbottom-border;