@syncfusion/blazor-themes 20.3.61 → 20.4.38

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

@@ -63,6 +63,7 @@ $pivotgrid-content-font-size: 13px !default;
 $pivotgrid-bigger-content-font-size: 13px !default;
 $field-list-font-family: $font-family !default;
 $pivotgrid-grp-bg-color: $neutral-lighter-alt !default;
+$pivotgrid-grp-bg-hover-color: $neutral-light !default;
 $pivotgrid-cell-hover-color: $neutral-white !default;
 $pivotgrid-drag-clone-color: $neutral-dark !default;
 $pivotgrid-drop-hover-color: $neutral-tertiary !default;
@@ -113,8 +114,8 @@ $pivotgrid-hover-color: $neutral-quintenary !default;
 $pivotgrid-focus-color: $neutral-tertiary-alt !default;
 $pivotgrid-excel-member-filter-height: 141px !default;
 $pivotgrid-excel-filter-height: 215px !default;
-$pivotgrid-excel-member-filter-bigger-height: 102px !default;
-$pivotgrid-excel-filter-bigger-height: 195px !default;
+$pivotgrid-excel-member-filter-bigger-height: 126px !default;
+$pivotgrid-excel-filter-bigger-height: 238px !default;
 $pivotgrid-bigger-excel-dialog-min-width: 350px !default;
 $pivotgrid-editor-label-padding-size: 15px 10px 16px 20px !default;
 $pivotgrid-editor-label-font: 700 13px Segoe UI !default;
@@ -832,17 +833,28 @@ $pivotpager-single-size-title-padding: 4px !default;
 
       .e-toolbar-items {
         background: $pivotgrid-grp-bg-color;
-       }
 
-      .e-toolbar-item .e-tbar-btn.e-btn {
-        @if($skin-name == 'FluentUI') {
-          line-height: 20px;
+        .e-toolbar-item {
+          .e-tbar-btn.e-btn.e-control {
+            @if ($skin-name =='fabric') or ($skin-name =='fabric-dark') or ($skin-name =='material') or ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') or ($skin-name =='bootstrap4') {
+              background: $pivotgrid-grp-bg-color;
+
+              &:hover {
+                @if ($skin-name =='material') or ($skin-name =='material-dark') or ($skin-name =='fabric-dark') or ($skin-name =='bootstrap4') {
+                  background: $pivotgrid-grp-bg-hover-color;
+                }
+              }
+            }
+          }
         }
+      }
+
+      .e-toolbar-item .e-tbar-btn.e-btn {
 
         .e-icons.e-btn-icon {
-          font-size: 16px;
-          @if ($skin-name == 'FluentUI') {
-            margin: 4px;
+
+          @if ($skin-name != 'bootstrap5') and ($skin-name != 'tailwind') and ($skin-name != 'FluentUI') {
+            font-size: 16px;
           }
         }
       }
@@ -861,15 +873,28 @@ $pivotpager-single-size-title-padding: 4px !default;
           }
           overflow: hidden;
           padding-left: 10px;
+
           @if ($pivotgrid-skin == 'bootstrap4') {
-            background-color: $gray-100;
+            background-color: $pivotgrid-grp-bg-color;
             color: $gray-700;
           }
 
+          @if ($pivotgrid-skin =='FluentUI') {
+            background-color: $pivotgrid-grp-bg-color;
+
+            &:hover {
+              background: $pivotgrid-grp-bg-hover-color;
+            }
+          }
+
           .e-menu-icon {
             margin-left: 0;
             margin-right: 0;
-            font-size: 16px;
+
+            @if ($skin-name != 'bootstrap5') and ($skin-name != 'tailwind') {
+              font-size: 16px;
+            }
+
             @if ($pivotgrid-skin == 'bootstrap4') {
               color: $gray-700;
             }
@@ -878,10 +903,14 @@ $pivotpager-single-size-title-padding: 4px !default;
               color: $pivotgrid-active-color;
             }
 
-            @if ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') {
+            @if ($skin-name == 'bootstrap5') {
               line-height: $pivotgrid-menubar-height;
             }
 
+            @if ($skin-name == 'FluentUI') {
+              line-height: 28px;
+            }
+
             @if ($skin-name == 'tailwind') {
               line-height: 40px;
             }
@@ -1157,6 +1186,19 @@ $pivotpager-single-size-title-padding: 4px !default;
         }
       }
 
+      @if ($skin-name == 'FluentUI') or ($skin-name == 'fabric') or ($skin-name == 'fabric-dark') {
+        &.e-node-limit {
+          .e-excelfilter {
+            .e-member-editor-container-outer-div {
+              height: 82px !important;
+              @if ($skin-name == 'fabric') or ($skin-name == 'fabric-dark') {
+                height: 96px !important;
+              }
+            }
+          }
+        }
+      }
+
       .e-excelfilter {
         .e-member-editor-container-outer-div {
           height: $pivotgrid-excel-member-filter-bigger-height !important;
@@ -1187,6 +1229,14 @@ $pivotpager-single-size-title-padding: 4px !default;
 
       &.e-excel-filter {
         min-width: $pivotgrid-bigger-excel-dialog-min-width;
+        
+        @if ($skin-name =='FluentUI') or ($skin-name =='fabric') {
+          height: 427px !important;
+
+          &.e-node-limit {
+            height: 440px !important;
+          }
+        }
       }
     }
 
@@ -1307,6 +1357,7 @@ $pivotpager-single-size-title-padding: 4px !default;
 
     .e-valuescontent {
       padding-right: 8px;
+      text-align: right;
     }
 
     .e-grid .e-rowcell {
@@ -1372,7 +1423,7 @@ $pivotpager-single-size-title-padding: 4px !default;
     .e-member-editor-dialog,
     .e-olap-editor-dialog {
       // sass-lint:disable-all
-      min-height: 385px !important;
+      min-height: 350px !important;
       min-width: 350px !important;
       visibility: hidden;
       // sass-lint:enable-all
@@ -2127,6 +2178,9 @@ $pivotpager-single-size-title-padding: 4px !default;
               &.e-descend {
                 margin-top: 3px;
                 transform: rotateX(180deg);
+                @if ($skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'fabric') {
+                  margin-top: 4px !important;
+                }
               }
             }
     
@@ -2210,7 +2264,7 @@ $pivotpager-single-size-title-padding: 4px !default;
     .e-expand,
     .e-collapse {
       cursor: pointer;
-      display: inline;
+      display: inline-block;
       height: 18px;
       margin-top: 5px;
       text-align: center;
@@ -2607,6 +2661,10 @@ $pivotpager-single-size-title-padding: 4px !default;
         margin-right: 7px;
       }
 
+      .e-valuescontent {
+        text-align: left;
+      }
+
       .e-group-values,
       .e-group-columns,
       .e-group-filters,
@@ -2825,6 +2883,7 @@ $pivotpager-single-size-title-padding: 4px !default;
   .e-pivottooltip {
     border-radius: $pivotgrid-default-border-radius;
     padding: $pivotgrid-tooltip-padding;
+    text-align: initial;
   }
 
   .e-pivottooltip p {

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

@@ -63,6 +63,7 @@ $pivotgrid-content-font-size: 13px !default;
 $pivotgrid-bigger-content-font-size: 13px !default;
 $field-list-font-family: $font-family !default;
 $pivotgrid-grp-bg-color: $neutral-lighter !default;
+$pivotgrid-grp-bg-hover-color: $neutral-lighter !default;
 $pivotgrid-cell-hover-color: rgba(0, 0, 0, 0) !default;
 $pivotgrid-drag-clone-color: $neutral-white !default;
 $pivotgrid-drop-hover-color: $neutral-light !default;
@@ -113,8 +114,8 @@ $pivotgrid-hover-color: $neutral-quintenary !default;
 $pivotgrid-focus-color: $neutral-tertiary-alt !default;
 $pivotgrid-excel-member-filter-height: 141px !default;
 $pivotgrid-excel-filter-height: 215px !default;
-$pivotgrid-excel-member-filter-bigger-height: 102px !default;
-$pivotgrid-excel-filter-bigger-height: 195px !default;
+$pivotgrid-excel-member-filter-bigger-height: 130px !default;
+$pivotgrid-excel-filter-bigger-height: 234px !default;
 $pivotgrid-bigger-excel-dialog-min-width: 350px !default;
 $pivotgrid-editor-label-padding-size: 15px 10px 16px 20px !default;
 $pivotgrid-editor-label-font: 700 13px Segoe UI !default;
@@ -829,17 +830,28 @@ $pivotpager-single-size-title-padding: 4px !default;
 
       .e-toolbar-items {
         background: $pivotgrid-grp-bg-color;
-       }
 
-      .e-toolbar-item .e-tbar-btn.e-btn {
-        @if($skin-name == 'FluentUI') {
-          line-height: 20px;
+        .e-toolbar-item {
+          .e-tbar-btn.e-btn.e-control {
+            @if ($skin-name =='fabric') or ($skin-name =='fabric-dark') or ($skin-name =='material') or ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') or ($skin-name =='bootstrap4') {
+              background: $pivotgrid-grp-bg-color;
+
+              &:hover {
+                @if ($skin-name =='material') or ($skin-name =='material-dark') or ($skin-name =='fabric-dark') or ($skin-name =='bootstrap4') {
+                  background: $pivotgrid-grp-bg-hover-color;
+                }
+              }
+            }
+          }
         }
+      }
+
+      .e-toolbar-item .e-tbar-btn.e-btn {
 
         .e-icons.e-btn-icon {
-          font-size: 16px;
-          @if ($skin-name == 'FluentUI') {
-            margin: 4px;
+
+          @if ($skin-name != 'bootstrap5') and ($skin-name != 'tailwind') and ($skin-name != 'FluentUI') {
+            font-size: 16px;
           }
         }
       }
@@ -858,15 +870,28 @@ $pivotpager-single-size-title-padding: 4px !default;
           }
           overflow: hidden;
           padding-left: 10px;
+
           @if ($pivotgrid-skin == 'bootstrap4') {
-            background-color: $gray-100;
+            background-color: $pivotgrid-grp-bg-color;
             color: $gray-700;
           }
 
+          @if ($pivotgrid-skin =='FluentUI') {
+            background-color: $pivotgrid-grp-bg-color;
+
+            &:hover {
+              background: $pivotgrid-grp-bg-hover-color;
+            }
+          }
+
           .e-menu-icon {
             margin-left: 0;
             margin-right: 0;
-            font-size: 16px;
+
+            @if ($skin-name != 'bootstrap5') and ($skin-name != 'tailwind') {
+              font-size: 16px;
+            }
+
             @if ($pivotgrid-skin == 'bootstrap4') {
               color: $gray-700;
             }
@@ -875,10 +900,14 @@ $pivotpager-single-size-title-padding: 4px !default;
               color: $pivotgrid-active-color;
             }
 
-            @if ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') {
+            @if ($skin-name == 'bootstrap5') {
               line-height: $pivotgrid-menubar-height;
             }
 
+            @if ($skin-name == 'FluentUI') {
+              line-height: 28px;
+            }
+
             @if ($skin-name == 'tailwind') {
               line-height: 40px;
             }
@@ -1154,6 +1183,19 @@ $pivotpager-single-size-title-padding: 4px !default;
         }
       }
 
+      @if ($skin-name == 'FluentUI') or ($skin-name == 'fabric') or ($skin-name == 'fabric-dark') {
+        &.e-node-limit {
+          .e-excelfilter {
+            .e-member-editor-container-outer-div {
+              height: 82px !important;
+              @if ($skin-name == 'fabric') or ($skin-name == 'fabric-dark') {
+                height: 96px !important;
+              }
+            }
+          }
+        }
+      }
+
       .e-excelfilter {
         .e-member-editor-container-outer-div {
           height: $pivotgrid-excel-member-filter-bigger-height !important;
@@ -1184,6 +1226,14 @@ $pivotpager-single-size-title-padding: 4px !default;
 
       &.e-excel-filter {
         min-width: $pivotgrid-bigger-excel-dialog-min-width;
+        
+        @if ($skin-name =='FluentUI') or ($skin-name =='fabric') {
+          height: 427px !important;
+
+          &.e-node-limit {
+            height: 440px !important;
+          }
+        }
       }
     }
 
@@ -1304,6 +1354,7 @@ $pivotpager-single-size-title-padding: 4px !default;
 
     .e-valuescontent {
       padding-right: 8px;
+      text-align: right;
     }
 
     .e-grid .e-rowcell {
@@ -1369,7 +1420,7 @@ $pivotpager-single-size-title-padding: 4px !default;
     .e-member-editor-dialog,
     .e-olap-editor-dialog {
       // sass-lint:disable-all
-      min-height: 385px !important;
+      min-height: 350px !important;
       min-width: 350px !important;
       visibility: hidden;
       // sass-lint:enable-all
@@ -2124,6 +2175,9 @@ $pivotpager-single-size-title-padding: 4px !default;
               &.e-descend {
                 margin-top: 3px;
                 transform: rotateX(180deg);
+                @if ($skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'fabric') {
+                  margin-top: 4px !important;
+                }
               }
             }
     
@@ -2207,7 +2261,7 @@ $pivotpager-single-size-title-padding: 4px !default;
     .e-expand,
     .e-collapse {
       cursor: pointer;
-      display: inline;
+      display: inline-block;
       height: 18px;
       margin-top: 5px;
       text-align: center;
@@ -2604,6 +2658,10 @@ $pivotpager-single-size-title-padding: 4px !default;
         margin-right: 7px;
       }
 
+      .e-valuescontent {
+        text-align: left;
+      }
+
       .e-group-values,
       .e-group-columns,
       .e-group-filters,
@@ -2822,6 +2880,7 @@ $pivotpager-single-size-title-padding: 4px !default;
   .e-pivottooltip {
     border-radius: $pivotgrid-default-border-radius;
     padding: $pivotgrid-tooltip-padding;
+    text-align: initial;
   }
 
   .e-pivottooltip p {

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

@@ -79,7 +79,7 @@ $pivotgrid-drill-margintop: 0 !default;
 $pivotgrid-bigger-drill-margintop: 0 !default;
 $pivotgrid-rtl-expand-icon-font-size: 18px !default;
 $pivotgrid-collapse-icon-fonsize: 18px !default;
-$pivotgrid-vsort-column-margin: -30px 0 !default;
+$pivotgrid-vsort-column-margin: -33px 0 !default;
 $pivotgrid-vsort-column-parent-margin: -11px 0 !default;
 $pivotgrid-vsort-row-margin: -20px 0 !default;
 $pivotgrid-vsort-row-parent-margin: -12px 0 !default;
@@ -87,7 +87,7 @@ $pivotgrid-tooltip-padding: 3px 4px !default;
 $pivotgrid-tooltip-fontsize: 14px !default;
 $pivotgrid-tooltip-fontfamily: $font-family !default;
 $pivotgrid-member-filter-list-height: 130px !default;
-$pivotgrid-member-filter-list-bigger-height: 120px !default;
+$pivotgrid-member-filter-list-bigger-height: 105px !default;
 $pivotview-grid-indent-padding: 8px !default;
 $pivotview-grid-bigger-indent-padding: 10px !default;
 $pivotview-indent-space-size: 18px !default;
@@ -134,6 +134,7 @@ $pivotgrid-cell-border-color: $border-light !default;
 $pivotgrid-default-border-color: $border-light !default;
 $pivotgrid-table-background-color: $transparent !default;
 $pivotgrid-grp-bg-color: $content-bg-color-alt1 !default;
+$pivotgrid-grp-bg-hover-color: $gray30 !default;
 $pivotgrid-cell-hover-color: $table-bg-color-hover !default;
 $pivotgrid-drag-clone-color: $content-bg-color-alt3 !default;
 $pivotgrid-drop-hover-color: $primary !default;
@@ -835,17 +836,28 @@ $pivotpager-single-size-title-padding: 8px !default;
 
       .e-toolbar-items {
         background: $pivotgrid-grp-bg-color;
-       }
 
-      .e-toolbar-item .e-tbar-btn.e-btn {
-        @if($skin-name == 'FluentUI') {
-          line-height: 20px;
+        .e-toolbar-item {
+          .e-tbar-btn.e-btn.e-control {
+            @if ($skin-name =='fabric') or ($skin-name =='fabric-dark') or ($skin-name =='material') or ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') or ($skin-name =='bootstrap4') {
+              background: $pivotgrid-grp-bg-color;
+
+              &:hover {
+                @if ($skin-name =='material') or ($skin-name =='material-dark') or ($skin-name =='fabric-dark') or ($skin-name =='bootstrap4') {
+                  background: $pivotgrid-grp-bg-hover-color;
+                }
+              }
+            }
+          }
         }
+      }
+
+      .e-toolbar-item .e-tbar-btn.e-btn {
 
         .e-icons.e-btn-icon {
-          font-size: 16px;
-          @if ($skin-name == 'FluentUI') {
-            margin: 4px;
+
+          @if ($skin-name != 'bootstrap5') and ($skin-name != 'tailwind') and ($skin-name != 'FluentUI') {
+            font-size: 16px;
           }
         }
       }
@@ -864,15 +876,28 @@ $pivotpager-single-size-title-padding: 8px !default;
           }
           overflow: hidden;
           padding-left: 10px;
+
           @if ($pivotgrid-skin == 'bootstrap4') {
-            background-color: $gray-100;
+            background-color: $pivotgrid-grp-bg-color;
             color: $gray-700;
           }
 
+          @if ($pivotgrid-skin =='FluentUI') {
+            background-color: $pivotgrid-grp-bg-color;
+
+            &:hover {
+              background: $pivotgrid-grp-bg-hover-color;
+            }
+          }
+
           .e-menu-icon {
             margin-left: 0;
             margin-right: 0;
-            font-size: 16px;
+
+            @if ($skin-name != 'bootstrap5') and ($skin-name != 'tailwind') {
+              font-size: 16px;
+            }
+
             @if ($pivotgrid-skin == 'bootstrap4') {
               color: $gray-700;
             }
@@ -881,10 +906,14 @@ $pivotpager-single-size-title-padding: 8px !default;
               color: $pivotgrid-active-color;
             }
 
-            @if ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') {
+            @if ($skin-name == 'bootstrap5') {
               line-height: $pivotgrid-menubar-height;
             }
 
+            @if ($skin-name == 'FluentUI') {
+              line-height: 28px;
+            }
+
             @if ($skin-name == 'tailwind') {
               line-height: 40px;
             }
@@ -1160,6 +1189,19 @@ $pivotpager-single-size-title-padding: 8px !default;
         }
       }
 
+      @if ($skin-name == 'FluentUI') or ($skin-name == 'fabric') or ($skin-name == 'fabric-dark') {
+        &.e-node-limit {
+          .e-excelfilter {
+            .e-member-editor-container-outer-div {
+              height: 82px !important;
+              @if ($skin-name == 'fabric') or ($skin-name == 'fabric-dark') {
+                height: 96px !important;
+              }
+            }
+          }
+        }
+      }
+
       .e-excelfilter {
         .e-member-editor-container-outer-div {
           height: $pivotgrid-excel-member-filter-bigger-height !important;
@@ -1190,6 +1232,14 @@ $pivotpager-single-size-title-padding: 8px !default;
 
       &.e-excel-filter {
         min-width: $pivotgrid-bigger-excel-dialog-min-width;
+        
+        @if ($skin-name =='FluentUI') or ($skin-name =='fabric') {
+          height: 427px !important;
+
+          &.e-node-limit {
+            height: 440px !important;
+          }
+        }
       }
     }
 
@@ -1310,6 +1360,7 @@ $pivotpager-single-size-title-padding: 8px !default;
 
     .e-valuescontent {
       padding-right: 8px;
+      text-align: right;
     }
 
     .e-grid .e-rowcell {
@@ -1375,7 +1426,7 @@ $pivotpager-single-size-title-padding: 8px !default;
     .e-member-editor-dialog,
     .e-olap-editor-dialog {
       // sass-lint:disable-all
-      min-height: 385px !important;
+      min-height: 350px !important;
       min-width: 350px !important;
       visibility: hidden;
       // sass-lint:enable-all
@@ -2130,6 +2181,9 @@ $pivotpager-single-size-title-padding: 8px !default;
               &.e-descend {
                 margin-top: 3px;
                 transform: rotateX(180deg);
+                @if ($skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'fabric') {
+                  margin-top: 4px !important;
+                }
               }
             }
     
@@ -2213,7 +2267,7 @@ $pivotpager-single-size-title-padding: 8px !default;
     .e-expand,
     .e-collapse {
       cursor: pointer;
-      display: inline;
+      display: inline-block;
       height: 18px;
       margin-top: 5px;
       text-align: center;
@@ -2610,6 +2664,10 @@ $pivotpager-single-size-title-padding: 8px !default;
         margin-right: 7px;
       }
 
+      .e-valuescontent {
+        text-align: left;
+      }
+
       .e-group-values,
       .e-group-columns,
       .e-group-filters,
@@ -2828,6 +2886,7 @@ $pivotpager-single-size-title-padding: 8px !default;
   .e-pivottooltip {
     border-radius: $pivotgrid-default-border-radius;
     padding: $pivotgrid-tooltip-padding;
+    text-align: initial;
   }
 
   .e-pivottooltip p {