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/material.scss CHANGED Viewed

@@ -59223,6 +59223,7 @@ $ddt-outline-padding: 10px 12px !default;
 $ddt-outline-chip-padding: 4px 12px !default;
 $ddt-outline-bigger-padding: 15px 16px !default;
 $ddt-bigger-outline-chip-padding: 8px 15px !default;
+$ddt-item-hover-bg: $grey-100 !default;
 @mixin ddt-rotate($position) {
   transform: rotate($position);
   transition: transform 300ms ease;
@@ -60773,6 +60774,9 @@ $ddt-bigger-outline-chip-padding: 8px 15px !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;
         }
@@ -62049,7 +62053,7 @@ $filled-multiselect-chip-hover-bg-color: darken($grey-300, 7%) !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;
   }
@@ -62187,7 +62191,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;
   }
 }
@@ -76340,6 +76344,7 @@ $grid-xlfl-skin: 'material' !default;
   .sf-grid .e-excelfilter {
     &.e-dialog .e-dlg-content {
       padding-left: 0;
+      padding-right: 0;
     }
     .e-dlg-content {
       overflow: visible;
@@ -82402,7 +82407,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;
   }
@@ -88246,8 +88251,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;
@@ -88257,8 +88272,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/material3-dark.scss CHANGED Viewed

@@ -59580,7 +59580,7 @@ $ddt-nodata-font-color: rgba($content-text-color) !default;
 $ddt-select-all-font-color: rgba($content-text-color) !default;
 $ddt-remains-font-color: $grey-600 !default;
 $ddt-readonly-input-bg-color: rgba($content-bg-color) !default;
+$ddt-item-hover-bg: $content-bg-color-hover !default;
 @mixin ddt-rotate($position) {
   transform: rotate($position);
   transition: transform 300ms ease;
@@ -61131,6 +61131,9 @@ $ddt-readonly-input-bg-color: rgba($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;
         }
@@ -62419,7 +62422,7 @@ $ddl-chip-bigger-content-padding: 0 !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;
   }
@@ -62557,7 +62560,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;
   }
 }
@@ -64401,7 +64404,7 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   .e-multiselect.e-outline .e-multi-select-wrapper .e-close-hooker::before {
     @if $ddl-multiselect-skin-name == 'Material3' {
-      content: '\e208';
+      content: '\e7e7';
       font-size: 16px;
       height: 16px;
       margin-top: -8px;
@@ -64412,7 +64415,7 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-close-hooker::before,
   .e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-close-hooker::before {
     @if $ddl-multiselect-skin-name == 'Material3' {
-      content: '\e208';
+      content: '\e7e7';
       font-size: 14px;
       height: 14px;
       margin-top: -7px;
@@ -64423,7 +64426,7 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-close-hooker::before,
   .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper .e-close-hooker::before {
     @if $ddl-multiselect-skin-name == 'Material3' {
-      content: '\e208';
+      content: '\e7e7';
       font-size: 20px;
       height: 20px;
       left: 0;
@@ -64437,7 +64440,7 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-close-hooker::before,
   .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-close-hooker::before {
     @if $ddl-multiselect-skin-name == 'Material3' {
-      content: '\e208';
+      content: '\e7e7';
       font-size: 18px;
       height: 18px;
       left: 0;
@@ -64481,6 +64484,7 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   .e-multiselect.e-outline.e-input-group.e-control-wrapper .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon {
     @if $ddl-multiselect-skin-name == 'Material3' {
       margin: 7px 12px 9px 0;
+      min-height: fit-content;
     }
   }
@@ -64714,7 +64718,7 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   .e-bigger.e-small .e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker::before,
   .e-bigger .e-small.e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker::before,
   .e-small .e-bigger.e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker::before {
-    content: '\e208';
+    content: '\e7e7';
     font-size: 16px;
     height: 16px;
     padding: 0;
@@ -64772,6 +64776,7 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   .e-multiselect.e-filled.e-input-group.e-control-wrapper .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon {
     @if $ddl-multiselect-skin-name == 'Material3' {
       margin: 10px 0 9px;
+      min-height: fit-content;
     }
   }
@@ -64805,6 +64810,7 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   .e-small .e-multiselect.e-filled.e-input-group.e-float-input.e-control-wrapper .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon {
     @if $ddl-multiselect-skin-name == 'Material3' {
       margin: 0 12px 4px 0;
+      min-width: fit-content;
     }
   }
@@ -76817,6 +76823,7 @@ $grid-xlfl-skin: 'material3' !default;
   .sf-grid .e-excelfilter {
     &.e-dialog .e-dlg-content {
       padding-left: 0;
+      padding-right: 0;
     }
     .e-dlg-content {
       overflow: visible;
@@ -82894,7 +82901,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;
   }
@@ -88779,8 +88786,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;
@@ -88790,8 +88807,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/material3.scss CHANGED Viewed

@@ -59663,7 +59663,7 @@ $ddt-nodata-font-color: rgba($content-text-color) !default;
 $ddt-select-all-font-color: rgba($content-text-color) !default;
 $ddt-remains-font-color: $grey-600 !default;
 $ddt-readonly-input-bg-color: rgba($content-bg-color) !default;
+$ddt-item-hover-bg: $content-bg-color-hover !default;
 @mixin ddt-rotate($position) {
   transform: rotate($position);
   transition: transform 300ms ease;
@@ -61214,6 +61214,9 @@ $ddt-readonly-input-bg-color: rgba($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;
         }
@@ -62502,7 +62505,7 @@ $ddl-chip-bigger-content-padding: 0 !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;
   }
@@ -62640,7 +62643,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;
   }
 }
@@ -64484,7 +64487,7 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   .e-multiselect.e-outline .e-multi-select-wrapper .e-close-hooker::before {
     @if $ddl-multiselect-skin-name == 'Material3' {
-      content: '\e208';
+      content: '\e7e7';
       font-size: 16px;
       height: 16px;
       margin-top: -8px;
@@ -64495,7 +64498,7 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-close-hooker::before,
   .e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-close-hooker::before {
     @if $ddl-multiselect-skin-name == 'Material3' {
-      content: '\e208';
+      content: '\e7e7';
       font-size: 14px;
       height: 14px;
       margin-top: -7px;
@@ -64506,7 +64509,7 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-close-hooker::before,
   .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper .e-close-hooker::before {
     @if $ddl-multiselect-skin-name == 'Material3' {
-      content: '\e208';
+      content: '\e7e7';
       font-size: 20px;
       height: 20px;
       left: 0;
@@ -64520,7 +64523,7 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-close-hooker::before,
   .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-close-hooker::before {
     @if $ddl-multiselect-skin-name == 'Material3' {
-      content: '\e208';
+      content: '\e7e7';
       font-size: 18px;
       height: 18px;
       left: 0;
@@ -64564,6 +64567,7 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   .e-multiselect.e-outline.e-input-group.e-control-wrapper .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon {
     @if $ddl-multiselect-skin-name == 'Material3' {
       margin: 7px 12px 9px 0;
+      min-height: fit-content;
     }
   }
@@ -64797,7 +64801,7 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   .e-bigger.e-small .e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker::before,
   .e-bigger .e-small.e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker::before,
   .e-small .e-bigger.e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker::before {
-    content: '\e208';
+    content: '\e7e7';
     font-size: 16px;
     height: 16px;
     padding: 0;
@@ -64855,6 +64859,7 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   .e-multiselect.e-filled.e-input-group.e-control-wrapper .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon {
     @if $ddl-multiselect-skin-name == 'Material3' {
       margin: 10px 0 9px;
+      min-height: fit-content;
     }
   }
@@ -64888,6 +64893,7 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   .e-small .e-multiselect.e-filled.e-input-group.e-float-input.e-control-wrapper .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon {
     @if $ddl-multiselect-skin-name == 'Material3' {
       margin: 0 12px 4px 0;
+      min-width: fit-content;
     }
   }
@@ -76900,6 +76906,7 @@ $grid-xlfl-skin: 'material3' !default;
   .sf-grid .e-excelfilter {
     &.e-dialog .e-dlg-content {
       padding-left: 0;
+      padding-right: 0;
     }
     .e-dlg-content {
       overflow: visible;
@@ -82977,7 +82984,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;
   }
@@ -88862,8 +88869,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;
@@ -88873,8 +88890,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/navigations/accordion/bootstrap5-dark.scss CHANGED Viewed

@@ -150,12 +150,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;
@@ -166,16 +166,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;

package/SCSS-Themes/navigations/accordion/bootstrap5.scss CHANGED Viewed

@@ -150,12 +150,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;
@@ -166,16 +166,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;

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

@@ -59085,7 +59085,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;
@@ -60636,6 +60636,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;
         }
@@ -61913,7 +61916,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;
   }
@@ -62051,7 +62054,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;
   }
 }
@@ -75621,6 +75624,7 @@ $grid-xlfl-skin: 'tailwind' !default;
   .sf-grid .e-excelfilter {
     &.e-dialog .e-dlg-content {
       padding-left: 0;
+      padding-right: 0;
     }
     .e-dlg-content {
       overflow: visible;
@@ -81698,7 +81702,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;
   }
@@ -87552,8 +87556,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;
@@ -87563,8 +87577,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;