@syncfusion/blazor-themes 27.1.53 → 27.1.56

package/SCSS-Themes/fluent2.scss

@@ -20828,6 +20828,62 @@ $textarea-float-top: -28px !default;
       color: $input-warning-color;
     }
   }
+
+  .e-outline.e-float-input.e-bigger input:focus ~ label.e-float-text,
+  .e-outline.e-float-input.e-bigger input:valid ~ label.e-float-text,
+  .e-outline.e-float-input.e-bigger input ~ label.e-label-top.e-float-text,
+  .e-outline.e-float-input.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
+  .e-outline.e-float-input.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
+  .e-outline.e-float-input.e-bigger input label.e-float-text.e-label-top,
+  .e-bigger .e-outline.e-float-input input:focus ~ label.e-float-text,
+  .e-bigger .e-outline.e-float-input input:valid ~ label.e-float-text,
+  .e-bigger .e-outline.e-float-input input ~ label.e-label-top.e-float-text,
+  .e-bigger .e-outline.e-float-input input[readonly] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-outline.e-float-input input[disabled] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-outline.e-float-input input label.e-float-text.e-label-top,
+  .e-bigger .e-outline.e-float-input.e-control-wrapper input:focus ~ label.e-float-text,
+  .e-bigger .e-outline.e-float-input.e-control-wrapper input:valid ~ label.e-float-text,
+  .e-bigger .e-outline.e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
+  .e-bigger .e-outline.e-float-input.e-control-wrapper input[readonly] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-outline.e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-outline.e-float-input.e-control-wrapper input label.e-float-text.e-label-top,
+  .e-outline.e-float-input.e-control-wrapper.e-bigger input:focus ~ label.e-float-text,
+  .e-outline.e-float-input.e-control-wrapper.e-bigger input:valid ~ label.e-float-text,
+  .e-outline.e-float-input.e-control-wrapper.e-bigger input ~ label.e-label-top.e-float-text,
+  .e-outline.e-float-input.e-control-wrapper.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
+  .e-outline.e-float-input.e-control-wrapper.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
+  .e-outline.e-float-input.e-control-wrappe.e-bigger input label.e-float-text.e-label-top,
+  .e-outline.e-float-input.e-bigger textarea:focus ~ label.e-float-text,
+  .e-outline.e-float-input.e-bigger textarea:valid ~ label.e-float-text,
+  .e-outline.e-float-input.e-bigger textarea ~ label.e-label-top.e-float-text,
+  .e-outline.e-float-input.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
+  .e-outline.e-float-input.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
+  .e-outline.e-float-input.e-bigger textarea label.e-float-text.e-label-top,
+  .e-bigger .e-outline.e-float-input textarea:focus ~ label.e-float-text,
+  .e-bigger .e-outline.e-float-input textarea:valid ~ label.e-float-text,
+  .e-bigger .e-outline.e-float-input textarea ~ label.e-label-top.e-float-text,
+  .e-bigger .e-outline.e-float-input textarea[readonly] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-outline.e-float-input textarea[disabled] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-outline.e-float-input textarea label.e-float-text.e-label-top,
+  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:focus ~ label.e-float-text,
+  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:valid ~ label.e-float-text,
+  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea ~ label.e-label-top.e-float-text,
+  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
+  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
+  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea label.e-float-text.e-label-top,
+  .e-bigger .e-outline.e-float-input.e-control-wrapper textarea:focus ~ label.e-float-text,
+  .e-bigger .e-outline.e-float-input.e-control-wrapper textarea:valid ~ label.e-float-text,
+  .e-bigger .e-outline.e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text,
+  .e-bigger .e-outline.e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-outline.e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-outline.e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top,
+  .e-outline.e-float-input.e-input-focus.e-bigger input ~ label.e-float-text,
+  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+      top: $outline-float-label-top;
+      transform: translate3d($zero-value, $zero-value, $zero-value) scale(1);
+    }
+  }
 }
 
 $signature-border: 1px solid !default;
@@ -34460,6 +34516,10 @@ $drop-down-btn-menu-icon-disabled-color: $secondary-text-color-disabled !default
         width: 1px;
       }
     }
+
+    &.e-hidden {
+      display: none !important; /* stylelint-disable-line declaration-no-important */
+    }
   }
 
   .e-rtl.e-dropdown-popup .e-item {
@@ -51350,13 +51410,13 @@ $dialog-footer-flat-btn-hover-color: $secondary-text-color-hover !default;
     background-color: $dialog-footer-bg-color;
 
     @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or  $skin-name == 'Material3' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'fluent2' {
-      .e-btn.e-primary.e-flat:not([DISABLED]) {
+      .e-btn.e-primary.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
         background: $dialog-footer-btn-bg-color;
         border-color: $dialog-footer-btn-border-color;
         color: $dialog-footer-btn-color;
       }
 
-      .e-btn:hover.e-primary.e-flat:not([DISABLED]) {
+      .e-btn:hover.e-primary.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
         @if $skin-name == 'Material3' {
           background: $dialog-footer-flat-hover-btn-bg-color;
           color: rgba($primary);
@@ -51371,22 +51431,22 @@ $dialog-footer-flat-btn-hover-color: $secondary-text-color-hover !default;
     }
 
     @if $skin-name == 'Material3' {
-      .e-btn.e-primary.e-flat:not([DISABLED]):focus-visible,
-      .e-btn.e-primary.e-flat:not([DISABLED]):focus,
-      .e-btn.e-primary.e-flat:not([DISABLED]):focus,
-      .e-btn.e-flat:not([DISABLED]):focus-visible {
+      .e-btn.e-primary.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info):focus-visible,
+      .e-btn.e-primary.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info):focus,
+      .e-btn.e-primary.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info):focus,
+      .e-btn.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info):focus-visible {
         background: $dialog-footer-flat-hover-btn-bg-color;
         box-shadow: $shadow-focus-ring1;
       }
     }
 
     @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
-      .e-btn.e-flat:not([DISABLED]) {
+      .e-btn.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
         background: $dialog-footer-flat-btn-bg-color;
         border-color: $dialog-footer-flat-btn-border-color;
         color: $dialog-footer-flat-btn-content-color;
       }
-      .e-btn:hover.e-flat:not([DISABLED]) {
+      .e-btn:hover.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
         background: $dialog-footer-flat-hover-btn-bg-color;
         @if $skin-name == 'fluent2' {
           color: $dialog-footer-flat-btn-hover-color;
@@ -63411,7 +63471,8 @@ $step-selected-active-color: $primary-dark !default;
       }
       .e-previous:not(.e-step-disabled),
       .e-next:not(.e-step-disabled),
-      .e-step-selected:not(.e-step-disabled) {
+      .e-step-selected:not(.e-step-disabled),
+      .e-previous:not(.e-step-disabled) + li {
         pointer-events: auto;
       }
     }
@@ -83660,6 +83721,8 @@ $grid-filterbarcell-input-height: 26px !default;
 $grid-sortnumber-border-radius: 65% !default;
 $grid-textwrap-srotnumber-rightalign-margin: 2px 2px 0 14px !default;
 $grid-textwrap-srotnumber-margin: 2px 2px 0 2px !default;
+$grid-bigger-textwrap-sortnumber-margin: 2px 6px 0 2px !default;
+$grid-rtl-bigger-textwrap-sortnumber-margin: 2px 0 0 5px !default;
 $grid-textwrap-sorticon-margin: -9px 10px !default;
 $grid-columnchooser-header-padding: 11px 18px 15px !default;
 $grid-columnchooser-toolbar-button-padding: 0 12px !default;
@@ -84022,6 +84085,8 @@ $grid-rtl-bigger-checkbox-content-padding-left: 16px !default;
 $grid-fltrdiv-margin: -13px -3px -13px 4px !default;
 $grid-rtl-fltrdiv-margin: -13px 4px -13px -2px !default;
 $grid-rtl-bigger-fltrdiv-margin: -15px 6px -15px -8px !default;
+$grid-rtl-bigger-wrap-fltrdiv-margin: -16px 4px -14px -2px !default;
+$grid-rtl-wrap-fltrdiv-margin: -15px -3px -13px 12px !default;
 $grid-bigger-rtl-headercelldiv-fltricon-padding: -5px -10px -5px 0 !default;
 $grid-bigger-fltrdiv-margin: -15px -4px -15px 6px !default;
 $grid-icon-save: 'e964' !default;
@@ -84055,10 +84120,13 @@ $grid-content-batch-font-color: $content-text-color !default;
 $grid-bigger-group-headercell-hover-padding: $grid-bigger-group-headercell-padding !default;
 $grid-header-wrap-rightalign-sortfilter-div-margin: -21px -5px !default;
 $grid-header-wrap-filtericon-sortfilter-div-margin: -20px 20px -29px 14px !default;
+$grid-header-wrap-filtermenu-div-margin: -15px -3px -13px 4px !default;
 $grid-bigger-wrap-sortdiv-margin: -31px 8px !default;
-$grid-bigger-wrap-rightalign-sortdiv-margin: -30px -5px !default;
+$grid-bigger-wrap-rightalign-sortdiv-margin: -21px -5px -30px -5px !default;
+$grid-bigger-rtl-wrap-rightalign-sortdiv-margin: -21px 4px -14px 23px !default;
+$grid-bigger-rtl-wrap-fltricon-sortdiv-margin: -21px 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: -21px 25px -31px 0 !default;
 $grid-header-wrap-filtericon-rightalign-sortfilter-div-margin: -21px 9px -25px 10px !default;
 $grid-drag-font-size: $text-base !default;
 $grid-drag-icon-font-weight: $font-weight-bold !default;
@@ -84108,6 +84176,7 @@ $grid-bigger-ungroupbutton-icon-margin-right: 0 !default;
 $grid-bigger-ungroupbutton-icon-padding-top: 0 !default;
 $grid-bigger-font-size: $text-base !default;
 $grid-rtl-bigger-rightalign-fltrdiv-margin: -15px 6px -15px -8px !default;
+$grid-rtl-bigger-wrap-rightalign-fltrdiv-margin: -15px 4px -14px -2px !default;
 $grid-bigger-rtl-ungroup-icon-margin-left: -4px !default;
 $grid-grouparea-font-weight: $font-weight-normal !default;
 $grid-ungroup-rtl-margin-left: 0 !default;
@@ -87143,20 +87212,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;
         }
       }
@@ -87597,6 +87666,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 {
@@ -87620,6 +87690,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 {
@@ -87723,9 +87800,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;
@@ -89638,6 +89718,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;
     }
@@ -89762,6 +89850,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;
     }
@@ -89832,6 +89952,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;
     }
@@ -89895,6 +90027,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 {
@@ -91496,9 +91638,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;
@@ -95042,6 +95186,10 @@ $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;
       }
     }
 
+    tr.e-row.e-childrow-hidden{
+      display: none;
+    }
+
     .e-rowcell:not(.e-gridclip) {
       .e-treecolumn-container {
         display: block;
@@ -95224,7 +95372,8 @@ $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;
     .e-gridcontent .e-table .e-detail-intent,
     .e-table .e-detailrow .e-detailindentcell,
     .e-table .e-detailrowexpand,
-    .e-table .e-detailrowcollapse {
+    .e-table .e-detailrowcollapse,
+    tr.e-detailrow.e-childrow-hidden {
       display: none;
     }
 
@@ -123427,7 +123576,6 @@ $pivotpager-single-size-title-padding: 8px !default;
 
             .e-numeric {
               margin: $pivotpager-numeric-box-margin;
-              vertical-align: top;
 
               .e-pivot-pager-row-dropdown,
               .e-pivot-pager-column-dropdown {
@@ -123437,6 +123585,13 @@ $pivotpager-single-size-title-padding: 8px !default;
               }
             }
           }
+
+          .e-pivot-both-pager-settings {
+            .e-numeric {
+              margin: $pivotpager-numeric-box-margin;
+              vertical-align: top;
+            }
+          }
         }
 
         &.e-pivot-pager-single-maindiv {
@@ -124859,6 +125014,10 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
     height: $qrybldr-height;
     width: $qrybldr-width;
 
+    & .e-rule-field {
+      user-select: none;
+    }
+
     & .e-multiselect .e-qb-spinner .e-spinner-inner {
       left: $qrybldr-spinner-left;
       right: $qrybldr-spinner-right;
@@ -139555,7 +139714,9 @@ $aiassist-icon-height: 30px !default;
 $aiassist-icon-width: 30px !default;
 $send-icon-size: 14px !default;
 $send-icon-bottom: 10px !default;
+$clear-icon-bottom: 9px !default;
 $send-icon-bigger-bottom: 11px !default;
+$clear-icon-bigger-bottom: 10px !default;
 $aiassist-bigger-header-height: 50px !default;
 $aiassist-bigger-icon-height: 40px !default;
 $aiassist-bigger-icon-width: 40px !default;
@@ -139900,6 +140061,11 @@ $tbar-header-hover-bg-color: transparent !default;
     .e-footer {
       position: relative;
       margin: 0 auto 24px;
+      .e-clear-icon:not(.e-clear-icon-hide) {
+        display: flex;
+        justify-content: flex-end;
+        padding-bottom: $clear-icon-bottom;
+      }
       textarea::-webkit-scrollbar-thumb {
         border-radius: 10px;
       }
@@ -140392,6 +140558,9 @@ $tbar-header-hover-bg-color: transparent !default;
       bottom: $send-icon-bigger-bottom;
     }
     .e-footer {
+      .e-clear-icon:not(.e-clear-icon-hide) {
+        padding-bottom: $clear-icon-bigger-bottom;
+      }
       .e-input-group.e-control-wrapper.e-multi-line-input {
         .e-textarea {
           min-height: 38px;

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

@@ -86,6 +86,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: 6px 5px 0 2px !default;
+$grid-bigger-textwrap-sortnumber-margin: 2px 9px 0 12px !default;
+$grid-rtl-bigger-textwrap-sortnumber-margin: 2px 0 0 21px !default;
 $grid-textwrap-sorticon-margin: -9px 10px !default;
 $grid-columnchooser-header-padding: 11px 18px 15px !default;
 $grid-columnchooser-toolbar-button-padding: 0 12px !default;
@@ -447,6 +449,8 @@ $grid-rtl-bigger-checkbox-content-padding-left: 16px !default;
 $grid-fltrdiv-margin: -13px -3px -13px 4px !default;
 $grid-rtl-fltrdiv-margin: -13px 4px -13px -3px !default;
 $grid-rtl-bigger-fltrdiv-margin: -15px 6px -15px -4px !default;
+$grid-rtl-bigger-wrap-fltrdiv-margin: -22px 4px -14px -2px !default;
+$grid-rtl-wrap-fltrdiv-margin: -20px -7px !default;
 $grid-bigger-rtl-headercelldiv-fltricon-padding: -5px -10px -5px 0 !default;
 $grid-bigger-fltrdiv-margin: -15px -4px -15px 6px !default;
 $grid-icon-save: 'e964' !default;
@@ -480,8 +484,11 @@ $grid-content-batch-font-color: $success !default;
 $grid-bigger-group-headercell-hover-padding: $grid-bigger-group-headercell-padding !default;
 $grid-header-wrap-rightalign-sortfilter-div-margin: -21px -5px !default;
 $grid-header-wrap-filtericon-sortfilter-div-margin: -20px 20px -29px 14px !default;
+$grid-header-wrap-filtermenu-div-margin: -24px -2px -12px 8px !default;
 $grid-bigger-wrap-sortdiv-margin: -31px 8px !default;
 $grid-bigger-wrap-rightalign-sortdiv-margin: -30px -5px !default;
+$grid-bigger-rtl-wrap-rightalign-sortdiv-margin: -25px 4px -14px 23px !default;
+$grid-bigger-rtl-wrap-fltricon-sortdiv-margin: -25px 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-header-wrap-filtericon-rightalign-sortfilter-div-margin: -20px 14px !default;
@@ -532,6 +539,7 @@ $grid-bigger-ungroupbutton-icon-margin-right: 0 !default;
 $grid-bigger-ungroupbutton-icon-padding-top: 0 !default;
 $grid-bigger-font-size: $text-base !default;
 $grid-rtl-bigger-rightalign-fltrdiv-margin: -15px 6px -15px -3px !default;
+$grid-rtl-bigger-wrap-rightalign-fltrdiv-margin: -22px 4px -14px -2px !default;
 $grid-bigger-rtl-ungroup-icon-margin-left: -8px !default;
 $grid-grouparea-font-weight: $font-weight-normal !default;
 $grid-ungroup-rtl-margin-left: 0 !default;
@@ -3567,20 +3575,20 @@ $grid-checkmark-color: $primary !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;
         }
       }
@@ -4021,6 +4029,7 @@ $grid-checkmark-color: $primary !default;
       .e-filtermenudiv,
       .e-sortfilterdiv .e-filtermenudiv  {
         line-height: $grid-wrap-line-height;
+        margin: $grid-header-wrap-filtermenu-div-margin;
       }
 
       .e-sortfilterdiv {
@@ -4044,6 +4053,13 @@ $grid-checkmark-color: $primary !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 {
@@ -4147,9 +4163,12 @@ $grid-checkmark-color: $primary !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;
@@ -6059,6 +6078,14 @@ $grid-checkmark-color: $primary !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;
     }
@@ -6183,6 +6210,38 @@ $grid-checkmark-color: $primary !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;
     }
@@ -6253,6 +6312,18 @@ $grid-checkmark-color: $primary !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;
     }
@@ -6316,6 +6387,16 @@ $grid-checkmark-color: $primary !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 {
@@ -7917,9 +7998,11 @@ $grid-checkmark-color: $primary !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;