@syncfusion/blazor-themes 20.3.61 → 20.4.38

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

@@ -64,6 +64,7 @@ $pivotgrid-bigger-content-font-size: 13px !default;
 $field-list-font-family: $font-family !default;
 $pivotgrid-cell-hover-color: rgba(0, 0, 0, 0) !default;
 $pivotgrid-grp-bg-color: darken($gray-100, 2%) !default;
+$pivotgrid-grp-bg-hover-color: $gray-600 !default;
 $pivotgrid-drag-clone-color: $white !default;
 $pivotgrid-drop-hover-color: #ccc !default;
 $pivotview-grid-content-opacity: 1 !default;
@@ -117,7 +118,7 @@ $pivotgrid-bigger-button-inner-padding: 7px !default;
 $pivotgrid-excel-member-filter-height: 170px !default;
 $pivotgrid-excel-filter-height: 234px !default;
 $pivotgrid-excel-member-filter-bigger-height: 130px !default;
-$pivotgrid-excel-filter-bigger-height: 213px !default;
+$pivotgrid-excel-filter-bigger-height: 230px !default;
 $pivotgrid-editor-label-padding-size: 17px 10px 16px 20px !default;
 $pivotgrid-editor-label-font: 500 13px Helvetica !default;
 $pivotgrid-editor-label-opacity: 1 !default;
@@ -830,17 +831,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;
           }
         }
       }
@@ -859,15 +871,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;
             }
@@ -876,10 +901,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;
             }
@@ -1155,6 +1184,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;
@@ -1185,6 +1227,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;
+          }
+        }
       }
     }
 
@@ -1305,6 +1355,7 @@ $pivotpager-single-size-title-padding: 8px !default;
 
     .e-valuescontent {
       padding-right: 8px;
+      text-align: right;
     }
 
     .e-grid .e-rowcell {
@@ -1370,7 +1421,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
@@ -2125,6 +2176,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;
+                }
               }
             }
     
@@ -2208,7 +2262,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;
@@ -2605,6 +2659,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,
@@ -2823,6 +2881,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 {

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

@@ -95,7 +95,7 @@ $pivotgrid-bigger-button-line-height: 1em !default;
 $pivotgrid-excel-member-filter-height: 171px !default;
 $pivotgrid-excel-filter-height: 248px !default;
 $pivotgrid-excel-member-filter-bigger-height: 127px !default;
-$pivotgrid-excel-filter-bigger-height: 220px !default;
+$pivotgrid-excel-filter-bigger-height: 240px !default;
 $pivotgrid-editor-label-padding-size: 12px 10px 16px 20px !default;
 $pivotgrid-editor-label-font: 500 13px Inter !default;
 $pivotgrid-editor-label-opacity: .87 !default;
@@ -134,6 +134,7 @@ $pivotgrid-cell-border-color: $content-bg-color-alt3 !default;
 $pivotgrid-default-border-color: $content-bg-color-alt3 !default;
 $pivotgrid-table-background-color: $transparent !default;
 $pivotgrid-grp-bg-color: $content-bg-color-alt1 !default;
+$pivotgrid-grp-bg-hover-color: $content-bg-color-alt1 !default;
 $pivotgrid-cell-hover-color: rgba(0, 0, 0, 0) !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 {

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

@@ -95,7 +95,7 @@ $pivotgrid-bigger-button-line-height: 1em !default;
 $pivotgrid-excel-member-filter-height: 171px !default;
 $pivotgrid-excel-filter-height: 248px !default;
 $pivotgrid-excel-member-filter-bigger-height: 127px !default;
-$pivotgrid-excel-filter-bigger-height: 220px !default;
+$pivotgrid-excel-filter-bigger-height: 240px !default;
 $pivotgrid-editor-label-padding-size: 12px 10px 16px 20px !default;
 $pivotgrid-editor-label-font: 500 13px Inter !default;
 $pivotgrid-editor-label-opacity: .87 !default;
@@ -134,6 +134,7 @@ $pivotgrid-cell-border-color: $content-bg-color-alt3 !default;
 $pivotgrid-default-border-color: $content-bg-color-alt3 !default;
 $pivotgrid-table-background-color: $transparent !default;
 $pivotgrid-grp-bg-color: $content-bg-color-alt1 !default;
+$pivotgrid-grp-bg-hover-color: $content-bg-color-alt1 !default;
 $pivotgrid-cell-hover-color: rgba(0, 0, 0, 0) !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 {