@syncfusion/ej2-navigations 19.3.53 → 19.4.38

package/styles/menu/bootstrap5-dark.css

@@ -254,7 +254,7 @@
 .e-menu-wrapper .e-ul,
 .e-menu-container .e-ul {
   font-size: 14px;
-  padding: 4px 0;
+  padding: 0;
   min-width: 120px;
 }
 
@@ -1167,9 +1167,9 @@
 
 .e-menu-wrapper .e-ul .e-menu-item.e-selected,
 .e-menu-container .e-ul .e-menu-item.e-selected {
-  background-color: #444c54;
+  background-color: #0d6efd;
   color: #fff;
-  outline: 0 solid #444c54;
+  outline: 0 solid #0d6efd;
   outline-offset: 0;
 }
 
@@ -1232,7 +1232,7 @@
 
 .e-menu-wrapper.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav:active,
 .e-menu-container.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav:active {
-  background: #444c54;
+  background: #0d6efd;
 }
 
 .e-menu-wrapper.e-hamburger .e-menu-header,

package/styles/menu/bootstrap5.css

@@ -254,7 +254,7 @@
 .e-menu-wrapper .e-ul,
 .e-menu-container .e-ul {
   font-size: 14px;
-  padding: 4px 0;
+  padding: 0;
   min-width: 120px;
 }
 
@@ -1167,9 +1167,9 @@
 
 .e-menu-wrapper .e-ul .e-menu-item.e-selected,
 .e-menu-container .e-ul .e-menu-item.e-selected {
-  background-color: #e9ecef;
-  color: #212529;
-  outline: 0 solid #e9ecef;
+  background-color: #0d6efd;
+  color: #fff;
+  outline: 0 solid #0d6efd;
   outline-offset: 0;
 }
 
@@ -1232,7 +1232,7 @@
 
 .e-menu-wrapper.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav:active,
 .e-menu-container.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav:active {
-  background: #e9ecef;
+  background: #0d6efd;
 }
 
 .e-menu-wrapper.e-hamburger .e-menu-header,

package/styles/menu/icons/_fluent.scss

@@ -0,0 +1,133 @@
+@include export-module('menu-fluent-icons') {
+  /*! menu layout */
+  .e-menu-wrapper,
+  .e-menu-container {
+    @at-root {
+      & ul {
+        &.e-vertical .e-menu-item {
+          & .e-caret {
+            &::before {
+              content: '\e7c2';
+            }
+          }
+        }
+
+        & .e-menu-item  {
+          & .e-caret {
+            &::before {
+              content: '\e7c3';
+            }
+          }
+        }
+      }
+
+      & .e-ul .e-menu-item {
+        & .e-caret {
+          &::before {
+            content: '\e7c2';
+          }
+        }
+      }
+    }
+
+    &.e-hamburger {
+
+      & .e-menu-header {
+
+        & .e-menu-icon::before {
+          content: '\e728';
+        }
+      }
+
+      &.e-close-icon {
+        & .e-menu-header {
+
+          & .e-menu-icon::before {
+            content: '\e74f';
+          }
+        }
+      }
+
+      & .e-vertical .e-menu-item .e-caret,
+      & .e-menu-item .e-caret {
+        &::before {
+          content: '\e7c3';
+        }
+      }
+    }
+
+    &.e-rtl.e-hamburger ul {
+      &.e-ul {
+        & .e-caret {
+          &::before {
+            content: '\e7c3';
+          }
+        }
+      }
+    }
+
+    & .e-menu-hscroll.e-hscroll .e-nav-left-arrow::before,
+    & .e-menu-hscroll.e-hscroll .e-nav-right-arrow::before {
+      content: '\e7c2';
+    }
+
+    & .e-menu-vscroll.e-vscroll .e-nav-up-arrow::before,
+    & .e-menu-vscroll.e-vscroll .e-nav-down-arrow::before {
+      content: '\e7c3';
+    }
+  }
+
+  .e-rtl.e-menu-wrapper ul,
+  .e-rtl.e-menu-container ul {
+    &.e-vertical {
+      & .e-caret {
+        &::before {
+          content: '\e7c1';
+        }
+      }
+    }
+
+    &.e-ul {
+      & .e-caret {
+        &::before {
+          content: '\e7c1';
+        }
+      }
+    }
+  }
+
+  .e-bigger .e-rtl.e-menu-wrapper ul,
+  .e-bigger.e-rtl.e-menu-wrapper ul,
+  .e-bigger .e-rtl.e-menu-container ul,
+  .e-bigger.e-rtl.e-menu-container ul {
+    &.e-vertical {
+      & .e-caret {
+        &::before {
+          content: '\e7c1';
+        }
+      }
+    }
+
+    &.e-ul {
+      & .e-caret {
+        &::before {
+          content: '\e7c1';
+        }
+      }
+    }
+  }
+
+  .e-bigger .e-rtl.e-menu-wrapper.e-hamburger ul,
+  .e-bigger.e-rtl.e-menu-wrapper.e-hamburger ul,
+  .e-bigger .e-rtl.e-menu-container.e-hamburger ul,
+  .e-bigger.e-rtl.e-menu-container.e-hamburger ul {
+
+    &.e-ul {
+      & .e-caret {
+        &::before {
+          content: '\e7c3';
+        }
+      }
+    }
+  }
+}

package/styles/menu/material-dark.css

@@ -263,7 +263,7 @@
 .e-menu-wrapper .e-ul,
 .e-menu-container .e-ul {
   font-size: 14px;
-  padding: 8px 0;
+  padding: 0;
   min-width: 120px;
 }
 

package/styles/menu/material.css

@@ -265,7 +265,7 @@
 .e-menu-wrapper .e-ul,
 .e-menu-container .e-ul {
   font-size: 14px;
-  padding: 8px 0;
+  padding: 0;
   min-width: 120px;
 }
 

package/styles/menu/tailwind-dark.css

@@ -255,7 +255,7 @@
 .e-menu-wrapper .e-ul,
 .e-menu-container .e-ul {
   font-size: 14px;
-  padding: 4px 0;
+  padding: 0;
   min-width: 120px;
 }
 

package/styles/menu/tailwind.css

@@ -255,7 +255,7 @@
 .e-menu-wrapper .e-ul,
 .e-menu-container .e-ul {
   font-size: 14px;
-  padding: 4px 0;
+  padding: 0;
   min-width: 120px;
 }
 

package/styles/sidebar/_bootstrap5-definition.scss

@@ -1,5 +1,5 @@
-$sidebar-box-shadow: $shadow !default;
-//color variables
-$sidebar-background: $content-bg-color-alt1 !default;
-$sidebar-border: $transparent !default;
-$sidebar-overlay: $overlay-bg-color !default;
+$sidebar-box-shadow: $shadow !default;
+//color variables
+$sidebar-background: $content-bg-color-alt1 !default;
+$sidebar-border: $transparent !default;
+$sidebar-overlay: $overlay-bg-color !default;

package/styles/sidebar/_fluent-definition.scss

@@ -0,0 +1,5 @@
+$sidebar-box-shadow: $shadow-none !default;
+//color variables
+$sidebar-background: $content-bg-color-alt1 !default;
+$sidebar-border: $border-light !default;
+$sidebar-overlay: $overlay-bg-color !default;

package/styles/sidebar/_theme.scss

@@ -128,7 +128,9 @@
     background-color: $sidebar-overlay;
     height: 100%;
     left: 0;
-    opacity: .5;
+    @if ($skin-name != 'tailwind' and  $skin-name != 'bootstrap5' and  $skin-name != 'FluentUI') {
+      opacity: .5;
+    }
     pointer-events: auto;
     top: 0;
     width: auto;
@@ -162,7 +164,7 @@
     background-color: $sidebar-overlay;
     height: 100%;
     left: 0;
-    @if ($skin-name != 'tailwind' and  $skin-name != 'bootstrap5') {
+    @if ($skin-name != 'tailwind' and  $skin-name != 'bootstrap5' and  $skin-name != 'FluentUI') {
       opacity: .5;
     }
     pointer-events: auto;

package/styles/sidebar/bootstrap5-dark.css

@@ -106,7 +106,6 @@ ejs-sidebar {
   background-color: rgba(0, 0, 0, 0.4);
   height: 100%;
   left: 0;
-  opacity: .5;
   pointer-events: auto;
   top: 0;
   width: auto;

package/styles/sidebar/bootstrap5.css

@@ -106,7 +106,6 @@ ejs-sidebar {
   background-color: rgba(0, 0, 0, 0.5);
   height: 100%;
   left: 0;
-  opacity: .5;
   pointer-events: auto;
   top: 0;
   width: auto;

package/styles/sidebar/tailwind-dark.css

@@ -107,7 +107,6 @@ ejs-sidebar {
   background-color: rgba(107, 114, 128, 0.75);
   height: 100%;
   left: 0;
-  opacity: .5;
   pointer-events: auto;
   top: 0;
   width: auto;

package/styles/sidebar/tailwind.css

@@ -107,7 +107,6 @@ ejs-sidebar {
   background-color: rgba(107, 114, 128, 0.75);
   height: 100%;
   left: 0;
-  opacity: .5;
   pointer-events: auto;
   top: 0;
   width: auto;

package/styles/tab/_bootstrap-dark-definition.scss

@@ -182,6 +182,7 @@ $tab-mob-fill-wrap-padding: 0 15px !default;
 $tab-bg-big-wrap-padding: 0 20px !default;
 $tab-bg-nrml-wrap-padding: 0 15px !default;
 $tab-item-hover-bg-color: $grey !default;
+$tab-bg-item-wrap-hover-bg-color: $tab-item-hover-bg-color !default;
 $tab-mob-item-hover-bg-color: initial !default;
 $tab-pop-text-color: $grey-light-font !default;
 $tab-alt-disable-active-item-opacity: .65 !default;
@@ -236,6 +237,7 @@ $tab-nrml-even-active-text-height: 40px !default;
 $tab-fill-big-even-active-text-height: 50px !default;
 $tab-fill-nrml-even-active-text-height: 40px !default;
 $tab-text-color: lighten($brand-primary, 15%) !default;
+$tab-wrap-comb-icon-color: $tab-text-color !default;
 $tab-disable-text-color: $grey-light !default;
 $tab-mob-text-color: lighten($brand-primary, 15%) !default;
 $tab-active-text-color: $grey-dark-font !default;
@@ -249,11 +251,13 @@ $tab-alt-active-text-color: $brand-primary-font !default;
 $tab-alt-disable-active-text-color: $brand-primary-font !default;
 $tab-alt-hover-text-color: lighten($brand-primary, 10%) !default;
 $tab-alt-active-hover-text-color: $brand-primary-font !default;
+$tab-alt-active-style-hover-icon-color: $tab-alt-active-hover-text-color !default;
 $tab-clone-item-bg-color: rgba($grey-light, .87) !default;
 $tab-clone-text-color: lighten($brand-primary, 15%) !default;
 
 $tab-icon-container-width: auto !default;
 
+$tab-nav-pop-press-border: 0 !default;
 $tab-big-nav-icon-container-size: 44px !default;
 $tab-nrml-nav-icon-container-size: 34px !default;
 $tab-big-nav-icon-size: 16px !default;
@@ -324,6 +328,7 @@ $tab-mob-close-icon-color: $grey-dark-font !default;
 $tab-close-icon-hover-color: $grey-light-font !default;
 $tab-close-icon-active-color: $grey-light-font !default;
 $tab-alt-close-icon-color: $brand-primary-font !default;
+$tab-alt-active-wrap-close-icon-color: $tab-alt-close-icon-color !default;
 $tab-alt-active-close-icon-color: $brand-primary-font !default;
 $tab-alt-active-hover-close-icon-color: $brand-primary-font !default;
 $tab-pop-bg-color: $grey-dark !default;
@@ -357,8 +362,12 @@ $tab-bg-nav-focus-icon-color: $grey-dark-font !default;
 $tab-pop-icon-color: $grey-dark-font !default;
 $tab-pop-icon-hover-bg-color: $grey !default;
 $tab-pop-icon-hover-border: 1px solid $grey !default;
+$tab-pop-up-icon-hover-border: $tab-pop-icon-hover-border !default;
+$tab-pop-up-down-icon-hover-border: $tab-pop-icon-hover-border !default;
 $tab-pop-icon-focus-border: 1px solid none !default;
+$tab-pop-up-icon-focus-border: $tab-pop-icon-focus-border !default;
 $tab-pop-icon-active-border: 1px solid none !default;
+$tab-pop-up-icon-active-border: $tab-pop-icon-active-border !default;
 $tab-pop-border-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
 $tab-bg-hover-nav-icon-color: $grey-dark-font !default;
 
@@ -369,7 +378,7 @@ $tab-pop-up-icon-transform: rotate(0deg) !default;
 $tab-pop-down-icon-transform: rotate(0deg) !default;
 $tab-alt-focused-active-wrap-focus-or-hover-color: lighten($brand-primary-font, 15%) !default;
 $tab-alt-focused-active-wrap-focus-and-hover-color: $brand-primary-darken-25 !default;
-$tab-even-active-item-bottom-border-color: $grey-dd !default;
+$tab-even-active-item-bottom-border-color: 0 !default;
 $tab-fill-focused-active-wrap-focus-color: $brand-primary-darken-25 !default;
 $tab-alt-active-wrap-hover-close-color: $brand-primary-font !default;
 $tab-alt-pop-wrap-hover-color: $brand-primary !default;

package/styles/tab/_bootstrap-definition.scss

@@ -165,6 +165,7 @@ $tab-mob-fill-wrap-padding: 0 15px !default;
 $tab-bg-big-wrap-padding: 0 20px !default;
 $tab-bg-nrml-wrap-padding: 0 15px !default;
 $tab-item-hover-bg-color: $grey-lighter !default;
+$tab-bg-item-wrap-hover-bg-color: $tab-item-hover-bg-color !default;
 $tab-mob-item-hover-bg-color: initial !default;
 $tab-pop-text-color: $grey-light-font !default;
 $tab-alt-disable-active-item-opacity: .65 !default;
@@ -219,6 +220,7 @@ $tab-nrml-even-active-text-height: 40px !default;
 $tab-fill-big-even-active-text-height: 50px !default;
 $tab-fill-nrml-even-active-text-height: 40px !default;
 $tab-text-color: $brand-primary !default;
+$tab-wrap-comb-icon-color: $tab-text-color !default;
 $tab-disable-text-color: $grey-light !default;
 $tab-mob-text-color: $brand-primary !default;
 $tab-active-text-color: $grey !default;
@@ -232,11 +234,13 @@ $tab-alt-active-text-color: $brand-primary-font !default;
 $tab-alt-disable-active-text-color: $brand-primary-font !default;
 $tab-alt-hover-text-color: $brand-primary-darken-25 !default;
 $tab-alt-active-hover-text-color: $brand-primary-font !default;
+$tab-alt-active-style-hover-icon-color: $tab-alt-active-hover-text-color !default;
 $tab-clone-item-bg-color: $grey-white !default;
 $tab-clone-text-color: $brand-primary !default;
 
 $tab-icon-container-width: auto !default;
 
+$tab-nav-pop-press-border: 0 !default;
 $tab-big-nav-icon-container-size: 44px !default;
 $tab-nrml-nav-icon-container-size: 34px !default;
 $tab-big-nav-icon-size: 16px !default;
@@ -307,6 +311,7 @@ $tab-mob-close-icon-color: $grey-light !default;
 $tab-close-icon-hover-color: $grey-light-font !default;
 $tab-close-icon-active-color: $grey-light-font !default;
 $tab-alt-close-icon-color: $grey-light !default;
+$tab-alt-active-wrap-close-icon-color: $tab-alt-close-icon-color !default;
 $tab-alt-active-close-icon-color: $grey-f5 !default;
 $tab-alt-active-hover-close-icon-color: $brand-primary-font !default;
 $tab-pop-bg-color: $grey-white !default;
@@ -340,8 +345,12 @@ $tab-bg-nav-focus-icon-color: $grey-light-font !default;
 $tab-pop-icon-color: $grey-light-font !default;
 $tab-pop-icon-hover-bg-color: $grey-e6 !default;
 $tab-pop-icon-hover-border: 1px solid $grey-ad !default;
+$tab-pop-up-icon-hover-border: $tab-pop-icon-hover-border !default;
+$tab-pop-up-down-icon-hover-border: $tab-pop-icon-hover-border !default;
 $tab-pop-icon-focus-border: 1px solid $grey-8c !default;
+$tab-pop-up-icon-focus-border: $tab-pop-icon-focus-border !default;
 $tab-pop-icon-active-border: 1px solid $grey-ad !default;
+$tab-pop-up-icon-active-border: $tab-pop-icon-active-border !default;
 $tab-pop-border-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
 $tab-bg-hover-nav-icon-color: $grey-light-font !default;
 
@@ -361,7 +370,7 @@ $tab-pop-down-icon-transform: rotate(0deg) !default;
 /*! Bootstrap specific themes definition's */
 $tab-alt-focused-active-wrap-focus-or-hover-color: $brand-primary-darken-25 !default;
 $tab-alt-focused-active-wrap-focus-and-hover-color: $brand-primary-darken-25 !default;
-$tab-even-active-item-bottom-border-color: $grey-dd !default;
+$tab-even-active-item-bottom-border-color: 1px solid $grey-dd !default;
 $tab-fill-focused-active-wrap-focus-color: $brand-primary-darken-25 !default;
 $tab-alt-active-wrap-hover-close-color: $brand-primary-font !default;
 $tab-alt-pop-wrap-hover-color: $brand-primary !default;

package/styles/tab/_bootstrap4-definition.scss

@@ -32,6 +32,10 @@ $tab-border-style: $tab-border-width Solid !default;
 $tab-focus-outline: 0 !default;
 $tab-active-focus-outline: 0 !default;
 $tab-active-text-item-border: 0 !default;
+$tab-pop-up-icon-hover-border: $tab-active-text-item-border !default;
+$tab-pop-up-icon-focus-border: $tab-active-text-item-border !default;
+$tab-pop-up-down-icon-hover-border: $tab-active-text-item-border !default;
+$tab-pop-up-icon-active-border: $tab-active-text-item-border !default;
 $tab-disable-active-text-item-border: 0 !default;
 $tab-alt-active-item-border: $tab-border-style #555 !default;
 $tab-accent-active-item-border: $tab-border-style #555 !default;
@@ -164,6 +168,7 @@ $tab-mob-fill-wrap-padding: 0 15px !default;
 $tab-bg-big-wrap-padding: 0 20px !default;
 $tab-bg-nrml-wrap-padding: 0 15px !default;
 $tab-item-hover-bg-color: transparent !default;
+$tab-bg-item-wrap-hover-bg-color: $tab-item-hover-bg-color !default;
 $tab-mob-item-hover-bg-color: initial !default;
 $tab-pop-text-color: $gray-900 !default;
 $tab-alt-disable-active-item-opacity: .65 !default;
@@ -218,6 +223,7 @@ $tab-nrml-even-active-text-height: 40px !default;
 $tab-fill-big-even-active-text-height: 50px !default;
 $tab-fill-nrml-even-active-text-height: 40px !default;
 $tab-text-color: $primary !default;
+$tab-wrap-comb-icon-color: $tab-text-color !default;
 $tab-disable-text-color:  $gray-600 !default;
 $tab-mob-text-color: #317ab9 !default;
 $tab-active-text-color: $gray-700 !default;
@@ -229,6 +235,7 @@ $tab-alt-text-color: $primary !default;
 $tab-alt-disable-text-color: $gray-600 !default;
 $tab-alt-active-text-color: $primary-font !default;
 $tab-alt-active-style-hover-text-color: $gray-900 !default;
+$tab-alt-active-style-hover-icon-color: $tab-alt-active-style-hover-text-color !default;
 $tab-alt-disable-active-text-color: $gray-600 !default;
 $tab-alt-hover-text-color: darken($gray-600, 7.5%) !default;
 $tab-alt-active-hover-text-color: $primary-font !default;
@@ -307,6 +314,7 @@ $tab-mob-close-icon-color: #777 !default;
 $tab-close-icon-hover-color: rgba($black, .75) !default;
 $tab-close-icon-active-color: rgba($black, .75) !default;
 $tab-alt-close-icon-color: rgba($black, .5) !default;
+$tab-alt-active-wrap-close-icon-color: $tab-alt-close-icon-color !default;
 $tab-alt-text-color: $primary-font !default;
 $tab-alt-hover-text-color: $primary-font !default;
 $tab-alt-active-text-color: $primary-font !default;
@@ -366,7 +374,7 @@ $tab-pop-down-icon-transform: rotate(0deg) !default;
 /*! Bootstrap specific themes definition's */
 $tab-alt-focused-active-wrap-focus-or-hover-color: darken($primary, 15%) !default;
 $tab-alt-focused-active-wrap-focus-and-hover-color: darken($primary, 15%) !default;
-$tab-even-active-item-bottom-border-color: #ddd !default;
+$tab-even-active-item-bottom-border-color: 1px solid #ddd !default;
 $tab-fill-focused-active-wrap-focus-color: darken($primary, 15%) !default;
 $tab-alt-active-wrap-hover-close-color: $primary-font !default;
 $tab-alt-pop-wrap-hover-color: #317ab9 !default;