npm - @syncfusion/blazor-themes - Versions diffs - 20.3.60 → 20.4.38 - Mend

@syncfusion/blazor-themes 20.3.60 → 20.4.38

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 (454) hide show

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

@@ -356,9 +356,6 @@ $cmenu-li-selected-outline-offset: 0 !default;
     & .e-menu-item  {
       @include bigger-li-size;
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
-        padding: $cmenu-bigger-li-padding;
-      }
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;

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

@@ -353,9 +353,6 @@ $cmenu-hover-icon-color: $cmenu-icon-color !default;
     & .e-menu-item  {
       @include bigger-li-size;
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
-        padding: $cmenu-bigger-li-padding;
-      }
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;

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

@@ -353,9 +353,6 @@ $cmenu-hover-icon-color: $cmenu-icon-color !default;
     & .e-menu-item  {
       @include bigger-li-size;
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
-        padding: $cmenu-bigger-li-padding;
-      }
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;

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

@@ -355,9 +355,6 @@ $cmenu-hover-icon-color: $cmenu-icon-color !default;
     & .e-menu-item  {
       @include bigger-li-size;
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
-        padding: $cmenu-bigger-li-padding;
-      }
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;

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

@@ -355,9 +355,6 @@ $cmenu-hover-icon-color: $cmenu-icon-color !default;
     & .e-menu-item  {
       @include bigger-li-size;
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
-        padding: $cmenu-bigger-li-padding;
-      }
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;

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

@@ -356,9 +356,6 @@ $cmenu-li-selected-outline-offset: 0 !default;
     & .e-menu-item  {
       @include bigger-li-size;
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
-        padding: $cmenu-bigger-li-padding;
-      }
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;

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

@@ -353,9 +353,6 @@ $cmenu-hover-icon-color: $cmenu-icon-color !default;
     & .e-menu-item  {
       @include bigger-li-size;
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
-        padding: $cmenu-bigger-li-padding;
-      }
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;

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

@@ -355,9 +355,6 @@ $cmenu-hover-icon-color: $icon-color !default;
     & .e-menu-item  {
       @include bigger-li-size;
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
-        padding: $cmenu-bigger-li-padding;
-      }
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;

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

@@ -355,9 +355,6 @@ $cmenu-hover-icon-color: $icon-color !default;
     & .e-menu-item  {
       @include bigger-li-size;
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
-        padding: $cmenu-bigger-li-padding;
-      }
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;

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

@@ -353,9 +353,6 @@ $cmenu-li-selected-outline-offset: 0 !default;
     & .e-menu-item  {
       @include bigger-li-size;
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
-        padding: $cmenu-bigger-li-padding;
-      }
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;

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

@@ -356,9 +356,6 @@ $cmenu-li-selected-outline-offset: 0 !default;
     & .e-menu-item  {
       @include bigger-li-size;
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
-        padding: $cmenu-bigger-li-padding;
-      }
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;

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

@@ -353,9 +353,6 @@ $cmenu-hover-icon-color: $cmenu-icon-color !default;
     & .e-menu-item  {
       @include bigger-li-size;
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
-        padding: $cmenu-bigger-li-padding;
-      }
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;

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

@@ -356,9 +356,6 @@ $cmenu-hover-icon-color: $cmenu-icon-color !default;
     & .e-menu-item  {
       @include bigger-li-size;
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
-        padding: $cmenu-bigger-li-padding;
-      }
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;

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

@@ -356,9 +356,6 @@ $cmenu-hover-icon-color: $cmenu-icon-color !default;
     & .e-menu-item  {
       @include bigger-li-size;
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
-        padding: $cmenu-bigger-li-padding;
-      }
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;

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

@@ -7,6 +7,7 @@ $hscroll-nav-bgr-minheight: 50px !default;
 $hscroll-mob-nav-nrml-width: 50px !default;
 $hscroll-device-arrow-width: 50px !default;
 $hscroll-device-arrow-size: 14px !default;
+$hscroll-device-arrow-icon-size: 12px !default;
 $hscroll-device-arrow-size-bigger: 14px !default;
 $hscroll-overlay-opacity: .5 !default;
 $hscroll-device-arrow-border-color: $default-border-color !default;
@@ -40,6 +41,13 @@ $hscroll-hover-border: 0 !default;
 $hscroll-hover-border-color: '' !default;
 $hscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
+$hscroll-nav-hover-press-bg: $hscroll-hover-bg !default;
+$hscroll-nav-hover-icons-color: $hscroll-default-icon-color !default;
+$hscroll-nav-hover-border: $hscroll-hover-border !default;
+$hscroll-nav-focus-bg-color: $hscroll-hover-bg !default;
+$hscroll-nav-focus-border: $hscroll-focus-border !default;
+$hscroll-nav-active-color: $hscroll-default-icon-color !default;
 @mixin hscroll-btn-animation {
   content: '';
 }
@@ -233,10 +241,7 @@ $hscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
       text-align: center;
       vertical-align: middle;
       width: 100%;
-      @if $hscroll-skin == 'tailwind' or $hscroll-skin == 'bootstrap5' {
-        font-size: $hscroll-device-arrow-size;
-      }
+      font-size: $hscroll-device-arrow-icon-size;
     }
     .e-hscroll-bar {
@@ -319,14 +324,8 @@ $hscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
           border: $hscroll-hover-border;
           color: $hscroll-hover-font;
-          @if $hscroll-skin == 'material' {
-            border-color: $hscroll-hover-border-color;
-          }
-          @if $hscroll-skin == 'highcontrast' {
-            &:active {
-              background: $hscroll-press-bg;
-            }
+          &:active {
+            background: $hscroll-nav-hover-press-bg;
           }
         }
       }
@@ -338,42 +337,21 @@ $hscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
         &:hover {
           background: $hscroll-hover-bg;
-          border: $hscroll-hover-border;
+          border: $hscroll-nav-hover-border;
           color: $hscroll-hover-font;
-          @if $hscroll-skin == 'bootstrap4' {
-            .e-icons {
-              color: inherit;
-            }
-          }
-          @if $hscroll-skin == 'highcontrast' {
-            border: 2px solid $hscroll-nav-hover-border-color;
-            &:active {
-              border: 0;
-            }
+          .e-icons {
+            color: $hscroll-nav-hover-icons-color;
           }
         }
         &:focus {
-          background: $hscroll-hover-bg;
-          border: $hscroll-focus-border;
+          background: $hscroll-nav-focus-bg-color;
+          border: $hscroll-nav-focus-border;
           color: $hscroll-hover-font;
-          @if $hscroll-skin == 'material' {
-            border-color: $hscroll-hover-border-color;
-          }
-          @if $hscroll-skin == 'bootstrap4' {
-            .e-icons {
-              color: inherit;
-            }
-          }
-          @if $hscroll-skin == 'highcontrast' {
-            background: $hscroll-nav-focus-bg-color;
-            border: $hscroll-dash-border;
+          .e-icons {
+            color: $hscroll-nav-hover-icons-color;
           }
         }
@@ -382,10 +360,9 @@ $hscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
           border: $hscroll-active-border;
           box-shadow: $hscroll-active-box-shadow;
           color: $hscroll-active-font-color;
-          @if $hscroll-skin == 'highcontrast' {
-            .e-icons {
-              color: $hscroll-nav-active-color;
-            }
+          .e-icons {
+            color: $hscroll-nav-active-color;
           }
         }
       }

package/SCSS-Themes/navigations/h-scroll/bootstrap.scss CHANGED Viewed

@@ -28,6 +28,7 @@ $hscroll-device-arrow-border-size: 1px !default;
 $hscroll-device-arrow-border-color: $grey-cc !default;
 $hscroll-device-arrow-color: $brand-primary !default;
 $hscroll-device-arrow-size: 14px !default;
+$hscroll-device-arrow-icon-size: 12px !default;
 $hscroll-device-arrow-size-bigger: 14px !default;
 $hscroll-device-arrow-width: 52px !default;
@@ -41,6 +42,13 @@ $hscroll-hover-border: 0 !default;
 $hscroll-hover-border-color: '' !default;
 $hscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
+$hscroll-nav-hover-press-bg: $hscroll-hover-bg !default;
+$hscroll-nav-hover-icons-color: $hscroll-default-icon-color !default;
+$hscroll-nav-hover-border: $hscroll-hover-border !default;
+$hscroll-nav-focus-bg-color: $hscroll-hover-bg !default;
+$hscroll-nav-focus-border: $hscroll-focus-border !default;
+$hscroll-nav-active-color: $hscroll-default-icon-color !default;
 @mixin hscroll-btn-animation {
   content: '';
 }
@@ -232,10 +240,7 @@ $hscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
       text-align: center;
       vertical-align: middle;
       width: 100%;
-      @if $hscroll-skin == 'tailwind' or $hscroll-skin == 'bootstrap5' {
-        font-size: $hscroll-device-arrow-size;
-      }
+      font-size: $hscroll-device-arrow-icon-size;
     }
     .e-hscroll-bar {
@@ -318,14 +323,8 @@ $hscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
           border: $hscroll-hover-border;
           color: $hscroll-hover-font;
-          @if $hscroll-skin == 'material' {
-            border-color: $hscroll-hover-border-color;
-          }
-          @if $hscroll-skin == 'highcontrast' {
-            &:active {
-              background: $hscroll-press-bg;
-            }
+          &:active {
+            background: $hscroll-nav-hover-press-bg;
           }
         }
       }
@@ -337,42 +336,21 @@ $hscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
         &:hover {
           background: $hscroll-hover-bg;
-          border: $hscroll-hover-border;
+          border: $hscroll-nav-hover-border;
           color: $hscroll-hover-font;
-          @if $hscroll-skin == 'bootstrap4' {
-            .e-icons {
-              color: inherit;
-            }
-          }
-          @if $hscroll-skin == 'highcontrast' {
-            border: 2px solid $hscroll-nav-hover-border-color;
-            &:active {
-              border: 0;
-            }
+          .e-icons {
+            color: $hscroll-nav-hover-icons-color;
           }
         }
         &:focus {
-          background: $hscroll-hover-bg;
-          border: $hscroll-focus-border;
+          background: $hscroll-nav-focus-bg-color;
+          border: $hscroll-nav-focus-border;
           color: $hscroll-hover-font;
-          @if $hscroll-skin == 'material' {
-            border-color: $hscroll-hover-border-color;
-          }
-          @if $hscroll-skin == 'bootstrap4' {
-            .e-icons {
-              color: inherit;
-            }
-          }
-          @if $hscroll-skin == 'highcontrast' {
-            background: $hscroll-nav-focus-bg-color;
-            border: $hscroll-dash-border;
+          .e-icons {
+            color: $hscroll-nav-hover-icons-color;
           }
         }
@@ -381,10 +359,9 @@ $hscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
           border: $hscroll-active-border;
           box-shadow: $hscroll-active-box-shadow;
           color: $hscroll-active-font-color;
-          @if $hscroll-skin == 'highcontrast' {
-            .e-icons {
-              color: $hscroll-nav-active-color;
-            }
+          .e-icons {
+            color: $hscroll-nav-active-color;
           }
         }
       }

package/SCSS-Themes/navigations/h-scroll/bootstrap4.scss CHANGED Viewed

@@ -28,6 +28,7 @@ $hscroll-device-arrow-border-size: 1px !default;
 $hscroll-device-arrow-border-color: #ccc !default;
 $hscroll-device-arrow-color: #317ab9 !default;
 $hscroll-device-arrow-size: 14px !default;
+$hscroll-device-arrow-icon-size: 12px !default;
 $hscroll-device-arrow-size-bigger: 14px !default;
 $hscroll-device-arrow-width: 52px !default;
@@ -41,6 +42,13 @@ $hscroll-hover-border: 1px darken($gray-600, 10%) !default;
 $hscroll-hover-border-color: '' !default;
 $hscroll-active-box-shadow: none !default;
+$hscroll-nav-hover-press-bg: $hscroll-hover-bg !default;
+$hscroll-nav-hover-icons-color: inherit !default;
+$hscroll-nav-hover-border: $hscroll-hover-border !default;
+$hscroll-nav-focus-bg-color: $hscroll-hover-bg !default;
+$hscroll-nav-focus-border: $hscroll-focus-border !default;
+$hscroll-nav-active-color: $hscroll-default-icon-color !default;
 @mixin hscroll-btn-animation {
   content: '';
 }
@@ -232,10 +240,7 @@ $hscroll-active-box-shadow: none !default;
       text-align: center;
       vertical-align: middle;
       width: 100%;
-      @if $hscroll-skin == 'tailwind' or $hscroll-skin == 'bootstrap5' {
-        font-size: $hscroll-device-arrow-size;
-      }
+      font-size: $hscroll-device-arrow-icon-size;
     }
     .e-hscroll-bar {
@@ -318,14 +323,8 @@ $hscroll-active-box-shadow: none !default;
           border: $hscroll-hover-border;
           color: $hscroll-hover-font;
-          @if $hscroll-skin == 'material' {
-            border-color: $hscroll-hover-border-color;
-          }
-          @if $hscroll-skin == 'highcontrast' {
-            &:active {
-              background: $hscroll-press-bg;
-            }
+          &:active {
+            background: $hscroll-nav-hover-press-bg;
           }
         }
       }
@@ -337,42 +336,21 @@ $hscroll-active-box-shadow: none !default;
         &:hover {
           background: $hscroll-hover-bg;
-          border: $hscroll-hover-border;
+          border: $hscroll-nav-hover-border;
           color: $hscroll-hover-font;
-          @if $hscroll-skin == 'bootstrap4' {
-            .e-icons {
-              color: inherit;
-            }
-          }
-          @if $hscroll-skin == 'highcontrast' {
-            border: 2px solid $hscroll-nav-hover-border-color;
-            &:active {
-              border: 0;
-            }
+          .e-icons {
+            color: $hscroll-nav-hover-icons-color;
           }
         }
         &:focus {
-          background: $hscroll-hover-bg;
-          border: $hscroll-focus-border;
+          background: $hscroll-nav-focus-bg-color;
+          border: $hscroll-nav-focus-border;
           color: $hscroll-hover-font;
-          @if $hscroll-skin == 'material' {
-            border-color: $hscroll-hover-border-color;
-          }
-          @if $hscroll-skin == 'bootstrap4' {
-            .e-icons {
-              color: inherit;
-            }
-          }
-          @if $hscroll-skin == 'highcontrast' {
-            background: $hscroll-nav-focus-bg-color;
-            border: $hscroll-dash-border;
+          .e-icons {
+            color: $hscroll-nav-hover-icons-color;
           }
         }
@@ -381,10 +359,9 @@ $hscroll-active-box-shadow: none !default;
           border: $hscroll-active-border;
           box-shadow: $hscroll-active-box-shadow;
           color: $hscroll-active-font-color;
-          @if $hscroll-skin == 'highcontrast' {
-            .e-icons {
-              color: $hscroll-nav-active-color;
-            }
+          .e-icons {
+            color: $hscroll-nav-active-color;
           }
         }
       }

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

@@ -38,6 +38,7 @@ $hscroll-device-arrow-border-size: 1px !default;
 $hscroll-device-arrow-border-color: $border-light !default;
 $hscroll-device-arrow-color: $icon-color !default;
 $hscroll-device-arrow-size: 18px !default;
+$hscroll-device-arrow-icon-size: 18px !default;
 $hscroll-device-arrow-size-bigger: 22px !default;
 $hscroll-device-arrow-width: 48px !default;
@@ -46,6 +47,13 @@ $hscroll-ribble-animation-border-frame: rgba(255, 255, 255, .5) !default;
 $hscroll-ribble-animation-shadow-frame: 0 0 0 0 $hscroll-ribble-animation-border-frame !default;
 $hscroll-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !default;
+$hscroll-nav-hover-press-bg: $hscroll-hover-bg !default;
+$hscroll-nav-hover-icons-color: $hscroll-default-icon-color !default;
+$hscroll-nav-hover-border: $hscroll-hover-border !default;
+$hscroll-nav-focus-bg-color: $hscroll-hover-bg !default;
+$hscroll-nav-focus-border: $hscroll-focus-border !default;
+$hscroll-nav-active-color: $hscroll-default-icon-color !default;
 @mixin hscroll-btn-animation {
   background-color: transparent;
   border-radius: 50%;
@@ -259,10 +267,7 @@ $hscroll-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12)
       text-align: center;
       vertical-align: middle;
       width: 100%;
-      @if $hscroll-skin == 'tailwind' or $hscroll-skin == 'bootstrap5' {
-        font-size: $hscroll-device-arrow-size;
-      }
+      font-size: $hscroll-device-arrow-icon-size;
     }
     .e-hscroll-bar {
@@ -345,14 +350,8 @@ $hscroll-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12)
           border: $hscroll-hover-border;
           color: $hscroll-hover-font;
-          @if $hscroll-skin == 'material' {
-            border-color: $hscroll-hover-border-color;
-          }
-          @if $hscroll-skin == 'highcontrast' {
-            &:active {
-              background: $hscroll-press-bg;
-            }
+          &:active {
+            background: $hscroll-nav-hover-press-bg;
           }
         }
       }
@@ -364,42 +363,21 @@ $hscroll-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12)
         &:hover {
           background: $hscroll-hover-bg;
-          border: $hscroll-hover-border;
+          border: $hscroll-nav-hover-border;
           color: $hscroll-hover-font;
-          @if $hscroll-skin == 'bootstrap4' {
-            .e-icons {
-              color: inherit;
-            }
-          }
-          @if $hscroll-skin == 'highcontrast' {
-            border: 2px solid $hscroll-nav-hover-border-color;
-            &:active {
-              border: 0;
-            }
+          .e-icons {
+            color: $hscroll-nav-hover-icons-color;
           }
         }
         &:focus {
-          background: $hscroll-hover-bg;
-          border: $hscroll-focus-border;
+          background: $hscroll-nav-focus-bg-color;
+          border: $hscroll-nav-focus-border;
           color: $hscroll-hover-font;
-          @if $hscroll-skin == 'material' {
-            border-color: $hscroll-hover-border-color;
-          }
-          @if $hscroll-skin == 'bootstrap4' {
-            .e-icons {
-              color: inherit;
-            }
-          }
-          @if $hscroll-skin == 'highcontrast' {
-            background: $hscroll-nav-focus-bg-color;
-            border: $hscroll-dash-border;
+          .e-icons {
+            color: $hscroll-nav-hover-icons-color;
           }
         }
@@ -408,10 +386,9 @@ $hscroll-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12)
           border: $hscroll-active-border;
           box-shadow: $hscroll-active-box-shadow;
           color: $hscroll-active-font-color;
-          @if $hscroll-skin == 'highcontrast' {
-            .e-icons {
-              color: $hscroll-nav-active-color;
-            }
+          .e-icons {
+            color: $hscroll-nav-active-color;
           }
         }
       }