@syncfusion/ej2-navigations 25.2.6 → 26.1.38

package/styles/material3.scss

@@ -1,16 +1,49 @@
 
 
-@import 'pager/material3.scss';
-@import 'h-scroll/material3.scss';
-@import 'v-scroll/material3.scss';
-@import 'toolbar/material3.scss';
-@import 'accordion/material3.scss';
-@import 'carousel/material3.scss';
-@import 'context-menu/material3.scss';
-@import 'tab/material3.scss';
-@import 'treeview/material3.scss';
-@import 'sidebar/material3.scss';
-@import 'menu/material3.scss';
-@import 'breadcrumb/material3.scss';
-@import 'appbar/material3.scss';
-@import 'stepper/material3.scss';
+
+@import 'pager/material3-definition.scss';
+@import 'pager/icons/material3.scss';
+@import 'pager/all.scss';
+
+@import 'h-scroll/material3-definition.scss';
+@import 'h-scroll/icons/material3.scss';
+@import 'h-scroll/all.scss';
+@import 'v-scroll/material3-definition.scss';
+@import 'v-scroll/icons/material3.scss';
+@import 'v-scroll/all.scss';
+@import 'ej2-buttons/styles/button/material3-definition.scss';
+@import 'ej2-popups/styles/popup/material3-definition.scss';
+@import 'toolbar/material3-definition.scss';
+@import 'toolbar/icons/material3.scss';
+@import 'toolbar/all.scss';
+@import 'accordion/material3-definition.scss';
+@import 'accordion/icons/material3.scss';
+@import 'accordion/all.scss';
+@import 'carousel/material3-definition.scss';
+@import 'carousel/icons/material3.scss';
+@import 'carousel/all.scss';
+@import 'context-menu/material3-definition.scss';
+@import 'context-menu/icons/material3.scss';
+@import 'context-menu/all.scss';
+@import 'tab/material3-definition.scss';
+@import 'tab/icons/material3.scss';
+@import 'tab/all.scss';
+@import 'ej2-inputs/styles/input/material3-definition.scss';
+@import 'ej2-buttons/styles/check-box/material3-definition.scss';
+@import 'treeview/material3-definition.scss';
+@import 'treeview/icons/material3.scss';
+@import 'treeview/all.scss';
+@import 'sidebar/material3-definition.scss';
+@import 'sidebar/all.scss';
+@import 'menu/material3-definition.scss';
+@import 'menu/icons/material3.scss';
+@import 'menu/all.scss';
+@import 'breadcrumb/material3-definition.scss';
+@import 'breadcrumb/icons/material3.scss';
+@import 'breadcrumb/all.scss';
+@import 'appbar/material3-definition.scss';
+@import 'appbar/all.scss';
+@import 'ej2-popups/styles/tooltip/material3-definition.scss';
+@import 'stepper/material3-definition.scss';
+@import 'stepper/icons/material3.scss';
+@import 'stepper/all.scss';

package/styles/menu/_bds-definition.scss

@@ -1,4 +1,3 @@
-//layout variables
 $menu-bigger-caret-font-size: $cmenu-bigger-caret-font-size !default;
 $menu-bigger-caret-li-padding: 32px !default;
 $menu-bigger-caret-right: 12px !default;

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

@@ -1,4 +1,3 @@
-//default
 $menu-bigger-li-right-padding: 15px !default;
 $menu-bigger-icon-margin-right: 10px !default;
 $menu-caret-padding-left: 10px !default;
@@ -60,5 +59,3 @@ $menu-icon-hover-color: inherit !default;
 $menu-icon-focussed-color: $cmenu-caret-color !default;
 $menu-caret-color: $cmenu-caret-color !default;
 $menu-header-icon-padding: 0 16px !default;
-
-//enddefault

package/styles/menu/_bootstrap5-definition.scss

@@ -1,4 +1,3 @@
-//layout variables
 $menu-bigger-caret-font-size: $cmenu-bigger-caret-font-size !default;
 $menu-bigger-caret-li-padding: 32px !default;
 $menu-bigger-caret-right: 12px !default;

package/styles/menu/_bootstrap5.3-definition.scss

@@ -0,0 +1,66 @@
+$menu-bigger-caret-font-size: $cmenu-bigger-caret-font-size !default;
+$menu-bigger-caret-li-padding: 32px !default;
+$menu-bigger-caret-right: 12px !default;
+$menu-bigger-font-size: $text-base !default;
+$menu-bigger-li-height: 38px !default;
+$menu-bigger-li-icon-height: 40px !default;
+$menu-bigger-li-padding: 0 16px !default;
+$menu-bigger-li-text-indent: 15px !default;
+$menu-bigger-li-right-padding: 12px !default;
+$menu-bigger-icon-margin-right: 12px !default;
+$menu-icon-width: 1em !default;
+$menu-blank-icon: 34px !default;
+$menu-blank-icon-bigger: 41px !default;
+$menu-caret-font-size: $text-sm !default;
+$menu-caret-icon: '\e706' !default;
+$menu-caret-icon-rtl: '\e70f' !default;
+$menu-caret-right: 8px !default;
+$menu-caret-li-padding: 26px !default;
+$menu-ul-padding: 0 !default;
+$menu-separator-bigger-padding: 0 !default;
+$menu-ul-bigger-header-padding: 0 !default;
+$menu-caret-padding-left: 8px !default;
+$menu-disable-opacity: .65 !default;
+$menu-font-size: $text-sm !default;
+$menu-icon-margin-right: 8px !default;
+$menu-li-hover-outline-offset: 0 !default;
+$menu-li-border-style: solid !default;
+$menu-li-border-width: 1px !default;
+$menu-li-height: 32px !default;
+$menu-li-padding: 0 12px !default;
+$menu-li-text-indent: 12px !default;
+$menu-li-right-padding: 12px !default;
+$menu-separator-padding: 0 !default;
+$menu-icon-font-size: $text-lg !default;
+$menu-icon-bigger-font-size: 22px !default;
+$menu-li-selected-outline-offset: 0 !default;
+$menu-hscroll-nav-size: 28px !default;
+$menu-vscroll-nav-size: 28px !default;
+$menu-scroll-nav-icon-size: 16px !default;
+$menu-bigger-hscroll-nav-size: 40px !default;
+$menu-bigger-vscroll-nav-size: 32px !default;
+$menu-bigger-scroll-nav-icon-size: 18px !default;
+$menu-header-icon-padding: 0 16px !default;
+$menu-icon-li-height: 35px !default;
+$menu-li-bgcolor: $content-bg-color-alt3 !default;
+$menu-li-border-color: $border-light !default;
+$menu-li-selection-bgcolor: $content-bg-color-alt3 !default;
+$menu-li-selected-outline: 0 solid $menu-li-selection-bgcolor !default;
+$menu-li-selection-font-color: $content-text-color !default;
+$menu-ul-header-padding: $menu-ul-padding !default;
+$menu-color: $content-text-color !default;
+$menu-seperator-border-color: $border-light !default;
+$menu-selected-color: $content-text-color !default;
+$menu-sub-ul-bgcolor: $content-bg-color-alt2 !default;
+$menu-sub-li-border-color: $border-light !default;
+$menu-ul-bgcolor: $content-bg-color-alt1 !default;
+$menu-ul-border: none !default;
+$menu-li-hover-outline: 0 solid $menu-li-border-color !default;
+$menu-srollbar-ul-border: none !default;
+$submenu-caret-font-size: $menu-caret-font-size !default;
+$submenu-bigger-caret-font-size: $text-base !default;
+$submenu-color: $content-text-color !default;
+$menu-icon-color: $icon-color !default;
+$menu-icon-hover-color: $content-text-color !default;
+$menu-icon-focussed-color: $cmenu-caret-color !default;
+$menu-caret-color: $cmenu-caret-color !default;

package/styles/menu/_fabric-dark-definition.scss

@@ -1,4 +1,3 @@
-//default
 $menu-bigger-icon-margin-right: 10px !default;
 $menu-caret-padding-left: 10px !default;
 $menu-li-border-style: solid !default;
@@ -60,5 +59,3 @@ $menu-icon-hover-color: inherit !default;
 $menu-icon-focussed-color: $cmenu-caret-color !default;
 $menu-caret-color: $cmenu-caret-color !default;
 $menu-header-icon-padding: 0 16px !default;
-
-//enddefault

package/styles/menu/_fluent-definition.scss

@@ -1,4 +1,3 @@
-//layout variables
 $menu-bigger-caret-font-size: $cmenu-bigger-caret-font-size !default;
 $menu-bigger-caret-li-padding: 32px !default;
 $menu-bigger-caret-right: 12px !default;

package/styles/menu/_fluent2-definition.scss

@@ -0,0 +1,67 @@
+$menu-bigger-caret-font-size: $cmenu-bigger-caret-font-size !default;
+$menu-bigger-caret-li-padding: 36px !default;
+$menu-bigger-caret-right: 12px !default;
+$menu-bigger-font-size: $text-base !default;
+$menu-bigger-li-height: 48px !default;
+$menu-bigger-li-padding: 0 16px !default;
+$menu-bigger-li-text-indent: 15px !default;
+$menu-bigger-li-right-padding: 12px !default;
+$menu-bigger-icon-margin-right: 12px !default;
+$menu-icon-width: 1em !default;
+$menu-blank-icon: 34px !default;
+$menu-blank-icon-bigger: 41px !default;
+$menu-caret-font-size: 14px !default;
+$menu-caret-icon: '\e706' !default;
+$menu-caret-icon-rtl: '\e70f' !default;
+$menu-caret-right: 8px !default;
+$menu-caret-li-padding: 30px !default;
+$menu-ul-padding: 0 !default;
+$menu-separator-bigger-padding: 0 !default;
+$menu-ul-bigger-header-padding: 0 !default;
+$menu-caret-padding-left: 8px !default;
+$menu-disable-opacity: .65 !default;
+$menu-font-size: $text-sm !default;
+$menu-icon-margin-right: 8px !default;
+$menu-icon-bigger-margin-right: 12px !default;
+$menu-li-hover-outline-offset: 0 !default;
+$menu-li-border-style: solid !default;
+$menu-li-border-width: 1px !default;
+$menu-li-height: 40px !default;
+$menu-li-padding: 0 12px !default;
+$menu-li-text-indent: 12px !default;
+$menu-li-right-padding: 12px !default;
+$menu-separator-padding: 0 !default;
+$menu-icon-font-size: 16px !default;
+$menu-icon-bigger-font-size: 18px !default;
+$menu-li-selected-outline-offset: 0 !default;
+$menu-hscroll-nav-size: 28px !default;
+$menu-vscroll-nav-size: 28px !default;
+$menu-scroll-nav-icon-size: 16px !default;
+$menu-bigger-hscroll-nav-size: 40px !default;
+$menu-bigger-vscroll-nav-size: 32px !default;
+$menu-bigger-scroll-nav-icon-size: 18px !default;
+$menu-header-icon-padding: 0 16px !default;
+$menu-li-bgcolor: $content-bg-color-hover !default;
+$menu-li-border-color: $border-light !default;
+$menu-li-selection-bgcolor: $content-bg-color-pressed !default;
+$menu-li-selected-outline: 0 solid $menu-li-selection-bgcolor !default;
+$menu-li-selection-font-color: $content-text-color !default;
+$menu-ul-header-padding: $menu-ul-padding !default;
+$menu-color: $content-text-color !default;
+$menu-seperator-border-color: $border-light !default;
+$menu-selected-color: $content-text-color-pressed !default;
+$menu-sub-ul-bgcolor: $content-bg-color-alt2 !default;
+$menu-sub-li-border-color: $border-light !default;
+$menu-ul-bgcolor: transparent !default;
+$menu-ul-border: none !default;
+$menu-li-hover-outline: 0 solid $menu-li-border-color !default;
+$menu-srollbar-ul-border: none !default;
+$submenu-caret-font-size: $menu-caret-font-size !default;
+$submenu-bigger-caret-font-size: $submenu-caret-font-size !default;
+$submenu-color: $content-text-color !default;
+$menu-icon-color: $icon-color !default;
+$menu-icon-hover-color: $content-text-color-hover !default;
+$menu-icon-focussed-color: $cmenu-caret-color !default;
+$menu-caret-color: $icon-color-pressed !default;
+$menu-icon-li-height: 42px !default;
+$menu-bigger-li-icon-height: 55px !default;

package/styles/menu/_fusionnew-definition.scss

@@ -1,4 +1,3 @@
-//layout variables
 $menu-bigger-caret-font-size: $cmenu-bigger-caret-font-size !default;
 $menu-bigger-caret-li-padding: 32px !default;
 $menu-bigger-caret-right: 12px !default;

package/styles/menu/_layout.scss

@@ -1,7 +1,5 @@
 @import '../context-menu/layout-mixin.scss';
 @include export-module('menu-layout') {
-  
-  /*! menu layout */
   .e-menu-wrapper,
   .e-menu-container {
     border: $menu-ul-border;
@@ -21,6 +19,12 @@
         text-align: left;
         white-space: nowrap;
 
+        & .e-separator {
+          @if $skin-name == 'fluent2' {
+            padding: 0 !important; /* stylelint-disable-line declaration-no-important */
+          }
+        }
+
         &.e-vertical {
           min-width: 120px;
 
@@ -66,13 +70,18 @@
             line-height: $menu-li-height;
             margin-right: $menu-icon-margin-right;
             text-align: center;
-            margin-bottom: 4px;
+            @if $skin-name == 'fluent2' {
+              margin-bottom: 2px;
+            }
+            @else {
+              margin-bottom: 4px;
+            }
           }
 
           & .e-caret {
             font-size: $menu-caret-font-size;
             height: auto;
-            @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' {
+            @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
               line-height: $menu-icon-li-height;
             }
             @else {
@@ -106,6 +115,9 @@
 
           & .e-caret {
             font-size: $submenu-caret-font-size;
+            @if $skin-name == 'fluent2' {
+              padding: 9px 0;
+            }
           }
         }
       }
@@ -178,10 +190,7 @@
     & .e-scroll-nav .e-nav-arrow {
       font-size: $menu-scroll-nav-icon-size;
 
-      &.e-nav-left-arrow {
-        transform: rotate(180deg);
-      }
-
+      &.e-nav-left-arrow,
       &.e-nav-up-arrow {
         transform: rotate(180deg);
       }
@@ -315,6 +324,9 @@
         font-size: $menu-icon-bigger-font-size;
         line-height: $menu-bigger-li-height;
         margin-right: $menu-bigger-icon-margin-right;
+        @if $skin-name == 'fluent2' {
+          margin-bottom: 3px;
+        }
       }
 
       &.e-menu-caret-icon {
@@ -323,7 +335,7 @@
 
       & .e-caret {
         font-size: $menu-bigger-caret-font-size;
-        @if $skin-name == 'bootstrap5' {
+        @if $skin-name == 'bootstrap5' or $skin-name == 'fluent2' {
           line-height: $menu-bigger-li-icon-height;
         }
         @else {
@@ -357,7 +369,9 @@
 
       & .e-menu-item  {
         @include bigger-li-size;
-        padding: $cmenu-li-padding;
+        @if $skin-name != 'fluent2' {
+          padding: $cmenu-li-padding;
+        }
         @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
           padding: $menu-bigger-li-padding;
         }
@@ -459,7 +473,12 @@
 
         &.e-menu-caret-icon {
           padding-left: $cmenu-caret-li-padding;
-          padding-right: $cmenu-li-right-padding;
+          @if $skin-name == 'fluent2' {
+            padding-right: 9px;
+          }
+          @else {
+            padding-right: $cmenu-li-right-padding;
+          }
         }
 
         &.e-blankicon {
@@ -529,7 +548,6 @@
         }
 
         /* stylelint-disable */
-
 		    & .e-menu-item[aria-expanded = "true"] .e-caret {
 			    -webkit-transition: -webkit-transform .3s ease-in-out;
           transition: -webkit-transform .3s ease-in-out;
@@ -582,7 +600,8 @@
         height: auto;
         padding: 0;
 
-        &.e-menu-caret-icon {
+        &.e-menu-caret-icon,
+        &.e-blankicon {
           padding: 0;
         }
 
@@ -593,10 +612,6 @@
           width: 100%;
         }
 
-        &.e-blankicon {
-          padding: 0;
-        }
-
         &.e-separator {
           @include separator-size;
         }
@@ -713,4 +728,10 @@
   .e-menu-container .e-vscroll ul {
     position: relative;
   }
+
+  .e-bigger .e-menu-container .e-ul .e-menu-item .e-caret {
+    @if $skin-name == 'fluent2' {
+      padding: 9px 0;
+    }
+  }
 }

package/styles/menu/_material-dark-definition.scss

@@ -1,4 +1,3 @@
-//default
 $menu-bigger-caret-li-padding: 36px !default;
 $menu-bigger-caret-right: 8px !default;
 $menu-bigger-li-right-padding: 16px !default;
@@ -60,5 +59,3 @@ $menu-icon-hover-color: inherit !default;
 $menu-icon-focussed-color: $cmenu-caret-color !default;
 $menu-caret-color: $cmenu-caret-color !default;
 $menu-header-icon-padding: 0 16px !default;
-
-//enddefault

package/styles/menu/_material3-definition.scss

@@ -1,4 +1,3 @@
-//layout variables
 $menu-bigger-caret-font-size: $cmenu-bigger-caret-font-size !default;
 $menu-bigger-caret-li-padding: 32px !default;
 $menu-bigger-caret-right: 12px !default;

package/styles/menu/_tailwind-definition.scss

@@ -1,4 +1,3 @@
-//layout variables
 $menu-bigger-caret-font-size: $cmenu-bigger-caret-font-size !default;
 $menu-bigger-caret-li-padding: 32px !default;
 $menu-bigger-caret-right: 12px !default;

package/styles/menu/_theme.scss

@@ -1,7 +1,5 @@
 @import '../context-menu/theme-mixin.scss';
 @include export-module('menu-theme') {
-
-  /*! menu theme */
   .e-menu-wrapper,
   .e-menu-container {
     background: $menu-ul-bgcolor;
@@ -36,6 +34,12 @@
           }
           @else {
             @include icon-color;
+            @if $skin-name == 'fluent2' {
+              & .e-menu-icon,
+              & .e-caret {
+                color: $icon-color;
+              }
+            }
           }
 
           &.e-menu-header {
@@ -67,6 +71,9 @@
               @if $skin-name == 'Material3' {
                 border-radius: 2px;
               }
+              @if $skin-name == 'fluent2' {
+                border-radius: 4px;
+              }
             }
           }
 
@@ -87,6 +94,9 @@
             @if $skin-name == 'Material3' {
               border-radius: 2px;
             }
+            @if $skin-name == 'fluent2' {
+              border-radius: 4px;
+            }
 
             & .e-caret {
               @if $skin-name == 'Material3' {
@@ -110,6 +120,14 @@
           &.e-separator {
             border-bottom-color: $menu-seperator-border-color;
           }
+
+          &:focus-visible {
+            @if $skin-name == 'fluent2' {
+              border-radius: 4px;
+              background-color: $content-bg-color;
+              box-shadow: $shadow-focus-ring1;
+            }
+          }
         }
 
         @include disabled-color;
@@ -121,19 +139,13 @@
 
         & .e-menu-item {
           @if $skin-name == 'bootstrap4' {
-            & .e-caret {
-              color: $submenu-color;
-            }
-
+            & .e-caret,
             & .e-menu-icon {
               color: $submenu-color;
             }
           }
           @else if $skin-name == 'FluentUI' {
-            & .e-caret {
-              color: $menu-icon-color;
-            }
-
+            & .e-caret,
             & .e-menu-icon {
               color: $menu-icon-color;
             }
@@ -149,19 +161,23 @@
                 color: $submenu-color;
               }
             }
+            @if $skin-name == 'fluent2' {
+              background-color: $flyout-bg-color-hover;
+              border-radius: 4px;
+            }
           }
 
           &.e-selected,
           &.e-active-item {
             @if $skin-name == 'bootstrap4' {
-              & .e-caret {
-                color: $menu-icon-focussed-color;
-              }
-
+              & .e-caret,
               & .e-menu-icon {
                 color: $menu-icon-focussed-color;
               }
             }
+            @if $skin-name == 'fluent2' {
+              background-color: $flyout-bg-color-selected;
+            }
           }
 
           & .e-menu-url {
@@ -180,6 +196,14 @@
           &.e-separator {
             border-bottom-color: $cmenu-li-border-color;
           }
+
+          &:focus-visible {
+            @if $skin-name == 'fluent2' {
+              background-color: $content-bg-color;
+              box-shadow: $shadow-focus-ring1;
+              border-radius: 4px;
+            }
+          }
         }
       }
     }
@@ -187,6 +211,14 @@
     &.e-menu-popup {
       background: $cmenu-ul-bgcolor;
 
+      & .e-ul .e-menu-item.e-disabled,
+      & .e-ul .e-menu-item.e-disabled .e-menu-icon {
+        @if $skin-name == 'fluent2' {
+          color: $flyout-text-color-disabled;
+          opacity: 1;
+        }
+      }
+
       &.e-sfcontextmenu .e-menu-vscroll {
         background: inherit;
       }