@syncfusion/blazor-themes 20.3.60 → 20.4.38

package/SCSS-Themes/navigations/treeview/bootstrap-dark.scss

@@ -1173,7 +1173,17 @@ $ripple-width: 32px !default;
 }
 
 @mixin active-hover-theme {
-  background-color: $treeview-item-active-hover-bg;
+  @if $theme-name =='fluentui-dark' {
+    background-color: lighten($treeview-item-active-bg, 5%);
+  }
+  
+  @else if $theme-name =='tailwind' {
+    background-color: darken($treeview-item-active-hover-bg, 10%);
+  }
+
+  @else {
+    background-color: $treeview-item-active-hover-bg;
+  }
   border-color: $treeview-item-active-hover-border-color;
   @if $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
     -webkit-box-shadow: $treeview-border-shadow;

package/SCSS-Themes/navigations/treeview/bootstrap.scss

@@ -1168,7 +1168,17 @@ $ripple-width: 32px !default;
 }
 
 @mixin active-hover-theme {
-  background-color: $treeview-item-active-hover-bg;
+  @if $theme-name =='fluentui-dark' {
+    background-color: lighten($treeview-item-active-bg, 5%);
+  }
+  
+  @else if $theme-name =='tailwind' {
+    background-color: darken($treeview-item-active-hover-bg, 10%);
+  }
+
+  @else {
+    background-color: $treeview-item-active-hover-bg;
+  }
   border-color: $treeview-item-active-hover-border-color;
   @if $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
     -webkit-box-shadow: $treeview-border-shadow;

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

@@ -1196,7 +1196,17 @@ $ripple-width: 32px !default;
 }
 
 @mixin active-hover-theme {
-  background-color: $treeview-item-active-hover-bg;
+  @if $theme-name =='fluentui-dark' {
+    background-color: lighten($treeview-item-active-bg, 5%);
+  }
+  
+  @else if $theme-name =='tailwind' {
+    background-color: darken($treeview-item-active-hover-bg, 10%);
+  }
+
+  @else {
+    background-color: $treeview-item-active-hover-bg;
+  }
   border-color: $treeview-item-active-hover-border-color;
   @if $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
     -webkit-box-shadow: $treeview-border-shadow;

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

@@ -1175,7 +1175,17 @@ $treeview-item-active-check-color: $primary !default;
 }
 
 @mixin active-hover-theme {
-  background-color: $treeview-item-active-hover-bg;
+  @if $theme-name =='fluentui-dark' {
+    background-color: lighten($treeview-item-active-bg, 5%);
+  }
+  
+  @else if $theme-name =='tailwind' {
+    background-color: darken($treeview-item-active-hover-bg, 10%);
+  }
+
+  @else {
+    background-color: $treeview-item-active-hover-bg;
+  }
   border-color: $treeview-item-active-hover-border-color;
   @if $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
     -webkit-box-shadow: $treeview-border-shadow;

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

@@ -1175,7 +1175,17 @@ $treeview-item-active-check-color: $primary !default;
 }
 
 @mixin active-hover-theme {
-  background-color: $treeview-item-active-hover-bg;
+  @if $theme-name =='fluentui-dark' {
+    background-color: lighten($treeview-item-active-bg, 5%);
+  }
+  
+  @else if $theme-name =='tailwind' {
+    background-color: darken($treeview-item-active-hover-bg, 10%);
+  }
+
+  @else {
+    background-color: $treeview-item-active-hover-bg;
+  }
   border-color: $treeview-item-active-hover-border-color;
   @if $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
     -webkit-box-shadow: $treeview-border-shadow;

package/SCSS-Themes/navigations/treeview/fabric-dark.scss

@@ -1171,7 +1171,17 @@ $ripple-width: 32px !default;
 }
 
 @mixin active-hover-theme {
-  background-color: $treeview-item-active-hover-bg;
+  @if $theme-name =='fluentui-dark' {
+    background-color: lighten($treeview-item-active-bg, 5%);
+  }
+  
+  @else if $theme-name =='tailwind' {
+    background-color: darken($treeview-item-active-hover-bg, 10%);
+  }
+
+  @else {
+    background-color: $treeview-item-active-hover-bg;
+  }
   border-color: $treeview-item-active-hover-border-color;
   @if $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
     -webkit-box-shadow: $treeview-border-shadow;

package/SCSS-Themes/navigations/treeview/fabric.scss

@@ -1167,7 +1167,17 @@ $ripple-width: 32px !default;
 }
 
 @mixin active-hover-theme {
-  background-color: $treeview-item-active-hover-bg;
+  @if $theme-name =='fluentui-dark' {
+    background-color: lighten($treeview-item-active-bg, 5%);
+  }
+  
+  @else if $theme-name =='tailwind' {
+    background-color: darken($treeview-item-active-hover-bg, 10%);
+  }
+
+  @else {
+    background-color: $treeview-item-active-hover-bg;
+  }
   border-color: $treeview-item-active-hover-border-color;
   @if $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
     -webkit-box-shadow: $treeview-border-shadow;

package/SCSS-Themes/navigations/treeview/fluent-dark.scss

@@ -1175,7 +1175,17 @@ $treeview-item-active-check-color: $primary !default;
 }
 
 @mixin active-hover-theme {
-  background-color: $treeview-item-active-hover-bg;
+  @if $theme-name =='fluentui-dark' {
+    background-color: lighten($treeview-item-active-bg, 5%);
+  }
+  
+  @else if $theme-name =='tailwind' {
+    background-color: darken($treeview-item-active-hover-bg, 10%);
+  }
+
+  @else {
+    background-color: $treeview-item-active-hover-bg;
+  }
   border-color: $treeview-item-active-hover-border-color;
   @if $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
     -webkit-box-shadow: $treeview-border-shadow;

package/SCSS-Themes/navigations/treeview/fluent.scss

@@ -1175,7 +1175,17 @@ $treeview-item-active-check-color: $primary !default;
 }
 
 @mixin active-hover-theme {
-  background-color: $treeview-item-active-hover-bg;
+  @if $theme-name =='fluentui-dark' {
+    background-color: lighten($treeview-item-active-bg, 5%);
+  }
+  
+  @else if $theme-name =='tailwind' {
+    background-color: darken($treeview-item-active-hover-bg, 10%);
+  }
+
+  @else {
+    background-color: $treeview-item-active-hover-bg;
+  }
   border-color: $treeview-item-active-hover-border-color;
   @if $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
     -webkit-box-shadow: $treeview-border-shadow;

package/SCSS-Themes/navigations/treeview/highcontrast.scss

@@ -1173,7 +1173,17 @@ $ripple-width: 32px !default;
 }
 
 @mixin active-hover-theme {
-  background-color: $treeview-item-active-hover-bg;
+  @if $theme-name =='fluentui-dark' {
+    background-color: lighten($treeview-item-active-bg, 5%);
+  }
+  
+  @else if $theme-name =='tailwind' {
+    background-color: darken($treeview-item-active-hover-bg, 10%);
+  }
+
+  @else {
+    background-color: $treeview-item-active-hover-bg;
+  }
   border-color: $treeview-item-active-hover-border-color;
   @if $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
     -webkit-box-shadow: $treeview-border-shadow;

package/SCSS-Themes/navigations/treeview/material-dark.scss

@@ -1169,7 +1169,17 @@ $ripple-width: 32px !default;
 }
 
 @mixin active-hover-theme {
-  background-color: $treeview-item-active-hover-bg;
+  @if $theme-name =='fluentui-dark' {
+    background-color: lighten($treeview-item-active-bg, 5%);
+  }
+  
+  @else if $theme-name =='tailwind' {
+    background-color: darken($treeview-item-active-hover-bg, 10%);
+  }
+
+  @else {
+    background-color: $treeview-item-active-hover-bg;
+  }
   border-color: $treeview-item-active-hover-border-color;
   @if $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
     -webkit-box-shadow: $treeview-border-shadow;

package/SCSS-Themes/navigations/treeview/material.scss

@@ -15,7 +15,7 @@ $treeview-text-color: rgba($grey-light-font, .87) !default;
 $treeview-item-border-color: transparent !default;
 $treeview-item-active-bg: $grey-200 !default;
 $treeview-icon-active-color: rgba($grey-light-font, .54) !default;
-$treeview-text-active-color: $accent !default;
+$treeview-text-active-color: $tree-node-text-color !default;
 $treeview-item-active-border-color: $grey-200 !default;
 $treeview-item-hover-bg: $grey-100 !default;
 $treeview-icon-hover-color: rgba($grey-light-font, .54) !default;
@@ -1167,7 +1167,17 @@ $ripple-width: 32px !default;
 }
 
 @mixin active-hover-theme {
-  background-color: $treeview-item-active-hover-bg;
+  @if $theme-name =='fluentui-dark' {
+    background-color: lighten($treeview-item-active-bg, 5%);
+  }
+  
+  @else if $theme-name =='tailwind' {
+    background-color: darken($treeview-item-active-hover-bg, 10%);
+  }
+
+  @else {
+    background-color: $treeview-item-active-hover-bg;
+  }
   border-color: $treeview-item-active-hover-border-color;
   @if $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
     -webkit-box-shadow: $treeview-border-shadow;

package/SCSS-Themes/navigations/treeview/tailwind-dark.scss

@@ -1179,7 +1179,17 @@ $treeview-drag-icon-color: $treeview-icon-color !default;
 }
 
 @mixin active-hover-theme {
-  background-color: $treeview-item-active-hover-bg;
+  @if $theme-name =='fluentui-dark' {
+    background-color: lighten($treeview-item-active-bg, 5%);
+  }
+  
+  @else if $theme-name =='tailwind' {
+    background-color: darken($treeview-item-active-hover-bg, 10%);
+  }
+
+  @else {
+    background-color: $treeview-item-active-hover-bg;
+  }
   border-color: $treeview-item-active-hover-border-color;
   @if $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
     -webkit-box-shadow: $treeview-border-shadow;

package/SCSS-Themes/navigations/treeview/tailwind.scss

@@ -1179,7 +1179,17 @@ $treeview-drag-icon-color: $treeview-icon-color !default;
 }
 
 @mixin active-hover-theme {
-  background-color: $treeview-item-active-hover-bg;
+  @if $theme-name =='fluentui-dark' {
+    background-color: lighten($treeview-item-active-bg, 5%);
+  }
+  
+  @else if $theme-name =='tailwind' {
+    background-color: darken($treeview-item-active-hover-bg, 10%);
+  }
+
+  @else {
+    background-color: $treeview-item-active-hover-bg;
+  }
   border-color: $treeview-item-active-hover-border-color;
   @if $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
     -webkit-box-shadow: $treeview-border-shadow;

package/SCSS-Themes/navigations/v-scroll/bootstrap-dark.scss

@@ -272,13 +272,6 @@ $vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
           border: $vscroll-hover-border;
           border-color: $vscroll-hover-border-color;
           color: $vscroll-hover-font;
-
-          @if $vscroll-skin == 'highcontrast' {
-
-            &:active {
-              background: $vscroll-press-bg;
-            }
-          }
         }
       }
     }
@@ -291,14 +284,6 @@ $vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
           background: $vscroll-hover-bg;
           border: $vscroll-hover-border;
           color: $vscroll-hover-font;
-
-          @if $vscroll-skin == 'highcontrast' {
-            border: 1px solid $hover-border;
-
-            &:active {
-              border: 0;
-            }
-          }
         }
 
         &:focus {
@@ -306,11 +291,6 @@ $vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
           border: $vscroll-focus-border;
           border-color: $vscroll-hover-border-color;
           color: $vscroll-hover-font;
-
-          @if $vscroll-skin == 'highcontrast' {
-            background: inherit;
-            border: $vscroll-dash-border;
-          }
         }
 
         &:active {
@@ -318,12 +298,6 @@ $vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
           border: $vscroll-active-border;
           box-shadow: $vscroll-active-box-shadow;
           color: $vscroll-active-font-color;
-
-          @if $vscroll-skin == 'highcontrast' {
-            .e-icons {
-              color: $selection-font;
-            }
-          }
         }
       }
     }

package/SCSS-Themes/navigations/v-scroll/bootstrap.scss

@@ -270,13 +270,6 @@ $vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
           border: $vscroll-hover-border;
           border-color: $vscroll-hover-border-color;
           color: $vscroll-hover-font;
-
-          @if $vscroll-skin == 'highcontrast' {
-
-            &:active {
-              background: $vscroll-press-bg;
-            }
-          }
         }
       }
     }
@@ -289,14 +282,6 @@ $vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
           background: $vscroll-hover-bg;
           border: $vscroll-hover-border;
           color: $vscroll-hover-font;
-
-          @if $vscroll-skin == 'highcontrast' {
-            border: 1px solid $hover-border;
-
-            &:active {
-              border: 0;
-            }
-          }
         }
 
         &:focus {
@@ -304,11 +289,6 @@ $vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
           border: $vscroll-focus-border;
           border-color: $vscroll-hover-border-color;
           color: $vscroll-hover-font;
-
-          @if $vscroll-skin == 'highcontrast' {
-            background: inherit;
-            border: $vscroll-dash-border;
-          }
         }
 
         &:active {
@@ -316,12 +296,6 @@ $vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
           border: $vscroll-active-border;
           box-shadow: $vscroll-active-box-shadow;
           color: $vscroll-active-font-color;
-
-          @if $vscroll-skin == 'highcontrast' {
-            .e-icons {
-              color: $selection-font;
-            }
-          }
         }
       }
     }

package/SCSS-Themes/navigations/v-scroll/bootstrap4.scss

@@ -270,13 +270,6 @@ $vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
           border: $vscroll-hover-border;
           border-color: $vscroll-hover-border-color;
           color: $vscroll-hover-font;
-
-          @if $vscroll-skin == 'highcontrast' {
-
-            &:active {
-              background: $vscroll-press-bg;
-            }
-          }
         }
       }
     }
@@ -289,14 +282,6 @@ $vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
           background: $vscroll-hover-bg;
           border: $vscroll-hover-border;
           color: $vscroll-hover-font;
-
-          @if $vscroll-skin == 'highcontrast' {
-            border: 1px solid $hover-border;
-
-            &:active {
-              border: 0;
-            }
-          }
         }
 
         &:focus {
@@ -304,11 +289,6 @@ $vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
           border: $vscroll-focus-border;
           border-color: $vscroll-hover-border-color;
           color: $vscroll-hover-font;
-
-          @if $vscroll-skin == 'highcontrast' {
-            background: inherit;
-            border: $vscroll-dash-border;
-          }
         }
 
         &:active {
@@ -316,12 +296,6 @@ $vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
           border: $vscroll-active-border;
           box-shadow: $vscroll-active-box-shadow;
           color: $vscroll-active-font-color;
-
-          @if $vscroll-skin == 'highcontrast' {
-            .e-icons {
-              color: $selection-font;
-            }
-          }
         }
       }
     }

package/SCSS-Themes/navigations/v-scroll/bootstrap5-dark.scss

@@ -270,13 +270,6 @@ $vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
           border: $vscroll-hover-border;
           border-color: $vscroll-hover-border-color;
           color: $vscroll-hover-font;
-
-          @if $vscroll-skin == 'highcontrast' {
-
-            &:active {
-              background: $vscroll-press-bg;
-            }
-          }
         }
       }
     }
@@ -289,14 +282,6 @@ $vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
           background: $vscroll-hover-bg;
           border: $vscroll-hover-border;
           color: $vscroll-hover-font;
-
-          @if $vscroll-skin == 'highcontrast' {
-            border: 1px solid $hover-border;
-
-            &:active {
-              border: 0;
-            }
-          }
         }
 
         &:focus {
@@ -304,11 +289,6 @@ $vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
           border: $vscroll-focus-border;
           border-color: $vscroll-hover-border-color;
           color: $vscroll-hover-font;
-
-          @if $vscroll-skin == 'highcontrast' {
-            background: inherit;
-            border: $vscroll-dash-border;
-          }
         }
 
         &:active {
@@ -316,12 +296,6 @@ $vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
           border: $vscroll-active-border;
           box-shadow: $vscroll-active-box-shadow;
           color: $vscroll-active-font-color;
-
-          @if $vscroll-skin == 'highcontrast' {
-            .e-icons {
-              color: $selection-font;
-            }
-          }
         }
       }
     }
@@ -366,12 +340,12 @@ $vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
     }
 
     .e-nav-up-arrow::before {
-      content: '\e7dd';
+      content: '\e776';
       line-height: normal;
     }
 
     .e-nav-down-arrow::before {
-      content: '\e734';
+      content: '\e729';
       line-height: normal;
     }
   }

package/SCSS-Themes/navigations/v-scroll/bootstrap5.scss

@@ -270,13 +270,6 @@ $vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
           border: $vscroll-hover-border;
           border-color: $vscroll-hover-border-color;
           color: $vscroll-hover-font;
-
-          @if $vscroll-skin == 'highcontrast' {
-
-            &:active {
-              background: $vscroll-press-bg;
-            }
-          }
         }
       }
     }
@@ -289,14 +282,6 @@ $vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
           background: $vscroll-hover-bg;
           border: $vscroll-hover-border;
           color: $vscroll-hover-font;
-
-          @if $vscroll-skin == 'highcontrast' {
-            border: 1px solid $hover-border;
-
-            &:active {
-              border: 0;
-            }
-          }
         }
 
         &:focus {
@@ -304,11 +289,6 @@ $vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
           border: $vscroll-focus-border;
           border-color: $vscroll-hover-border-color;
           color: $vscroll-hover-font;
-
-          @if $vscroll-skin == 'highcontrast' {
-            background: inherit;
-            border: $vscroll-dash-border;
-          }
         }
 
         &:active {
@@ -316,12 +296,6 @@ $vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
           border: $vscroll-active-border;
           box-shadow: $vscroll-active-box-shadow;
           color: $vscroll-active-font-color;
-
-          @if $vscroll-skin == 'highcontrast' {
-            .e-icons {
-              color: $selection-font;
-            }
-          }
         }
       }
     }
@@ -366,12 +340,12 @@ $vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
     }
 
     .e-nav-up-arrow::before {
-      content: '\e7dd';
+      content: '\e776';
       line-height: normal;
     }
 
     .e-nav-down-arrow::before {
-      content: '\e734';
+      content: '\e729';
       line-height: normal;
     }
   }

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

@@ -273,13 +273,6 @@ $vscroll-device-arrow-width: 52px !default;
           border: $vscroll-hover-border;
           border-color: $vscroll-hover-border-color;
           color: $vscroll-hover-font;
-
-          @if $vscroll-skin == 'highcontrast' {
-
-            &:active {
-              background: $vscroll-press-bg;
-            }
-          }
         }
       }
     }
@@ -292,14 +285,6 @@ $vscroll-device-arrow-width: 52px !default;
           background: $vscroll-hover-bg;
           border: $vscroll-hover-border;
           color: $vscroll-hover-font;
-
-          @if $vscroll-skin == 'highcontrast' {
-            border: 1px solid $hover-border;
-
-            &:active {
-              border: 0;
-            }
-          }
         }
 
         &:focus {
@@ -307,11 +292,6 @@ $vscroll-device-arrow-width: 52px !default;
           border: $vscroll-focus-border;
           border-color: $vscroll-hover-border-color;
           color: $vscroll-hover-font;
-
-          @if $vscroll-skin == 'highcontrast' {
-            background: inherit;
-            border: $vscroll-dash-border;
-          }
         }
 
         &:active {
@@ -319,12 +299,6 @@ $vscroll-device-arrow-width: 52px !default;
           border: $vscroll-active-border;
           box-shadow: $vscroll-active-box-shadow;
           color: $vscroll-active-font-color;
-
-          @if $vscroll-skin == 'highcontrast' {
-            .e-icons {
-              color: $selection-font;
-            }
-          }
         }
       }
     }
@@ -369,12 +343,12 @@ $vscroll-device-arrow-width: 52px !default;
     }
 
     .e-nav-up-arrow::before {
-      content: '\e910';
+      content: '\e85e';
       line-height: normal;
     }
 
     .e-nav-down-arrow::before {
-      content: '\e916';
+      content: '\e84f';
       line-height: normal;
     }
   }