@syncfusion/ej2-navigations 31.2.16 → 32.1.19

package/styles/material3.scss

@@ -1,61 +1,59 @@
+@use 'ej2-base/styles/definition/material3' as *;
+@use 'pager/material3-definition' as *;
+@use 'pager/icons/material3' as *;
+@use 'pager/all' as *;
+@use 'pager/bigger' as *;
+@use 'h-scroll/material3-definition' as *;
+@use 'h-scroll/icons/material3' as *;
+@use 'h-scroll/all' as *;
+@use 'h-scroll/bigger' as *;
+@use 'v-scroll/material3-definition' as *;
+@use 'v-scroll/icons/material3' as *;
+@use 'v-scroll/all' as *;
+@use 'v-scroll/bigger' as *;
+@use 'ej2-buttons/styles/button/material3-definition' as *;
+@use 'ej2-popups/styles/popup/material3-definition' as *;
+@use 'toolbar/material3-definition' as *;
+@use 'toolbar/icons/material3' as *;
+@use 'toolbar/all' as *;
+@use 'toolbar/bigger' as *;
+@use 'accordion/material3-definition' as *;
+@use 'accordion/icons/material3' as *;
+@use 'accordion/all' as *;
+@use 'accordion/bigger' as *;
+@use 'carousel/material3-definition' as *;
+@use 'carousel/icons/material3' as *;
+@use 'carousel/all' as *;
 
-
-
-@import 'pager/material3-definition.scss';
-@import 'pager/icons/material3.scss';
-@import 'pager/all.scss';
-@import 'pager/bigger.scss';
-@import 'h-scroll/material3-definition.scss';
-@import 'h-scroll/icons/material3.scss';
-@import 'h-scroll/all.scss';
-@import 'h-scroll/bigger.scss';
-@import 'v-scroll/material3-definition.scss';
-@import 'v-scroll/icons/material3.scss';
-@import 'v-scroll/all.scss';
-@import 'v-scroll/bigger.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 'toolbar/bigger.scss';
-@import 'accordion/material3-definition.scss';
-@import 'accordion/icons/material3.scss';
-@import 'accordion/all.scss';
-@import 'accordion/bigger.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 'context-menu/bigger.scss';
-@import 'tab/material3-definition.scss';
-@import 'tab/icons/material3.scss';
-@import 'tab/all.scss';
-@import 'tab/bigger.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 'treeview/bigger.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 'menu/bigger.scss';
-@import 'breadcrumb/material3-definition.scss';
-@import 'breadcrumb/icons/material3.scss';
-@import 'breadcrumb/all.scss';
-@import 'breadcrumb/bigger.scss';
-@import 'appbar/material3-definition.scss';
-@import 'appbar/all.scss';
-@import 'appbar/bigger.scss';
-@import 'ej2-popups/styles/tooltip/material3-definition.scss';
-@import 'stepper/material3-definition.scss';
-@import 'stepper/icons/material3.scss';
-@import 'stepper/all.scss';
-@import 'stepper/bigger.scss';
+@use 'context-menu/material3-definition' as *;
+@use 'context-menu/icons/material3' as *;
+@use 'context-menu/all' as *;
+@use 'context-menu/bigger' as *;
+@use 'tab/material3-definition' as *;
+@use 'tab/icons/material3' as *;
+@use 'tab/all' as *;
+@use 'tab/bigger' as *;
+@use 'ej2-inputs/styles/input/material3-definition' as *;
+@use 'ej2-buttons/styles/check-box/material3-definition' as *;
+@use 'treeview/material3-definition' as *;
+@use 'treeview/icons/material3' as *;
+@use 'treeview/all' as *;
+@use 'treeview/bigger' as *;
+@use 'sidebar/material3-definition' as *;
+@use 'sidebar/all' as *;
+@use 'menu/material3-definition' as *;
+@use 'menu/icons/material3' as *;
+@use 'menu/all' as *;
+@use 'menu/bigger' as *;
+@use 'breadcrumb/material3-definition' as *;
+@use 'breadcrumb/icons/material3' as *;
+@use 'breadcrumb/all' as *;
+@use 'breadcrumb/bigger' as *;
+@use 'appbar/material3-definition' as *;
+@use 'appbar/all' as *;
+@use 'appbar/bigger' as *;
+@use 'ej2-popups/styles/tooltip/material3-definition' as *;
+@use 'stepper/material3-definition' as *;
+@use 'stepper/icons/material3' as *;
+@use 'stepper/all' as *;
+@use 'stepper/bigger' as *;

package/styles/menu/_all.scss

@@ -1,2 +1,2 @@
-@import 'layout.scss';
-@import 'theme.scss';
+@use 'layout' as *;
+@use 'theme' as *;

package/styles/menu/_bds-definition.scss

@@ -1,8 +1,13 @@
+@use 'ej2-base/styles/definition/bds' as *;
+@use '../context-menu/bds-definition' as *;
+@forward 'ej2-base/styles/definition/bds';
+@forward '../context-menu/bds-definition';
 $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: 48px !default;
+$menu-bigger-li-line-height: 48px !default;
 $menu-bigger-li-padding: 0 16px !default;
 $menu-bigger-li-text-indent: 15px !default;
 $menu-bigger-li-right-padding: 12px !default;
@@ -22,23 +27,31 @@ $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-margin-right-text-indent: 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: 38px !default;
+$menu-li-line-height: 38px !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-header-font-size: $text-lg !default;
+$menu-icon-font-size-text-indent: $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-vscroll-nav-height: 28px !default;
+$menu-vscroll-nav-padding: 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-vscroll-nav-height: 32px !default;
+$menu-bigger-vscroll-nav-padding: 32px !default;
 $menu-bigger-scroll-nav-icon-size: 18px !default;
 $menu-header-icon-padding: 0 16px !default;
 $menu-li-bgcolor: $content-bg-color-alt3 !default;
@@ -63,3 +76,23 @@ $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;
+$menu-padding-none: 0 !default;
+$menu-bigger-icon-mrg-right: 0 !default;
+$menu-bigger-icon-margin-left: 0 !default;
+$menu-icon-margin-bottom: 4px !default;
+$menu-scroll-padding: 0 !default;
+$menu-hscroll-nav-interaction-border: 0 !default;
+$menu-hamburger-border: 0 !default;
+$menu-hamburger-border-radius: 0 !default;
+$menu-hamburger-padding: 0 !default;
+$menu-hamburger-rtl-icon-margin-left: 0 !default;
+$menu-border-none: 0 !default;
+$menu-inherit-height: inherit !default;
+$menu-inherit-line-height: inherit !default;
+$menu-auto-height: auto !default;
+$menu-header-font-family: $font-family !default;
+$menu-scroll-bar-height: 100% !default;
+$menu-container-height: 1px !default;
+$menu-normal-line-height: normal !default;
+$menu-container-ul-font-weight: 500 !default;
+$menu-wrapper-line-height: 0 !default;

package/styles/menu/_bigger.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @mixin bigger-rtl-blank-icon {
   padding-left: $cmenu-caret-blank-icon;
 
@@ -14,37 +16,37 @@
 
 @mixin bigger-li-size {
   height: $cmenu-bigger-li-height;
-  line-height: $cmenu-bigger-li-height;
+  line-height: $cmenu-bigger-li-line-height;
   @if $skin-name == 'fluent2' {
-    height: 40px;
-    line-height: 21px;
-    padding: 9px;
+    height: $cmenu-bigger-li-size-height;
+    line-height: $cmenu-bigger-li-size-line-height;
+    padding: $cmenu-bigger-li-size-padding;
   }
 
   &.e-menu-caret-icon {
     @if $skin-name == 'fluent2' {
-      padding: 9px 36px 9px 9px;
+      padding: $cmenu-caret-icon-padding;
     }
   }
 
   & .e-menu-icon {
     font-size: $cmenu-icon-bigger-font-size;
-    line-height: $cmenu-bigger-li-height;
+    line-height: $cmenu-bigger-li-line-height;
     @if $skin-name == 'tailwind' {
       margin-right: $cmenu-icon-bigger-margin-right;
     }
   }
 
   & .e-caret {
-    line-height: $cmenu-bigger-li-height;
+    line-height: $cmenu-bigger-li-line-height;
     @if $skin-name == 'fluent2' {
-      margin: 3px 0;
+      margin: $cmenu-bigger-caret-icon-margin;
     }
   }
 
   &.e-separator {
-    height: auto;
-    line-height: normal;
+    height: $menu-auto-height;
+    line-height: $menu-normal-line-height;
   }
 }
 
@@ -56,16 +58,16 @@
     font-size: $menu-bigger-font-size;
 
     &.e-menu .e-menu-item {
-      line-height: $menu-bigger-li-height;
+      line-height: $menu-bigger-li-line-height;
       padding: $menu-bigger-li-padding;
       height: $menu-bigger-li-height;
 
       & .e-menu-icon {
         font-size: $menu-icon-bigger-font-size;
-        line-height: $menu-bigger-li-height;
+        line-height: $menu-bigger-li-line-height;
         margin-right: $menu-bigger-icon-margin-right;
         @if $skin-name == 'fluent2' {
-          margin-bottom: 3px;
+          margin-bottom: $menu-bigger-icon-item-margin-bottom;
         }
       }
 
@@ -75,7 +77,7 @@
           line-height: $menu-bigger-li-icon-height;
         }
         @else {
-          line-height: $menu-bigger-li-height;
+          line-height: $menu-bigger-li-line-height;
         }
         right: $menu-bigger-caret-right;
       }
@@ -93,8 +95,8 @@
       &.e-vertical {
         & .e-menu-item {
           &.e-separator {
-            height: auto;
-            line-height: normal;
+            height: $menu-auto-height;
+            line-height: $menu-normal-line-height;
           }
         }
       }
@@ -104,7 +106,7 @@
       @include bigger-ul-size;
       min-width: $cmenu-bigger-min-width;
       @if $skin-name == 'tailwind3' {
-        font-weight: $font-weight-normal;
+        font-weight: $menu-ul-font-weight;
       }
 
       & .e-menu-item  {
@@ -151,7 +153,7 @@
   .e-bigger .e-menu-container,
   .e-bigger.e-menu-container {
     & .e-menu-hscroll.e-hscroll:not(.e-scroll-device) {
-      padding: 0 $menu-bigger-hscroll-nav-size;
+      padding: $menu-padding-none $menu-bigger-hscroll-nav-size;
 
       & .e-scroll-nav {
         width: $menu-bigger-hscroll-nav-size;
@@ -163,11 +165,11 @@
 
     & .e-menu-vscroll.e-vscroll {
       &:not(.e-scroll-device) {
-        padding: $menu-bigger-vscroll-nav-size 0;
+        padding: $menu-bigger-vscroll-nav-padding $menu-padding-none;
       }
 
       & .e-scroll-nav {
-        height: $menu-bigger-vscroll-nav-size;
+        height: $menu-bigger-vscroll-nav-height;
       }
     }
 
@@ -189,12 +191,12 @@
 
       & .e-menu-icon {
         margin-left: $menu-bigger-icon-margin-right;
-        margin-right: 0;
+        margin-right: $menu-bigger-icon-mrg-right;
       }
 
       & .e-caret {
         left: $menu-bigger-caret-right;
-        margin-left: 0;
+        margin-left: $menu-bigger-icon-margin-left;
         right: auto;
       }
 
@@ -217,7 +219,7 @@
         &.e-menu-caret-icon {
           padding-left: $cmenu-caret-li-padding;
           @if $skin-name == 'fluent2' {
-            padding-right: 9px;
+            padding-right: $menu-bigger-caret-icon-padding-right;
           }
           @else {
             padding-right: $cmenu-li-right-padding;
@@ -248,9 +250,9 @@
       max-width: 100%;
 
       & .e-menu-item {
-        height: auto;
-        line-height: $menu-bigger-li-height;
-        padding: 0;
+        height: $menu-auto-height;
+        line-height: $menu-bigger-li-line-height;
+        padding: $menu-padding-none;
       }
     }
   }
@@ -262,7 +264,7 @@
     & .e-menu-header {
       font-size: $menu-icon-bigger-font-size;
       height: $menu-bigger-li-height;
-      line-height: $menu-bigger-li-height;
+      line-height: $menu-bigger-li-line-height;
     }
 
     & ul.e-menu {
@@ -281,7 +283,7 @@
           text-indent: inherit;
 
           &.e-menu-caret-icon {
-            padding-right: 0 !important; /* stylelint-disable-line declaration-no-important */
+            padding-right: $menu-padding-none !important; /* stylelint-disable-line declaration-no-important */
           }
 
           & .e-caret {
@@ -308,7 +310,7 @@
         }
       }
       .e-ul {
-        font-weight: $font-weight-medium;
+        font-weight: $menu-container-ul-font-weight;
       }
     }
   }
@@ -319,7 +321,7 @@
   .e-bigger.e-rtl.e-menu-container.e-hamburger {
     & ul.e-menu {
       & .e-menu-item {
-        padding: 0;
+        padding: $menu-padding-none;
         text-indent: $menu-bigger-li-text-indent;
 
         &.e-blankicon {
@@ -327,13 +329,13 @@
         }
 
         & .e-menu-icon {
-          margin-left: 0;
+          margin-left: $menu-bigger-icon-margin-left;
           text-indent: inherit;
         }
 
         &.e-menu-caret-icon {
-          padding-left: 0;
-          padding-right: 0;
+          padding-left: $menu-padding-none;
+          padding-right: $menu-padding-none;
         }
 
         & .e-caret {
@@ -352,14 +354,14 @@
 
   .e-bigger .e-menu-container .e-ul .e-menu-item .e-caret {
     @if $skin-name == 'fluent2' {
-      padding: 9px 0;
+      padding: $menu-container-caret-padding;
     }
   }
 
   .e-bigger .e-menu-wrapper:not(.e-hamburger) ul.e-ul .e-menu-item:not(.e-separator),
   .e-bigger .e-menu-container:not(.e-hamburger) ul.e-ul .e-menu-item:not(.e-separator) {
     @if $skin-name == 'fluent2' {
-      height: 40px;
+      height: $menu-bigger-ul-item-height;
     }
     @else {
       height: $cmenu-bigger-li-height;
@@ -375,7 +377,7 @@
 
   .e-bigger .e-menu-wrapper.e-hamburger ul.e-menu .e-menu-item,
   .e-bigger .e-menu-container.e-hamburger ul.e-menu .e-menu-item {
-    padding: 0 !important; /* stylelint-disable-line declaration-no-important */
-    height: auto !important; /* stylelint-disable-line declaration-no-important */
+    padding: $menu-padding-none !important; /* stylelint-disable-line declaration-no-important */
+    height: $menu-auto-height !important; /* stylelint-disable-line declaration-no-important */
   }
 }

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

@@ -1,3 +1,7 @@
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@use '../context-menu/bootstrap-dark-definition' as *;
+@forward 'ej2-base/styles/definition/bootstrap-dark';
+@forward '../context-menu/bootstrap-dark-definition';
 $menu-bigger-li-right-padding: 15px !default;
 $menu-bigger-icon-margin-right: 10px !default;
 $menu-caret-padding-left: 10px !default;
@@ -11,10 +15,14 @@ $menu-blank-icon: 34px !default;
 $menu-ul-header-padding: $menu-ul-padding !default;
 $menu-separator-padding: 0 !default;
 $menu-li-height: 42px !default;
+$menu-li-line-height: 42px !default;
 $menu-li-padding: 0 15px !default;
 $menu-li-text-indent: 15px !default;
 $menu-icon-font-size: 14px !default;
+$menu-header-font-size: 14px !default;
+$menu-icon-font-size-text-indent: 14px !default;
 $menu-icon-margin-right: 8px !default;
+$menu-icon-margin-right-text-indent: 8px !default;
 $menu-icon-width: 1em !default;
 $menu-caret-font-size: 11px !default;
 $menu-caret-right: 6px !default;
@@ -24,6 +32,7 @@ $menu-disable-opacity: .65 !default;
 $menu-li-right-padding: 12px !default;
 $menu-bigger-font-size: 15px !default;
 $menu-bigger-li-height: 52px !default;
+$menu-bigger-li-line-height: 52px !default;
 $menu-bigger-li-padding: 0 15px !default;
 $menu-bigger-li-text-indent: 15px !default;
 $menu-icon-bigger-font-size: 16px !default;
@@ -46,9 +55,13 @@ $menu-li-selected-outline: 0 solid $menu-li-selection-bgcolor !default;
 $menu-li-selected-outline-offset: 0 !default;
 $menu-hscroll-nav-size: 30px !default;
 $menu-vscroll-nav-size: 16px !default;
+$menu-vscroll-nav-height: 16px !default;
+$menu-vscroll-nav-padding: 16px !default;
 $menu-scroll-nav-icon-size: 10px !default;
 $menu-bigger-hscroll-nav-size: 36px !default;
 $menu-bigger-vscroll-nav-size: 24px !default;
+$menu-bigger-vscroll-nav-height: 24px !default;
+$menu-bigger-vscroll-nav-padding: 24px !default;
 $menu-bigger-scroll-nav-icon-size: 12px !default;
 $menu-srollbar-ul-border: $menu-ul-border !default;
 $submenu-caret-font-size: $menu-caret-font-size !default;
@@ -59,3 +72,23 @@ $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;
+$menu-padding-none: 0 !default;
+$menu-bigger-icon-mrg-right: 0 !default;
+$menu-bigger-icon-margin-left: 0 !default;
+$menu-icon-margin-bottom: 4px !default;
+$menu-scroll-padding: 0 !default;
+$menu-hscroll-nav-interaction-border: 0 !default;
+$menu-hamburger-border: 0 !default;
+$menu-hamburger-border-radius: 0 !default;
+$menu-hamburger-padding: 0 !default;
+$menu-hamburger-rtl-icon-margin-left: 0 !default;
+$menu-border-none: 0 !default;
+$menu-inherit-height: inherit !default;
+$menu-inherit-line-height: inherit !default;
+$menu-auto-height: auto !default;
+$menu-header-font-family: $font-family !default;
+$menu-scroll-bar-height: 100% !default;
+$menu-container-height: 1px !default;
+$menu-normal-line-height: normal !default;
+$menu-container-ul-font-weight: 500 !default;
+$menu-wrapper-line-height: 0 !default;

package/styles/menu/_bootstrap-definition.scss

@@ -1,8 +1,13 @@
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@use '../context-menu/bootstrap-definition' as *;
+@forward 'ej2-base/styles/definition/bootstrap';
+@forward '../context-menu/bootstrap-definition';
 $menu-bigger-caret-font-size: 10px !default;
 $menu-bigger-caret-li-padding: 35px !default;
 $menu-bigger-caret-right: 15px !default;
 $menu-bigger-font-size: 15px !default;
 $menu-bigger-li-height: 50px !default;
+$menu-bigger-li-line-height: 50px !default;
 $menu-bigger-li-padding: 0 15px !default;
 $menu-bigger-li-text-indent: 15px !default;
 $menu-bigger-li-right-padding: 15px !default;
@@ -23,12 +28,14 @@ $menu-color: $grey-light-font !default;
 $menu-disable-opacity: .65 !default;
 $menu-font-size: 14px !default;
 $menu-icon-margin-right: 8px !default;
+$menu-icon-margin-right-text-indent: 8px !default;
 $menu-li-bgcolor: $grey-e6 !default;
 $menu-li-border-color: $grey-cc !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-line-height: 40px !default;
 $menu-li-padding: 0 12px !default;
 $menu-li-text-indent: 12px !default;
 $menu-li-right-padding: 12px !default;
@@ -38,6 +45,8 @@ $menu-li-selection-font-color: $grey-light-font !default;
 $menu-ul-header-padding: $menu-ul-padding !default;
 $menu-separator-padding: 0 !default;
 $menu-icon-font-size: 14px !default;
+$menu-header-font-size: 14px !default;
+$menu-icon-font-size-text-indent: 14px !default;
 $menu-icon-bigger-font-size: 16px !default;
 $menu-seperator-border-color: $grey-d4 !default;
 $menu-selected-color: $grey-light-font !default;
@@ -49,9 +58,13 @@ $menu-li-hover-outline: 0 solid $menu-li-border-color !default;
 $menu-li-selected-outline-offset: 0 !default;
 $menu-hscroll-nav-size: 30px !default;
 $menu-vscroll-nav-size: 16px !default;
+$menu-vscroll-nav-height: 16px !default;
+$menu-vscroll-nav-padding: 16px !default;
 $menu-scroll-nav-icon-size: 10px !default;
 $menu-bigger-hscroll-nav-size: 36px !default;
 $menu-bigger-vscroll-nav-size: 24px !default;
+$menu-bigger-vscroll-nav-height: 24px !default;
+$menu-bigger-vscroll-nav-padding: 24px !default;
 $menu-bigger-scroll-nav-icon-size: $menu-scroll-nav-icon-size !default;
 $menu-srollbar-ul-border: $menu-ul-border !default;
 $cmenu-ul-border-radius: 4px !default;
@@ -63,3 +76,23 @@ $menu-icon-hover-color: initial !default;
 $menu-icon-focussed-color: $cmenu-caret-color !default;
 $menu-caret-color: $cmenu-caret-color !default;
 $menu-header-icon-padding: 0 16px !default;
+$menu-padding-none: 0 !default;
+$menu-bigger-icon-mrg-right: 0 !default;
+$menu-bigger-icon-margin-left: 0 !default;
+$menu-icon-margin-bottom: 4px !default;
+$menu-scroll-padding: 0 !default;
+$menu-hscroll-nav-interaction-border: 0 !default;
+$menu-hamburger-border: 0 !default;
+$menu-hamburger-border-radius: 0 !default;
+$menu-hamburger-padding: 0 !default;
+$menu-hamburger-rtl-icon-margin-left: 0 !default;
+$menu-border-none: 0 !default;
+$menu-inherit-height: inherit !default;
+$menu-inherit-line-height: inherit !default;
+$menu-auto-height: auto !default;
+$menu-header-font-family: $font-family !default;
+$menu-scroll-bar-height: 100% !default;
+$menu-container-height: 1px !default;
+$menu-normal-line-height: normal !default;
+$menu-container-ul-font-weight: 500 !default;
+$menu-wrapper-line-height: 0 !default;

package/styles/menu/_bootstrap4-definition.scss

@@ -1,10 +1,15 @@
 @use 'sass:color';
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@use '../context-menu/bootstrap4-definition' as *;
+@forward 'ej2-base/styles/definition/bootstrap4';
+@forward '../context-menu/bootstrap4-definition';
 
 $menu-bigger-caret-font-size: 12px !default;
 $menu-bigger-caret-li-padding: 35px !default;
 $menu-bigger-caret-right: 15px !default;
 $menu-bigger-font-size: 16px !default;
 $menu-bigger-li-height: 40px !default;
+$menu-bigger-li-line-height: 40px !default;
 $menu-bigger-li-padding: 0 16px !default;
 $menu-bigger-li-text-indent: 16px !default;
 $menu-bigger-li-right-padding: 16px !default;
@@ -25,12 +30,14 @@ $menu-color: $primary !default;
 $menu-disable-opacity: .65 !default;
 $menu-font-size: 14px !default;
 $menu-icon-margin-right: 8px !default;
+$menu-icon-margin-right-text-indent: 8px !default;
 $menu-li-bgcolor: $gray-100 !default;
 $menu-li-border-color: $gray-100 !default;
 $menu-li-hover-outline-offset: 0 !default;
 $menu-li-border-style: solid !default;
 $menu-li-border-width: 1px !default;
 $menu-li-height: 30px !default;
+$menu-li-line-height: 30px !default;
 $menu-li-padding: 0 12px !default;
 $menu-li-text-indent: 12px !default;
 $menu-li-right-padding: 12px !default;
@@ -40,6 +47,8 @@ $menu-li-selection-font-color: $primary-font !default;
 $menu-ul-header-padding: $menu-ul-padding !default;
 $menu-separator-padding: 0 !default;
 $menu-icon-font-size: 14px !default;
+$menu-header-font-size: 14px !default;
+$menu-icon-font-size-text-indent: 14px !default;
 $menu-icon-bigger-font-size: 16px !default;
 $menu-seperator-border-color: $gray-200 !default;
 $menu-selected-color: color.adjust($primary, $lightness: -15%) !default;
@@ -51,9 +60,13 @@ $menu-li-hover-outline: 0 solid $menu-li-border-color !default;
 $menu-li-selected-outline-offset: 0 !default;
 $menu-hscroll-nav-size: 32px !default;
 $menu-vscroll-nav-size: 16px !default;
+$menu-vscroll-nav-height: 16px !default;
+$menu-vscroll-nav-padding: 16px !default;
 $menu-scroll-nav-icon-size: 10px !default;
 $menu-bigger-hscroll-nav-size: 36px !default;
 $menu-bigger-vscroll-nav-size: 24px !default;
+$menu-bigger-vscroll-nav-height: 24px !default;
+$menu-bigger-vscroll-nav-padding: 24px !default;
 $menu-bigger-scroll-nav-icon-size: $menu-scroll-nav-icon-size !default;
 $menu-srollbar-ul-border: $menu-ul-border !default;
 $menu-icon-color: $primary !default;
@@ -64,3 +77,23 @@ $submenu-caret-font-size: $menu-caret-font-size !default;
 $submenu-bigger-caret-font-size: $submenu-caret-font-size !default;
 $submenu-color: $gray-900 !default;
 $menu-header-icon-padding: 0 16px !default;
+$menu-padding-none: 0 !default;
+$menu-bigger-icon-mrg-right: 0 !default;
+$menu-bigger-icon-margin-left: 0 !default;
+$menu-icon-margin-bottom: 4px !default;
+$menu-scroll-padding: 4px !default;
+$menu-hscroll-nav-interaction-border: 0 !default;
+$menu-hamburger-border: 0 !default;
+$menu-hamburger-border-radius: 0 !default;
+$menu-hamburger-padding: 0 !default;
+$menu-hamburger-rtl-icon-margin-left: 0 !default;
+$menu-border-none: 0 !default;
+$menu-inherit-height: inherit !default;
+$menu-inherit-line-height: inherit !default;
+$menu-auto-height: auto !default;
+$menu-header-font-family: $font-family !default;
+$menu-scroll-bar-height: 100% !default;
+$menu-container-height: 1px !default;
+$menu-normal-line-height: normal !default;
+$menu-container-ul-font-weight: 500 !default;
+$menu-wrapper-line-height: 0 !default;