npm - @syncfusion/blazor-themes - Versions diffs - 25.2.5 → 25.2.7 - Mend

@syncfusion/blazor-themes 25.2.5 → 25.2.7

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 (109) hide show

package/SCSS-Themes/highcontrast.scss CHANGED Viewed

@@ -24970,7 +24970,10 @@ $sd-active-font-color: $selection-font !default;
   .e-speeddial-popup {
     position: absolute;
     z-index: 100000;
-    pointer-events: none;
+    &:not(.e-speeddial-hover-open) {
+      pointer-events: none;
+    }
     &.e-speeddial-top {
       top: $sd-offset;
@@ -58810,6 +58813,7 @@ $ddt-overflow-count-padding-top: 6px !default;
 $ddt-delim-padding: 6px 10px 0 10px !default;
 $ddt-delim-bigger-padding: 8px 12px 0 12px !default;
 $ddt-remains-count-padding-top: 6px !default;
+$ddt-item-hover-bg: $hover-bg !default;
 @mixin ddt-rotate($position) {
   transform: rotate($position);
   transition: transform 300ms ease;
@@ -60360,6 +60364,9 @@ $ddt-remains-count-padding-top: 6px !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;
         }
@@ -75312,6 +75319,7 @@ $grid-xlfl-skin: 'highcontrast' !default;
   .sf-grid .e-excelfilter {
     &.e-dialog .e-dlg-content {
       padding-left: 0;
+      padding-right: 0;
     }
     .e-dlg-content {
       overflow: visible;
@@ -81375,7 +81383,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;
   }
@@ -87212,8 +87220,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;
@@ -87223,8 +87241,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/material-dark.scss CHANGED Viewed

@@ -25291,7 +25291,10 @@ $sd-active-font-color: $grey-dark-font !default;
   .e-speeddial-popup {
     position: absolute;
     z-index: 100000;
-    pointer-events: none;
+    &:not(.e-speeddial-hover-open) {
+      pointer-events: none;
+    }
     &.e-speeddial-top {
       top: $sd-offset;
@@ -59481,6 +59484,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: rgba($grey-dark-font, .10) !default;
 @mixin ddt-rotate($position) {
   transform: rotate($position);
   transition: transform 300ms ease;
@@ -61031,6 +61035,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;
         }
@@ -76617,6 +76624,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;
@@ -82681,7 +82689,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;
   }
@@ -88524,8 +88532,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;
@@ -88535,8 +88553,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/material.scss CHANGED Viewed

@@ -25214,7 +25214,10 @@ $sd-active-font-color: $base-font !default;
   .e-speeddial-popup {
     position: absolute;
     z-index: 100000;
-    pointer-events: none;
+    &:not(.e-speeddial-hover-open) {
+      pointer-events: none;
+    }
     &.e-speeddial-top {
       top: $sd-offset;
@@ -59223,6 +59226,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 +60777,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;
         }
@@ -76340,6 +76347,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 +82410,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 +88254,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 +88275,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

@@ -25561,7 +25561,10 @@ $sd-active-font-color: $sd-font-color !default;
   .e-speeddial-popup {
     position: absolute;
     z-index: 100000;
-    pointer-events: none;
+    &:not(.e-speeddial-hover-open) {
+      pointer-events: none;
+    }
     &.e-speeddial-top {
       top: $sd-offset;
@@ -59580,7 +59583,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 +61134,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;
         }
@@ -76820,6 +76826,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;
@@ -82897,7 +82904,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;
   }
@@ -88782,8 +88789,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;
@@ -88793,8 +88810,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

@@ -25644,7 +25644,10 @@ $sd-active-font-color: $sd-font-color !default;
   .e-speeddial-popup {
     position: absolute;
     z-index: 100000;
-    pointer-events: none;
+    &:not(.e-speeddial-hover-open) {
+      pointer-events: none;
+    }
     &.e-speeddial-top {
       top: $sd-offset;
@@ -59663,7 +59666,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 +61217,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;
         }
@@ -76903,6 +76909,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;
@@ -82980,7 +82987,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;
   }
@@ -88865,8 +88872,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;
@@ -88876,8 +88893,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/tailwind-dark.scss CHANGED Viewed

@@ -25113,7 +25113,10 @@ $sd-active-font-color: $secondary-text-color !default;
   .e-speeddial-popup {
     position: absolute;
     z-index: 100000;
-    pointer-events: none;
+    &:not(.e-speeddial-hover-open) {
+      pointer-events: none;
+    }
     &.e-speeddial-top {
       top: $sd-offset;
@@ -59085,7 +59088,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 +60639,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;
         }
@@ -75621,6 +75627,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 +81705,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 +87559,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 +87580,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/tailwind.scss CHANGED Viewed

@@ -25110,7 +25110,10 @@ $sd-active-font-color: $secondary-text-color !default;
   .e-speeddial-popup {
     position: absolute;
     z-index: 100000;
-    pointer-events: none;
+    &:not(.e-speeddial-hover-open) {
+      pointer-events: none;
+    }
     &.e-speeddial-top {
       top: $sd-offset;
@@ -59082,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;
@@ -60633,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;
         }
@@ -75618,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;
@@ -81695,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;
   }
@@ -87549,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;
@@ -87560,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;

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

@@ -427,8 +427,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;
@@ -438,8 +448,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;