@syncfusion/ej2-pivotview 19.3.55 → 19.4.41

package/styles/pivotview/_theme.scss

@@ -19,10 +19,6 @@
 
     .e-rowsheader .e-cellvalue {
       margin-left: 10px;
-      
-      @if ($skin-name == 'tailwind') {
-        vertical-align: super !important;
-      }
     }
 
     .e-valuescontent {
@@ -44,7 +40,7 @@
     .e-headercell {
       background-color: $pivotgrid-gtot-background-color;
     }
-    
+
     .e-grid .e-gridheader {
       border-bottom-width: 1px;
     }
@@ -71,6 +67,10 @@
         @if ($pivotgrid-skin == 'highcontrast-light') or ($pivotgrid-skin == 'highcontrast') {
           margin-top: 0;
         }
+
+        @if ($skin-name == 'tailwind') {
+          vertical-align: middle;
+        }
       }
     }
 
@@ -127,6 +127,18 @@
 
     div.e-cellvalue {
       margin-top: 5px;
+
+      @if ($pivotgrid-skin == 'highcontrast-light') or ($pivotgrid-skin == 'highcontrast') {
+        margin-top: 0;
+      }
+
+      @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
+        margin-top: 2px;
+      }
+
+      @if ($skin-name == 'FluentUI') {
+        margin-top: 1px;
+      }
     }
 
     // sass-lint:disable-all
@@ -145,20 +157,19 @@
 
       &.e-value-sort-icon {
         margin: 0px !important;
-        padding-bottom: 10px !important;
-        padding-top: 10px !important;
+        padding: 2px 4px !important;
         @if ($pivotgrid-skin == 'bootstrap4') {
-          padding: 5px !important;
+          padding-bottom: 3px !important;
+          padding-top: 3px !important;
         }
         @if ($skin-name == 'tailwind') {
-          margin: -28px -5px !important;
-          padding-bottom: 30px !important;
-          padding-top: 30px !important;
+          padding-bottom: 0px !important;
+          padding-top: 0px !important;
         }
         @if ($skin-name == 'bootstrap5') {
           font-size: 12px !important;
-          padding-bottom: 8px !important;
-          padding-top: 8px !important;
+          padding-bottom: 4px !important;
+          padding-top: 4px !important;
         }
       }
     }
@@ -173,10 +184,6 @@
       border: $pivotgrid-border-size $pivotgrid-border-type $pivotgrid-default-border-color;
     }
 
-    .e-pivotchart.e-ltr {
-      direction: ltr;
-    }
-
     .e-grid .e-columnheader.e-wrap .e-sortfilterdiv,
     .e-grid.e-wrap .e-columnheader .e-sortfilterdiv {
       margin: $pivotgrid-vsort-mouse-wrap-margin !important;
@@ -225,6 +232,14 @@
       }
     }
 
+    .sf-grid.e-responsive {
+      .e-stackedheadercelldiv .e-stackedheadertext,
+      .e-headercelldiv .e-headertext {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
     .e-grid .e-headercelldiv,
     .e-grid .e-columnsheader {
       padding-left: 8px !important;
@@ -233,12 +248,22 @@
         text-transform: none;
       }
 
-      @if($skin-name == 'bootstrap5') {
+      @if($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') {
         padding-top: 0px !important;
         padding-bottom: 0px !important;
       }
     }
 
+    .sf-grid .e-headercelldiv,
+    .sf-grid .e-columnsheader {
+      padding-right: 8px !important;
+    }
+
+    .sf-grid .e-headercelldiv,
+    .sf-grid .e-stackedheadercelldiv {
+      line-height: normal;
+    }
+
     .e-frozenheader>.e-table,
     .e-frozencontent>.e-table {
       border-left-color: $pivotgrid-default-border-color !important;
@@ -247,6 +272,11 @@
       border-right-width: 1px;
     }
 
+    .e-stackedheadercelldiv {
+      display: block;
+    }
+
+    .e-stackedheadertext.e-cellvalue,
     .e-stackedheadercelldiv.e-cellvalue {
       padding-left: 8px !important;
       margin-top: 5px;
@@ -255,14 +285,13 @@
         margin-top: 0;
       }
 
-      @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
+      @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') or ($pivotgrid-skin == 'fabric-dark') {
         margin-top: 2px;
       }
-    }
-
-    .e-stackedheadertext.e-cellvalue {
-      margin-top: $pivotgrid-header-text-margin-top;
-      padding-left: 8px !important;
+  
+      @if ($skin-name == 'FluentUI') {
+        margin-top: 1px;
+      }
     }
 
     .e-headercelldiv.e-cellvalue {
@@ -276,6 +305,7 @@
     }
 
     .e-stackedheadercelldiv,
+    .e-stackedheadertext,
     .e-headertext,
     .e-rowsheader .e-cellvalue {
       color: $pivotview-grid-header-font-color;
@@ -361,6 +391,10 @@
         height: $pivotgrid-grouping-height !important;
         min-height: $pivotgrid-grouping-height !important;
 
+        @if($skin-name == 'FluentUI') {
+          box-shadow: none;
+        }
+
         .e-hscroll .e-scroll-nav {
           background: $pivotgrid-grp-bg-color;
           min-height: $pivotgrid-grouping-height !important;
@@ -368,7 +402,7 @@
           &:hover {
             background-color: $pivotgrid-hover-color;
             @if ($pivotgrid-skin == 'bootstrap4') {
-              background-color: #5a6268;
+              background-color: $pivotgrid-bg-color;
             }
   
             .e-nav-arrow {
@@ -406,7 +440,6 @@
     .e-group-rows,
     .e-group-all-fields {
       background: $pivotgrid-grp-bg-color;
-      vertical-align: top;
       display: inline-table;
       flex: auto;
       height: $pivotgrid-grouping-height;
@@ -414,6 +447,7 @@
       overflow: hidden;
       padding-left: $pivotview-axis-indent-padding;
       scroll-behavior: smooth;
+      vertical-align: top;
 
       &.e-drag-restrict {
         cursor: no-drop;
@@ -432,6 +466,11 @@
         @if ($pivotgrid-skin == 'bootstrap4') {
           font-size: 12px;
         }
+
+        @if ($skin-name == 'bootstrap5') or ($skin-name == 'tailwind') or ($skin-name == 'FluentUI') {
+          font-size: $pivotgrid-content-font-size;
+          font-weight: normal;
+        }
       }
     }
 
@@ -460,10 +499,9 @@
               border-left: 1px solid $pivotgrid-drop-hover-color;
             }
 
-            @if ($skin-name == 'bootstrap5') {
+            @if ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') {
               border-left: 1px solid $pivotgrid-drop-hover-color;
             }
-
           }
         }
       }
@@ -496,10 +534,10 @@
 
         &:hover {
           background-color: $pivotgrid-hover-color;
-          border-color:$pivotgrid-hover-color;
+          border-color: $pivotgrid-hover-color;
           @if ($pivotgrid-skin == 'bootstrap4') {
-            background-color: #5a6268;
-            border-color: #545b62;
+            background-color: $pivotgrid-bg-color;
+            border-color: $pivotgrid-border-color;
           }
 
           .e-sort,
@@ -508,7 +546,7 @@
           .e-pv-filtered,
           .e-remove,
           .e-edit {
-            color: $pivotgrid-icon-hover-color !important;
+            color: $pivotgrid-icon-hover-color;
           }
         }
 
@@ -516,9 +554,9 @@
           background-color: $pivotgrid-focus-color;
           color: $pivotgrid-button-acitve-font-color;
           @if ($pivotgrid-skin == 'bootstrap4') {
-            background-color: #545b62;
-            border-color: #4e555b;
-            box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
+            background-color: $pivotgrid-border-color;
+            border-color: $pivotgrid-active-border-color;
+            box-shadow: 0 0 0 .2rem $pivotgrid-box-shadow-color;
           }
 
           .e-sort,
@@ -527,7 +565,7 @@
           .e-pv-filtered,
           .e-remove,
           .e-edit {
-            color: $pivotgrid-icon-focus-color !important;
+            color: $pivotgrid-icon-focus-color;
           }
         }
 
@@ -536,9 +574,9 @@
           background-color: $pivotgrid-focus-color;
           color: $pivotgrid-button-acitve-font-color;
           @if ($pivotgrid-skin == 'bootstrap4') {
-            background-color: #545b62;
-            border-color: #4e555b;
-            box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
+            background-color: $pivotgrid-border-color;
+            border-color: $pivotgrid-active-border-color;
+            box-shadow: 0 0 0 .2rem $pivotgrid-box-shadow-color;
           }
 
           .e-sort,
@@ -547,7 +585,7 @@
           .e-pv-filtered,
           .e-remove,
           .e-edit {
-            color: $pivotgrid-icon-focus-color !important;
+            color: $pivotgrid-icon-focus-color;
           }
         }
 
@@ -564,7 +602,7 @@
             margin-right: 4px;
           }
 
-          @if ($skin-name == 'bootstrap5') {
+          @if ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') {
             color: $pivotgrid-button-icon-color;
           }
 
@@ -573,8 +611,9 @@
           }
         }
 
+        // sass-lint:disable-all
         .e-draggable {
-          height: initial;
+          height: initial !important;
         }
 
         .e-drag {
@@ -587,19 +626,19 @@
         .e-pv-filtered,
         .e-remove,
         .e-edit {
-          color: $pivotgrid-button-icon-color !important;
+          color: $pivotgrid-button-icon-color;
           cursor: pointer;
           display: inline-block;
           font-size: $pivotgrid-button-icon-size;
-          height: 18px;
+          height: $pivotgrid-button-icon-wrapper-size;
           margin-left: 4px;
-          width: 18px;
+          width: $pivotgrid-button-icon-wrapper-size;
           @if ($pivotgrid-skin == 'bootstrap4') {
             margin-left: 4px;
           }
 
           &:hover {
-            color: $pivotgrid-icon-hover-color !important;
+            color: $pivotgrid-icon-hover-color;
           }
 
           &.e-disable {
@@ -637,17 +676,19 @@
       width: 100%;
     }
 
+    // sass-lint:disable-all
     .e-group-row {
       padding: 0 !important;
+
       .e-group-rows {
         display: table;
         flex: none;
         width: 100%;
-  
+
         .e-pvt-btn-div {
           max-width: unset;
           width: 100%;
-  
+
           .e-indent-div {
             pointer-events: none;
           }
@@ -655,7 +696,6 @@
       }
     }
 
-    // sass-lint:disable-all
     .e-group-row {
       .e-group-rows {
         .e-pvt-btn-div {
@@ -665,12 +705,12 @@
             @if ($pivotgrid-skin == 'bootstrap4') {
               font-weight: 400;
             }
-    
+
             &:hover {
               background-color: $pivotgrid-hover-color;
               @if ($pivotgrid-skin == 'bootstrap4') {
-                background-color: #5a6268;
-                border-color: #545b62;
+                background-color: $pivotgrid-bg-color;
+                border-color: $pivotgrid-border-color;
               }
     
               .e-sort,
@@ -687,8 +727,8 @@
               background-color: $pivotgrid-focus-color;
               color: $pivotgrid-button-acitve-font-color;
               @if ($pivotgrid-skin == 'bootstrap4') {
-                background-color: #545b62;
-                border-color: #4e555b;
+                background-color: $pivotgrid-border-color;
+                border-color: $pivotgrid-active-border-color;
                 box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
               }
     
@@ -707,8 +747,8 @@
               background-color: $pivotgrid-focus-color;
               color: $pivotgrid-button-acitve-font-color;
               @if ($pivotgrid-skin == 'bootstrap4') {
-                background-color: #545b62;
-                border-color: #4e555b;
+                background-color: $pivotgrid-border-color;
+                border-color: $pivotgrid-active-border-color;
                 box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
               }
     
@@ -730,9 +770,9 @@
             .e-edit {
               color: $pivotgrid-button-icon-color !important;
               font-size: $pivotgrid-button-icon-size;
-              height: 18px;
+              height: $pivotgrid-button-icon-wrapper-size;
               margin-left: 4px;
-              width: 18px;
+              width: $pivotgrid-button-icon-wrapper-size;
               @if ($pivotgrid-skin == 'bootstrap4') {
                 margin-left: 4px;
               }
@@ -823,7 +863,7 @@
     }
     // sass-lint:enable-all  
 
-    .e-icons:not(.e-frame) {
+    .e-icons:not(.e-frame):not(.e-btn-icon):not(.e-sort):not(.e-dropdown-icon):not(.e-pv-filter):not(.e-pv-filtered):not(.e-remove):not(.e-edit):not(.e-drag) {
       height: auto;
       width: auto;
     }
@@ -842,14 +882,19 @@
       width: 18px;
 
       @if ($pivotgrid-skin == 'highcontrast') {
-        margin-top: 0 !important;
+        margin-top: 0;
       }
 
-      @if ($pivotgrid-skin == 'highcontrast-light') or ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
+      @if ($pivotgrid-skin == 'highcontrast-light') or ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') {
         margin-top: 0;
       }
 
-      @if ($skin-name == 'bootstrap5') {
+      @if ($skin-name == 'tailwind') {
+        margin-top: 0;
+        vertical-align: middle;
+      }
+
+      @if ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') {
         margin-bottom: 2px;
         vertical-align: middle;
       }
@@ -862,9 +907,6 @@
       font-size: $pivotgrid-expcoldiv-fontsize !important;
       margin-left: 0px;
       margin-top: $pivotgrid-drill-margintop;
-      @if ($skin-name == 'tailwind') {
-        margin-top: 2px !important;
-      }
     }
 
     // sass-lint:enable-all
@@ -1118,7 +1160,7 @@
   }
 
   .e-pivottooltip {
-    border-radius: 2px;
+    border-radius: $pivotgrid-default-border-radius;
     padding: $pivotgrid-tooltip-padding;
   }
 
@@ -1200,6 +1242,7 @@
     }
 
     .e-stackedheadercelldiv,
+    .e-stackedheadertext,
     .e-headertext,
     .e-rowsheader .e-cellvalue {
       font-size: $pivotview-bigger-grid-header-font-size !important;
@@ -1208,6 +1251,11 @@
       }
     }
 
+    th .e-expand,
+    th .e-collapse {
+      margin-top: $pivotgrid-bigger-drill-margintop;
+    }
+
     .e-grouping-bar {
       .e-all-fields-axis {
         height: 36px !important;
@@ -1244,8 +1292,8 @@
           .e-remove,
           .e-edit {
             font-size: $pivotgrid-bigger-button-icon-size;
-            height: 20px;
-            width: 20px;
+            height: $pivotgrid-bigger-button-icon-wrapper-size;
+            width: $pivotgrid-bigger-button-icon-wrapper-size;
             @if ($pivotgrid-skin == 'bootstrap4') {
               padding-left: 12px;
             }
@@ -1277,6 +1325,10 @@
         }
 
         .e-draggable-prompt {
+          @if ($skin-name == 'bootstrap5') or ($skin-name == 'tailwind') or ($skin-name == 'FluentUI') {
+            font-size: $pivotgrid-bigger-content-font-size;
+          }
+
           @if ($pivotgrid-skin == 'bootstrap4') {
             font-size: 16px;
           }
@@ -1330,8 +1382,8 @@
           .e-remove,
           .e-edit {
             font-size: $pivotgrid-bigger-button-icon-size;
-            height: 20px;
-            width: 20px;
+            height: $pivotgrid-bigger-button-icon-wrapper-size;
+            width: $pivotgrid-bigger-button-icon-wrapper-size;
             @if ($pivotgrid-skin == 'bootstrap4') {
               padding-left: 12px;
             }
@@ -1387,6 +1439,7 @@
 
     
     .e-stackedheadercelldiv,
+    .e-stackedheadertext,
     .e-headertext,
     .e-rowsheader .e-cellvalue {
       color: $pivotview-grid-header-font-color !important;
@@ -1454,6 +1507,7 @@
       .e-expand::before {
         font-size: $pivotgrid-expand-bigger-icon-fontsize;
       }
+
       .e-collapse::before {
         font-size: $pivotgrid-collapse-bigger-icon-fontsize;
       }