@syncfusion/blazor-themes 20.4.48 → 20.4.49

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

@@ -833,6 +833,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 {
@@ -1439,10 +1459,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 {

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

@@ -836,6 +836,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 {
@@ -1442,10 +1462,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 {

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

@@ -836,6 +836,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 {
@@ -1442,10 +1462,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 {

package/SCSS-Themes/tailwind-dark.scss

@@ -2108,16 +2108,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;
@@ -35277,7 +35277,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;
   }
 
@@ -35470,7 +35472,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;
+    }
   }
 }
 
@@ -54080,6 +54084,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 {
@@ -54733,7 +54738,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 {
@@ -102378,6 +102383,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 {
@@ -102984,10 +103009,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 {

package/SCSS-Themes/tailwind.scss

@@ -2105,16 +2105,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;
@@ -35274,7 +35274,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;
   }
 
@@ -35467,7 +35469,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;
+    }
   }
 }
 
@@ -54077,6 +54081,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 {
@@ -54730,7 +54735,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 {
@@ -102375,6 +102380,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 {
@@ -102981,10 +103006,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 {

package/package.json

@@ -1 +1 @@
-{"name":"@syncfusion/blazor-themes","version":"20.4.48","description":"This package contains the individual component wise SCSS files and single SCSS files for Syncfusion Blazor components.","author":"Syncfusion Inc.","license":"SEE LICENSE IN license","keywords":["Blazor","Blazor Themes","Syncfusion","Syncfusion Blazor","Web components","Themes","Individual Themes","Combined Themes","Syncfusion Blazor SCSS"]}
+{"name":"@syncfusion/blazor-themes","version":"20.4.49","description":"This package contains the individual component wise SCSS files and single SCSS files for Syncfusion Blazor components.","author":"Syncfusion Inc.","license":"SEE LICENSE IN license","keywords":["Blazor","Blazor Themes","Syncfusion","Syncfusion Blazor","Web components","Themes","Individual Themes","Combined Themes","Syncfusion Blazor SCSS"]}