@syncfusion/ej2-navigations 19.3.57 → 19.4.47

package/styles/menu/bootstrap-dark.css

@@ -106,7 +106,7 @@
   -webkit-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  font-size: 14px;
+  font-size: 0;
   padding: 0;
   text-align: left;
   white-space: nowrap;
@@ -171,6 +171,7 @@
   position: relative;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  font-size: 14px;
   height: 42px;
   line-height: 42px;
   padding: 0 15px;
@@ -242,7 +243,7 @@
 .e-menu-wrapper .e-ul,
 .e-menu-container .e-ul {
   font-size: 14px;
-  padding: 3px 0;
+  padding: 0;
   min-width: 120px;
 }
 

package/styles/menu/bootstrap.css

@@ -108,7 +108,7 @@
   -webkit-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  font-size: 14px;
+  font-size: 0;
   padding: 0;
   text-align: left;
   white-space: nowrap;
@@ -173,6 +173,7 @@
   position: relative;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  font-size: 14px;
   height: 40px;
   line-height: 40px;
   padding: 0 12px;
@@ -244,7 +245,7 @@
 .e-menu-wrapper .e-ul,
 .e-menu-container .e-ul {
   font-size: 14px;
-  padding: 3px 0;
+  padding: 0;
   min-width: 120px;
 }
 

package/styles/menu/bootstrap4.css

@@ -108,7 +108,7 @@
   -webkit-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  font-size: 14px;
+  font-size: 0;
   padding: 0;
   text-align: left;
   white-space: nowrap;
@@ -173,6 +173,7 @@
   position: relative;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  font-size: 14px;
   height: 30px;
   line-height: 30px;
   padding: 0 12px;
@@ -244,7 +245,7 @@
 .e-menu-wrapper .e-ul,
 .e-menu-container .e-ul {
   font-size: 14px;
-  padding: 6px 0;
+  padding: 0;
   min-width: 120px;
 }
 

package/styles/menu/bootstrap5-dark.css

@@ -118,7 +118,7 @@
   -webkit-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  font-size: 14px;
+  font-size: 0;
   padding: 0;
   text-align: left;
   white-space: nowrap;
@@ -183,6 +183,7 @@
   position: relative;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  font-size: 14px;
   height: 50px;
   line-height: 50px;
   padding: 0 12px;
@@ -254,7 +255,7 @@
 .e-menu-wrapper .e-ul,
 .e-menu-container .e-ul {
   font-size: 14px;
-  padding: 4px 0;
+  padding: 0;
   min-width: 120px;
 }
 
@@ -1167,9 +1168,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 +1233,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

@@ -118,7 +118,7 @@
   -webkit-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  font-size: 14px;
+  font-size: 0;
   padding: 0;
   text-align: left;
   white-space: nowrap;
@@ -183,6 +183,7 @@
   position: relative;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  font-size: 14px;
   height: 50px;
   line-height: 50px;
   padding: 0 12px;
@@ -254,7 +255,7 @@
 .e-menu-wrapper .e-ul,
 .e-menu-container .e-ul {
   font-size: 14px;
-  padding: 4px 0;
+  padding: 0;
   min-width: 120px;
 }
 
@@ -1167,9 +1168,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 +1233,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/fabric-dark.css

@@ -106,7 +106,7 @@
   -webkit-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  font-size: 13px;
+  font-size: 0;
   padding: 0;
   text-align: left;
   white-space: nowrap;
@@ -171,6 +171,7 @@
   position: relative;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  font-size: 13px;
   height: 42px;
   line-height: 42px;
   padding: 0 8px;

package/styles/menu/fabric.css

@@ -107,7 +107,7 @@
   -webkit-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  font-size: 13px;
+  font-size: 0;
   padding: 0;
   text-align: left;
   white-space: nowrap;
@@ -172,6 +172,7 @@
   position: relative;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  font-size: 13px;
   height: 42px;
   line-height: 42px;
   padding: 0 8px;

package/styles/menu/highcontrast-light.css

@@ -106,7 +106,7 @@
   -webkit-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  font-size: 14px;
+  font-size: 0;
   padding: 0;
   text-align: left;
   white-space: nowrap;
@@ -171,6 +171,7 @@
   position: relative;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  font-size: 14px;
   height: 36px;
   line-height: 36px;
   padding: 0 16px;

package/styles/menu/highcontrast.css

@@ -107,7 +107,7 @@
   -webkit-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  font-size: 13px;
+  font-size: 0;
   padding: 0;
   text-align: left;
   white-space: nowrap;
@@ -172,6 +172,7 @@
   position: relative;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  font-size: 13px;
   height: 40px;
   line-height: 40px;
   padding: 0 8px;

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

@@ -127,7 +127,7 @@
   -webkit-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  font-size: 13px;
+  font-size: 0;
   padding: 0;
   text-align: left;
   white-space: nowrap;
@@ -192,6 +192,7 @@
   position: relative;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  font-size: 13px;
   height: 42px;
   line-height: 42px;
   padding: 0 12px;
@@ -263,7 +264,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

@@ -129,7 +129,7 @@
   -webkit-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  font-size: 13px;
+  font-size: 0;
   padding: 0;
   text-align: left;
   white-space: nowrap;
@@ -194,6 +194,7 @@
   position: relative;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  font-size: 13px;
   height: 42px;
   line-height: 42px;
   padding: 0 12px;
@@ -265,7 +266,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

@@ -119,7 +119,7 @@
   -webkit-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  font-size: 14px;
+  font-size: 0;
   padding: 0;
   text-align: left;
   white-space: nowrap;
@@ -184,6 +184,7 @@
   position: relative;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  font-size: 14px;
   height: 38px;
   line-height: 38px;
   padding: 0 12px;
@@ -255,7 +256,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

@@ -119,7 +119,7 @@
   -webkit-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  font-size: 14px;
+  font-size: 0;
   padding: 0;
   text-align: left;
   white-space: nowrap;
@@ -184,6 +184,7 @@
   position: relative;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  font-size: 14px;
   height: 38px;
   line-height: 38px;
   padding: 0 12px;
@@ -255,7 +256,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;