@syncfusion/blazor-themes 20.3.61 → 20.4.38

package/SCSS-Themes/navigations/h-scroll/fabric-dark.scss

@@ -9,6 +9,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: 14px !default;
 $hscroll-device-arrow-size-bigger: 18px !default;
 $hscroll-overlay-opacity: .5 !default;
 $hscroll-device-arrow-border-color: $default-border-color !default;
@@ -41,6 +42,13 @@ $hscroll-hover-border: 0 !default;
 $hscroll-active-box-shadow: none !default;
 $hscroll-default-icon-color: $theme-primary-font !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: '';
 }
@@ -234,10 +242,7 @@ $hscroll-default-icon-color: $theme-primary-font !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 {
@@ -320,14 +325,8 @@ $hscroll-default-icon-color: $theme-primary-font !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;
           }
         }
       }
@@ -339,42 +338,21 @@ $hscroll-default-icon-color: $theme-primary-font !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;
           }
         }
 
@@ -383,10 +361,9 @@ $hscroll-default-icon-color: $theme-primary-font !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;
           }
         }
       }
@@ -454,12 +431,12 @@ $hscroll-default-icon-color: $theme-primary-font !default;
     }
 
     .e-nav-left-arrow::before {
-      content: '\e829';
+      content: '\e98f';
       line-height: normal;
     }
 
     .e-nav-right-arrow::before {
-      content: '\e830';
+      content: '\e219';
       line-height: normal;
     }
   }

package/SCSS-Themes/navigations/h-scroll/fabric.scss

@@ -37,9 +37,17 @@ $hscroll-device-arrow-border-size: 1px !default;
 $hscroll-device-arrow-border-color: $neutral-quintenaryalt !default;
 $hscroll-device-arrow-color: $theme-primary !default;
 $hscroll-device-arrow-size: 14px !default;
+$hscroll-device-arrow-icon-size: 14px !default;
 $hscroll-device-arrow-size-bigger: 18px !default;
 $hscroll-device-arrow-width: 52px !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: '';
 }
@@ -231,10 +239,7 @@ $hscroll-device-arrow-width: 52px !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 {
@@ -317,14 +322,8 @@ $hscroll-device-arrow-width: 52px !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;
           }
         }
       }
@@ -336,42 +335,21 @@ $hscroll-device-arrow-width: 52px !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;
           }
         }
 
@@ -380,10 +358,9 @@ $hscroll-device-arrow-width: 52px !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;
           }
         }
       }
@@ -451,12 +428,12 @@ $hscroll-device-arrow-width: 52px !default;
     }
 
     .e-nav-left-arrow::before {
-      content: '\e829';
+      content: '\e98f';
       line-height: normal;
     }
 
     .e-nav-right-arrow::before {
-      content: '\e830';
+      content: '\e219';
       line-height: normal;
     }
   }

package/SCSS-Themes/navigations/h-scroll/fluent-dark.scss

@@ -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: 12px !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;
           }
         }
       }

package/SCSS-Themes/navigations/h-scroll/fluent.scss

@@ -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: 12px !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;
           }
         }
       }

package/SCSS-Themes/navigations/h-scroll/highcontrast.scss

@@ -1,6 +1,5 @@
 @import '../../base/highcontrast.scss';
 $hscroll-skin: 'highcontrast' !default;
-$hscroll-dash-border: 2px solid #fff;
 $hscroll-border-type: solid !default;
 $hscroll-hover-font: $hover-font-color !default;
 $hscroll-active-font-color: $active-font-color !default;
@@ -41,9 +40,15 @@ $hscroll-device-arrow-border-size: 1px !default;
 $hscroll-device-arrow-border-color: $border-fg !default;
 $hscroll-device-arrow-color: $selection-bg !default;
 $hscroll-device-arrow-size: 14px !default;
+$hscroll-device-arrow-icon-size: 12px !default;
 $hscroll-device-arrow-size-bigger: 18px !default;
 $hscroll-device-arrow-width: 52px !default;
 
+$hscroll-nav-hover-press-bg: $hscroll-press-bg !default;
+$hscroll-nav-hover-icons-color: $hscroll-default-icon-color !default;
+$hscroll-nav-hover-border: 2px solid $hscroll-nav-hover-border-color !default;
+$hscroll-nav-focus-border: 2px solid #fff;
+
 @mixin hscroll-btn-animation {
   content: '';
 }
@@ -235,10 +240,7 @@ $hscroll-device-arrow-width: 52px !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 {
@@ -321,14 +323,8 @@ $hscroll-device-arrow-width: 52px !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;
           }
         }
       }
@@ -340,42 +336,21 @@ $hscroll-device-arrow-width: 52px !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;
           }
         }
 
@@ -384,10 +359,9 @@ $hscroll-device-arrow-width: 52px !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;
           }
         }
       }
@@ -435,11 +409,11 @@ $hscroll-device-arrow-width: 52px !default;
       }
 
       .e-nav-left-arrow::before {
-        content: '\e830';
+        content: '\e98f';
       }
 
       .e-nav-right-arrow::before {
-        content: '\e829';
+        content: '\e219';
       }
     }