npm - @syncfusion/blazor-themes - Versions diffs - 20.4.44 → 20.4.49 - Mend

@syncfusion/blazor-themes 20.4.44 → 20.4.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (188) hide show

package/SCSS-Themes/navigations/context-menu/tailwind-dark.scss CHANGED Viewed

@@ -174,7 +174,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;
   }
@@ -367,28 +369,34 @@ $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;
+    }
   }
 }
 @mixin focused-icon-color {
-  & .e-caret {
-    color: $cmenu-caret-color;
-  }
-  & .e-menu-icon {
-    color: $cmenu-icon-color;
+  @if $skin-name != 'bootstrap5' {
+    & .e-caret {
+      color: $cmenu-caret-color;
+    }
+    & .e-menu-icon {
+      color: $cmenu-icon-color;
+    }
   }
 }
 @mixin selected-icon-color {
-  & .e-caret {
-    color: $cmenu-caret-hover-color;
-  }
-  & .e-menu-icon {
-    color: $cmenu-hover-icon-color;
+  @if $skin-name != 'bootstrap5' {
+    & .e-caret {
+      color: $cmenu-caret-hover-color;
+    }
+    & .e-menu-icon {
+      color: $cmenu-hover-icon-color;
+    }
   }
 }

package/SCSS-Themes/navigations/context-menu/tailwind.scss CHANGED Viewed

@@ -174,7 +174,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;
   }
@@ -367,28 +369,34 @@ $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;
+    }
   }
 }
 @mixin focused-icon-color {
-  & .e-caret {
-    color: $cmenu-caret-color;
-  }
-  & .e-menu-icon {
-    color: $cmenu-icon-color;
+  @if $skin-name != 'bootstrap5' {
+    & .e-caret {
+      color: $cmenu-caret-color;
+    }
+    & .e-menu-icon {
+      color: $cmenu-icon-color;
+    }
   }
 }
 @mixin selected-icon-color {
-  & .e-caret {
-    color: $cmenu-caret-hover-color;
-  }
-  & .e-menu-icon {
-    color: $cmenu-hover-icon-color;
+  @if $skin-name != 'bootstrap5' {
+    & .e-caret {
+      color: $cmenu-caret-hover-color;
+    }
+    & .e-menu-icon {
+      color: $cmenu-hover-icon-color;
+    }
   }
 }

package/SCSS-Themes/navigations/menu/bootstrap-dark.scss CHANGED Viewed

@@ -135,6 +135,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 {
@@ -788,7 +789,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 {

package/SCSS-Themes/navigations/menu/bootstrap.scss CHANGED Viewed

@@ -136,6 +136,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 {
@@ -789,7 +790,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 {

package/SCSS-Themes/navigations/menu/bootstrap4.scss CHANGED Viewed

@@ -135,6 +135,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 {
@@ -788,7 +789,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 {

package/SCSS-Themes/navigations/menu/bootstrap5-dark.scss CHANGED Viewed

@@ -138,6 +138,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 {
@@ -791,7 +792,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 {

package/SCSS-Themes/navigations/menu/bootstrap5.scss CHANGED Viewed

@@ -138,6 +138,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 {
@@ -791,7 +792,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 {

package/SCSS-Themes/navigations/menu/fabric-dark.scss CHANGED Viewed

@@ -135,6 +135,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 {
@@ -788,7 +789,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 {
@@ -1147,7 +1148,7 @@ $menu-header-icon-padding: 0 16px !default;
     &.e-vertical {
       & .e-caret {
         &::before {
-          content: '\e937';
+          content: '\e98f';
         }
       }
     }
@@ -1155,7 +1156,7 @@ $menu-header-icon-padding: 0 16px !default;
     &.e-ul {
       & .e-caret {
         &::before {
-          content: '\e937';
+          content: '\e98f';
         }
       }
     }
@@ -1168,7 +1169,7 @@ $menu-header-icon-padding: 0 16px !default;
     &.e-vertical {
       & .e-caret {
         &::before {
-          content: '\e937';
+          content: '\e98f';
         }
       }
     }
@@ -1176,7 +1177,7 @@ $menu-header-icon-padding: 0 16px !default;
     &.e-ul {
       & .e-caret {
         &::before {
-          content: '\e937';
+          content: '\e98f';
         }
       }
     }

package/SCSS-Themes/navigations/menu/fabric.scss CHANGED Viewed

@@ -135,6 +135,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 {
@@ -788,7 +789,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 {
@@ -1147,7 +1148,7 @@ $menu-header-icon-padding: 0 16px !default;
     &.e-vertical {
       & .e-caret {
         &::before {
-          content: '\e937';
+          content: '\e98f';
         }
       }
     }
@@ -1155,7 +1156,7 @@ $menu-header-icon-padding: 0 16px !default;
     &.e-ul {
       & .e-caret {
         &::before {
-          content: '\e937';
+          content: '\e98f';
         }
       }
     }
@@ -1168,7 +1169,7 @@ $menu-header-icon-padding: 0 16px !default;
     &.e-vertical {
       & .e-caret {
         &::before {
-          content: '\e937';
+          content: '\e98f';
         }
       }
     }
@@ -1176,7 +1177,7 @@ $menu-header-icon-padding: 0 16px !default;
     &.e-ul {
       & .e-caret {
         &::before {
-          content: '\e937';
+          content: '\e98f';
         }
       }
     }

package/SCSS-Themes/navigations/menu/fluent-dark.scss CHANGED Viewed

@@ -138,6 +138,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 {
@@ -791,7 +792,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 {

package/SCSS-Themes/navigations/menu/fluent.scss CHANGED Viewed

@@ -138,6 +138,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 {
@@ -791,7 +792,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 {

package/SCSS-Themes/navigations/menu/highcontrast.scss CHANGED Viewed

@@ -136,6 +136,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 {
@@ -789,7 +790,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 {

package/SCSS-Themes/navigations/menu/material-dark.scss CHANGED Viewed

@@ -135,6 +135,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 {
@@ -788,7 +789,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 {

package/SCSS-Themes/navigations/menu/material.scss CHANGED Viewed

@@ -135,6 +135,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 {
@@ -788,7 +789,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 {

package/SCSS-Themes/navigations/menu/tailwind-dark.scss CHANGED Viewed

@@ -137,6 +137,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 {
@@ -790,7 +791,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 {

package/SCSS-Themes/navigations/menu/tailwind.scss CHANGED Viewed

@@ -137,6 +137,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 {
@@ -790,7 +791,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 {

package/SCSS-Themes/navigations/treeview/bootstrap4.scss CHANGED Viewed

@@ -56,7 +56,7 @@ $treeview-text-wrap-padding: 0 0 0 24px !default;
 $treeview-rtl-text-wrap-padding: 0 24px 0 0 !default;
 $treeview-icon-size: 20px !default;
 $treeview-big-icon-size: 24px !default;
-$treeview-icon-margin: 0 2px 0 -24px !default;
+$treeview-icon-margin: 0 4px 0 -24px !default;
 $treeview-drag-icon-margin: 0 8px 8px -24px;
 $treeview-big-icon-margin: 0 0 0 -24px !default;
 $treeview-rtl-icon-margin: -0.5px -24px 0 0 !default;

package/SCSS-Themes/navigations/treeview/bootstrap5-dark.scss CHANGED Viewed

@@ -16,7 +16,7 @@ $treeview-rtl-child-ul-padding: 0 20px 0 0 !default;
 $treeview-text-wrap-padding: 0 0 0 20px !default;
 $treeview-rtl-text-wrap-padding: 0 20px 0 0 !default;
 $treeview-icon-size: 20px !default;
-$treeview-icon-margin: 0 2px 0 -25px !default;
+$treeview-icon-margin: 0 4px 0 -25px !default;
 $treeview-rtl-icon-margin: 0 -20px 0 0 !default;
 $treeview-icon-padding: 0px !default;
 $treeview-text-padding: 0 8px !default;

package/SCSS-Themes/navigations/treeview/bootstrap5.scss CHANGED Viewed

@@ -16,7 +16,7 @@ $treeview-rtl-child-ul-padding: 0 20px 0 0 !default;
 $treeview-text-wrap-padding: 0 0 0 20px !default;
 $treeview-rtl-text-wrap-padding: 0 20px 0 0 !default;
 $treeview-icon-size: 20px !default;
-$treeview-icon-margin: 0 2px 0 -25px !default;
+$treeview-icon-margin: 0 4px 0 -25px !default;
 $treeview-rtl-icon-margin: 0 -20px 0 0 !default;
 $treeview-icon-padding: 0px !default;
 $treeview-text-padding: 0 8px !default;

package/SCSS-Themes/pivotview/pivotview/bootstrap-dark.scss CHANGED Viewed

@@ -845,6 +845,12 @@ $pivotpager-single-size-title-padding: 8px !default;
                   background: $pivotgrid-grp-bg-hover-color;
                 }
               }
+              &:focus {
+                @if ($skin-name =='bootstrap4') {
+                  background: $pivotgrid-grp-bg-hover-color;
+                }
+              }
             }
           }
         }
@@ -940,20 +946,28 @@ $pivotpager-single-size-title-padding: 8px !default;
           @if ($pivotgrid-skin == 'bootstrap4') {
             background-color: $gray-600;
             border-radius: $pivotgrid-default-border-radius;
-        }
+          }
-        .e-menu-icon,
-        .e-icons{
-          @if ($pivotgrid-skin == 'bootstrap4') {
-            color: $white;
+          .e-menu-icon,
+          .e-icons{
+            @if ($pivotgrid-skin == 'bootstrap4') {
+              color: $white;
+            }
+            @if ($pivotgrid-skin == 'FluentUI') {
+              color: $pivotgrid-active-color;
+            }
           }
+        }
-          @if ($pivotgrid-skin == 'FluentUI') {
-            color: $pivotgrid-active-color;
+        ul.e-menu {
+          @if ($pivotgrid-skin == 'fabric') or ($pivotgrid-skin == 'fabric-dark') or
+          ($pivotgrid-skin == 'highcontrast') or ($pivotgrid-skin == 'highcontrast-light') {
+            padding-right: 0 !important;
+            padding-left: 0 !important;
           }
         }
       }
-      }
       .e-tab .e-tab-header .e-toolbar-item.e-active {
         margin-left: 18px !important;
@@ -1448,13 +1462,13 @@ $pivotpager-single-size-title-padding: 8px !default;
     .e-toolbar .e-tbar-btn {
       @if ($skin-name == 'tailwind') {
         background-color: transparent;
-    }
+      }
       &:hover {
         @if ($skin-name == 'tailwind') {
           background-color: $pivot-toolbar-icon-hover-color;
-    }
-    }
+        }
+      }
     }

package/SCSS-Themes/pivotview/pivotview/bootstrap.scss CHANGED Viewed

@@ -842,6 +842,12 @@ $pivotpager-single-size-title-padding: 8px !default;
                   background: $pivotgrid-grp-bg-hover-color;
                 }
               }
+              &:focus {
+                @if ($skin-name =='bootstrap4') {
+                  background: $pivotgrid-grp-bg-hover-color;
+                }
+              }
             }
           }
         }
@@ -937,20 +943,28 @@ $pivotpager-single-size-title-padding: 8px !default;
           @if ($pivotgrid-skin == 'bootstrap4') {
             background-color: $gray-600;
             border-radius: $pivotgrid-default-border-radius;
-        }
+          }
-        .e-menu-icon,
-        .e-icons{
-          @if ($pivotgrid-skin == 'bootstrap4') {
-            color: $white;
+          .e-menu-icon,
+          .e-icons{
+            @if ($pivotgrid-skin == 'bootstrap4') {
+              color: $white;
+            }
+            @if ($pivotgrid-skin == 'FluentUI') {
+              color: $pivotgrid-active-color;
+            }
           }
+        }
-          @if ($pivotgrid-skin == 'FluentUI') {
-            color: $pivotgrid-active-color;
+        ul.e-menu {
+          @if ($pivotgrid-skin == 'fabric') or ($pivotgrid-skin == 'fabric-dark') or
+          ($pivotgrid-skin == 'highcontrast') or ($pivotgrid-skin == 'highcontrast-light') {
+            padding-right: 0 !important;
+            padding-left: 0 !important;
           }
         }
       }
-      }
       .e-tab .e-tab-header .e-toolbar-item.e-active {
         margin-left: 18px !important;
@@ -1445,13 +1459,13 @@ $pivotpager-single-size-title-padding: 8px !default;
     .e-toolbar .e-tbar-btn {
       @if ($skin-name == 'tailwind') {
         background-color: transparent;
-    }
+      }
       &:hover {
         @if ($skin-name == 'tailwind') {
           background-color: $pivot-toolbar-icon-hover-color;
-    }
-    }
+        }
+      }
     }

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

@@ -842,6 +842,12 @@ $pivotpager-single-size-title-padding: 8px !default;
                   background: $pivotgrid-grp-bg-hover-color;
                 }
               }
+              &:focus {
+                @if ($skin-name =='bootstrap4') {
+                  background: $pivotgrid-grp-bg-hover-color;
+                }
+              }
             }
           }
         }
@@ -937,20 +943,28 @@ $pivotpager-single-size-title-padding: 8px !default;
           @if ($pivotgrid-skin == 'bootstrap4') {
             background-color: $gray-600;
             border-radius: $pivotgrid-default-border-radius;
-        }
+          }
-        .e-menu-icon,
-        .e-icons{
-          @if ($pivotgrid-skin == 'bootstrap4') {
-            color: $white;
+          .e-menu-icon,
+          .e-icons{
+            @if ($pivotgrid-skin == 'bootstrap4') {
+              color: $white;
+            }
+            @if ($pivotgrid-skin == 'FluentUI') {
+              color: $pivotgrid-active-color;
+            }
           }
+        }
-          @if ($pivotgrid-skin == 'FluentUI') {
-            color: $pivotgrid-active-color;
+        ul.e-menu {
+          @if ($pivotgrid-skin == 'fabric') or ($pivotgrid-skin == 'fabric-dark') or
+          ($pivotgrid-skin == 'highcontrast') or ($pivotgrid-skin == 'highcontrast-light') {
+            padding-right: 0 !important;
+            padding-left: 0 !important;
           }
         }
       }
-      }
       .e-tab .e-tab-header .e-toolbar-item.e-active {
         margin-left: 18px !important;
@@ -1445,13 +1459,13 @@ $pivotpager-single-size-title-padding: 8px !default;
     .e-toolbar .e-tbar-btn {
       @if ($skin-name == 'tailwind') {
         background-color: transparent;
-    }
+      }
       &:hover {
         @if ($skin-name == 'tailwind') {
           background-color: $pivot-toolbar-icon-hover-color;
-    }
-    }
+        }
+      }
     }