@syncfusion/blazor-themes 22.2.12 → 23.1.36

package/SCSS-Themes/pivotview/pivotview/material3-dark.scss

@@ -120,7 +120,7 @@ $pivotgrid-rowsheader-cellvalue-margin-top: 5px !default;
 $pivotgrid-excelfilter-member-editor-node-limit-height: 100px !default;
 $pivotgrid-member-editor-node-limit-bigger-height: 455px !default;
 $pivotgrid-member-sort-border-radius: $text-xl !default;
-$pivotgrid-cell-value-margin-top: 0 !default;
+$pivotgrid-cell-value-margin: 0 !default;
 
 // $pivotview-filter-toolbar-indicator-margin-left: 20px !default;
 $pivotview-filter-toolbar-items-margin-left: 20px !default;
@@ -138,6 +138,7 @@ $pivotgrid-value-sort-icon-font-size: 12px !default;
 
 // normal
 $pivotgrid-active-color: rgba($icon-color) !default;
+$pivotgrid-primary-color: rgba($icon-color) !default;
 $pivotgrid-default-font-color: rgba($content-text-color) !default;
 $pivotgrid-prompt-default-font-color: $pivotgrid-default-font-color !default;
 $pivotgrid-cell-border-color: $content-bg-color-alt3 !default;
@@ -1062,6 +1063,17 @@ $pivotpager-string-maindiv-font-color: rgba($content-text-color-alt1) !default;
     .e-frozenscrollbar {
       background: $pivotgrid-grp-bg-color;
     }
+
+    /* stylelint-disable */
+    & .e-headercontent {
+      & .e-columnheader {
+        & .e-headercell.e-leftfreeze {
+          // For safari browser only
+          -webkit-transform: translate3d(0, 0, 0);
+        }
+      }
+    }
+    /* stylelint-enable */
   }
 
   .e-pivotview-disable-icon {
@@ -1395,6 +1407,7 @@ $pivotpager-string-maindiv-font-color: rgba($content-text-color-alt1) !default;
   /*! PivotView theme */
   .e-pivotview {
     .e-pivotcell-container {
+      align-items: center;
       display: flex;
 
       .e-stackedheadertext,
@@ -1454,15 +1467,27 @@ $pivotpager-string-maindiv-font-color: rgba($content-text-color-alt1) !default;
       user-select: none;
     }
 
+    .e-grid .e-content-virtualtable {
+      overflow-x: auto;
+      scrollbar-width: none; /* firefox */
+
+      &::-webkit-scrollbar {
+        display: none; /* safari, chrome and edge */
+      }
+    }
+
     .e-gtot,
     .e-gtot.e-rowsheader,
     .e-gtot.e-columnsheader,
     .e-grid .e-content,
-    .e-grid .e-gridheader,
-    .e-headercell {
+    .e-grid .e-gridheader {
       background: $pivotgrid-gtot-background-color;
     }
 
+    .e-headercell:not(.e-columnsheader) {
+      background: $pivotgrid-gtot-background-color !important;
+    }
+
     .e-grid .e-gridheader {
       border-bottom-width: 1px;
       @if($skin-name == 'bootstrap5') {
@@ -1560,20 +1585,14 @@ $pivotpager-string-maindiv-font-color: rgba($content-text-color-alt1) !default;
         color: $pivotgrid-header-selection-color !important;
       }
     }
-    /* stylelint-enable */
 
     .e-drop-indicator {
       display: block;
     }
 
     div {
-      &.e-cellvalue {
-        margin-top: $pivotgrid-cell-value-margin-top;
-      }
-
       div span.e-value-sort-icon {
         @if ($skin-name == 'Material3') {
-        /* stylelint-disable */
           padding: 0 !important;
         }
       }
@@ -1602,11 +1621,20 @@ $pivotpager-string-maindiv-font-color: rgba($content-text-color-alt1) !default;
       }
     }
 
+    .e-stackedheadercelldiv .e-sortfilterdiv, .e-headercelldiv .e-sortfilterdiv {
+      margin: $pivotgrid-vsort-column-margin !important;
+    }
+
+    .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
+      margin: $pivotgrid-vsort-column-parent-margin !important;
+    }
+
     .e-stackedheadercelldiv, .e-headercelldiv {
       .e-sortfilterdiv, .e-sortfilterdiv.e-value-sort-align {
-        margin: $pivotgrid-vsort-column-parent-margin !important;
+        margin: $pivotgrid-cell-value-margin !important;
         margin-left: auto !important;
-        margin-top: $pivotgrid-cell-value-margin-top !important;
+        padding-bottom: $pivotgrid-cell-value-margin !important;
+        padding-top: $pivotgrid-cell-value-margin !important;
       }
     }
 
@@ -1674,16 +1702,36 @@ $pivotpager-string-maindiv-font-color: rgba($content-text-color-alt1) !default;
       }
     }
 
-    &.sf-pivotview .e-spinner-pane.e-pivot-outer-spinner {
-      z-index: 1 !important;
-    }
-
-    &.sf-pivotview .e-spinner-pane.e-pivot-outer-spinner .e-spinner-inner {
-      visibility: hidden !important;
+    &.sf-pivotview {
+      .e-spinner-pane.e-pivot-outer-spinner {
+        z-index: 1 !important;
+      }
+      .e-spinner-pane.e-pivot-outer-spinner .e-spinner-inner {
+        visibility: hidden !important;
+        /* stylelint-enable */
+      }
+      .e-grid {
+        .e-pivot-content-loader {
+          position: absolute;
+          z-index: 10;
+          color: $pivotgrid-primary-color;
+          font-size: 20px;
+          text-align: center;
+          padding: 10%;
+          
+          &.e-hide-loader {
+            display: none;
+          }
+        }
+        .e-virtual-pivot-content {
+          visibility: hidden;
+        }
+      }
     }
 
     .e-grid .e-headercelldiv,
     .e-grid .e-columnsheader {
+      /* stylelint-disable */
       padding-left: 8px !important;
 
       @if($skin-name == 'tailwind') or ($skin-name == 'tailwind-dark') {
@@ -1718,6 +1766,16 @@ $pivotpager-string-maindiv-font-color: rgba($content-text-color-alt1) !default;
       border-right-width: 1px;
     }
 
+    .e-leftfreeze.e-freezeleftborder {
+      border-left-color: $pivotgrid-default-border-color !important;
+      border-right-color: $pivotgrid-default-border-color !important;
+      border-right-width: 1px !important;
+
+      &:not(.e-gtot) {
+        background: $pivotgrid-header-background-color;
+      }
+    }
+
     .e-stackedheadercelldiv {
       display: block;
     }
@@ -1726,20 +1784,6 @@ $pivotpager-string-maindiv-font-color: rgba($content-text-color-alt1) !default;
     .e-stackedheadercelldiv.e-cellvalue {
       display: inline-block;
       padding-left: 12px !important;
-      margin-top: 5px;
-
-      @if ($pivotgrid-skin == 'highcontrast-light') or ($pivotgrid-skin == 'highcontrast') {
-        margin-top: 0;
-      }
-
-      @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') or ($pivotgrid-skin == 'fabric-dark') {
-        margin-top: 2px;
-        padding-left: 8px !important;
-      }
-  
-      @if ($skin-name == 'FluentUI') {
-        margin-top: 1px;
-      }
     }
 
     .e-headercelldiv.e-cellvalue {
@@ -2313,8 +2357,6 @@ $pivotpager-string-maindiv-font-color: rgba($content-text-color-alt1) !default;
       cursor: pointer;
       display: inline-block;
       height: 18px;
-      margin-top: $pivotgrid-expand-collapse-margin-top;
-      margin-bottom: $pivotgrid-expand-collapse-margin-bottom;
       text-align: center;
       width: 18px;
       @if ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') or ($skin-name == 'Material3') or ($skin-name == 'tailwind') {
@@ -2327,8 +2369,6 @@ $pivotpager-string-maindiv-font-color: rgba($content-text-color-alt1) !default;
     th .e-collapse {
       font-size: $pivotgrid-expcoldiv-fontsize !important;
       margin-left: 0px;
-      margin-top: $pivotgrid-drill-margintop;
-      margin-bottom: $pivotgrid-expand-collapse-margin-bottom;
     }
 
     /* stylelint-enable */
@@ -2755,6 +2795,11 @@ $pivotpager-string-maindiv-font-color: rgba($content-text-color-alt1) !default;
         border-right: 0;
       }
 
+      .e-leftfreeze.e-freezeleftborder {
+        border-left-width: 1px;
+        border-right: 0;
+      }
+
       /* stylelint-enable */
 
       .e-rowsheader .e-cellvalue {
@@ -3053,11 +3098,6 @@ $pivotpager-string-maindiv-font-color: rgba($content-text-color-alt1) !default;
       padding-left: 16px !important;
     }
 
-    th .e-expand,
-    th .e-collapse {
-      margin-top: $pivotgrid-bigger-drill-margintop;
-    }
-
     .e-grouping-bar {
       .e-all-fields-axis {
         height: 36px !important;

package/SCSS-Themes/pivotview/pivotview/material3.scss

@@ -120,7 +120,7 @@ $pivotgrid-rowsheader-cellvalue-margin-top: 5px !default;
 $pivotgrid-excelfilter-member-editor-node-limit-height: 100px !default;
 $pivotgrid-member-editor-node-limit-bigger-height: 455px !default;
 $pivotgrid-member-sort-border-radius: $text-xl !default;
-$pivotgrid-cell-value-margin-top: 0 !default;
+$pivotgrid-cell-value-margin: 0 !default;
 
 // $pivotview-filter-toolbar-indicator-margin-left: 20px !default;
 $pivotview-filter-toolbar-items-margin-left: 20px !default;
@@ -138,6 +138,7 @@ $pivotgrid-value-sort-icon-font-size: 12px !default;
 
 // normal
 $pivotgrid-active-color: rgba($icon-color) !default;
+$pivotgrid-primary-color: rgba($icon-color) !default;
 $pivotgrid-default-font-color: rgba($content-text-color) !default;
 $pivotgrid-prompt-default-font-color: $pivotgrid-default-font-color !default;
 $pivotgrid-cell-border-color: $content-bg-color-alt3 !default;
@@ -1062,6 +1063,17 @@ $pivotpager-string-maindiv-font-color: rgba($content-text-color-alt1) !default;
     .e-frozenscrollbar {
       background: $pivotgrid-grp-bg-color;
     }
+
+    /* stylelint-disable */
+    & .e-headercontent {
+      & .e-columnheader {
+        & .e-headercell.e-leftfreeze {
+          // For safari browser only
+          -webkit-transform: translate3d(0, 0, 0);
+        }
+      }
+    }
+    /* stylelint-enable */
   }
 
   .e-pivotview-disable-icon {
@@ -1395,6 +1407,7 @@ $pivotpager-string-maindiv-font-color: rgba($content-text-color-alt1) !default;
   /*! PivotView theme */
   .e-pivotview {
     .e-pivotcell-container {
+      align-items: center;
       display: flex;
 
       .e-stackedheadertext,
@@ -1454,15 +1467,27 @@ $pivotpager-string-maindiv-font-color: rgba($content-text-color-alt1) !default;
       user-select: none;
     }
 
+    .e-grid .e-content-virtualtable {
+      overflow-x: auto;
+      scrollbar-width: none; /* firefox */
+
+      &::-webkit-scrollbar {
+        display: none; /* safari, chrome and edge */
+      }
+    }
+
     .e-gtot,
     .e-gtot.e-rowsheader,
     .e-gtot.e-columnsheader,
     .e-grid .e-content,
-    .e-grid .e-gridheader,
-    .e-headercell {
+    .e-grid .e-gridheader {
       background: $pivotgrid-gtot-background-color;
     }
 
+    .e-headercell:not(.e-columnsheader) {
+      background: $pivotgrid-gtot-background-color !important;
+    }
+
     .e-grid .e-gridheader {
       border-bottom-width: 1px;
       @if($skin-name == 'bootstrap5') {
@@ -1560,20 +1585,14 @@ $pivotpager-string-maindiv-font-color: rgba($content-text-color-alt1) !default;
         color: $pivotgrid-header-selection-color !important;
       }
     }
-    /* stylelint-enable */
 
     .e-drop-indicator {
       display: block;
     }
 
     div {
-      &.e-cellvalue {
-        margin-top: $pivotgrid-cell-value-margin-top;
-      }
-
       div span.e-value-sort-icon {
         @if ($skin-name == 'Material3') {
-        /* stylelint-disable */
           padding: 0 !important;
         }
       }
@@ -1602,11 +1621,20 @@ $pivotpager-string-maindiv-font-color: rgba($content-text-color-alt1) !default;
       }
     }
 
+    .e-stackedheadercelldiv .e-sortfilterdiv, .e-headercelldiv .e-sortfilterdiv {
+      margin: $pivotgrid-vsort-column-margin !important;
+    }
+
+    .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
+      margin: $pivotgrid-vsort-column-parent-margin !important;
+    }
+
     .e-stackedheadercelldiv, .e-headercelldiv {
       .e-sortfilterdiv, .e-sortfilterdiv.e-value-sort-align {
-        margin: $pivotgrid-vsort-column-parent-margin !important;
+        margin: $pivotgrid-cell-value-margin !important;
         margin-left: auto !important;
-        margin-top: $pivotgrid-cell-value-margin-top !important;
+        padding-bottom: $pivotgrid-cell-value-margin !important;
+        padding-top: $pivotgrid-cell-value-margin !important;
       }
     }
 
@@ -1674,16 +1702,36 @@ $pivotpager-string-maindiv-font-color: rgba($content-text-color-alt1) !default;
       }
     }
 
-    &.sf-pivotview .e-spinner-pane.e-pivot-outer-spinner {
-      z-index: 1 !important;
-    }
-
-    &.sf-pivotview .e-spinner-pane.e-pivot-outer-spinner .e-spinner-inner {
-      visibility: hidden !important;
+    &.sf-pivotview {
+      .e-spinner-pane.e-pivot-outer-spinner {
+        z-index: 1 !important;
+      }
+      .e-spinner-pane.e-pivot-outer-spinner .e-spinner-inner {
+        visibility: hidden !important;
+        /* stylelint-enable */
+      }
+      .e-grid {
+        .e-pivot-content-loader {
+          position: absolute;
+          z-index: 10;
+          color: $pivotgrid-primary-color;
+          font-size: 20px;
+          text-align: center;
+          padding: 10%;
+          
+          &.e-hide-loader {
+            display: none;
+          }
+        }
+        .e-virtual-pivot-content {
+          visibility: hidden;
+        }
+      }
     }
 
     .e-grid .e-headercelldiv,
     .e-grid .e-columnsheader {
+      /* stylelint-disable */
       padding-left: 8px !important;
 
       @if($skin-name == 'tailwind') or ($skin-name == 'tailwind-dark') {
@@ -1718,6 +1766,16 @@ $pivotpager-string-maindiv-font-color: rgba($content-text-color-alt1) !default;
       border-right-width: 1px;
     }
 
+    .e-leftfreeze.e-freezeleftborder {
+      border-left-color: $pivotgrid-default-border-color !important;
+      border-right-color: $pivotgrid-default-border-color !important;
+      border-right-width: 1px !important;
+
+      &:not(.e-gtot) {
+        background: $pivotgrid-header-background-color;
+      }
+    }
+
     .e-stackedheadercelldiv {
       display: block;
     }
@@ -1726,20 +1784,6 @@ $pivotpager-string-maindiv-font-color: rgba($content-text-color-alt1) !default;
     .e-stackedheadercelldiv.e-cellvalue {
       display: inline-block;
       padding-left: 12px !important;
-      margin-top: 5px;
-
-      @if ($pivotgrid-skin == 'highcontrast-light') or ($pivotgrid-skin == 'highcontrast') {
-        margin-top: 0;
-      }
-
-      @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') or ($pivotgrid-skin == 'fabric-dark') {
-        margin-top: 2px;
-        padding-left: 8px !important;
-      }
-  
-      @if ($skin-name == 'FluentUI') {
-        margin-top: 1px;
-      }
     }
 
     .e-headercelldiv.e-cellvalue {
@@ -2313,8 +2357,6 @@ $pivotpager-string-maindiv-font-color: rgba($content-text-color-alt1) !default;
       cursor: pointer;
       display: inline-block;
       height: 18px;
-      margin-top: $pivotgrid-expand-collapse-margin-top;
-      margin-bottom: $pivotgrid-expand-collapse-margin-bottom;
       text-align: center;
       width: 18px;
       @if ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') or ($skin-name == 'Material3') or ($skin-name == 'tailwind') {
@@ -2327,8 +2369,6 @@ $pivotpager-string-maindiv-font-color: rgba($content-text-color-alt1) !default;
     th .e-collapse {
       font-size: $pivotgrid-expcoldiv-fontsize !important;
       margin-left: 0px;
-      margin-top: $pivotgrid-drill-margintop;
-      margin-bottom: $pivotgrid-expand-collapse-margin-bottom;
     }
 
     /* stylelint-enable */
@@ -2755,6 +2795,11 @@ $pivotpager-string-maindiv-font-color: rgba($content-text-color-alt1) !default;
         border-right: 0;
       }
 
+      .e-leftfreeze.e-freezeleftborder {
+        border-left-width: 1px;
+        border-right: 0;
+      }
+
       /* stylelint-enable */
 
       .e-rowsheader .e-cellvalue {
@@ -3053,11 +3098,6 @@ $pivotpager-string-maindiv-font-color: rgba($content-text-color-alt1) !default;
       padding-left: 16px !important;
     }
 
-    th .e-expand,
-    th .e-collapse {
-      margin-top: $pivotgrid-bigger-drill-margintop;
-    }
-
     .e-grouping-bar {
       .e-all-fields-axis {
         height: 36px !important;

package/SCSS-Themes/pivotview/pivotview/tailwind-dark.scss

@@ -119,7 +119,7 @@ $pivotgrid-rowsheader-cellvalue-margin-left: 8px !default;
 $pivotgrid-rowsheader-cellvalue-margin-top: 4px !default;
 $pivotgrid-excelfilter-member-editor-node-limit-height: 120px !default;
 $pivotgrid-member-editor-node-limit-bigger-height: 450px !default;
-$pivotgrid-cell-value-margin-top: 2px !default;
+$pivotgrid-cell-value-margin: 0 !default;
 
 // $pivotview-filter-toolbar-indicator-margin-left: 20px !default;
 $pivotview-filter-toolbar-items-margin-left: 20px !default;
@@ -133,6 +133,7 @@ $pivotgrid-value-sort-icon-font-size: $text-xs !default;
 
 // normal
 $pivotgrid-active-color: $icon-color !default;
+$pivotgrid-primary-color: $primary !default;
 $pivotgrid-default-font-color: $content-text-color-alt1 !default;
 $pivotgrid-prompt-default-font-color: $pivotgrid-default-font-color !default;
 $pivotgrid-cell-border-color: $content-bg-color-alt3 !default;
@@ -1059,6 +1060,17 @@ $pivotpager-single-size-title-padding: 8px !default;
     .e-frozenscrollbar {
       background: $pivotgrid-grp-bg-color;
     }
+
+    /* stylelint-disable */
+    & .e-headercontent {
+      & .e-columnheader {
+        & .e-headercell.e-leftfreeze {
+          // For safari browser only
+          -webkit-transform: translate3d(0, 0, 0);
+        }
+      }
+    }
+    /* stylelint-enable */
   }
 
   .e-pivotview-disable-icon {
@@ -1392,6 +1404,7 @@ $pivotpager-single-size-title-padding: 8px !default;
   /*! PivotView theme */
   .e-pivotview {
     .e-pivotcell-container {
+      align-items: center;
       display: flex;
 
       .e-stackedheadertext,
@@ -1451,15 +1464,27 @@ $pivotpager-single-size-title-padding: 8px !default;
       user-select: none;
     }
 
+    .e-grid .e-content-virtualtable {
+      overflow-x: auto;
+      scrollbar-width: none; /* firefox */
+
+      &::-webkit-scrollbar {
+        display: none; /* safari, chrome and edge */
+      }
+    }
+
     .e-gtot,
     .e-gtot.e-rowsheader,
     .e-gtot.e-columnsheader,
     .e-grid .e-content,
-    .e-grid .e-gridheader,
-    .e-headercell {
+    .e-grid .e-gridheader {
       background: $pivotgrid-gtot-background-color;
     }
 
+    .e-headercell:not(.e-columnsheader) {
+      background: $pivotgrid-gtot-background-color !important;
+    }
+
     .e-grid .e-gridheader {
       border-bottom-width: 1px;
       @if($skin-name == 'bootstrap5') {
@@ -1557,20 +1582,14 @@ $pivotpager-single-size-title-padding: 8px !default;
         color: $pivotgrid-header-selection-color !important;
       }
     }
-    /* stylelint-enable */
 
     .e-drop-indicator {
       display: block;
     }
 
     div {
-      &.e-cellvalue {
-        margin-top: $pivotgrid-cell-value-margin-top;
-      }
-
       div span.e-value-sort-icon {
         @if ($skin-name == 'Material3') {
-        /* stylelint-disable */
           padding: 0 !important;
         }
       }
@@ -1599,11 +1618,20 @@ $pivotpager-single-size-title-padding: 8px !default;
       }
     }
 
+    .e-stackedheadercelldiv .e-sortfilterdiv, .e-headercelldiv .e-sortfilterdiv {
+      margin: $pivotgrid-vsort-column-margin !important;
+    }
+
+    .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
+      margin: $pivotgrid-vsort-column-parent-margin !important;
+    }
+
     .e-stackedheadercelldiv, .e-headercelldiv {
       .e-sortfilterdiv, .e-sortfilterdiv.e-value-sort-align {
-        margin: $pivotgrid-vsort-column-parent-margin !important;
+        margin: $pivotgrid-cell-value-margin !important;
         margin-left: auto !important;
-        margin-top: $pivotgrid-cell-value-margin-top !important;
+        padding-bottom: $pivotgrid-cell-value-margin !important;
+        padding-top: $pivotgrid-cell-value-margin !important;
       }
     }
 
@@ -1671,16 +1699,36 @@ $pivotpager-single-size-title-padding: 8px !default;
       }
     }
 
-    &.sf-pivotview .e-spinner-pane.e-pivot-outer-spinner {
-      z-index: 1 !important;
-    }
-
-    &.sf-pivotview .e-spinner-pane.e-pivot-outer-spinner .e-spinner-inner {
-      visibility: hidden !important;
+    &.sf-pivotview {
+      .e-spinner-pane.e-pivot-outer-spinner {
+        z-index: 1 !important;
+      }
+      .e-spinner-pane.e-pivot-outer-spinner .e-spinner-inner {
+        visibility: hidden !important;
+        /* stylelint-enable */
+      }
+      .e-grid {
+        .e-pivot-content-loader {
+          position: absolute;
+          z-index: 10;
+          color: $pivotgrid-primary-color;
+          font-size: 20px;
+          text-align: center;
+          padding: 10%;
+          
+          &.e-hide-loader {
+            display: none;
+          }
+        }
+        .e-virtual-pivot-content {
+          visibility: hidden;
+        }
+      }
     }
 
     .e-grid .e-headercelldiv,
     .e-grid .e-columnsheader {
+      /* stylelint-disable */
       padding-left: 8px !important;
 
       @if($skin-name == 'tailwind') or ($skin-name == 'tailwind-dark') {
@@ -1715,6 +1763,16 @@ $pivotpager-single-size-title-padding: 8px !default;
       border-right-width: 1px;
     }
 
+    .e-leftfreeze.e-freezeleftborder {
+      border-left-color: $pivotgrid-default-border-color !important;
+      border-right-color: $pivotgrid-default-border-color !important;
+      border-right-width: 1px !important;
+
+      &:not(.e-gtot) {
+        background: $pivotgrid-header-background-color;
+      }
+    }
+
     .e-stackedheadercelldiv {
       display: block;
     }
@@ -1723,20 +1781,6 @@ $pivotpager-single-size-title-padding: 8px !default;
     .e-stackedheadercelldiv.e-cellvalue {
       display: inline-block;
       padding-left: 12px !important;
-      margin-top: 5px;
-
-      @if ($pivotgrid-skin == 'highcontrast-light') or ($pivotgrid-skin == 'highcontrast') {
-        margin-top: 0;
-      }
-
-      @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') or ($pivotgrid-skin == 'fabric-dark') {
-        margin-top: 2px;
-        padding-left: 8px !important;
-      }
-  
-      @if ($skin-name == 'FluentUI') {
-        margin-top: 1px;
-      }
     }
 
     .e-headercelldiv.e-cellvalue {
@@ -2310,8 +2354,6 @@ $pivotpager-single-size-title-padding: 8px !default;
       cursor: pointer;
       display: inline-block;
       height: 18px;
-      margin-top: $pivotgrid-expand-collapse-margin-top;
-      margin-bottom: $pivotgrid-expand-collapse-margin-bottom;
       text-align: center;
       width: 18px;
       @if ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') or ($skin-name == 'Material3') or ($skin-name == 'tailwind') {
@@ -2324,8 +2366,6 @@ $pivotpager-single-size-title-padding: 8px !default;
     th .e-collapse {
       font-size: $pivotgrid-expcoldiv-fontsize !important;
       margin-left: 0px;
-      margin-top: $pivotgrid-drill-margintop;
-      margin-bottom: $pivotgrid-expand-collapse-margin-bottom;
     }
 
     /* stylelint-enable */
@@ -2752,6 +2792,11 @@ $pivotpager-single-size-title-padding: 8px !default;
         border-right: 0;
       }
 
+      .e-leftfreeze.e-freezeleftborder {
+        border-left-width: 1px;
+        border-right: 0;
+      }
+
       /* stylelint-enable */
 
       .e-rowsheader .e-cellvalue {
@@ -3050,11 +3095,6 @@ $pivotpager-single-size-title-padding: 8px !default;
       padding-left: 16px !important;
     }
 
-    th .e-expand,
-    th .e-collapse {
-      margin-top: $pivotgrid-bigger-drill-margintop;
-    }
-
     .e-grouping-bar {
       .e-all-fields-axis {
         height: 36px !important;