@syncfusion/blazor-themes 20.4.48 → 20.4.50

package/SCSS-Themes/fabric.scss

@@ -2085,16 +2085,16 @@ $acrdn-item-exp-not-selected-hdr-focus-border-color: $acrdn-item-exp-hdr-focus-b
     border: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
     border-radius: $acrdn-border-radius;
 
-    .e-active {
-      background: $acrdn-active-bg-color;
-    }
-
     .e-acrdn-item {
       border-color: $acrdn-item-border-color;
       border-style: $acrdn-item-border-nav-type;
       border-width: $acrdn-item-border-size;
       border-radius: $acrdn-item-border-radius;
 
+      &.e-active {
+        background: $acrdn-active-bg-color;
+      }
+
       &.e-select:last-child {
         border-bottom: $acrdn-item-select-last-child-border-bottom;
         border-radius: $acrdn-item-select-last-child-border-radius;
@@ -35009,7 +35009,9 @@ $cmenu-hover-icon-color: $cmenu-icon-color !default;
   }
 
   &.e-menu-caret-icon {
-    padding-left: $cmenu-caret-li-padding;
+    @if $skin-name != 'FluentUI' {
+      padding-left: $cmenu-caret-li-padding;
+    }
     padding-right: $cmenu-li-right-padding;
   }
 
@@ -35202,7 +35204,9 @@ $cmenu-hover-icon-color: $cmenu-icon-color !default;
   .e-bigger.e-contextmenu-wrapper.e-rtl ul .e-blankicon,
   .e-bigger .e-contextmenu-container.e-rtl ul .e-blankicon,
   .e-bigger.e-contextmenu-container.e-rtl ul .e-blankicon {
-    @include bigger-rtl-blank-icon;
+    @if $skin-name != 'FluentUI' {
+      @include bigger-rtl-blank-icon;
+    }
   }
 }
 
@@ -53646,6 +53650,7 @@ $menu-header-icon-padding: 0 16px !default;
             line-height: $menu-li-height;
             margin-right: $menu-icon-margin-right;
             text-align: center;
+            margin-bottom: 4px;
           }
 
           & .e-caret {
@@ -54299,7 +54304,7 @@ $menu-header-icon-padding: 0 16px !default;
 
     @at-root {
       & .e-menu {
-        @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
+        @if $skin-name == 'bootstrap4' {
           background-color: $cmenu-ul-bgcolor;
         }
         @else {
@@ -54658,7 +54663,7 @@ $menu-header-icon-padding: 0 16px !default;
     &.e-vertical {
       & .e-caret {
         &::before {
-          content: '\e937';
+          content: '\e98f';
         }
       }
     }
@@ -54666,7 +54671,7 @@ $menu-header-icon-padding: 0 16px !default;
     &.e-ul {
       & .e-caret {
         &::before {
-          content: '\e937';
+          content: '\e98f';
         }
       }
     }
@@ -54679,7 +54684,7 @@ $menu-header-icon-padding: 0 16px !default;
     &.e-vertical {
       & .e-caret {
         &::before {
-          content: '\e937';
+          content: '\e98f';
         }
       }
     }
@@ -54687,7 +54692,7 @@ $menu-header-icon-padding: 0 16px !default;
     &.e-ul {
       & .e-caret {
         &::before {
-          content: '\e937';
+          content: '\e98f';
         }
       }
     }
@@ -101740,6 +101745,26 @@ $pivotpager-single-size-title-padding: 4px !default;
 
       .e-toolbar-items {
         background: $pivotgrid-grp-bg-color;
+
+        .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;
+                }
+              }
+
+              &:focus {
+                @if ($skin-name =='bootstrap4') {
+                  background: $pivotgrid-grp-bg-hover-color;
+                }
+              }
+            }
+          }
+        }
       }
 
       .e-toolbar-item .e-tbar-btn.e-btn {
@@ -102346,10 +102371,8 @@ $pivotpager-single-size-title-padding: 4px !default;
     }
 
     .e-toolbar .e-tbar-btn {
-      background-color: transparent;
-
-      @if ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
-        border: none !important;
+      @if ($skin-name == 'tailwind') {
+        background-color: transparent;
       }
 
       &:hover {
@@ -103771,6 +103794,10 @@ $pivotpager-single-size-title-padding: 4px !default;
       display: none !important;
     }
 
+    .e-pivotchart.e-chart {
+      overflow: visible !important;
+    }
+
     /* stylelint-enable */
   }
 

package/SCSS-Themes/fluent-dark.scss

@@ -2173,16 +2173,16 @@ $acrdn-item-exp-not-selected-hdr-focus-border-color: $content-text-color !defaul
     border: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
     border-radius: $acrdn-border-radius;
 
-    .e-active {
-      background: $acrdn-active-bg-color;
-    }
-
     .e-acrdn-item {
       border-color: $acrdn-item-border-color;
       border-style: $acrdn-item-border-nav-type;
       border-width: $acrdn-item-border-size;
       border-radius: $acrdn-item-border-radius;
 
+      &.e-active {
+        background: $acrdn-active-bg-color;
+      }
+
       &.e-select:last-child {
         border-bottom: $acrdn-item-select-last-child-border-bottom;
         border-radius: $acrdn-item-select-last-child-border-radius;
@@ -35411,7 +35411,9 @@ $cmenu-hover-icon-color: $icon-color !default;
   }
 
   &.e-menu-caret-icon {
-    padding-left: $cmenu-caret-li-padding;
+    @if $skin-name != 'FluentUI' {
+      padding-left: $cmenu-caret-li-padding;
+    }
     padding-right: $cmenu-li-right-padding;
   }
 
@@ -35604,7 +35606,9 @@ $cmenu-hover-icon-color: $icon-color !default;
   .e-bigger.e-contextmenu-wrapper.e-rtl ul .e-blankicon,
   .e-bigger .e-contextmenu-container.e-rtl ul .e-blankicon,
   .e-bigger.e-contextmenu-container.e-rtl ul .e-blankicon {
-    @include bigger-rtl-blank-icon;
+    @if $skin-name != 'FluentUI' {
+      @include bigger-rtl-blank-icon;
+    }
   }
 }
 
@@ -43076,7 +43080,7 @@ $drag-hover-border: 2px dashed $primary-outline !default;
 
 
 //Layout Variables Start
-$dialog-close-button-left: 15px !default;
+$dialog-close-button-left: 0 !default;
 $dialog-header-border: 0 solid $border-light !default;
 $dialog-close-icon-font-size: 14px !default;
 $dialog-bigger-close-icon-font-size: 16px !default;
@@ -43085,7 +43089,7 @@ $header-content-border-radius: 0 !default;
 $dialog-border-radius: $model-radius !default;
 $dialog-border: 0 solid $border-light !default;
 $dialog-content-font-size: $text-sm !default;
-$dialog-header-line-height: $leading-tight !default;
+$dialog-header-line-height: $leading-loose !default;
 $dialog-content-line-height: $leading-normal !default;
 $dialog-content-padding-top: 0 !default;
 $dialog-bigger-content-padding-top: 0 !default;
@@ -43112,7 +43116,7 @@ $dialog-close-icon-width: 12px !default;
 $dialog-bigger-close-icon-height: 14px !default;
 $dialog-bigger-close-icon-width: 14px !default;
 $dialog-close-icon-top: 0 !default;
-$dialog-headericon-bottom: 5px !default;
+$dialog-headericon-bottom: 0 !default;
 $dialog-bigger-header-content-font-size: $text-lg !default;
 $dialog-bigger-content-font-size: $text-base !default;
 $dialog-bigger-close-icon-top: 0 !default;
@@ -54245,6 +54249,7 @@ $menu-caret-color: $cmenu-caret-color !default;
             line-height: $menu-li-height;
             margin-right: $menu-icon-margin-right;
             text-align: center;
+            margin-bottom: 4px;
           }
 
           & .e-caret {
@@ -54898,7 +54903,7 @@ $menu-caret-color: $cmenu-caret-color !default;
 
     @at-root {
       & .e-menu {
-        @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
+        @if $skin-name == 'bootstrap4' {
           background-color: $cmenu-ul-bgcolor;
         }
         @else {
@@ -102592,6 +102597,26 @@ $pivotpager-single-size-title-padding: 8px !default;
 
       .e-toolbar-items {
         background: $pivotgrid-grp-bg-color;
+
+        .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;
+                }
+              }
+
+              &:focus {
+                @if ($skin-name =='bootstrap4') {
+                  background: $pivotgrid-grp-bg-hover-color;
+                }
+              }
+            }
+          }
+        }
       }
 
       .e-toolbar-item .e-tbar-btn.e-btn {
@@ -103198,10 +103223,8 @@ $pivotpager-single-size-title-padding: 8px !default;
     }
 
     .e-toolbar .e-tbar-btn {
-      background-color: transparent;
-
-      @if ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
-        border: none !important;
+      @if ($skin-name == 'tailwind') {
+        background-color: transparent;
       }
 
       &:hover {
@@ -104623,6 +104646,10 @@ $pivotpager-single-size-title-padding: 8px !default;
       display: none !important;
     }
 
+    .e-pivotchart.e-chart {
+      overflow: visible !important;
+    }
+
     /* stylelint-enable */
   }
 

package/SCSS-Themes/fluent.scss

@@ -2174,16 +2174,16 @@ $acrdn-item-exp-not-selected-hdr-focus-border-color: $content-text-color !defaul
     border: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
     border-radius: $acrdn-border-radius;
 
-    .e-active {
-      background: $acrdn-active-bg-color;
-    }
-
     .e-acrdn-item {
       border-color: $acrdn-item-border-color;
       border-style: $acrdn-item-border-nav-type;
       border-width: $acrdn-item-border-size;
       border-radius: $acrdn-item-border-radius;
 
+      &.e-active {
+        background: $acrdn-active-bg-color;
+      }
+
       &.e-select:last-child {
         border-bottom: $acrdn-item-select-last-child-border-bottom;
         border-radius: $acrdn-item-select-last-child-border-radius;
@@ -35412,7 +35412,9 @@ $cmenu-hover-icon-color: $icon-color !default;
   }
 
   &.e-menu-caret-icon {
-    padding-left: $cmenu-caret-li-padding;
+    @if $skin-name != 'FluentUI' {
+      padding-left: $cmenu-caret-li-padding;
+    }
     padding-right: $cmenu-li-right-padding;
   }
 
@@ -35605,7 +35607,9 @@ $cmenu-hover-icon-color: $icon-color !default;
   .e-bigger.e-contextmenu-wrapper.e-rtl ul .e-blankicon,
   .e-bigger .e-contextmenu-container.e-rtl ul .e-blankicon,
   .e-bigger.e-contextmenu-container.e-rtl ul .e-blankicon {
-    @include bigger-rtl-blank-icon;
+    @if $skin-name != 'FluentUI' {
+      @include bigger-rtl-blank-icon;
+    }
   }
 }
 
@@ -43077,7 +43081,7 @@ $drag-hover-border: 2px dashed $primary-outline !default;
 
 
 //Layout Variables Start
-$dialog-close-button-left: 15px !default;
+$dialog-close-button-left: 0 !default;
 $dialog-header-border: 0 solid $border-light !default;
 $dialog-close-icon-font-size: 14px !default;
 $dialog-bigger-close-icon-font-size: 16px !default;
@@ -43086,7 +43090,7 @@ $header-content-border-radius: 0 !default;
 $dialog-border-radius: $model-radius !default;
 $dialog-border: 0 solid $border-light !default;
 $dialog-content-font-size: $text-sm !default;
-$dialog-header-line-height: $leading-tight !default;
+$dialog-header-line-height: $leading-loose !default;
 $dialog-content-line-height: $leading-normal !default;
 $dialog-content-padding-top: 0 !default;
 $dialog-bigger-content-padding-top: 0 !default;
@@ -43113,7 +43117,7 @@ $dialog-close-icon-width: 12px !default;
 $dialog-bigger-close-icon-height: 14px !default;
 $dialog-bigger-close-icon-width: 14px !default;
 $dialog-close-icon-top: 0 !default;
-$dialog-headericon-bottom: 5px !default;
+$dialog-headericon-bottom: 0 !default;
 $dialog-bigger-header-content-font-size: $text-lg !default;
 $dialog-bigger-content-font-size: $text-base !default;
 $dialog-bigger-close-icon-top: 0 !default;
@@ -54246,6 +54250,7 @@ $menu-caret-color: $cmenu-caret-color !default;
             line-height: $menu-li-height;
             margin-right: $menu-icon-margin-right;
             text-align: center;
+            margin-bottom: 4px;
           }
 
           & .e-caret {
@@ -54899,7 +54904,7 @@ $menu-caret-color: $cmenu-caret-color !default;
 
     @at-root {
       & .e-menu {
-        @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
+        @if $skin-name == 'bootstrap4' {
           background-color: $cmenu-ul-bgcolor;
         }
         @else {
@@ -102593,6 +102598,26 @@ $pivotpager-single-size-title-padding: 8px !default;
 
       .e-toolbar-items {
         background: $pivotgrid-grp-bg-color;
+
+        .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;
+                }
+              }
+
+              &:focus {
+                @if ($skin-name =='bootstrap4') {
+                  background: $pivotgrid-grp-bg-hover-color;
+                }
+              }
+            }
+          }
+        }
       }
 
       .e-toolbar-item .e-tbar-btn.e-btn {
@@ -103199,10 +103224,8 @@ $pivotpager-single-size-title-padding: 8px !default;
     }
 
     .e-toolbar .e-tbar-btn {
-      background-color: transparent;
-
-      @if ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
-        border: none !important;
+      @if ($skin-name == 'tailwind') {
+        background-color: transparent;
       }
 
       &:hover {
@@ -104624,6 +104647,10 @@ $pivotpager-single-size-title-padding: 8px !default;
       display: none !important;
     }
 
+    .e-pivotchart.e-chart {
+      overflow: visible !important;
+    }
+
     /* stylelint-enable */
   }
 

package/SCSS-Themes/highcontrast.scss

@@ -2101,16 +2101,16 @@ $acrdn-item-exp-not-selected-hdr-focus-border-color: $acrdn-focus-exp-hdr-focus-
     border: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
     border-radius: $acrdn-border-radius;
 
-    .e-active {
-      background: $acrdn-active-bg-color;
-    }
-
     .e-acrdn-item {
       border-color: $acrdn-item-border-color;
       border-style: $acrdn-item-border-nav-type;
       border-width: $acrdn-item-border-size;
       border-radius: $acrdn-item-border-radius;
 
+      &.e-active {
+        background: $acrdn-active-bg-color;
+      }
+
       &.e-select:last-child {
         border-bottom: $acrdn-item-select-last-child-border-bottom;
         border-radius: $acrdn-item-select-last-child-border-radius;
@@ -35083,7 +35083,9 @@ $cmenu-li-selected-outline-offset: 0 !default;
   }
 
   &.e-menu-caret-icon {
-    padding-left: $cmenu-caret-li-padding;
+    @if $skin-name != 'FluentUI' {
+      padding-left: $cmenu-caret-li-padding;
+    }
     padding-right: $cmenu-li-right-padding;
   }
 
@@ -35276,7 +35278,9 @@ $cmenu-li-selected-outline-offset: 0 !default;
   .e-bigger.e-contextmenu-wrapper.e-rtl ul .e-blankicon,
   .e-bigger .e-contextmenu-container.e-rtl ul .e-blankicon,
   .e-bigger.e-contextmenu-container.e-rtl ul .e-blankicon {
-    @include bigger-rtl-blank-icon;
+    @if $skin-name != 'FluentUI' {
+      @include bigger-rtl-blank-icon;
+    }
   }
 }
 
@@ -53771,6 +53775,7 @@ $menu-header-icon-padding: 0 16px !default;
             line-height: $menu-li-height;
             margin-right: $menu-icon-margin-right;
             text-align: center;
+            margin-bottom: 4px;
           }
 
           & .e-caret {
@@ -54424,7 +54429,7 @@ $menu-header-icon-padding: 0 16px !default;
 
     @at-root {
       & .e-menu {
-        @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
+        @if $skin-name == 'bootstrap4' {
           background-color: $cmenu-ul-bgcolor;
         }
         @else {
@@ -101974,6 +101979,26 @@ $pivotpager-single-size-title-padding: 4px !default;
 
       .e-toolbar-items {
         background: $pivotgrid-grp-bg-color;
+
+        .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;
+                }
+              }
+
+              &:focus {
+                @if ($skin-name =='bootstrap4') {
+                  background: $pivotgrid-grp-bg-hover-color;
+                }
+              }
+            }
+          }
+        }
       }
 
       .e-toolbar-item .e-tbar-btn.e-btn {
@@ -102580,10 +102605,8 @@ $pivotpager-single-size-title-padding: 4px !default;
     }
 
     .e-toolbar .e-tbar-btn {
-      background-color: transparent;
-
-      @if ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
-        border: none !important;
+      @if ($skin-name == 'tailwind') {
+        background-color: transparent;
       }
 
       &:hover {
@@ -104005,6 +104028,10 @@ $pivotpager-single-size-title-padding: 4px !default;
       display: none !important;
     }
 
+    .e-pivotchart.e-chart {
+      overflow: visible !important;
+    }
+
     /* stylelint-enable */
   }
 

package/SCSS-Themes/material-dark.scss

@@ -2079,16 +2079,16 @@ $acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;
     border: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
     border-radius: $acrdn-border-radius;
 
-    .e-active {
-      background: $acrdn-active-bg-color;
-    }
-
     .e-acrdn-item {
       border-color: $acrdn-item-border-color;
       border-style: $acrdn-item-border-nav-type;
       border-width: $acrdn-item-border-size;
       border-radius: $acrdn-item-border-radius;
 
+      &.e-active {
+        background: $acrdn-active-bg-color;
+      }
+
       &.e-select:last-child {
         border-bottom: $acrdn-item-select-last-child-border-bottom;
         border-radius: $acrdn-item-select-last-child-border-radius;
@@ -35556,7 +35556,9 @@ $cmenu-li-selected-outline-offset: 0 !default;
   }
 
   &.e-menu-caret-icon {
-    padding-left: $cmenu-caret-li-padding;
+    @if $skin-name != 'FluentUI' {
+      padding-left: $cmenu-caret-li-padding;
+    }
     padding-right: $cmenu-li-right-padding;
   }
 
@@ -35749,7 +35751,9 @@ $cmenu-li-selected-outline-offset: 0 !default;
   .e-bigger.e-contextmenu-wrapper.e-rtl ul .e-blankicon,
   .e-bigger .e-contextmenu-container.e-rtl ul .e-blankicon,
   .e-bigger.e-contextmenu-container.e-rtl ul .e-blankicon {
-    @include bigger-rtl-blank-icon;
+    @if $skin-name != 'FluentUI' {
+      @include bigger-rtl-blank-icon;
+    }
   }
 }
 
@@ -54461,6 +54465,7 @@ $menu-header-icon-padding: 0 16px !default;
             line-height: $menu-li-height;
             margin-right: $menu-icon-margin-right;
             text-align: center;
+            margin-bottom: 4px;
           }
 
           & .e-caret {
@@ -55114,7 +55119,7 @@ $menu-header-icon-padding: 0 16px !default;
 
     @at-root {
       & .e-menu {
-        @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
+        @if $skin-name == 'bootstrap4' {
           background-color: $cmenu-ul-bgcolor;
         }
         @else {
@@ -103349,6 +103354,26 @@ $pivotpager-single-size-title-padding: 14px !default;
 
       .e-toolbar-items {
         background: $pivotgrid-grp-bg-color;
+
+        .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;
+                }
+              }
+
+              &:focus {
+                @if ($skin-name =='bootstrap4') {
+                  background: $pivotgrid-grp-bg-hover-color;
+                }
+              }
+            }
+          }
+        }
       }
 
       .e-toolbar-item .e-tbar-btn.e-btn {
@@ -103955,10 +103980,8 @@ $pivotpager-single-size-title-padding: 14px !default;
     }
 
     .e-toolbar .e-tbar-btn {
-      background-color: transparent;
-
-      @if ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
-        border: none !important;
+      @if ($skin-name == 'tailwind') {
+        background-color: transparent;
       }
 
       &:hover {
@@ -105380,6 +105403,10 @@ $pivotpager-single-size-title-padding: 14px !default;
       display: none !important;
     }
 
+    .e-pivotchart.e-chart {
+      overflow: visible !important;
+    }
+
     /* stylelint-enable */
   }