@syncfusion/blazor-themes 20.3.60 → 20.4.38

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

@@ -175,7 +175,7 @@ $format-preview-border-color: $border-light !default;
 $format-outer-border-color: $border-light !default;
 $format-outer-fill-color: $content-bg-color !default;
 $field-list-editor-label-color: $content-text-color !default;
-$field-list-editor-label-fill: $content-text-color-alt1 !default;
+$field-list-editor-label-fill: $content-bg-color-alt1 !default;
 $field-list-back-font-color: rgba($content-text-color, .54) !default;
 $field-list-mobile-header-color: $content-bg-color-alt2 !default;
 $field-list-mobile-header-font-color: rgba($content-text-color, .87) !default;
@@ -922,6 +922,7 @@ $field-list-adaptive-outerdiv-height: 179px !default;
               display: inline-table;
               height: 100%;
               width: 100%;
+              min-width: 265px;
 
               ul {
                 .e-fullrow {
@@ -950,6 +951,8 @@ $field-list-adaptive-outerdiv-height: 179px !default;
                   cursor: pointer;
                   font-size: 13px;
                   margin-top: 3px;
+                  padding-left: 0px;
+                  padding-right: 0px;
                   @if($skin-name == 'tailwind') {
                     margin-top: 10px;
                   }
@@ -1129,10 +1132,39 @@ $field-list-adaptive-outerdiv-height: 179px !default;
       }
     }
 
-    .e-treeview .e-list-item div.e-icons {
-      font-size: $field-list-bigger-icon-size;
-      @if ($skin-name == 'tailwind') or ($skin-name == 'FluentUI') or ($skin-name == 'bootstrap5') {
-        padding-top: 12px;
+    .e-treeview {
+      .e-list-item {
+        div.e-icons {
+          font-size: $field-list-bigger-icon-size;
+
+          @if ($skin-name =='tailwind') or ($skin-name =='FluentUI') or ($skin-name =='bootstrap5') {
+            padding-top: 12px;
+          }
+        }
+      }
+
+      ul {
+        li {
+          .e-list-icon {
+
+            &.e-edit,
+            &.e-edited,
+            &.e-remove-report {
+
+              @if ($skin-name =='FluentUI') {
+                padding-top: 0;
+              }
+
+              @if ($skin-name =='bootstrap5') {
+                padding-top: 3px;
+              }
+
+              @if ($skin-name =='tailwind') {
+                padding-top: 4px;
+              }
+            }
+          }
+        }
       }
     }
 
@@ -1215,7 +1247,7 @@ $field-list-adaptive-outerdiv-height: 179px !default;
       max-width: 400px !important;
       min-width: 320px !important;
       @if ($skin-name == 'FluentUI') {
-        min-height: 370px;
+        min-height: 350px;
       }
 
       .e-member-prompt {
@@ -1615,6 +1647,12 @@ $field-list-adaptive-outerdiv-height: 179px !default;
           }
         }
       }
+
+      .e-member-editor-outer-container:not(.e-excelfilter) {
+        .e-editor-search-container {
+          padding-top: 4px !important;
+        }
+      }
     }
 
     .e-adaptive-field-list-dialog {
@@ -2066,6 +2104,21 @@ $field-list-adaptive-outerdiv-height: 179px !default;
       }
 
       /* stylelint-disable */
+      &.e-node-limit.e-excel-filter {
+        .e-excelfilter {
+          .e-member-editor-container-outer-div {
+
+            @if ($skin-name =='fabric') or ($skin-name =='fabric-dark') or ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
+                height: 75px !important;
+              }
+            
+            @if ($skin-name =='material') or ($skin-name =='material-dark') {
+              height: 65px !important;
+            }
+          }
+        }
+      }
+
       .e-excelfilter {
 
         @if ($skin-name == 'tailwind') {
@@ -2098,6 +2151,14 @@ $field-list-adaptive-outerdiv-height: 179px !default;
 
       &.e-excel-filter {
         min-width: $field-list-bigger-excel-dialog-min-width !important;
+        
+        @if ($skin-name =='fluent') or ($skin-name =='fabric') or ($skin-name =='fabric-dark') or ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
+          height: 427px !important;
+
+          &.e-node-limit {
+            height: 440px !important;
+          }
+        }
       }
     }
 
@@ -2209,11 +2270,11 @@ $field-list-adaptive-outerdiv-height: 179px !default;
 
     .e-member-editor-dialog,
     .e-olap-editor-dialog {
-      max-height: 400px !important;
+      max-height: 440px !important;
       min-width: 370px !important;
 
       .e-member-editor-container-outer-div {
-        min-height: 113px !important;
+        min-height: 75px !important;
 
         .e-list-parent .e-ul {
           height: auto;

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

@@ -175,7 +175,7 @@ $format-preview-border-color: $border-light !default;
 $format-outer-border-color: $border-light !default;
 $format-outer-fill-color: $content-bg-color !default;
 $field-list-editor-label-color: $content-text-color !default;
-$field-list-editor-label-fill: $content-text-color-alt1 !default;
+$field-list-editor-label-fill: $content-bg-color-alt1 !default;
 $field-list-back-font-color: rgba($content-text-color, .54) !default;
 $field-list-mobile-header-color: $content-bg-color-alt2 !default;
 $field-list-mobile-header-font-color: rgba($content-text-color, .87) !default;
@@ -922,6 +922,7 @@ $field-list-adaptive-outerdiv-height: 179px !default;
               display: inline-table;
               height: 100%;
               width: 100%;
+              min-width: 265px;
 
               ul {
                 .e-fullrow {
@@ -950,6 +951,8 @@ $field-list-adaptive-outerdiv-height: 179px !default;
                   cursor: pointer;
                   font-size: 13px;
                   margin-top: 3px;
+                  padding-left: 0px;
+                  padding-right: 0px;
                   @if($skin-name == 'tailwind') {
                     margin-top: 10px;
                   }
@@ -1129,10 +1132,39 @@ $field-list-adaptive-outerdiv-height: 179px !default;
       }
     }
 
-    .e-treeview .e-list-item div.e-icons {
-      font-size: $field-list-bigger-icon-size;
-      @if ($skin-name == 'tailwind') or ($skin-name == 'FluentUI') or ($skin-name == 'bootstrap5') {
-        padding-top: 12px;
+    .e-treeview {
+      .e-list-item {
+        div.e-icons {
+          font-size: $field-list-bigger-icon-size;
+
+          @if ($skin-name =='tailwind') or ($skin-name =='FluentUI') or ($skin-name =='bootstrap5') {
+            padding-top: 12px;
+          }
+        }
+      }
+
+      ul {
+        li {
+          .e-list-icon {
+
+            &.e-edit,
+            &.e-edited,
+            &.e-remove-report {
+
+              @if ($skin-name =='FluentUI') {
+                padding-top: 0;
+              }
+
+              @if ($skin-name =='bootstrap5') {
+                padding-top: 3px;
+              }
+
+              @if ($skin-name =='tailwind') {
+                padding-top: 4px;
+              }
+            }
+          }
+        }
       }
     }
 
@@ -1215,7 +1247,7 @@ $field-list-adaptive-outerdiv-height: 179px !default;
       max-width: 400px !important;
       min-width: 320px !important;
       @if ($skin-name == 'FluentUI') {
-        min-height: 370px;
+        min-height: 350px;
       }
 
       .e-member-prompt {
@@ -1615,6 +1647,12 @@ $field-list-adaptive-outerdiv-height: 179px !default;
           }
         }
       }
+
+      .e-member-editor-outer-container:not(.e-excelfilter) {
+        .e-editor-search-container {
+          padding-top: 4px !important;
+        }
+      }
     }
 
     .e-adaptive-field-list-dialog {
@@ -2066,6 +2104,21 @@ $field-list-adaptive-outerdiv-height: 179px !default;
       }
 
       /* stylelint-disable */
+      &.e-node-limit.e-excel-filter {
+        .e-excelfilter {
+          .e-member-editor-container-outer-div {
+
+            @if ($skin-name =='fabric') or ($skin-name =='fabric-dark') or ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
+                height: 75px !important;
+              }
+            
+            @if ($skin-name =='material') or ($skin-name =='material-dark') {
+              height: 65px !important;
+            }
+          }
+        }
+      }
+
       .e-excelfilter {
 
         @if ($skin-name == 'tailwind') {
@@ -2098,6 +2151,14 @@ $field-list-adaptive-outerdiv-height: 179px !default;
 
       &.e-excel-filter {
         min-width: $field-list-bigger-excel-dialog-min-width !important;
+        
+        @if ($skin-name =='fluent') or ($skin-name =='fabric') or ($skin-name =='fabric-dark') or ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
+          height: 427px !important;
+
+          &.e-node-limit {
+            height: 440px !important;
+          }
+        }
       }
     }
 
@@ -2209,11 +2270,11 @@ $field-list-adaptive-outerdiv-height: 179px !default;
 
     .e-member-editor-dialog,
     .e-olap-editor-dialog {
-      max-height: 400px !important;
+      max-height: 440px !important;
       min-width: 370px !important;
 
       .e-member-editor-container-outer-div {
-        min-height: 113px !important;
+        min-height: 75px !important;
 
         .e-list-parent .e-ul {
           height: auto;

package/SCSS-Themes/pivotview/pivotview/bootstrap-dark.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: $grey-darker !default;
+$pivotgrid-grp-bg-hover-color: $grey-darker !default;
 $pivotgrid-drag-clone-color: $grey-white !default;
 $pivotgrid-drop-hover-color: $grey-e6 !default;
 $pivotview-grid-content-opacity: 1 !default;
@@ -833,17 +834,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;
           }
         }
       }
@@ -862,15 +874,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;
             }
@@ -879,10 +904,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;
             }
@@ -1158,6 +1187,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;
@@ -1188,6 +1230,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;
+          }
+        }
       }
     }
 
@@ -1308,6 +1358,7 @@ $pivotpager-single-size-title-padding: 8px !default;
 
     .e-valuescontent {
       padding-right: 8px;
+      text-align: right;
     }
 
     .e-grid .e-rowcell {
@@ -1373,7 +1424,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
@@ -2128,6 +2179,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;
+                }
               }
             }
     
@@ -2211,7 +2265,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;
@@ -2608,6 +2662,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,
@@ -2826,6 +2884,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/bootstrap.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: $grey-f5 !default;
+$pivotgrid-grp-bg-hover-color: $grey-f5 !default;
 $pivotgrid-drag-clone-color: $grey-white !default;
 $pivotgrid-drop-hover-color: $grey-cc !default;
 $pivotview-grid-content-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 {