@syncfusion/blazor-themes 28.2.5 → 28.2.7

package/SCSS-Themes/fluent2-highcontrast.scss

@@ -64886,9 +64886,12 @@ $ddt-last-chip-right-margin: 45px !default;
 $ddt-last-chip-bigger-right-margin: 52px !default;
 $ddt-select-all-padding: 8px 12px !default;
 $ddt-select-all-height: 22px !default;
-$ddt-select-all-checkbox-margin: 0 12px !default;
-$ddt-select-all-text-indent: 0 !default;
-$ddt-select-all-bigger-text-indent: 0 !default;
+$ddt-select-all-checkbox-margin: 0 4px !default;
+$ddt-rtl-select-all-checkbox-margin: 0 12px !default;
+$ddt-select-all-text-indent: 26px !default;
+$ddt-rtl-select-all-text-indent: 17px !default;
+$ddt-select-all-bigger-text-indent: 42px !default;
+$ddt-rtl-select-all-bigger-text-indent: 41px !default;
 $ddt-select-all-text-font-size: $text-sm !default;
 $ddt-popup-radius: 4px !default;
 $ddt-popup-reorder-border: $border-light !default;
@@ -64917,6 +64920,12 @@ $ddt-treeview-fullrow-bigger-height: 44px !default;
 $ddt-icon-bg-color: $content-bg-color !default;
 $ddt-delim-bigger-padding: 7px 16px !default;
 $ddt-remains-count-padding-top: 3px !default;
+$ddt-select-all-font-size: 14px !default;
+$ddt-big-select-all-font-size: 16px !default;
+$ddt-big-select-all-text-margin: 0 8px !default;
+$ddt-rtl-big-select-all-text-margin: 0 8px !default;
+$ddt-big-select-all-padding: 0 8px !default;
+$ddt-select-all-checkbox-bottom: 2px !default;
 
 // color variables
 $ddt-filter-box-shadow-color: none !default;
@@ -65491,10 +65500,7 @@ $ddt-chip-border-color: $chip-border-color !default;
         .e-checkbox-wrapper {
           position: relative;
           text-indent: 0;
-
-          @if ($ddt-skin-name == 'tailwind3') {
-            bottom: 2px;
-          }
+          bottom: $ddt-select-all-checkbox-bottom;
 
           .e-frame {
             @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
@@ -65505,7 +65511,7 @@ $ddt-chip-border-color: $chip-border-color !default;
 
         .e-all-text {
           font-family: inherit;
-          font-size: 14px;
+          font-size: $ddt-select-all-font-size;
           margin: $ddt-select-all-checkbox-margin;
           @if $ddt-skin-name == 'tailwind' {
             line-height: $ddt-select-all-height;
@@ -65858,6 +65864,13 @@ $ddt-chip-border-color: $chip-border-color !default;
         .e-treeview .e-list-item .e-ul {
           padding: 0 14px 0 0;
         }
+
+        .e-selectall-parent {
+          text-indent: $ddt-rtl-select-all-text-indent;
+          .e-all-text {
+            margin: $ddt-rtl-select-all-checkbox-margin;
+          }
+        }
       }
     }
   }
@@ -66405,19 +66418,12 @@ $ddt-chip-border-color: $chip-border-color !default;
 
       .e-selectall-parent {
         text-indent: $ddt-select-all-bigger-text-indent;
-        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
-          padding: $ddt-big-select-all-padding;
+        padding: $ddt-big-select-all-padding;
 
-          .e-all-text {
-            font-size: $text-base;
-            line-height: 24px;
-            @if $ddt-skin-name == 'bootstrap5' {
-              margin: 0 12px;
-            }
-            @else {
-              margin: 0 16px;
-            }
-          }
+        .e-all-text {
+          font-size: $ddt-big-select-all-font-size;
+          line-height: 24px;
+          margin: $ddt-big-select-all-text-margin;
         }
       }
 
@@ -66573,6 +66579,13 @@ $ddt-chip-border-color: $chip-border-color !default;
           right: auto;
         }
       }
+
+      .e-selectall-parent {
+        text-indent: $ddt-rtl-select-all-bigger-text-indent;
+        .e-all-text {
+          margin: $ddt-rtl-big-select-all-text-margin;
+        }
+      }
     }
   }
 }
@@ -90158,6 +90171,13 @@ $grid-checkmark-color: $primary-text-color !default;
     &.sf-grid .e-ccheck.e-colfocus {
       background-color: $grid-hover-bg-color;
     }
+
+    &.sf-grid{
+      .e-gridcontent .e-leftfreeze.e-recordplusexpand,
+      .e-gridcontent .e-leftfreeze.e-recordpluscollapse{
+        @include background-color-styles($grid-skin, $group-row-bg-color, $group-row-bg-color);
+      }
+    }
   }
 
   .e-spreadsheet .e-ftrchk.e-chkfocus {
@@ -92705,6 +92725,18 @@ $grid-checkmark-color: $primary-text-color !default;
       padding-top: 40px;
     }
 
+    & .e-mainfilterdiv {
+      @if $grid-skin == 'fabric' or $grid-skin == 'fabric-dark' or $grid-skin == 'highcontrast' or $grid-skin == 'material' or $grid-skin == 'material-dark' {
+        padding-top: 30px;
+      }
+      @else if $grid-skin == 'material3' or $grid-skin == 'material3-dark' {
+        padding-top: 0;
+      }
+      @else {
+        padding-top: 16px;
+      }
+    }
+
     & .e-filtersetdiv {
       float: right;
       margin-right: 1%;
@@ -128521,7 +128553,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 
 
 $recurrence-label-bottom: 7px !default;
-$recurrence-month-label-bottom: 6px !default;
+$recurrence-month-label-bottom: 3px !default;
 $recurrence-month-label-bottom-bgr: 0 !default;
 $recurrence-week-label-bottom: 10px !default;
 $recurrence-label-font-weight: $font-weight-medium !default;
@@ -128532,7 +128564,7 @@ $recurrence-week-position-bgr-min-width: 130px !default;
 $recurrence-day-position-bgr-min-width: 190px !default;
 $recurrence-day-position-bgr-padding-left: 54px !default;
 $recurrence-end-bgr-padding-right: 5px !default;
-$recurrence-week-position-min-width: 94px !default;
+$recurrence-week-position-min-width: 100px !default;
 $recurrence-end-on-date-margin-top: 24px !default;
 
 @include export-module('recurrence-editor-layout') {
@@ -141891,6 +141923,13 @@ $nodata-border-color: $flyout-border !default;
     align-items: center;
     border-radius: 0 0 $multicolumn-popup-border-radius $multicolumn-popup-border-radius;
   }
+  .e-multicolumn-list .e-multicolumn-list-hidden {
+    border: 0;
+    height: 0;
+    padding: 0;
+    visibility: hidden;
+    width: 0;
+  }
   .e-multicolumn-grid.e-grid {
     border-width: $grid-border-width;
     border-radius: $multicolumn-popup-border-radius;
@@ -142446,9 +142485,6 @@ $tbar-header-hover-bg-color: transparent !default;
       textarea::-webkit-scrollbar {
         width: 4px;
       }
-      .hide-scrollbar textarea {
-        scrollbar-width: none;
-      }
       &:has(.e-rtl):not(.e-footer-template) .e-assist-send {
         right: unset;
         left: 20px;
@@ -142480,6 +142516,9 @@ $tbar-header-hover-bg-color: transparent !default;
         }
       }
       &:not(.e-footer-template) {
+        .e-textarea {
+          max-height: 280px;
+        }
         .e-assist-send {
           position: absolute;
           right: 20px;

package/SCSS-Themes/fluent2-lite.scss

@@ -48975,9 +48975,12 @@ $ddt-last-chip-right-margin: 45px !default;
 $ddt-last-chip-bigger-right-margin: 52px !default;
 $ddt-select-all-padding: 8px 12px !default;
 $ddt-select-all-height: 22px !default;
-$ddt-select-all-checkbox-margin: 0 12px !default;
-$ddt-select-all-text-indent: 0 !default;
-$ddt-select-all-bigger-text-indent: 0 !default;
+$ddt-select-all-checkbox-margin: 0 4px !default;
+$ddt-rtl-select-all-checkbox-margin: 0 12px !default;
+$ddt-select-all-text-indent: 26px !default;
+$ddt-rtl-select-all-text-indent: 17px !default;
+$ddt-select-all-bigger-text-indent: 42px !default;
+$ddt-rtl-select-all-bigger-text-indent: 41px !default;
 $ddt-select-all-text-font-size: $text-sm !default;
 $ddt-popup-radius: 4px !default;
 $ddt-popup-reorder-border: $border-light !default;
@@ -49006,6 +49009,12 @@ $ddt-treeview-fullrow-bigger-height: 44px !default;
 $ddt-icon-bg-color: $content-bg-color !default;
 $ddt-delim-bigger-padding: 7px 16px !default;
 $ddt-remains-count-padding-top: 3px !default;
+$ddt-select-all-font-size: 14px !default;
+$ddt-big-select-all-font-size: 16px !default;
+$ddt-big-select-all-text-margin: 0 8px !default;
+$ddt-rtl-big-select-all-text-margin: 0 8px !default;
+$ddt-big-select-all-padding: 0 8px !default;
+$ddt-select-all-checkbox-bottom: 2px !default;
 
 // color variables
 $ddt-filter-box-shadow-color: none !default;
@@ -49580,10 +49589,7 @@ $ddt-chip-border-color: $chip-border-color !default;
         .e-checkbox-wrapper {
           position: relative;
           text-indent: 0;
-
-          @if ($ddt-skin-name == 'tailwind3') {
-            bottom: 2px;
-          }
+          bottom: $ddt-select-all-checkbox-bottom;
 
           .e-frame {
             @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
@@ -49594,7 +49600,7 @@ $ddt-chip-border-color: $chip-border-color !default;
 
         .e-all-text {
           font-family: inherit;
-          font-size: 14px;
+          font-size: $ddt-select-all-font-size;
           margin: $ddt-select-all-checkbox-margin;
           @if $ddt-skin-name == 'tailwind' {
             line-height: $ddt-select-all-height;
@@ -49947,6 +49953,13 @@ $ddt-chip-border-color: $chip-border-color !default;
         .e-treeview .e-list-item .e-ul {
           padding: 0 14px 0 0;
         }
+
+        .e-selectall-parent {
+          text-indent: $ddt-rtl-select-all-text-indent;
+          .e-all-text {
+            margin: $ddt-rtl-select-all-checkbox-margin;
+          }
+        }
       }
     }
   }
@@ -68726,6 +68739,13 @@ $grid-checkmark-color: $primary-text-color !default;
     &.sf-grid .e-ccheck.e-colfocus {
       background-color: $grid-hover-bg-color;
     }
+
+    &.sf-grid{
+      .e-gridcontent .e-leftfreeze.e-recordplusexpand,
+      .e-gridcontent .e-leftfreeze.e-recordpluscollapse{
+        @include background-color-styles($grid-skin, $group-row-bg-color, $group-row-bg-color);
+      }
+    }
   }
 
   .e-spreadsheet .e-ftrchk.e-chkfocus {
@@ -99048,7 +99068,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 
 
 $recurrence-label-bottom: 7px !default;
-$recurrence-month-label-bottom: 6px !default;
+$recurrence-month-label-bottom: 3px !default;
 $recurrence-month-label-bottom-bgr: 0 !default;
 $recurrence-week-label-bottom: 10px !default;
 $recurrence-label-font-weight: $font-weight-medium !default;
@@ -99059,7 +99079,7 @@ $recurrence-week-position-bgr-min-width: 130px !default;
 $recurrence-day-position-bgr-min-width: 190px !default;
 $recurrence-day-position-bgr-padding-left: 54px !default;
 $recurrence-end-bgr-padding-right: 5px !default;
-$recurrence-week-position-min-width: 94px !default;
+$recurrence-week-position-min-width: 100px !default;
 $recurrence-end-on-date-margin-top: 24px !default;
 
 @include export-module('recurrence-editor-layout') {
@@ -110391,6 +110411,13 @@ $nodata-border-color: $flyout-border !default;
     align-items: center;
     border-radius: 0 0 $multicolumn-popup-border-radius $multicolumn-popup-border-radius;
   }
+  .e-multicolumn-list .e-multicolumn-list-hidden {
+    border: 0;
+    height: 0;
+    padding: 0;
+    visibility: hidden;
+    width: 0;
+  }
   .e-multicolumn-grid.e-grid {
     border-width: $grid-border-width;
     border-radius: $multicolumn-popup-border-radius;
@@ -110909,9 +110936,6 @@ $tbar-header-hover-bg-color: transparent !default;
       textarea::-webkit-scrollbar {
         width: 4px;
       }
-      .hide-scrollbar textarea {
-        scrollbar-width: none;
-      }
       &:has(.e-rtl):not(.e-footer-template) .e-assist-send {
         right: unset;
         left: 20px;
@@ -110943,6 +110967,9 @@ $tbar-header-hover-bg-color: transparent !default;
         }
       }
       &:not(.e-footer-template) {
+        .e-textarea {
+          max-height: 280px;
+        }
         .e-assist-send {
           position: absolute;
           right: 20px;

package/SCSS-Themes/fluent2.scss

@@ -65658,9 +65658,12 @@ $ddt-last-chip-right-margin: 45px !default;
 $ddt-last-chip-bigger-right-margin: 52px !default;
 $ddt-select-all-padding: 8px 12px !default;
 $ddt-select-all-height: 22px !default;
-$ddt-select-all-checkbox-margin: 0 12px !default;
-$ddt-select-all-text-indent: 0 !default;
-$ddt-select-all-bigger-text-indent: 0 !default;
+$ddt-select-all-checkbox-margin: 0 4px !default;
+$ddt-rtl-select-all-checkbox-margin: 0 12px !default;
+$ddt-select-all-text-indent: 26px !default;
+$ddt-rtl-select-all-text-indent: 17px !default;
+$ddt-select-all-bigger-text-indent: 42px !default;
+$ddt-rtl-select-all-bigger-text-indent: 41px !default;
 $ddt-select-all-text-font-size: $text-sm !default;
 $ddt-popup-radius: 4px !default;
 $ddt-popup-reorder-border: $border-light !default;
@@ -65689,6 +65692,12 @@ $ddt-treeview-fullrow-bigger-height: 44px !default;
 $ddt-icon-bg-color: $content-bg-color !default;
 $ddt-delim-bigger-padding: 7px 16px !default;
 $ddt-remains-count-padding-top: 3px !default;
+$ddt-select-all-font-size: 14px !default;
+$ddt-big-select-all-font-size: 16px !default;
+$ddt-big-select-all-text-margin: 0 8px !default;
+$ddt-rtl-big-select-all-text-margin: 0 8px !default;
+$ddt-big-select-all-padding: 0 8px !default;
+$ddt-select-all-checkbox-bottom: 2px !default;
 
 // color variables
 $ddt-filter-box-shadow-color: none !default;
@@ -66263,10 +66272,7 @@ $ddt-chip-border-color: $chip-border-color !default;
         .e-checkbox-wrapper {
           position: relative;
           text-indent: 0;
-
-          @if ($ddt-skin-name == 'tailwind3') {
-            bottom: 2px;
-          }
+          bottom: $ddt-select-all-checkbox-bottom;
 
           .e-frame {
             @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
@@ -66277,7 +66283,7 @@ $ddt-chip-border-color: $chip-border-color !default;
 
         .e-all-text {
           font-family: inherit;
-          font-size: 14px;
+          font-size: $ddt-select-all-font-size;
           margin: $ddt-select-all-checkbox-margin;
           @if $ddt-skin-name == 'tailwind' {
             line-height: $ddt-select-all-height;
@@ -66630,6 +66636,13 @@ $ddt-chip-border-color: $chip-border-color !default;
         .e-treeview .e-list-item .e-ul {
           padding: 0 14px 0 0;
         }
+
+        .e-selectall-parent {
+          text-indent: $ddt-rtl-select-all-text-indent;
+          .e-all-text {
+            margin: $ddt-rtl-select-all-checkbox-margin;
+          }
+        }
       }
     }
   }
@@ -67177,19 +67190,12 @@ $ddt-chip-border-color: $chip-border-color !default;
 
       .e-selectall-parent {
         text-indent: $ddt-select-all-bigger-text-indent;
-        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
-          padding: $ddt-big-select-all-padding;
+        padding: $ddt-big-select-all-padding;
 
-          .e-all-text {
-            font-size: $text-base;
-            line-height: 24px;
-            @if $ddt-skin-name == 'bootstrap5' {
-              margin: 0 12px;
-            }
-            @else {
-              margin: 0 16px;
-            }
-          }
+        .e-all-text {
+          font-size: $ddt-big-select-all-font-size;
+          line-height: 24px;
+          margin: $ddt-big-select-all-text-margin;
         }
       }
 
@@ -67345,6 +67351,13 @@ $ddt-chip-border-color: $chip-border-color !default;
           right: auto;
         }
       }
+
+      .e-selectall-parent {
+        text-indent: $ddt-rtl-select-all-bigger-text-indent;
+        .e-all-text {
+          margin: $ddt-rtl-big-select-all-text-margin;
+        }
+      }
     }
   }
 }
@@ -90930,6 +90943,13 @@ $grid-checkmark-color: $primary-text-color !default;
     &.sf-grid .e-ccheck.e-colfocus {
       background-color: $grid-hover-bg-color;
     }
+
+    &.sf-grid{
+      .e-gridcontent .e-leftfreeze.e-recordplusexpand,
+      .e-gridcontent .e-leftfreeze.e-recordpluscollapse{
+        @include background-color-styles($grid-skin, $group-row-bg-color, $group-row-bg-color);
+      }
+    }
   }
 
   .e-spreadsheet .e-ftrchk.e-chkfocus {
@@ -93477,6 +93497,18 @@ $grid-checkmark-color: $primary-text-color !default;
       padding-top: 40px;
     }
 
+    & .e-mainfilterdiv {
+      @if $grid-skin == 'fabric' or $grid-skin == 'fabric-dark' or $grid-skin == 'highcontrast' or $grid-skin == 'material' or $grid-skin == 'material-dark' {
+        padding-top: 30px;
+      }
+      @else if $grid-skin == 'material3' or $grid-skin == 'material3-dark' {
+        padding-top: 0;
+      }
+      @else {
+        padding-top: 16px;
+      }
+    }
+
     & .e-filtersetdiv {
       float: right;
       margin-right: 1%;
@@ -129293,7 +129325,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 
 
 $recurrence-label-bottom: 7px !default;
-$recurrence-month-label-bottom: 6px !default;
+$recurrence-month-label-bottom: 3px !default;
 $recurrence-month-label-bottom-bgr: 0 !default;
 $recurrence-week-label-bottom: 10px !default;
 $recurrence-label-font-weight: $font-weight-medium !default;
@@ -129304,7 +129336,7 @@ $recurrence-week-position-bgr-min-width: 130px !default;
 $recurrence-day-position-bgr-min-width: 190px !default;
 $recurrence-day-position-bgr-padding-left: 54px !default;
 $recurrence-end-bgr-padding-right: 5px !default;
-$recurrence-week-position-min-width: 94px !default;
+$recurrence-week-position-min-width: 100px !default;
 $recurrence-end-on-date-margin-top: 24px !default;
 
 @include export-module('recurrence-editor-layout') {
@@ -142663,6 +142695,13 @@ $nodata-border-color: $flyout-border !default;
     align-items: center;
     border-radius: 0 0 $multicolumn-popup-border-radius $multicolumn-popup-border-radius;
   }
+  .e-multicolumn-list .e-multicolumn-list-hidden {
+    border: 0;
+    height: 0;
+    padding: 0;
+    visibility: hidden;
+    width: 0;
+  }
   .e-multicolumn-grid.e-grid {
     border-width: $grid-border-width;
     border-radius: $multicolumn-popup-border-radius;
@@ -143218,9 +143257,6 @@ $tbar-header-hover-bg-color: transparent !default;
       textarea::-webkit-scrollbar {
         width: 4px;
       }
-      .hide-scrollbar textarea {
-        scrollbar-width: none;
-      }
       &:has(.e-rtl):not(.e-footer-template) .e-assist-send {
         right: unset;
         left: 20px;
@@ -143252,6 +143288,9 @@ $tbar-header-hover-bg-color: transparent !default;
         }
       }
       &:not(.e-footer-template) {
+        .e-textarea {
+          max-height: 280px;
+        }
         .e-assist-send {
           position: absolute;
           right: 20px;

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

@@ -5563,6 +5563,13 @@ $grid-checkmark-color: $primary !default;
     &.sf-grid .e-ccheck.e-colfocus {
       background-color: $grid-hover-bg-color;
     }
+
+    &.sf-grid{
+      .e-gridcontent .e-leftfreeze.e-recordplusexpand,
+      .e-gridcontent .e-leftfreeze.e-recordpluscollapse{
+        @include background-color-styles($grid-skin, $group-row-bg-color, $group-row-bg-color);
+      }
+    }
   }
 
   .e-spreadsheet .e-ftrchk.e-chkfocus {

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

@@ -5563,6 +5563,13 @@ $grid-checkmark-color: $primary !default;
     &.sf-grid .e-ccheck.e-colfocus {
       background-color: $grid-hover-bg-color;
     }
+
+    &.sf-grid{
+      .e-gridcontent .e-leftfreeze.e-recordplusexpand,
+      .e-gridcontent .e-leftfreeze.e-recordpluscollapse{
+        @include background-color-styles($grid-skin, $group-row-bg-color, $group-row-bg-color);
+      }
+    }
   }
 
   .e-spreadsheet .e-ftrchk.e-chkfocus {
@@ -8107,6 +8114,18 @@ $grid-checkmark-color: $primary !default;
       padding-top: 40px;
     }
 
+    & .e-mainfilterdiv {
+      @if $grid-skin == 'fabric' or $grid-skin == 'fabric-dark' or $grid-skin == 'highcontrast' or $grid-skin == 'material' or $grid-skin == 'material-dark' {
+        padding-top: 30px;
+      }
+      @else if $grid-skin == 'material3' or $grid-skin == 'material3-dark' {
+        padding-top: 0;
+      }
+      @else {
+        padding-top: 16px;
+      }
+    }
+
     & .e-filtersetdiv {
       float: right;
       margin-right: 1%;

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

@@ -5563,6 +5563,13 @@ $grid-checkmark-color: $primary !default;
     &.sf-grid .e-ccheck.e-colfocus {
       background-color: $grid-hover-bg-color;
     }
+
+    &.sf-grid{
+      .e-gridcontent .e-leftfreeze.e-recordplusexpand,
+      .e-gridcontent .e-leftfreeze.e-recordpluscollapse{
+        @include background-color-styles($grid-skin, $group-row-bg-color, $group-row-bg-color);
+      }
+    }
   }
 
   .e-spreadsheet .e-ftrchk.e-chkfocus {

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

@@ -5563,6 +5563,13 @@ $grid-checkmark-color: $primary !default;
     &.sf-grid .e-ccheck.e-colfocus {
       background-color: $grid-hover-bg-color;
     }
+
+    &.sf-grid{
+      .e-gridcontent .e-leftfreeze.e-recordplusexpand,
+      .e-gridcontent .e-leftfreeze.e-recordpluscollapse{
+        @include background-color-styles($grid-skin, $group-row-bg-color, $group-row-bg-color);
+      }
+    }
   }
 
   .e-spreadsheet .e-ftrchk.e-chkfocus {
@@ -8107,6 +8114,18 @@ $grid-checkmark-color: $primary !default;
       padding-top: 40px;
     }
 
+    & .e-mainfilterdiv {
+      @if $grid-skin == 'fabric' or $grid-skin == 'fabric-dark' or $grid-skin == 'highcontrast' or $grid-skin == 'material' or $grid-skin == 'material-dark' {
+        padding-top: 30px;
+      }
+      @else if $grid-skin == 'material3' or $grid-skin == 'material3-dark' {
+        padding-top: 0;
+      }
+      @else {
+        padding-top: 16px;
+      }
+    }
+
     & .e-filtersetdiv {
       float: right;
       margin-right: 1%;

package/SCSS-Themes/grids/grid/bootstrap-dark-lite.scss

@@ -5552,6 +5552,13 @@ $grid-checkmark-color: $grey-light-font !default;
     &.sf-grid .e-ccheck.e-colfocus {
       background-color: $grid-hover-bg-color;
     }
+
+    &.sf-grid{
+      .e-gridcontent .e-leftfreeze.e-recordplusexpand,
+      .e-gridcontent .e-leftfreeze.e-recordpluscollapse{
+        @include background-color-styles($grid-skin, $group-row-bg-color, $group-row-bg-color);
+      }
+    }
   }
 
   .e-spreadsheet .e-ftrchk.e-chkfocus {

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

@@ -5552,6 +5552,13 @@ $grid-checkmark-color: $grey-light-font !default;
     &.sf-grid .e-ccheck.e-colfocus {
       background-color: $grid-hover-bg-color;
     }
+
+    &.sf-grid{
+      .e-gridcontent .e-leftfreeze.e-recordplusexpand,
+      .e-gridcontent .e-leftfreeze.e-recordpluscollapse{
+        @include background-color-styles($grid-skin, $group-row-bg-color, $group-row-bg-color);
+      }
+    }
   }
 
   .e-spreadsheet .e-ftrchk.e-chkfocus {
@@ -8104,6 +8111,18 @@ $grid-checkmark-color: $grey-light-font !default;
       padding-top: 40px;
     }
 
+    & .e-mainfilterdiv {
+      @if $grid-skin == 'fabric' or $grid-skin == 'fabric-dark' or $grid-skin == 'highcontrast' or $grid-skin == 'material' or $grid-skin == 'material-dark' {
+        padding-top: 30px;
+      }
+      @else if $grid-skin == 'material3' or $grid-skin == 'material3-dark' {
+        padding-top: 0;
+      }
+      @else {
+        padding-top: 16px;
+      }
+    }
+
     & .e-filtersetdiv {
       float: right;
       margin-right: 1%;

package/SCSS-Themes/grids/grid/bootstrap-lite.scss

@@ -5551,6 +5551,13 @@ $grid-checkmark-color: $grey !default;
     &.sf-grid .e-ccheck.e-colfocus {
       background-color: $grid-hover-bg-color;
     }
+
+    &.sf-grid{
+      .e-gridcontent .e-leftfreeze.e-recordplusexpand,
+      .e-gridcontent .e-leftfreeze.e-recordpluscollapse{
+        @include background-color-styles($grid-skin, $group-row-bg-color, $group-row-bg-color);
+      }
+    }
   }
 
   .e-spreadsheet .e-ftrchk.e-chkfocus {

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

@@ -5551,6 +5551,13 @@ $grid-checkmark-color: $grey !default;
     &.sf-grid .e-ccheck.e-colfocus {
       background-color: $grid-hover-bg-color;
     }
+
+    &.sf-grid{
+      .e-gridcontent .e-leftfreeze.e-recordplusexpand,
+      .e-gridcontent .e-leftfreeze.e-recordpluscollapse{
+        @include background-color-styles($grid-skin, $group-row-bg-color, $group-row-bg-color);
+      }
+    }
   }
 
   .e-spreadsheet .e-ftrchk.e-chkfocus {
@@ -8103,6 +8110,18 @@ $grid-checkmark-color: $grey !default;
       padding-top: 40px;
     }
 
+    & .e-mainfilterdiv {
+      @if $grid-skin == 'fabric' or $grid-skin == 'fabric-dark' or $grid-skin == 'highcontrast' or $grid-skin == 'material' or $grid-skin == 'material-dark' {
+        padding-top: 30px;
+      }
+      @else if $grid-skin == 'material3' or $grid-skin == 'material3-dark' {
+        padding-top: 0;
+      }
+      @else {
+        padding-top: 16px;
+      }
+    }
+
     & .e-filtersetdiv {
       float: right;
       margin-right: 1%;