@syncfusion/blazor-themes 20.4.53 → 20.4.54

package/SCSS-Themes/grids/grid/fluent-dark.scss

@@ -113,7 +113,7 @@ $grid-font-family: $font-family !default;
 $grid-header-font-size: $text-sm !default;
 $grid-bigger-header-font-size: $text-base !default;
 $grid-group-text-line-height: 22px !default;
-$grid-wrap-line-height: 18px !default;
+$grid-wrap-line-height: 10px !default;
 $grid-wrap-margin-bottom: 2px !default;
 $grid-wrap-margin-top: 0 !default;
 $grid-header-bottom-padding: 7px !default;
@@ -144,8 +144,8 @@ $grid-filterdiv-padding: 0 !default;
 $grid-headercelldiv-height: 29px !default;
 $grid-filterbarcell-input-height: 26px !default;
 $grid-sortnumber-border-radius: 65% !default;
-$grid-textwrap-srotnumber-rightalign-margin: 3px 2px 0 10px !default;
-$grid-textwrap-srotnumber-margin: 3px 5px 0 2px !default;
+$grid-textwrap-srotnumber-rightalign-margin: 5px 2px 0 15px !default;
+$grid-textwrap-srotnumber-margin: 5px 5px 0 2px !default;
 $grid-textwrap-sorticon-margin: -9px 10px !default;
 $grid-columnchooser-header-padding: 11px 18px 15px !default;
 $grid-columnchooser-toolbar-button-padding: 0 12px !default;
@@ -356,6 +356,8 @@ $grid-rtl-group-text-margin-left: 0 !default;
 $grid-rtl-group-sorticon-margin-right: -8px !default;
 $grid-rtl-headercell-border-width: 0 !default;
 $grid-rtl-headercelldiv-padding: 0 .4em 0 1.8em !default;
+$grid-rtl-headercelldiv-chkbox-padding: 0 4px 0 .35em !default;
+$grid-bigger-rtl-headercelldiv-chkbox-padding: 0 4px 0 .3em !default;
 $grid-ungroup-rtl-padding-right: -14px !default;
 $grid-headercelldiv-padding: 0 20px 0 5px !default;
 $grid-headercell-div-padding: 0 .4em !default;
@@ -469,12 +471,12 @@ $grid-grouped-headercell-hover-padding: $grid-grouped-headercell-padding !defaul
 $grid-drag-clone-font-weight: $font-weight-normal !default;
 $grid-bigger-group-headercell-hover-padding: $grid-bigger-group-headercell-padding !default;
 $grid-header-wrap-rightalign-sortfilter-div-margin: -34px -5px !default;
-$grid-header-wrap-filtericon-sortfilter-div-margin: -28px -4px 0 16px !default;
+$grid-header-wrap-filtericon-sortfilter-div-margin: -33px 18px 0 16px !default;
 $grid-bigger-wrap-sortdiv-margin: -31px 8px !default;
 $grid-bigger-wrap-rightalign-sortdiv-margin: -30px -5px !default;
 $grid-bigger-wrap-rightalign-fltricon-sortdiv-margin: -26px -20px 0 0 !default;
 $grid-bigger-wrap-fltricon-sortdiv-margin: -30px 28px -31px 0 !default;
-$grid-header-wrap-filtericon-rightalign-sortfilter-div-margin: -28px 0 !default;
+$grid-header-wrap-filtericon-rightalign-sortfilter-div-margin: -33px 14px !default;
 $grid-drag-font-size: $text-base !default;
 $grid-drag-icon-font-weight: $font-weight-bold !default;
 $grid-drag-move-icon: 10px !default;
@@ -855,9 +857,7 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
-      @if $grid-skin == 'fluent' {
-        padding-right: 4px;
-      }
+      padding: $grid-bigger-rtl-headercelldiv-chkbox-padding;
     }
 
     .e-gridheader .e-columnheader.e-wrap .e-sortfilterdiv,
@@ -2413,11 +2413,10 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
-      @if $grid-skin == 'fluent' {
-        padding-right: 4px;
-      }
+      padding: $grid-rtl-headercelldiv-chkbox-padding;
     }
 
+
     .e-filtermenudiv {
       float: $grid-fltrdiv-float;
       margin: $grid-fltrdiv-margin;
@@ -2530,7 +2529,7 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-wrap .e-columnmenu {
-      margin: $grid-textwrap-column-menu-margin;
+      line-height: $grid-wrap-line-height;
     }
 
     &.e-rtl .e-columnmenu {
@@ -2544,7 +2543,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-wrap {
       &.e-rtl  .e-columnmenu {
-        margin: $grid-rtl-textwrap-column-menu-margin;
+        line-height: $grid-wrap-line-height;
       }
     }
 
@@ -3726,6 +3725,13 @@ $grid-dropitems-count-margin-left: -8px !default;
         margin: $grid-rtl-headercelldiv-rightalign-fltricon-margin;
       }
 
+      &.e-wrap .e-columnheader .e-rightalign.e-fltr-icon .e-headercelldiv,
+      & .e-columnheader.e-wrap .e-rightalign.e-fltr-icon .e-headercelldiv {
+        height: auto;
+        margin-bottom: $grid-wrap-margin-bottom;
+        margin-top: $grid-wrap-margin-top;
+      }
+
       & .e-gridheader .e-sortfilter .e-fltr-icon .e-headercelldiv {
         margin: $grid-rtl-headercelldiv-fltricon-margin;
       }
@@ -4044,7 +4050,8 @@ $grid-dropitems-count-margin-left: -8px !default;
     &.e-wrap {
       & .e-rowcell,
       & .e-columnheader .e-stackedheadercelldiv,
-      & .e-columnheader .e-headercelldiv {
+      & .e-columnheader .e-headercelldiv,
+      & .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
         height: Auto;
         line-height: $grid-rowcell-wrap-height;
         overflow-wrap: break-word;
@@ -4060,25 +4067,30 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-wrap .e-columnheader .e-headercelldiv,
-    & .e-columnheader.e-wrap .e-headercelldiv {
+    &.e-wrap .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv,
+    & .e-columnheader.e-wrap .e-headercelldiv,
+    & .e-columnheader.e-wrap .e-headercell.e-fltr-icon .e-headercelldiv {
       margin-bottom: $grid-wrap-margin-bottom;
       margin-top: $grid-wrap-margin-top;
     }
 
-    &.e-wrap .e-columnheader .e-filtermenudiv {
+    &.e-wrap .e-columnheader .e-filtermenudiv,
+    &.e-wrap .e-columnheader .e-sortfilterdiv .e-filtermenudiv {
       line-height: $grid-wrap-line-height;
     }
 
-    & .e-columnheader.e-wrap .e-filtermenudiv {
+    & .e-columnheader.e-wrap .e-filtermenudiv,
+    & .e-columnheader.e-wrap .e-sortfilterdiv.e-filtermenudiv {
       line-height: $grid-wrap-line-height;
     }
 
     & .e-columnheader.e-wrap .e-headercelldiv,
+    & .e-columnheader.e-wrap .e-headercell.e-fltr-icon .e-headercelldiv,
     & .e-columnheader.e-wrap .e-stackedheadercelldiv,
     & .e-gridcontent.e-wrap .e-rowcell,
     & .e-frozenhdrcont.e-wrap .e-rowcell {
       height: Auto;
-      line-height: $grid-wrap-line-height;
+      line-height: $grid-rowcell-wrap-height;
       overflow-wrap: break-word;
       text-overflow: clip;
       white-space: normal;
@@ -5265,8 +5277,8 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
     &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse,
-    &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):hover .e-rowdragdrop,
-    &.e-rtl .e-gridhover tr[role = 'row']:not(.e-disable-gridhover):hover .e-rowdragdrop,
+    &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
+    &.e-rtl .e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
     &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
       &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
         background-color: $grid-hover-bg-color;

package/SCSS-Themes/grids/grid/fluent.scss

@@ -113,7 +113,7 @@ $grid-font-family: $font-family !default;
 $grid-header-font-size: $text-sm !default;
 $grid-bigger-header-font-size: $text-base !default;
 $grid-group-text-line-height: 22px !default;
-$grid-wrap-line-height: 18px !default;
+$grid-wrap-line-height: 10px !default;
 $grid-wrap-margin-bottom: 2px !default;
 $grid-wrap-margin-top: 0 !default;
 $grid-header-bottom-padding: 7px !default;
@@ -144,8 +144,8 @@ $grid-filterdiv-padding: 0 !default;
 $grid-headercelldiv-height: 29px !default;
 $grid-filterbarcell-input-height: 26px !default;
 $grid-sortnumber-border-radius: 65% !default;
-$grid-textwrap-srotnumber-rightalign-margin: 3px 2px 0 10px !default;
-$grid-textwrap-srotnumber-margin: 3px 5px 0 2px !default;
+$grid-textwrap-srotnumber-rightalign-margin: 5px 2px 0 15px !default;
+$grid-textwrap-srotnumber-margin: 5px 5px 0 2px !default;
 $grid-textwrap-sorticon-margin: -9px 10px !default;
 $grid-columnchooser-header-padding: 11px 18px 15px !default;
 $grid-columnchooser-toolbar-button-padding: 0 12px !default;
@@ -356,6 +356,8 @@ $grid-rtl-group-text-margin-left: 0 !default;
 $grid-rtl-group-sorticon-margin-right: -8px !default;
 $grid-rtl-headercell-border-width: 0 !default;
 $grid-rtl-headercelldiv-padding: 0 .4em 0 1.8em !default;
+$grid-rtl-headercelldiv-chkbox-padding: 0 4px 0 .35em !default;
+$grid-bigger-rtl-headercelldiv-chkbox-padding: 0 4px 0 .3em !default;
 $grid-ungroup-rtl-padding-right: -14px !default;
 $grid-headercelldiv-padding: 0 20px 0 5px !default;
 $grid-headercell-div-padding: 0 .4em !default;
@@ -469,12 +471,12 @@ $grid-grouped-headercell-hover-padding: $grid-grouped-headercell-padding !defaul
 $grid-drag-clone-font-weight: $font-weight-normal !default;
 $grid-bigger-group-headercell-hover-padding: $grid-bigger-group-headercell-padding !default;
 $grid-header-wrap-rightalign-sortfilter-div-margin: -34px -5px !default;
-$grid-header-wrap-filtericon-sortfilter-div-margin: -28px -4px 0 16px !default;
+$grid-header-wrap-filtericon-sortfilter-div-margin: -33px 18px 0 16px !default;
 $grid-bigger-wrap-sortdiv-margin: -31px 8px !default;
 $grid-bigger-wrap-rightalign-sortdiv-margin: -30px -5px !default;
 $grid-bigger-wrap-rightalign-fltricon-sortdiv-margin: -26px -20px 0 0 !default;
 $grid-bigger-wrap-fltricon-sortdiv-margin: -30px 28px -31px 0 !default;
-$grid-header-wrap-filtericon-rightalign-sortfilter-div-margin: -28px 0 !default;
+$grid-header-wrap-filtericon-rightalign-sortfilter-div-margin: -33px 14px !default;
 $grid-drag-font-size: $text-base !default;
 $grid-drag-icon-font-weight: $font-weight-bold !default;
 $grid-drag-move-icon: 10px !default;
@@ -855,9 +857,7 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
-      @if $grid-skin == 'fluent' {
-        padding-right: 4px;
-      }
+      padding: $grid-bigger-rtl-headercelldiv-chkbox-padding;
     }
 
     .e-gridheader .e-columnheader.e-wrap .e-sortfilterdiv,
@@ -2413,11 +2413,10 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
-      @if $grid-skin == 'fluent' {
-        padding-right: 4px;
-      }
+      padding: $grid-rtl-headercelldiv-chkbox-padding;
     }
 
+
     .e-filtermenudiv {
       float: $grid-fltrdiv-float;
       margin: $grid-fltrdiv-margin;
@@ -2530,7 +2529,7 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-wrap .e-columnmenu {
-      margin: $grid-textwrap-column-menu-margin;
+      line-height: $grid-wrap-line-height;
     }
 
     &.e-rtl .e-columnmenu {
@@ -2544,7 +2543,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-wrap {
       &.e-rtl  .e-columnmenu {
-        margin: $grid-rtl-textwrap-column-menu-margin;
+        line-height: $grid-wrap-line-height;
       }
     }
 
@@ -3726,6 +3725,13 @@ $grid-dropitems-count-margin-left: -8px !default;
         margin: $grid-rtl-headercelldiv-rightalign-fltricon-margin;
       }
 
+      &.e-wrap .e-columnheader .e-rightalign.e-fltr-icon .e-headercelldiv,
+      & .e-columnheader.e-wrap .e-rightalign.e-fltr-icon .e-headercelldiv {
+        height: auto;
+        margin-bottom: $grid-wrap-margin-bottom;
+        margin-top: $grid-wrap-margin-top;
+      }
+
       & .e-gridheader .e-sortfilter .e-fltr-icon .e-headercelldiv {
         margin: $grid-rtl-headercelldiv-fltricon-margin;
       }
@@ -4044,7 +4050,8 @@ $grid-dropitems-count-margin-left: -8px !default;
     &.e-wrap {
       & .e-rowcell,
       & .e-columnheader .e-stackedheadercelldiv,
-      & .e-columnheader .e-headercelldiv {
+      & .e-columnheader .e-headercelldiv,
+      & .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
         height: Auto;
         line-height: $grid-rowcell-wrap-height;
         overflow-wrap: break-word;
@@ -4060,25 +4067,30 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-wrap .e-columnheader .e-headercelldiv,
-    & .e-columnheader.e-wrap .e-headercelldiv {
+    &.e-wrap .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv,
+    & .e-columnheader.e-wrap .e-headercelldiv,
+    & .e-columnheader.e-wrap .e-headercell.e-fltr-icon .e-headercelldiv {
       margin-bottom: $grid-wrap-margin-bottom;
       margin-top: $grid-wrap-margin-top;
     }
 
-    &.e-wrap .e-columnheader .e-filtermenudiv {
+    &.e-wrap .e-columnheader .e-filtermenudiv,
+    &.e-wrap .e-columnheader .e-sortfilterdiv .e-filtermenudiv {
       line-height: $grid-wrap-line-height;
     }
 
-    & .e-columnheader.e-wrap .e-filtermenudiv {
+    & .e-columnheader.e-wrap .e-filtermenudiv,
+    & .e-columnheader.e-wrap .e-sortfilterdiv.e-filtermenudiv {
       line-height: $grid-wrap-line-height;
     }
 
     & .e-columnheader.e-wrap .e-headercelldiv,
+    & .e-columnheader.e-wrap .e-headercell.e-fltr-icon .e-headercelldiv,
     & .e-columnheader.e-wrap .e-stackedheadercelldiv,
     & .e-gridcontent.e-wrap .e-rowcell,
     & .e-frozenhdrcont.e-wrap .e-rowcell {
       height: Auto;
-      line-height: $grid-wrap-line-height;
+      line-height: $grid-rowcell-wrap-height;
       overflow-wrap: break-word;
       text-overflow: clip;
       white-space: normal;
@@ -5265,8 +5277,8 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
     &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse,
-    &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):hover .e-rowdragdrop,
-    &.e-rtl .e-gridhover tr[role = 'row']:not(.e-disable-gridhover):hover .e-rowdragdrop,
+    &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
+    &.e-rtl .e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
     &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
       &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
         background-color: $grid-hover-bg-color;

package/SCSS-Themes/grids/grid/highcontrast.scss

@@ -87,6 +87,8 @@ $grid-indentcell-border-width: 0 1px 0 0 !default;
 $grid-headercelldiv-line-height: 29px !default;
 $grid-bigger-headercelldiv-line-height: $grid-headercelldiv-line-height !default;
 $grid-rtl-headercelldiv-padding: 0 .6em 0 1.8em !default;
+$grid-rtl-headercelldiv-chkbox-padding: 0 0 0 0 !default;
+$grid-bigger-rtl-headercelldiv-chkbox-padding: 0 0 0 .2em !default;
 $grid-td-checkbox-margin-top: 5px !default;
 $grid-groupdroparea-rtl-text-align: center !default;
 $grid-gd-clone-border-radius: 0 !default;
@@ -456,12 +458,12 @@ $grid-bigger-group-headercell-hover-padding: 0 9px !default;
 
 $grid-header-wrap-sortfilter-div-margin: -18px 11px !default;
 $grid-header-wrap-rightalign-sortfilter-div-margin: -17px 10px 0 0 !default;
-$grid-header-wrap-filtericon-sortfilter-div-margin: -16px 30px !default;
+$grid-header-wrap-filtericon-sortfilter-div-margin: -17px 18px !default;
 $grid-bigger-wrap-sortdiv-margin: -19px 6px !default;
 $grid-bigger-wrap-rightalign-sortdiv-margin: -19px -4px !default;
 $grid-bigger-wrap-fltricon-sortdiv-margin: -17px 11px !default;
 $grid-bigger-wrap-rightalign-fltricon-sortdiv-margin: -18px 11px !default;
-$grid-header-wrap-filtericon-rightalign-sortfilter-div-margin: -15px 8px !default;
+$grid-header-wrap-filtericon-rightalign-sortfilter-div-margin: -17px 8px !default;
 
 $grid-drag-font-size: 12px !default;
 $grid-drag-icon-font-weight: bold !default;
@@ -496,7 +498,7 @@ $grid-bigger-fltr-sortnumber-margin: $grid-bigger-sortnumber-margin !default;
 $grid-rtl-searchclear: 0 !default;
 $grid-column-chosser-searchdiv-top: -46px !default;
 $grid-reorderarrow-font-size: 8px !default;
-$grid-bigger-wrap-line-height: $grid-wrap-line-height !default;
+$grid-bigger-wrap-line-height: 18px !default;
 $grid-bigger-clone-padding: $grid-clone-padding !default;
 $grid-bigger-draganddrop-clone-padding: $grid-clone-padding !default;
 $grouped-bigger-text-font-size: $grouped-text-font-size !default;
@@ -860,9 +862,7 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
-      @if $grid-skin == 'fluent' {
-        padding-right: 4px;
-      }
+      padding: $grid-bigger-rtl-headercelldiv-chkbox-padding;
     }
 
     .e-gridheader .e-columnheader.e-wrap .e-sortfilterdiv,
@@ -2418,11 +2418,10 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
-      @if $grid-skin == 'fluent' {
-        padding-right: 4px;
-      }
+      padding: $grid-rtl-headercelldiv-chkbox-padding;
     }
 
+
     .e-filtermenudiv {
       float: $grid-fltrdiv-float;
       margin: $grid-fltrdiv-margin;
@@ -2535,7 +2534,7 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-wrap .e-columnmenu {
-      margin: $grid-textwrap-column-menu-margin;
+      line-height: $grid-wrap-line-height;
     }
 
     &.e-rtl .e-columnmenu {
@@ -2549,7 +2548,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-wrap {
       &.e-rtl  .e-columnmenu {
-        margin: $grid-rtl-textwrap-column-menu-margin;
+        line-height: $grid-wrap-line-height;
       }
     }
 
@@ -3731,6 +3730,13 @@ $grid-dropitems-count-margin-left: -8px !default;
         margin: $grid-rtl-headercelldiv-rightalign-fltricon-margin;
       }
 
+      &.e-wrap .e-columnheader .e-rightalign.e-fltr-icon .e-headercelldiv,
+      & .e-columnheader.e-wrap .e-rightalign.e-fltr-icon .e-headercelldiv {
+        height: auto;
+        margin-bottom: $grid-wrap-margin-bottom;
+        margin-top: $grid-wrap-margin-top;
+      }
+
       & .e-gridheader .e-sortfilter .e-fltr-icon .e-headercelldiv {
         margin: $grid-rtl-headercelldiv-fltricon-margin;
       }
@@ -4049,7 +4055,8 @@ $grid-dropitems-count-margin-left: -8px !default;
     &.e-wrap {
       & .e-rowcell,
       & .e-columnheader .e-stackedheadercelldiv,
-      & .e-columnheader .e-headercelldiv {
+      & .e-columnheader .e-headercelldiv,
+      & .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
         height: Auto;
         line-height: $grid-rowcell-wrap-height;
         overflow-wrap: break-word;
@@ -4065,25 +4072,30 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-wrap .e-columnheader .e-headercelldiv,
-    & .e-columnheader.e-wrap .e-headercelldiv {
+    &.e-wrap .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv,
+    & .e-columnheader.e-wrap .e-headercelldiv,
+    & .e-columnheader.e-wrap .e-headercell.e-fltr-icon .e-headercelldiv {
       margin-bottom: $grid-wrap-margin-bottom;
       margin-top: $grid-wrap-margin-top;
     }
 
-    &.e-wrap .e-columnheader .e-filtermenudiv {
+    &.e-wrap .e-columnheader .e-filtermenudiv,
+    &.e-wrap .e-columnheader .e-sortfilterdiv .e-filtermenudiv {
       line-height: $grid-wrap-line-height;
     }
 
-    & .e-columnheader.e-wrap .e-filtermenudiv {
+    & .e-columnheader.e-wrap .e-filtermenudiv,
+    & .e-columnheader.e-wrap .e-sortfilterdiv.e-filtermenudiv {
       line-height: $grid-wrap-line-height;
     }
 
     & .e-columnheader.e-wrap .e-headercelldiv,
+    & .e-columnheader.e-wrap .e-headercell.e-fltr-icon .e-headercelldiv,
     & .e-columnheader.e-wrap .e-stackedheadercelldiv,
     & .e-gridcontent.e-wrap .e-rowcell,
     & .e-frozenhdrcont.e-wrap .e-rowcell {
       height: Auto;
-      line-height: $grid-wrap-line-height;
+      line-height: $grid-rowcell-wrap-height;
       overflow-wrap: break-word;
       text-overflow: clip;
       white-space: normal;
@@ -5270,8 +5282,8 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
     &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse,
-    &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):hover .e-rowdragdrop,
-    &.e-rtl .e-gridhover tr[role = 'row']:not(.e-disable-gridhover):hover .e-rowdragdrop,
+    &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
+    &.e-rtl .e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
     &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
       &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
         background-color: $grid-hover-bg-color;

package/SCSS-Themes/grids/grid/material-dark.scss

@@ -61,7 +61,7 @@ $grid-group-clone-text-align: center !default;
 $grid-group-unpgroupicon-margin-top: 0 !default;
 $grid-ungroup-rtl-padding-right: 6px !default;
 $filter-text-color: $content-font-color !default;
-$grid-wrap-line-height: 18px !default;
+$grid-wrap-line-height: 3px !default;
 $grid-wrap-margin-bottom: 2px !default;
 $grid-wrap-margin-top: 0 !default;
 
@@ -78,6 +78,8 @@ $grouped-text-font-size: 13px !default;
 $grid-filtercell-both-border-width: 1px 0 0 1px !default;
 $grid-headercelldiv-margin: -7px !default;
 $grid-rtl-headercelldiv-padding: 0 .6em 0 1.8em !default;
+$grid-rtl-headercelldiv-chkbox-padding: 0 .6em 0 .55em !default;
+$grid-bigger-rtl-headercelldiv-chkbox-padding: 0 .6em 0 1.15em !default;
 $grid-headercelldiv-padding: 0 1.8em 0 .6em !default;
 $grid-headercelldiv-right-align-padding: 0 .6em 0 1.9em !default;
 $grid-filterbarcell-text-input: 26px !default;
@@ -96,8 +98,8 @@ $grid-sortdiv-padding: 3px !default;
 $grid-sortnumer-line-height: 16px !default;
 $grid-bigger-sortnumer-line-height: $grid-sortnumer-line-height !default;
 $grid-sortnumber-border-radius: 65% !default;
-$grid-textwrap-srotnumber-rightalign-margin: 3px 2px 0 5px !default;
-$grid-textwrap-srotnumber-margin: 3px 5px 0 2px !default;
+$grid-textwrap-srotnumber-rightalign-margin: 1px 2px 0 15px !default;
+$grid-textwrap-srotnumber-margin: 2px -5px 0 2px !default;
 $grid-textwrap-sorticon-margin: -9px 10px !default;
 $grid-columnchooser-header-padding: 11px 18px 15px !default;
 $grid-cc-checkbox-padding-left: 9px !default;
@@ -230,18 +232,18 @@ $grid-rtl-headercelldiv-fltricon-padding: 0 1.6em 0 10px !default;
 $grid-sortnumber-filtericon-rightalign-margin: 7px 2px 0 5px !default;
 $grid-bigger-checkbox-filter-min-height: 352px !default;
 $grid-checkbox-filter-min-height: 322px !default;
-$grid-rtl-bigger-fltricon-sortdiv-margin: -15px 30px 0 0 !default;
-$grid-rtl-bigger-fltricon-sortdiv-rightalign-margin: -16px 10px !default;
+$grid-rtl-bigger-fltricon-sortdiv-margin: -20px 30px 0 14px !default;
+$grid-rtl-bigger-fltricon-sortdiv-rightalign-margin: -20px 14px !default;
 $grid-rows-bg-color: $grey-dark !default;
 $grid-resize-border-width: 1px !default;
 $grid-filterbarcell-input-padding: 0 26px 0 10px !default;
 $grid-header-wrap-rightalign-sortfilter-div-margin: -18px 5px !default;
-$grid-header-wrap-filtericon-sortfilter-div-margin: -11px 24px !default;
+$grid-header-wrap-filtericon-sortfilter-div-margin: -20px 18px !default;
 $grid-bigger-wrap-sortdiv-margin: -20px 8px !default;
 $grid-bigger-wrap-rightalign-sortdiv-margin: -20px 2px !default;
 $grid-bigger-wrap-fltricon-sortdiv-margin: -10px 18px !default;
 $grid-bigger-wrap-rightalign-fltricon-sortdiv-margin: -12px 2px !default;
-$grid-header-wrap-filtericon-rightalign-sortfilter-div-margin: -10px 5px !default;
+$grid-header-wrap-filtericon-rightalign-sortfilter-div-margin: -20px 14px !default;
 $grid-header-padding: 21px !default;
 $grid-header-first-last-cell-padding: 21px !default;
 $grid-header-bottom-padding: 0 !default;
@@ -495,7 +497,7 @@ $grid-bigger-fltr-sortnumber-margin: $grid-bigger-sortnumber-margin !default;
 $grid-rtl-searchclear: 0 !default;
 $grid-column-chosser-searchdiv-top: -46px !default;
 $grid-reorderarrow-font-size: 8px !default;
-$grid-bigger-wrap-line-height: $grid-wrap-line-height !default;
+$grid-bigger-wrap-line-height: 18px !default;
 $grid-bigger-clone-padding: $grid-clone-padding !default;
 $grid-bigger-draganddrop-clone-padding: 0 !default;
 $grouped-bigger-text-font-size: $grouped-text-font-size !default;
@@ -861,9 +863,7 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
-      @if $grid-skin == 'fluent' {
-        padding-right: 4px;
-      }
+      padding: $grid-bigger-rtl-headercelldiv-chkbox-padding;
     }
 
     .e-gridheader .e-columnheader.e-wrap .e-sortfilterdiv,
@@ -2419,11 +2419,10 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
-      @if $grid-skin == 'fluent' {
-        padding-right: 4px;
-      }
+      padding: $grid-rtl-headercelldiv-chkbox-padding;
     }
 
+
     .e-filtermenudiv {
       float: $grid-fltrdiv-float;
       margin: $grid-fltrdiv-margin;
@@ -2536,7 +2535,7 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-wrap .e-columnmenu {
-      margin: $grid-textwrap-column-menu-margin;
+      line-height: $grid-wrap-line-height;
     }
 
     &.e-rtl .e-columnmenu {
@@ -2550,7 +2549,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-wrap {
       &.e-rtl  .e-columnmenu {
-        margin: $grid-rtl-textwrap-column-menu-margin;
+        line-height: $grid-wrap-line-height;
       }
     }
 
@@ -3732,6 +3731,13 @@ $grid-dropitems-count-margin-left: -8px !default;
         margin: $grid-rtl-headercelldiv-rightalign-fltricon-margin;
       }
 
+      &.e-wrap .e-columnheader .e-rightalign.e-fltr-icon .e-headercelldiv,
+      & .e-columnheader.e-wrap .e-rightalign.e-fltr-icon .e-headercelldiv {
+        height: auto;
+        margin-bottom: $grid-wrap-margin-bottom;
+        margin-top: $grid-wrap-margin-top;
+      }
+
       & .e-gridheader .e-sortfilter .e-fltr-icon .e-headercelldiv {
         margin: $grid-rtl-headercelldiv-fltricon-margin;
       }
@@ -4050,7 +4056,8 @@ $grid-dropitems-count-margin-left: -8px !default;
     &.e-wrap {
       & .e-rowcell,
       & .e-columnheader .e-stackedheadercelldiv,
-      & .e-columnheader .e-headercelldiv {
+      & .e-columnheader .e-headercelldiv,
+      & .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
         height: Auto;
         line-height: $grid-rowcell-wrap-height;
         overflow-wrap: break-word;
@@ -4066,25 +4073,30 @@ $grid-dropitems-count-margin-left: -8px !default;
     }
 
     &.e-wrap .e-columnheader .e-headercelldiv,
-    & .e-columnheader.e-wrap .e-headercelldiv {
+    &.e-wrap .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv,
+    & .e-columnheader.e-wrap .e-headercelldiv,
+    & .e-columnheader.e-wrap .e-headercell.e-fltr-icon .e-headercelldiv {
       margin-bottom: $grid-wrap-margin-bottom;
       margin-top: $grid-wrap-margin-top;
     }
 
-    &.e-wrap .e-columnheader .e-filtermenudiv {
+    &.e-wrap .e-columnheader .e-filtermenudiv,
+    &.e-wrap .e-columnheader .e-sortfilterdiv .e-filtermenudiv {
       line-height: $grid-wrap-line-height;
     }
 
-    & .e-columnheader.e-wrap .e-filtermenudiv {
+    & .e-columnheader.e-wrap .e-filtermenudiv,
+    & .e-columnheader.e-wrap .e-sortfilterdiv.e-filtermenudiv {
       line-height: $grid-wrap-line-height;
     }
 
     & .e-columnheader.e-wrap .e-headercelldiv,
+    & .e-columnheader.e-wrap .e-headercell.e-fltr-icon .e-headercelldiv,
     & .e-columnheader.e-wrap .e-stackedheadercelldiv,
     & .e-gridcontent.e-wrap .e-rowcell,
     & .e-frozenhdrcont.e-wrap .e-rowcell {
       height: Auto;
-      line-height: $grid-wrap-line-height;
+      line-height: $grid-rowcell-wrap-height;
       overflow-wrap: break-word;
       text-overflow: clip;
       white-space: normal;
@@ -5271,8 +5283,8 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
     &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse,
-    &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):hover .e-rowdragdrop,
-    &.e-rtl .e-gridhover tr[role = 'row']:not(.e-disable-gridhover):hover .e-rowdragdrop,
+    &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
+    &.e-rtl .e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
     &.e-gridhover tr[role = 'row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
       &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
         background-color: $grid-hover-bg-color;