@syncfusion/blazor-themes 27.1.53 → 27.1.55

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

@@ -98,6 +98,8 @@ $grid-headercelldiv-height: 29px !default;
 $grid-filterbarcell-input-height: 26px !default;
 $grid-textwrap-srotnumber-rightalign-margin: 3px 2px 0 15px !default;
 $grid-textwrap-srotnumber-margin: 3px -5px 0 2px !default;
+$grid-bigger-textwrap-sortnumber-margin: 2px 0 0 !default;
+$grid-rtl-bigger-textwrap-sortnumber-margin: 0 0 0 3px !default;
 $grid-columnchooser-header-padding: 11px 18px 15px !default;
 $grid-columnchooser-ul-padding: 0 !default;
 $grid-column-chosser-searchdiv-opactiy: .6 !default;
@@ -232,8 +234,8 @@ $grid-first-last-rowcell-padding: 10px !default;
 $grid-content-padding: 7px !default;
 $grid-content-right-padding: 8px !default;
 $grid-header-wrap-sortfilter-div-margin: -17px 11px 0 0 !default;
-$grid-rtl-textwrap-sorticon-margin: -17px 17px !default;
-$grid-rtl-textwrap-sorticon-rightalign-margin: -17px 17px !default;
+$grid-rtl-textwrap-sorticon-margin: -17px 17px -17px 12px !default;
+$grid-rtl-textwrap-sorticon-rightalign-margin: -17px 17px -17px 10px !default;
 $grid-content-font-size: 13px !default;
 $grid-header-height: 29px !default;
 $grid-bigger-header-height: $grid-header-height !default;
@@ -434,6 +436,8 @@ $grid-rtl-fltrdiv-padding: 7px !default;
 $grid-fltrdiv-margin: -24px -7px !default;
 $grid-rtl-fltrdiv-margin: -25px 0 -24px -5px !default;
 $grid-rtl-bigger-fltrdiv-margin: -27px 0 -26px -5px !default;
+$grid-rtl-bigger-wrap-fltrdiv-margin: -28px 4px -14px -2px !default;
+$grid-rtl-wrap-fltrdiv-margin: -25px -7px -24px !default;
 $grid-filtered-color: $theme-primary !default;
 $grid-autofill-color: $theme-primary !default;
 $grid-e-firstrow-dragborder-bcolor: $theme-primary !default;
@@ -476,8 +480,11 @@ $grid-content-batch-font-color: $grid-content-font-color !default;
 $grid-bigger-group-headercell-hover-padding: $grid-bigger-group-headercell-padding !default;
 $grid-header-wrap-rightalign-sortfilter-div-margin: -17px 10px 0 0 !default;
 $grid-header-wrap-filtericon-sortfilter-div-margin: -17px 18px 0 14px !default;
+$grid-header-wrap-filtermenu-div-margin: -24px -7px !default;
 $grid-bigger-wrap-sortdiv-margin: -19px 6px !default;
 $grid-bigger-wrap-rightalign-sortdiv-margin: -19px -4px !default;
+$grid-bigger-rtl-wrap-rightalign-sortdiv-margin: -19px 0 0 12px !default;
+$grid-bigger-rtl-wrap-fltricon-sortdiv-margin: -19px 0 0 12px !default;
 $grid-bigger-wrap-fltricon-sortdiv-margin: -17px 20px !default;
 $grid-bigger-wrap-rightalign-fltricon-sortdiv-margin: -17px 0 !default;
 $grid-header-wrap-filtericon-rightalign-sortfilter-div-margin: -17px 14px !default;
@@ -528,6 +535,7 @@ $grid-bigger-ungroupbutton-icon-margin-right: 0 !default;
 $grid-bigger-ungroupbutton-icon-padding-top: 0 !default;
 $grid-bigger-font-size: $grid-font-size !default;
 $grid-rtl-bigger-rightalign-fltrdiv-margin: $grid-rtl-bigger-fltrdiv-margin !default;
+$grid-rtl-bigger-wrap-rightalign-fltrdiv-margin: -28px 4px -14px -2px !default;
 $grid-bigger-rtl-ungroup-icon-margin-left: 0 !default;
 $grid-grouparea-font-weight: lighter !default;
 $grid-ungroup-rtl-margin-left: 0 !default;
@@ -3553,20 +3561,20 @@ $grid-checkmark-color: $theme-primary-font !default;
         padding-left: $grid-header-first-last-cell-padding;
       }
 
-      &.e-wrap .e-gridheader {
+      &.e-wrap .e-columnheader {
         .e-rightalign .e-sortnumber {
           margin: $grid-rtl-textwrap-srotnumber-rightalign-margin;
         }
-  
+
         .e-sortnumber {
           margin: $grid-rtl-textwrap-srotnumber-margin;
         }
-  
-        .e-sortfilterdiv {
+
+        .e-fltr-icon .e-sortfilterdiv {
           margin: $grid-rtl-textwrap-sorticon-margin;
         }
-  
-        .e-rightalign .e-sortfilterdiv {
+
+        .e-fltr-icon.e-rightalign .e-sortfilterdiv {
           margin: $grid-rtl-textwrap-sorticon-rightalign-margin;
         }
       }
@@ -4007,6 +4015,7 @@ $grid-checkmark-color: $theme-primary-font !default;
       .e-filtermenudiv,
       .e-sortfilterdiv .e-filtermenudiv  {
         line-height: $grid-wrap-line-height;
+        margin: $grid-header-wrap-filtermenu-div-margin;
       }
 
       .e-sortfilterdiv {
@@ -4030,6 +4039,13 @@ $grid-checkmark-color: $theme-primary-font !default;
       }
     }
 
+    &.e-wrap.e-rtl .e-columnheader {
+      .e-filtermenudiv,
+      .e-sortfilterdiv .e-filtermenudiv  {
+        margin: $grid-rtl-wrap-fltrdiv-margin;
+      }
+    }
+
     & .e-columnheader.e-wrap {
       .e-headercelldiv,
       .e-headercell.e-fltr-icon .e-headercelldiv {
@@ -4133,9 +4149,12 @@ $grid-checkmark-color: $theme-primary-font !default;
     }
 
     & .e-mask {
-      display: inline-block;
-      height: 10px;
-      width: 80%;
+
+      &.e-skeleton {
+        display: inline-block;
+        height: 10px;
+        width: 80%;
+      }
 
       &.e-mask-group-intent {
         margin-left: 7px;
@@ -6053,6 +6072,14 @@ $grid-checkmark-color: $theme-primary-font !default;
       padding: $grid-bigger-headercell-top-padding $grid-bigger-headercell-padding $grid-bigger-headercell-bootom-padding;
     }
 
+    .e-grid .e-gridheader .e-resizetable tr th:first-child {
+      padding-left: $grid-bigger-headercell-padding;
+    }
+
+    .e-grid .e-gridheader .e-resizetable tr th:last-child {
+      padding-right: $grid-bigger-headercell-padding;
+    }
+
     &.e-grid-autofit .e-headercell {
       padding: $grid-bigger-headercell-autofit-padding;
     }
@@ -6177,6 +6204,38 @@ $grid-checkmark-color: $theme-primary-font !default;
       }
     }
 
+    &.e-wrap .e-columnheader {
+      .e-sortfilterdiv {
+        margin: $grid-bigger-wrap-sortdiv-margin;
+      }
+      
+      .e-fltr-icon .e-sortfilterdiv {
+        margin: $grid-bigger-wrap-fltricon-sortdiv-margin;
+      }
+
+      .e-fltr-icon.e-rightalign .e-sortfilterdiv {
+        margin: $grid-bigger-wrap-rightalign-sortdiv-margin;
+      }
+
+      & .e-fltr-icon .e-sortnumber {
+        margin: $grid-bigger-textwrap-sortnumber-margin;
+      }
+    }
+
+    &.e-wrap.e-rtl .e-headercell.e-fltr-icon .e-headercelldiv .e-sortnumber {
+      margin: $grid-rtl-bigger-textwrap-sortnumber-margin;
+    }
+
+    &.e-wrap.e-rtl .e-columnheader {
+      .e-fltr-icon .e-sortfilterdiv {
+        margin: $grid-bigger-rtl-wrap-fltricon-sortdiv-margin;
+      }
+
+      .e-fltr-icon.e-rightalign .e-sortfilterdiv {
+        margin: $grid-bigger-rtl-wrap-rightalign-sortdiv-margin;
+      }
+    }
+
     .e-headercelldiv {
       font-size: $grid-bigger-headercell-font-size;
     }
@@ -6247,6 +6306,18 @@ $grid-checkmark-color: $theme-primary-font !default;
       margin: $grid-bigger-fltrdiv-margin;
     }
 
+    &.e-wrap .e-filtermenudiv {
+      @if $grid-skin == 'material' {
+        margin: -25px -2px -12px 8px;
+      }
+      @if $grid-skin == 'fabric' {
+        margin: -26px -7px -24px;
+      }
+      @if $grid-skin == 'bootstrap5' or $grid-skin == 'bootstrap5.3' {
+        margin: -14px -2px -14px 4px;
+      }
+    }
+
     .e-sortfilterdiv {
       margin: $grid-bigger-sortdiv-margin;
     }
@@ -6310,6 +6381,16 @@ $grid-checkmark-color: $theme-primary-font !default;
       .e-rightalign .e-filtermenudiv {
         margin: $grid-rtl-bigger-rightalign-fltrdiv-margin;
       }
+
+      &.e-wrap {
+        .e-filtermenudiv {
+          margin: $grid-rtl-bigger-wrap-fltrdiv-margin;
+        }
+    
+        .e-rightalign .e-filtermenudiv {
+          margin: $grid-rtl-bigger-wrap-rightalign-fltrdiv-margin;
+        }
+      }
   
       .e-headercell .e-headercelldiv .e-sortnumber,
       .e-detailheadercell .e-headercelldiv .e-sortnumber {
@@ -7911,9 +7992,11 @@ $grid-checkmark-color: $theme-primary-font !default;
             }
   
             & .e-mask {
-              display: inline-block;
-              height: 10px;
-              width: 80%;
+              &.e-skeleton {
+                display: inline-block;
+                height: 10px;
+                width: 80%;
+              }
 
               &.e-mask-checkbox-filter-intent {
                 width: 13px;

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

@@ -147,6 +147,8 @@ $grid-filterbarcell-input-height: 26px !default;
 $grid-sortnumber-border-radius: 65% !default;
 $grid-textwrap-srotnumber-rightalign-margin: 5px 2px 0 15px !default;
 $grid-textwrap-srotnumber-margin: 5px 5px 0 2px !default;
+$grid-bigger-textwrap-sortnumber-margin: 2px 0 0 18px !default;
+$grid-rtl-bigger-textwrap-sortnumber-margin: 2px 0 0 20px !default;
 $grid-textwrap-sorticon-margin: -9px 10px !default;
 $grid-columnchooser-header-padding: 11px 18px 15px !default;
 $grid-columnchooser-toolbar-button-padding: 0 12px !default;
@@ -179,7 +181,7 @@ $grid-rtl-group-text-marign-right: 0 !default;
 $grid-rtl-group-text-margin-right: 0 !default;
 $grid-rtl-textwrap-srotnumber-margin: 3px 5px 0 12px !default;
 $grid-rtl-headercell-both-border-width: 0 1px 0 0 !default;
-$grid-rtl-textwrap-srotnumber-rightalign-margin: 3px 5px 0 32px !default;
+$grid-rtl-textwrap-srotnumber-rightalign-margin: 3px 5px 0 20px !default;
 $grid-rtl-stackedheadercell-border-size: 0 1px 1px 0 !default;
 $grid-rtl-stackedhader-firstcell-left-border-size: 0 !default;
 $grid-rtl-stackedhader-firstcell-right-border-size: 1px !default;
@@ -251,8 +253,8 @@ $grid-icon-font-size: $text-base !default;
 $grid-border-size: 1px !default;
 $grid-header-padding: 7px !default;
 $grid-header-wrap-sortfilter-div-margin: -34px 5px !default;
-$grid-rtl-textwrap-sorticon-margin: -30px 5px !default;
-$grid-rtl-textwrap-sorticon-rightalign-margin: -30px 17px !default;
+$grid-rtl-textwrap-sorticon-margin: -32px 5px -30px 16px !default;
+$grid-rtl-textwrap-sorticon-rightalign-margin: -33px 17px -30px 17px !default;
 $grid-headercelldiv-right-align-padding: 0 5px 0 20px !default;
 $grid-headercell-line-height: 36px !default;
 $grid-header-font-weight: $font-weight-medium !default;
@@ -467,6 +469,8 @@ $grid-rtl-bigger-checkbox-content-padding-left: 16px !default;
 $grid-fltrdiv-margin: -18px -7px !default;
 $grid-rtl-fltrdiv-margin: -21px 0 -20px -35px !default;
 $grid-rtl-bigger-fltrdiv-margin: -23px 2px -18px -10px !default;
+$grid-rtl-bigger-wrap-fltrdiv-margin: -22px 4px -14px -2px !default;
+$grid-rtl-wrap-fltrdiv-margin: -21px -7px -18px !default;
 $grid-bigger-rtl-headercelldiv-fltricon-padding: -5px -10px -5px 0 !default;
 $grid-bigger-fltrdiv-margin: -19px -6px !default;
 $grid-sortdiv-filtericon-margin: -30px 20px -29px 0 !default;
@@ -495,10 +499,13 @@ $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: -33px 18px 0 16px !default;
+$grid-header-wrap-filtermenu-div-margin: -18px -7px !default;
 $grid-bigger-wrap-sortdiv-margin: -31px 8px !default;
-$grid-bigger-wrap-rightalign-sortdiv-margin: -30px -5px !default;
+$grid-bigger-wrap-rightalign-sortdiv-margin: -33px -5px -30px -5px !default;
+$grid-bigger-rtl-wrap-rightalign-sortdiv-margin: -34px 4px -14px 23px !default;
+$grid-bigger-rtl-wrap-fltricon-sortdiv-margin: -33px 4px -14px 24px !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-bigger-wrap-fltricon-sortdiv-margin: -33px 18px -31px 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;
@@ -540,6 +547,7 @@ $grid-bigger-ungroupbutton-icon-margin-right: 4px !default;
 $grid-bigger-ungroupbutton-icon-padding-top: 0 !default;
 $grid-bigger-font-size: $text-base !default;
 $grid-rtl-bigger-rightalign-fltrdiv-margin: -23px 0 -18px -42px !default;
+$grid-rtl-bigger-wrap-rightalign-fltrdiv-margin: -22px 4px -14px -2px !default;
 $grid-bigger-rtl-ungroup-icon-margin-left: -9px !default;
 $grid-grouparea-font-weight: $font-weight-normal !default;
 $grid-ungroup-rtl-margin-left: 0 !default;
@@ -3556,20 +3564,20 @@ $grid-checkmark-color: $primary-text-color !default;
         padding-left: $grid-header-first-last-cell-padding;
       }
 
-      &.e-wrap .e-gridheader {
+      &.e-wrap .e-columnheader {
         .e-rightalign .e-sortnumber {
           margin: $grid-rtl-textwrap-srotnumber-rightalign-margin;
         }
-  
+
         .e-sortnumber {
           margin: $grid-rtl-textwrap-srotnumber-margin;
         }
-  
-        .e-sortfilterdiv {
+
+        .e-fltr-icon .e-sortfilterdiv {
           margin: $grid-rtl-textwrap-sorticon-margin;
         }
-  
-        .e-rightalign .e-sortfilterdiv {
+
+        .e-fltr-icon.e-rightalign .e-sortfilterdiv {
           margin: $grid-rtl-textwrap-sorticon-rightalign-margin;
         }
       }
@@ -4010,6 +4018,7 @@ $grid-checkmark-color: $primary-text-color !default;
       .e-filtermenudiv,
       .e-sortfilterdiv .e-filtermenudiv  {
         line-height: $grid-wrap-line-height;
+        margin: $grid-header-wrap-filtermenu-div-margin;
       }
 
       .e-sortfilterdiv {
@@ -4033,6 +4042,13 @@ $grid-checkmark-color: $primary-text-color !default;
       }
     }
 
+    &.e-wrap.e-rtl .e-columnheader {
+      .e-filtermenudiv,
+      .e-sortfilterdiv .e-filtermenudiv  {
+        margin: $grid-rtl-wrap-fltrdiv-margin;
+      }
+    }
+
     & .e-columnheader.e-wrap {
       .e-headercelldiv,
       .e-headercell.e-fltr-icon .e-headercelldiv {
@@ -4136,9 +4152,12 @@ $grid-checkmark-color: $primary-text-color !default;
     }
 
     & .e-mask {
-      display: inline-block;
-      height: 10px;
-      width: 80%;
+
+      &.e-skeleton {
+        display: inline-block;
+        height: 10px;
+        width: 80%;
+      }
 
       &.e-mask-group-intent {
         margin-left: 7px;
@@ -6051,6 +6070,14 @@ $grid-checkmark-color: $primary-text-color !default;
       padding: $grid-bigger-headercell-top-padding $grid-bigger-headercell-padding $grid-bigger-headercell-bootom-padding;
     }
 
+    .e-grid .e-gridheader .e-resizetable tr th:first-child {
+      padding-left: $grid-bigger-headercell-padding;
+    }
+
+    .e-grid .e-gridheader .e-resizetable tr th:last-child {
+      padding-right: $grid-bigger-headercell-padding;
+    }
+
     &.e-grid-autofit .e-headercell {
       padding: $grid-bigger-headercell-autofit-padding;
     }
@@ -6175,6 +6202,38 @@ $grid-checkmark-color: $primary-text-color !default;
       }
     }
 
+    &.e-wrap .e-columnheader {
+      .e-sortfilterdiv {
+        margin: $grid-bigger-wrap-sortdiv-margin;
+      }
+      
+      .e-fltr-icon .e-sortfilterdiv {
+        margin: $grid-bigger-wrap-fltricon-sortdiv-margin;
+      }
+
+      .e-fltr-icon.e-rightalign .e-sortfilterdiv {
+        margin: $grid-bigger-wrap-rightalign-sortdiv-margin;
+      }
+
+      & .e-fltr-icon .e-sortnumber {
+        margin: $grid-bigger-textwrap-sortnumber-margin;
+      }
+    }
+
+    &.e-wrap.e-rtl .e-headercell.e-fltr-icon .e-headercelldiv .e-sortnumber {
+      margin: $grid-rtl-bigger-textwrap-sortnumber-margin;
+    }
+
+    &.e-wrap.e-rtl .e-columnheader {
+      .e-fltr-icon .e-sortfilterdiv {
+        margin: $grid-bigger-rtl-wrap-fltricon-sortdiv-margin;
+      }
+
+      .e-fltr-icon.e-rightalign .e-sortfilterdiv {
+        margin: $grid-bigger-rtl-wrap-rightalign-sortdiv-margin;
+      }
+    }
+
     .e-headercelldiv {
       font-size: $grid-bigger-headercell-font-size;
     }
@@ -6245,6 +6304,18 @@ $grid-checkmark-color: $primary-text-color !default;
       margin: $grid-bigger-fltrdiv-margin;
     }
 
+    &.e-wrap .e-filtermenudiv {
+      @if $grid-skin == 'material' {
+        margin: -25px -2px -12px 8px;
+      }
+      @if $grid-skin == 'fabric' {
+        margin: -26px -7px -24px;
+      }
+      @if $grid-skin == 'bootstrap5' or $grid-skin == 'bootstrap5.3' {
+        margin: -14px -2px -14px 4px;
+      }
+    }
+
     .e-sortfilterdiv {
       margin: $grid-bigger-sortdiv-margin;
     }
@@ -6308,6 +6379,16 @@ $grid-checkmark-color: $primary-text-color !default;
       .e-rightalign .e-filtermenudiv {
         margin: $grid-rtl-bigger-rightalign-fltrdiv-margin;
       }
+
+      &.e-wrap {
+        .e-filtermenudiv {
+          margin: $grid-rtl-bigger-wrap-fltrdiv-margin;
+        }
+    
+        .e-rightalign .e-filtermenudiv {
+          margin: $grid-rtl-bigger-wrap-rightalign-fltrdiv-margin;
+        }
+      }
   
       .e-headercell .e-headercelldiv .e-sortnumber,
       .e-detailheadercell .e-headercelldiv .e-sortnumber {
@@ -7909,9 +7990,11 @@ $grid-checkmark-color: $primary-text-color !default;
             }
   
             & .e-mask {
-              display: inline-block;
-              height: 10px;
-              width: 80%;
+              &.e-skeleton {
+                display: inline-block;
+                height: 10px;
+                width: 80%;
+              }
 
               &.e-mask-checkbox-filter-intent {
                 width: 13px;

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

@@ -147,6 +147,8 @@ $grid-filterbarcell-input-height: 26px !default;
 $grid-sortnumber-border-radius: 65% !default;
 $grid-textwrap-srotnumber-rightalign-margin: 5px 2px 0 15px !default;
 $grid-textwrap-srotnumber-margin: 5px 5px 0 2px !default;
+$grid-bigger-textwrap-sortnumber-margin: 2px 0 0 18px !default;
+$grid-rtl-bigger-textwrap-sortnumber-margin: 2px 0 0 20px !default;
 $grid-textwrap-sorticon-margin: -9px 10px !default;
 $grid-columnchooser-header-padding: 11px 18px 15px !default;
 $grid-columnchooser-toolbar-button-padding: 0 12px !default;
@@ -179,7 +181,7 @@ $grid-rtl-group-text-marign-right: 0 !default;
 $grid-rtl-group-text-margin-right: 0 !default;
 $grid-rtl-textwrap-srotnumber-margin: 3px 5px 0 12px !default;
 $grid-rtl-headercell-both-border-width: 0 1px 0 0 !default;
-$grid-rtl-textwrap-srotnumber-rightalign-margin: 3px 5px 0 32px !default;
+$grid-rtl-textwrap-srotnumber-rightalign-margin: 3px 5px 0 20px !default;
 $grid-rtl-stackedheadercell-border-size: 0 1px 1px 0 !default;
 $grid-rtl-stackedhader-firstcell-left-border-size: 0 !default;
 $grid-rtl-stackedhader-firstcell-right-border-size: 1px !default;
@@ -251,8 +253,8 @@ $grid-icon-font-size: $text-base !default;
 $grid-border-size: 1px !default;
 $grid-header-padding: 7px !default;
 $grid-header-wrap-sortfilter-div-margin: -34px 5px !default;
-$grid-rtl-textwrap-sorticon-margin: -30px 5px !default;
-$grid-rtl-textwrap-sorticon-rightalign-margin: -30px 17px !default;
+$grid-rtl-textwrap-sorticon-margin: -32px 5px -30px 16px !default;
+$grid-rtl-textwrap-sorticon-rightalign-margin: -33px 17px -30px 17px !default;
 $grid-headercelldiv-right-align-padding: 0 5px 0 20px !default;
 $grid-headercell-line-height: 36px !default;
 $grid-header-font-weight: $font-weight-medium !default;
@@ -467,6 +469,8 @@ $grid-rtl-bigger-checkbox-content-padding-left: 16px !default;
 $grid-fltrdiv-margin: -18px -7px !default;
 $grid-rtl-fltrdiv-margin: -21px 0 -20px -35px !default;
 $grid-rtl-bigger-fltrdiv-margin: -23px 2px -18px -10px !default;
+$grid-rtl-bigger-wrap-fltrdiv-margin: -22px 4px -14px -2px !default;
+$grid-rtl-wrap-fltrdiv-margin: -21px -7px -18px !default;
 $grid-bigger-rtl-headercelldiv-fltricon-padding: -5px -10px -5px 0 !default;
 $grid-bigger-fltrdiv-margin: -19px -6px !default;
 $grid-sortdiv-filtericon-margin: -30px 20px -29px 0 !default;
@@ -495,10 +499,13 @@ $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: -33px 18px 0 16px !default;
+$grid-header-wrap-filtermenu-div-margin: -18px -7px !default;
 $grid-bigger-wrap-sortdiv-margin: -31px 8px !default;
-$grid-bigger-wrap-rightalign-sortdiv-margin: -30px -5px !default;
+$grid-bigger-wrap-rightalign-sortdiv-margin: -33px -5px -30px -5px !default;
+$grid-bigger-rtl-wrap-rightalign-sortdiv-margin: -34px 4px -14px 23px !default;
+$grid-bigger-rtl-wrap-fltricon-sortdiv-margin: -33px 4px -14px 24px !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-bigger-wrap-fltricon-sortdiv-margin: -33px 18px -31px 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;
@@ -540,6 +547,7 @@ $grid-bigger-ungroupbutton-icon-margin-right: 4px !default;
 $grid-bigger-ungroupbutton-icon-padding-top: 0 !default;
 $grid-bigger-font-size: $text-base !default;
 $grid-rtl-bigger-rightalign-fltrdiv-margin: -23px 0 -18px -42px !default;
+$grid-rtl-bigger-wrap-rightalign-fltrdiv-margin: -22px 4px -14px -2px !default;
 $grid-bigger-rtl-ungroup-icon-margin-left: -9px !default;
 $grid-grouparea-font-weight: $font-weight-normal !default;
 $grid-ungroup-rtl-margin-left: 0 !default;
@@ -3556,20 +3564,20 @@ $grid-checkmark-color: $primary-text-color !default;
         padding-left: $grid-header-first-last-cell-padding;
       }
 
-      &.e-wrap .e-gridheader {
+      &.e-wrap .e-columnheader {
         .e-rightalign .e-sortnumber {
           margin: $grid-rtl-textwrap-srotnumber-rightalign-margin;
         }
-  
+
         .e-sortnumber {
           margin: $grid-rtl-textwrap-srotnumber-margin;
         }
-  
-        .e-sortfilterdiv {
+
+        .e-fltr-icon .e-sortfilterdiv {
           margin: $grid-rtl-textwrap-sorticon-margin;
         }
-  
-        .e-rightalign .e-sortfilterdiv {
+
+        .e-fltr-icon.e-rightalign .e-sortfilterdiv {
           margin: $grid-rtl-textwrap-sorticon-rightalign-margin;
         }
       }
@@ -4010,6 +4018,7 @@ $grid-checkmark-color: $primary-text-color !default;
       .e-filtermenudiv,
       .e-sortfilterdiv .e-filtermenudiv  {
         line-height: $grid-wrap-line-height;
+        margin: $grid-header-wrap-filtermenu-div-margin;
       }
 
       .e-sortfilterdiv {
@@ -4033,6 +4042,13 @@ $grid-checkmark-color: $primary-text-color !default;
       }
     }
 
+    &.e-wrap.e-rtl .e-columnheader {
+      .e-filtermenudiv,
+      .e-sortfilterdiv .e-filtermenudiv  {
+        margin: $grid-rtl-wrap-fltrdiv-margin;
+      }
+    }
+
     & .e-columnheader.e-wrap {
       .e-headercelldiv,
       .e-headercell.e-fltr-icon .e-headercelldiv {
@@ -4136,9 +4152,12 @@ $grid-checkmark-color: $primary-text-color !default;
     }
 
     & .e-mask {
-      display: inline-block;
-      height: 10px;
-      width: 80%;
+
+      &.e-skeleton {
+        display: inline-block;
+        height: 10px;
+        width: 80%;
+      }
 
       &.e-mask-group-intent {
         margin-left: 7px;
@@ -6051,6 +6070,14 @@ $grid-checkmark-color: $primary-text-color !default;
       padding: $grid-bigger-headercell-top-padding $grid-bigger-headercell-padding $grid-bigger-headercell-bootom-padding;
     }
 
+    .e-grid .e-gridheader .e-resizetable tr th:first-child {
+      padding-left: $grid-bigger-headercell-padding;
+    }
+
+    .e-grid .e-gridheader .e-resizetable tr th:last-child {
+      padding-right: $grid-bigger-headercell-padding;
+    }
+
     &.e-grid-autofit .e-headercell {
       padding: $grid-bigger-headercell-autofit-padding;
     }
@@ -6175,6 +6202,38 @@ $grid-checkmark-color: $primary-text-color !default;
       }
     }
 
+    &.e-wrap .e-columnheader {
+      .e-sortfilterdiv {
+        margin: $grid-bigger-wrap-sortdiv-margin;
+      }
+      
+      .e-fltr-icon .e-sortfilterdiv {
+        margin: $grid-bigger-wrap-fltricon-sortdiv-margin;
+      }
+
+      .e-fltr-icon.e-rightalign .e-sortfilterdiv {
+        margin: $grid-bigger-wrap-rightalign-sortdiv-margin;
+      }
+
+      & .e-fltr-icon .e-sortnumber {
+        margin: $grid-bigger-textwrap-sortnumber-margin;
+      }
+    }
+
+    &.e-wrap.e-rtl .e-headercell.e-fltr-icon .e-headercelldiv .e-sortnumber {
+      margin: $grid-rtl-bigger-textwrap-sortnumber-margin;
+    }
+
+    &.e-wrap.e-rtl .e-columnheader {
+      .e-fltr-icon .e-sortfilterdiv {
+        margin: $grid-bigger-rtl-wrap-fltricon-sortdiv-margin;
+      }
+
+      .e-fltr-icon.e-rightalign .e-sortfilterdiv {
+        margin: $grid-bigger-rtl-wrap-rightalign-sortdiv-margin;
+      }
+    }
+
     .e-headercelldiv {
       font-size: $grid-bigger-headercell-font-size;
     }
@@ -6245,6 +6304,18 @@ $grid-checkmark-color: $primary-text-color !default;
       margin: $grid-bigger-fltrdiv-margin;
     }
 
+    &.e-wrap .e-filtermenudiv {
+      @if $grid-skin == 'material' {
+        margin: -25px -2px -12px 8px;
+      }
+      @if $grid-skin == 'fabric' {
+        margin: -26px -7px -24px;
+      }
+      @if $grid-skin == 'bootstrap5' or $grid-skin == 'bootstrap5.3' {
+        margin: -14px -2px -14px 4px;
+      }
+    }
+
     .e-sortfilterdiv {
       margin: $grid-bigger-sortdiv-margin;
     }
@@ -6308,6 +6379,16 @@ $grid-checkmark-color: $primary-text-color !default;
       .e-rightalign .e-filtermenudiv {
         margin: $grid-rtl-bigger-rightalign-fltrdiv-margin;
       }
+
+      &.e-wrap {
+        .e-filtermenudiv {
+          margin: $grid-rtl-bigger-wrap-fltrdiv-margin;
+        }
+    
+        .e-rightalign .e-filtermenudiv {
+          margin: $grid-rtl-bigger-wrap-rightalign-fltrdiv-margin;
+        }
+      }
   
       .e-headercell .e-headercelldiv .e-sortnumber,
       .e-detailheadercell .e-headercelldiv .e-sortnumber {
@@ -7909,9 +7990,11 @@ $grid-checkmark-color: $primary-text-color !default;
             }
   
             & .e-mask {
-              display: inline-block;
-              height: 10px;
-              width: 80%;
+              &.e-skeleton {
+                display: inline-block;
+                height: 10px;
+                width: 80%;
+              }
 
               &.e-mask-checkbox-filter-intent {
                 width: 13px;