@syncfusion/ej2-angular-navigations 20.1.60 → 20.2.36

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

@@ -0,0 +1,63 @@
+//default
+$menu-bigger-caret-li-padding: 36px !default;
+$menu-bigger-caret-right: 8px !default;
+$menu-bigger-li-right-padding: 16px !default;
+$menu-bigger-icon-margin-right: 10px !default;
+$menu-caret-padding-left: 10px !default;
+$menu-li-border-style: solid !default;
+$menu-li-border-width: 1px !default;
+$menu-ul-border: $menu-li-border-width $menu-li-border-style transparent !default;
+$menu-font-size: 13px !default;
+$menu-ul-padding: 0 !default;
+$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-padding: 0 12px !default;
+$menu-li-text-indent: 12px !default;
+$menu-icon-font-size: 14px !default;
+$menu-icon-margin-right: 8px !default;
+$menu-icon-width: 24px !default;
+$menu-caret-font-size: 11px !default;
+$menu-caret-right: 6px !default;
+$menu-caret-icon: '\e94d' !default;
+$menu-caret-li-padding: 26px !default;
+$menu-disable-opacity: .38 !default;
+$menu-li-right-padding: 12px !default;
+$menu-bigger-font-size: 14px !default;
+$menu-bigger-li-height: 56px !default;
+$menu-bigger-li-padding: 0 16px !default;
+$menu-bigger-li-text-indent: 16px !default;
+$menu-icon-bigger-font-size: 16px !default;
+$menu-bigger-caret-font-size: $cmenu-bigger-caret-font-size !default;
+$menu-separator-bigger-padding: 0 !default;
+$menu-ul-bigger-header-padding: 0 !default;
+$menu-blank-icon-bigger: 42px !default;
+$menu-ul-bgcolor: $grey-900 !default;
+$menu-li-border-color: $cmenu-li-border-color !default;
+$menu-color: $cmenu-color !default;
+$menu-seperator-border-color: $grey-700 !default;
+$menu-li-bgcolor: rgba($grey-dark-font, .1) !default;
+$menu-li-selection-font-color: $cmenu-li-selection-font-color !default;
+$menu-li-hover-outline: 0 solid $menu-li-border-color !default;
+$menu-li-hover-outline-offset: 0 !default;
+$menu-li-selection-bgcolor: rgba($grey-dark-font, .18) !default;
+$menu-selected-color: $cmenu-selected-color !default;
+$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-scroll-nav-icon-size: 10px !default;
+$menu-bigger-hscroll-nav-size: 36px !default;
+$menu-bigger-vscroll-nav-size: 24px !default;
+$menu-bigger-scroll-nav-icon-size: 12px !default;
+$menu-srollbar-ul-border: none !default;
+$submenu-caret-font-size: $cmenu-caret-font-size !default;
+$submenu-bigger-caret-font-size: $cmenu-bigger-caret-font-size !default;
+$submenu-color: $cmenu-color !default;
+$menu-icon-color: $cmenu-caret-color !default;
+$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/_material-definition.scss

@@ -0,0 +1,64 @@
+$menu-bigger-caret-font-size: $cmenu-bigger-caret-font-size !default;
+$menu-bigger-caret-li-padding: 36px !default;
+$menu-bigger-caret-right: 16px !default;
+$menu-bigger-font-size: 14px !default;
+$menu-bigger-li-right-padding: 16px !default;
+$menu-bigger-li-height: 56px !default;
+$menu-bigger-li-padding: 0 16px !default;
+$menu-bigger-li-text-indent: 16px !default;
+$menu-bigger-icon-margin-right: 10px !default;
+$menu-color: $cmenu-color !default;
+$menu-blank-icon: 44px !default;
+$menu-blank-icon-bigger: 50px !default;
+$menu-caret-font-size: 10px !default;
+$menu-caret-icon: '\e94d' !default;
+$menu-caret-icon-rtl: '\e937' !default;
+$menu-caret-right: 12px !default;
+$menu-caret-li-padding: 30px !default;
+$menu-ul-padding: 0 !default;
+$menu-separator-padding: 0 !default;
+$menu-ul-header-padding: $menu-ul-padding !default;
+$menu-caret-padding-left: 10px !default;
+$menu-disable-opacity: .38 !default;
+$menu-font-size: 13px !default;
+$menu-icon-margin-right: 8px !default;
+$menu-li-border-style: solid !default;
+$menu-li-border-width: 1px !default;
+$menu-li-selection-font-color: $cmenu-li-selection-font-color !default;
+$menu-li-height: 42px !default;
+$menu-li-padding: 0 12px !default;
+$menu-li-text-indent: 12px !default;
+$menu-li-right-padding: 12px !default;
+$menu-li-bgcolor: $cmenu-li-bgcolor !default;
+$menu-li-selection-bgcolor: $grey-300 !default;
+$menu-li-selected-outline: 0 solid $menu-li-selection-bgcolor !default;
+$menu-icon-font-size: 14px !default;
+$menu-icon-bigger-font-size: 16px !default;
+$menu-icon-width: 24px !default;
+$menu-separator-bigger-padding: 0 !default;
+$menu-seperator-border-color: rgba($grey-light-font, .12) !default;
+$menu-sub-ul-bgcolor: $grey-white !default;
+$menu-sub-li-border-color: rgba($grey-light-font, .12) !default;
+$menu-ul-bgcolor: $grey-50 !default;
+$menu-ul-border: none !default;
+$menu-ul-bigger-header-padding: 0 !default;
+$menu-li-hover-outline-offset: 0 !default;
+$menu-li-selected-outline-offset: 0 !default;
+$menu-selected-color: $cmenu-selected-color !default;
+$menu-li-border-color: $cmenu-li-border-color !default;
+$menu-li-hover-outline: 0 solid $menu-li-border-color !default;
+$menu-hscroll-nav-size: 30px !default;
+$menu-vscroll-nav-size: 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-scroll-nav-icon-size: 12px !default;
+$menu-srollbar-ul-border: none !default;
+$submenu-caret-font-size: $cmenu-caret-font-size !default;
+$submenu-bigger-caret-font-size: $cmenu-bigger-caret-font-size !default;
+$submenu-color: $cmenu-color !default;
+$menu-icon-color: $cmenu-caret-color !default;
+$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;

package/styles/menu/_material3-definition.scss

@@ -0,0 +1,67 @@
+//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;
+$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: 14px !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: 18px !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: $submenu-caret-font-size !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/_tailwind-dark-definition.scss

@@ -0,0 +1 @@
+@import './tailwind-definition.scss';

package/styles/menu/_tailwind-definition.scss

@@ -0,0 +1,67 @@
+//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;
+$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: 16px !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-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-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: 18px !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-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-alt2 !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 !default;
+$menu-icon-focussed-color: $cmenu-caret-color !default;
+$menu-caret-color: $cmenu-caret-color !default;
+

package/styles/menu/_theme.scss

@@ -0,0 +1,261 @@
+@import '../context-menu/theme-mixin.scss';
+@include export-module('menu-theme') {
+  /*! menu theme */
+  .e-menu-wrapper,
+  .e-menu-container {
+    background-color: $menu-ul-bgcolor;
+
+    @at-root {
+      & .e-menu {
+        @if $skin-name == 'bootstrap4' {
+          background-color: $cmenu-ul-bgcolor;
+        }
+        @else {
+          background-color: inherit;
+        }
+        color: $menu-color;
+
+        &.e-menu {
+          &:not(.e-vertical) {
+            & .e-separator {
+              border-right-color: $menu-seperator-border-color;
+            }
+          }
+        }
+
+        & .e-menu-item  {
+          @if $skin-name == 'bootstrap4' {
+            & .e-caret {
+              color: $menu-caret-color;
+            }
+
+            & .e-menu-icon {
+              color: $menu-icon-color;
+            }
+          }
+          @else {
+            @include icon-color;
+          }
+
+          &.e-menu-header {
+            border-bottom-color: $cmenu-li-border-color;
+          }
+
+          & .e-menu-url {
+            color: $menu-color;
+          }
+
+          &.e-focused {
+            color: $menu-icon-hover-color;
+            outline: $menu-li-hover-outline;
+            outline-offset: $menu-li-hover-outline-offset;
+            @if $skin-name == 'bootstrap4' {
+              background-color: $menu-ul-bgcolor;
+
+              & .e-caret {
+                color: $menu-caret-color;
+              }
+
+              & .e-menu-icon {
+                color: $menu-icon-hover-color;
+              }
+            }
+            @else {
+              @include focused-icon-color;
+              background-color: $menu-li-bgcolor;
+            }
+          }
+
+          &.e-selected {
+            color: $menu-selected-color;
+            outline: $menu-li-selected-outline;
+            outline-offset: $menu-li-selected-outline-offset;
+            @if $skin-name == 'bootstrap4' {
+              background-color: $menu-ul-bgcolor;
+            }
+            @if $skin-name == 'FluentUI' {
+              background-color: $cmenu-li-bgcolor;
+            }
+            @else {
+              background-color: $menu-li-selection-bgcolor;
+            }
+
+            & .e-caret {
+              color: $menu-caret-color;
+            }
+
+            & .e-menu-icon {
+              color: $menu-caret-color;
+            }
+          }
+
+          &.e-separator {
+            border-bottom-color: $menu-seperator-border-color;
+          }
+        }
+
+        @include disabled-color;
+      }
+
+      & .e-ul {
+        background-color: inherit;
+        color: $submenu-color;
+
+        & .e-menu-item {
+          @if $skin-name == 'bootstrap4' {
+            & .e-caret {
+              color: $submenu-color;
+            }
+
+            & .e-menu-icon {
+              color: $submenu-color;
+            }
+        }
+          @else if $skin-name == 'FluentUI' {
+            & .e-caret {
+              color: $menu-icon-color;
+            }
+
+            & .e-menu-icon {
+              color: $menu-icon-color;
+            }
+          }
+
+          &.e-focused {
+            @if $skin-name == 'bootstrap4' {
+              & .e-caret {
+                color: $menu-caret-color;
+              }
+
+              & .e-menu-icon {
+                color: $submenu-color;
+              }
+            }
+          }
+
+          &.e-selected {
+            @if $skin-name == 'bootstrap4' {
+              & .e-caret {
+                color: $menu-icon-focussed-color;
+              }
+
+              & .e-menu-icon {
+                color: $menu-icon-focussed-color;
+              }
+            }
+          }
+
+          & .e-menu-url {
+            color: $submenu-color;
+          }
+
+          &.e-focused {
+            @include focused-color;
+          }
+
+          &.e-selected {
+            @include selected-color;
+          }
+
+          &.e-separator {
+            border-bottom-color: $cmenu-li-border-color;
+          }
+        }
+      }
+    }
+
+    &.e-menu-popup {
+      background-color: $cmenu-ul-bgcolor;
+
+      &.e-sfcontextmenu .e-menu-vscroll {
+        background-color: inherit;
+      }
+    }
+
+    & .e-menu-hscroll.e-hscroll .e-scroll-nav {
+      background: $menu-ul-bgcolor;
+
+      & .e-nav-arrow.e-icons {
+        color: $cmenu-caret-color;
+      }
+
+      &:hover {
+        @if $skin-name == 'bootstrap4' {
+          background-color: darken($gray-600, 7.5%);
+          border: 1px inset darken($gray-600, 10%);
+
+          & .e-icons {
+            color: $menu-icon-focussed-color;
+          }
+        }
+        @else {
+          background: $menu-li-bgcolor;
+        }
+      }
+
+      &:focus {
+        @if $skin-name == 'bootstrap4' {
+          background-color: darken($gray-600, 7.5%);
+          border-color: darken($gray-600, 10%);
+
+          & .e-icons {
+            color: $menu-icon-focussed-color;
+          }
+        }
+        @else {
+          background: $menu-li-bgcolor;
+        }
+      }
+
+      &:active {
+        @if $skin-name == 'bootstrap4' {
+          background-color: darken($gray-600, 7.5%);
+          border: 1px inset darken($gray-600, 10%);
+        }
+        @else {
+          background: $menu-li-bgcolor;
+        }
+      }
+    }
+
+    &.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav {
+      background: $cmenu-ul-bgcolor;
+      border-color: $menu-seperator-border-color;
+
+      & .e-icons {
+        color: $cmenu-color;
+      }
+
+      &:hover,
+      &:focus {
+        background: $cmenu-li-bgcolor;
+      }
+
+      &:active {
+        background: $cmenu-li-selection-bgcolor;
+      }
+    }
+  }
+
+  .e-menu-wrapper.e-hamburger,
+  .e-menu-container.e-hamburger {
+    & .e-menu-header {
+      color: $submenu-color;
+
+      & .e-menu-icon {
+        color: $submenu-color;
+      }
+    }
+
+    & ul {
+      color: $submenu-color;
+
+      @if $skin-name == 'bootstrap4' {
+        & .e-selected .e-caret,
+        & .e-caret {
+          color: $submenu-color;
+        }
+      }
+    }
+  }
+}

package/styles/menu/bootstrap-dark.scss

@@ -1 +1,8 @@
-@import 'ej2-navigations/styles/menu/bootstrap-dark.scss';
+@import 'ej2-base/styles/bootstrap-dark-definition.scss';
+@import '../context-menu/bootstrap-dark-definition.scss';
+@import '../h-scroll/bootstrap-dark-definition.scss';
+@import '../v-scroll/bootstrap-dark-definition.scss';
+@import 'ej2-popups/styles/popup/bootstrap-dark-definition.scss';
+@import 'bootstrap-dark-definition.scss';
+@import 'icons/bootstrap-dark.scss';
+@import 'all.scss';

package/styles/menu/bootstrap.scss

@@ -1 +1,8 @@
-@import 'ej2-navigations/styles/menu/bootstrap.scss';
+@import 'ej2-base/styles/bootstrap-definition.scss';
+@import '../context-menu/bootstrap-definition.scss';
+@import '../h-scroll/bootstrap-definition.scss';
+@import '../v-scroll/bootstrap-definition.scss';
+@import 'ej2-popups/styles/popup/bootstrap-definition.scss';
+@import 'bootstrap-definition.scss';
+@import 'icons/bootstrap.scss';
+@import 'all.scss';

package/styles/menu/bootstrap4.css

@@ -942,6 +942,7 @@
   outline: 0 solid #f2f4f6;
   outline-offset: 0;
   background-color: transparent;
+  background-color: #f2f4f6;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
 .e-menu-container .e-menu .e-menu-item.e-selected .e-caret {

package/styles/menu/bootstrap4.scss

@@ -1 +1,8 @@
-@import 'ej2-navigations/styles/menu/bootstrap4.scss';
+@import 'ej2-base/styles/bootstrap4-definition.scss';
+@import '../context-menu/bootstrap4-definition.scss';
+@import '../h-scroll/bootstrap4-definition.scss';
+@import '../v-scroll/bootstrap4-definition.scss';
+@import 'ej2-popups/styles/popup/bootstrap4-definition.scss';
+@import 'bootstrap4-definition.scss';
+@import 'icons/bootstrap4.scss';
+@import 'all.scss';

package/styles/menu/bootstrap5-dark.scss

@@ -1 +1,8 @@
-@import 'ej2-navigations/styles/menu/bootstrap5-dark.scss';
+@import 'ej2-base/styles/bootstrap5-dark-definition.scss';
+@import '../context-menu/bootstrap5-dark-definition.scss';
+@import '../h-scroll/bootstrap5-dark-definition.scss';
+@import '../v-scroll/bootstrap5-dark-definition.scss';
+@import 'ej2-popups/styles/popup/bootstrap5-dark-definition.scss';
+@import 'bootstrap5-dark-definition.scss';
+@import 'icons/bootstrap5-dark.scss';
+@import 'all.scss';

package/styles/menu/bootstrap5.scss

@@ -1 +1,8 @@
-@import 'ej2-navigations/styles/menu/bootstrap5.scss';
+@import 'ej2-base/styles/bootstrap5-definition.scss';
+@import '../context-menu/bootstrap5-definition.scss';
+@import '../h-scroll/bootstrap5-definition.scss';
+@import '../v-scroll/bootstrap5-definition.scss';
+@import 'ej2-popups/styles/popup/bootstrap5-definition.scss';
+@import 'bootstrap5-definition.scss';
+@import 'icons/bootstrap5.scss';
+@import 'all.scss';

package/styles/menu/fabric-dark.scss

@@ -1 +1,8 @@
-@import 'ej2-navigations/styles/menu/fabric-dark.scss';
+@import 'ej2-base/styles/fabric-dark-definition.scss';
+@import '../context-menu/fabric-dark-definition.scss';
+@import '../h-scroll/fabric-dark-definition.scss';
+@import '../v-scroll/fabric-dark-definition.scss';
+@import 'ej2-popups/styles/popup/fabric-dark-definition.scss';
+@import 'fabric-dark-definition.scss';
+@import 'icons/fabric-dark.scss';
+@import 'all.scss';

package/styles/menu/fabric.scss

@@ -1 +1,8 @@
-@import 'ej2-navigations/styles/menu/fabric.scss';
+@import 'ej2-base/styles/fabric-definition.scss';
+@import '../context-menu/fabric-definition.scss';
+@import '../h-scroll/fabric-definition.scss';
+@import '../v-scroll/fabric-definition.scss';
+@import 'ej2-popups/styles/popup/fabric-definition.scss';
+@import 'fabric-definition.scss';
+@import 'icons/fabric.scss';
+@import 'all.scss';

package/styles/menu/fluent-dark.css

@@ -955,7 +955,7 @@
   color: #f3f2f1;
   outline: 0 solid #292827;
   outline-offset: 0;
-  background-color: #292827;
+  background-color: #323130;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
 .e-menu-container .e-menu .e-menu-item.e-selected .e-caret {

package/styles/menu/fluent-dark.scss

@@ -1 +1,8 @@
-@import 'ej2-navigations/styles/menu/fluent-dark.scss';
+@import 'ej2-base/styles/fluent-dark-definition.scss';
+@import '../context-menu/fluent-dark-definition.scss';
+@import '../h-scroll/fluent-dark-definition.scss';
+@import '../v-scroll/fluent-dark-definition.scss';
+@import 'ej2-popups/styles/popup/fluent-dark-definition.scss';
+@import 'fluent-dark-definition.scss';
+@import 'icons/fluent-dark.scss';
+@import 'all.scss';

package/styles/menu/fluent.css

@@ -955,7 +955,7 @@
   color: #201f1e;
   outline: 0 solid #edebe9;
   outline-offset: 0;
-  background-color: #edebe9;
+  background-color: #f3f2f1;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
 .e-menu-container .e-menu .e-menu-item.e-selected .e-caret {

package/styles/menu/fluent.scss

@@ -1 +1,8 @@
-@import 'ej2-navigations/styles/menu/fluent.scss';
+@import 'ej2-base/styles/fluent-definition.scss';
+@import '../context-menu/fluent-definition.scss';
+@import '../h-scroll/fluent-definition.scss';
+@import '../v-scroll/fluent-definition.scss';
+@import 'ej2-popups/styles/popup/fluent-definition.scss';
+@import 'fluent-definition.scss';
+@import 'icons/fluent.scss';
+@import 'all.scss';

package/styles/menu/highcontrast-light.scss

@@ -1 +1,8 @@
-@import 'ej2-navigations/styles/menu/highcontrast-light.scss';
+@import 'ej2-base/styles/highcontrast-light-definition.scss';
+@import '../context-menu/highcontrast-light-definition.scss';
+@import '../h-scroll/highcontrast-light-definition.scss';
+@import '../v-scroll/highcontrast-light-definition.scss';
+@import 'ej2-popups/styles/popup/highcontrast-light-definition.scss';
+@import 'highcontrast-light-definition.scss';
+@import 'icons/highcontrast-light.scss';
+@import 'all.scss';

package/styles/menu/highcontrast.scss

@@ -1 +1,8 @@
-@import 'ej2-navigations/styles/menu/highcontrast.scss';
+@import 'ej2-base/styles/highcontrast-definition.scss';
+@import '../context-menu/highcontrast-definition.scss';
+@import '../h-scroll/highcontrast-definition.scss';
+@import '../v-scroll/highcontrast-definition.scss';
+@import 'ej2-popups/styles/popup/highcontrast-definition.scss';
+@import 'highcontrast-definition.scss';
+@import 'icons/highcontrast.scss';
+@import 'all.scss';