@syncfusion/ej2-angular-navigations 20.1.60 → 20.2.36

package/styles/context-menu/_tailwind-definition.scss

@@ -0,0 +1,53 @@
+//layout variables
+$cmenu-back-icon: '\e977' !default;
+$cmenu-back-icon-margin: 8px !default;
+$cmenu-bigger-caret-font-size: 16px !default;
+$cmenu-bigger-font-size: $text-base !default;
+$cmenu-bigger-li-height: 36px !default;
+$cmenu-bigger-li-padding: 0 16px !default;
+$cmenu-bigger-max-width: 280px !default;
+$cmenu-bigger-min-width: 112px !default;
+$cmenu-caret-blank-icon: 14px !default;
+$cmenu-caret-font-size: 16px !default;
+$cmenu-caret-icon: '\e956' !default;
+$cmenu-caret-icon-rtl: '\e937' !default;
+$cmenu-caret-li-padding: 36px !default;
+$cmenu-caret-right: 7px !default;
+$cmenu-icon-margin-right: 8px !default;
+$cmenu-icon-bigger-margin-right: 12px !default;
+$cmenu-li-height: 32px !default;
+$cmenu-li-padding: 0 12px !default;
+$cmenu-li-right-padding: 12px !default;
+$cmenu-li-border-width: 1px !default;
+$cmenu-max-width: 240px !default;
+$cmenu-icon-font-size: 18px !default;
+$cmenu-icon-bigger-font-size: 22px !default;
+$cmenu-min-width: 120px !default;
+$cmenu-parent-ul-box-shadow: $shadow-lg !default;
+$cmenu-seperator-bigger-padding: 4px 0 !default;
+$cmenu-seperator-padding: 4px 0 !default;
+$cmenu-ul-border: 1px solid $border-light !default;
+$cmenu-ul-border-radius: 4px !default;
+$cmenu-ul-padding: 4px 0 !default;
+$cmenu-ul-bigger-padding: 4px 0 !default;
+$cmenu-caret-color: $content-text-color-focus !default;
+$cmenu-color: $content-text-color !default;
+$cmenu-disable-text: rgba($content-text-color, .65) !default;
+$cmenu-font-size: $text-sm !default;
+$cmenu-font-weight: $font-weight-normal !default;
+$cmenu-li-bgcolor: $content-bg-color-focus !default;
+$cmenu-li-border-color: $border-light !default;
+$cmenu-li-border-style: solid !default;
+$cmenu-li-selection-bgcolor: $content-bg-color-focus !default;
+$cmenu-li-selection-font-color: $content-text-color-focus !default;
+$cmenu-li-hover-outline-offset: 0 !default;
+$cmenu-li-selected-outline: 0 solid $cmenu-li-selection-bgcolor !default;
+$cmenu-li-selected-outline-offset: 0 !default;
+$cmenu-icon-color: $icon-color !default;
+$cmenu-icon-disabled-color: rgba($icon-color, .65) !default;
+$cmenu-selected-color: $content-text-color-focus !default;
+$cmenu-sub-ul-box-shadow: $shadow-lg !default;
+$cmenu-ul-bgcolor: $flyout-bg-color !default;
+$cmenu-li-hover-outline: 0 solid $cmenu-li-border-color !default;
+$cmenu-caret-hover-color: $cmenu-caret-color !default;
+$cmenu-hover-icon-color: $cmenu-icon-color !default;

package/styles/context-menu/_theme-mixin.scss

@@ -0,0 +1,59 @@
+@mixin focused-icon-color {
+  & .e-caret {
+    color: $cmenu-caret-color;
+  }
+
+  & .e-menu-icon {
+    color: $cmenu-icon-color;
+  }
+}
+
+@mixin selected-icon-color {
+  & .e-caret {
+    color: $cmenu-caret-hover-color;
+  }
+
+  & .e-menu-icon {
+    color: $cmenu-hover-icon-color;
+  }
+}
+
+@mixin icon-color {
+  &.e-menu-header {
+    border-bottom-color: $cmenu-li-border-color;
+  }
+  @include focused-icon-color;
+}
+
+@mixin focused-color {
+  background-color: $cmenu-li-bgcolor;
+  color: $cmenu-li-selection-font-color;
+  outline: $cmenu-li-hover-outline;
+  outline-offset: $cmenu-li-hover-outline-offset;
+}
+
+@mixin selected-color {
+  background-color: $cmenu-li-selection-bgcolor;
+  color: $cmenu-selected-color;
+  outline: $cmenu-li-selected-outline;
+  outline-offset: $cmenu-li-selected-outline-offset;
+}
+
+@mixin disabled-color {
+  & .e-disabled {
+    color: $cmenu-disable-text;
+    opacity: 1;
+
+    & .e-menu-icon {
+      color: $cmenu-icon-disabled-color;
+    }
+
+    & .e-caret {
+      color: $cmenu-icon-disabled-color;
+    }
+
+    & .e-menu-url {
+      color: $cmenu-disable-text;
+    }
+  }
+}

package/styles/context-menu/_theme.scss

@@ -0,0 +1,49 @@
+@import 'theme-mixin.scss';
+@include export-module('contextmenu-theme') {
+  /*! contextmenu theme */
+  .e-contextmenu-wrapper,
+  .e-contextmenu-container {
+    @at-root {
+      & ul {
+        background-color: $cmenu-ul-bgcolor;
+        color: $cmenu-color;
+
+        & .e-menu-item  {
+          @include icon-color;
+
+          & .e-menu-url {
+            color: $cmenu-color;
+          }
+
+          &.e-focused {
+            @include focused-color;
+            @include focused-icon-color;
+          }
+
+          &.e-selected {
+            @include selected-color;
+            @include selected-icon-color;
+          }
+        }
+
+        @include disabled-color;
+
+        & .e-separator {
+          border-bottom-color: $cmenu-li-border-color;
+        }
+      }
+    }
+
+    &:not(.e-menu-container) {
+
+      & .e-menu-vscroll.e-vscroll {
+        background-color: inherit;
+        border: $cmenu-ul-border;
+
+        & .e-scroll-nav {
+          border-color: $cmenu-li-border-color;
+        }
+      }
+    }
+  }
+}

package/styles/context-menu/bootstrap-dark.css

@@ -167,6 +167,29 @@
   border: 0;
   margin: 0;
 }
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll {
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-vscroll-bar,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-vscroll-bar {
+  height: 100%;
+  width: inherit;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav {
+  height: 16px;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll:not(.e-scroll-device),
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll:not(.e-scroll-device) {
+  padding: 16px 0;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll ul,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll ul {
+  box-shadow: none;
+  margin-top: -12px;
+  width: inherit;
+}
 
 .e-rtl.e-contextmenu-wrapper .e-menu-item .e-menu-icon,
 .e-rtl.e-contextmenu-container .e-menu-item .e-menu-icon {
@@ -330,4 +353,14 @@
 .e-contextmenu-wrapper ul .e-separator,
 .e-contextmenu-container ul .e-separator {
   border-bottom-color: #505050;
+}
+
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll {
+  background-color: inherit;
+  border: 1px solid #505050;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav {
+  border-color: #505050;
 }

package/styles/context-menu/bootstrap-dark.scss

@@ -1 +1,7 @@
-@import 'ej2-navigations/styles/context-menu/bootstrap-dark.scss';
+@import 'ej2-base/styles/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/context-menu/bootstrap.css

@@ -1,3 +1,4 @@
+/*! component's theme wise override definitions and variables */ /*! component's theme wise override definitions and variables */
 /*! contextmenu layout */
 .e-contextmenu-wrapper ul .e-menu-item .e-previous::before,
 .e-contextmenu-container ul .e-menu-item .e-previous::before {
@@ -167,6 +168,29 @@
   border: 0;
   margin: 0;
 }
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll {
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-vscroll-bar,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-vscroll-bar {
+  height: 100%;
+  width: inherit;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav {
+  height: 16px;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll:not(.e-scroll-device),
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll:not(.e-scroll-device) {
+  padding: 16px 0;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll ul,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll ul {
+  box-shadow: none;
+  margin-top: -12px;
+  width: inherit;
+}
 
 .e-rtl.e-contextmenu-wrapper .e-menu-item .e-menu-icon,
 .e-rtl.e-contextmenu-container .e-menu-item .e-menu-icon {
@@ -330,4 +354,14 @@
 .e-contextmenu-wrapper ul .e-separator,
 .e-contextmenu-container ul .e-separator {
   border-bottom-color: #e6e6e6;
+}
+
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll {
+  background-color: inherit;
+  border: 1px solid #ccc;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav {
+  border-color: #e6e6e6;
 }

package/styles/context-menu/bootstrap.scss

@@ -1 +1,7 @@
-@import 'ej2-navigations/styles/context-menu/bootstrap.scss';
+@import 'ej2-base/styles/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/context-menu/bootstrap4.css

@@ -1,3 +1,4 @@
+/*! component's theme wise override definitions and variables */ /*! component's theme wise override definitions and variables */
 /*! contextmenu layout */
 .e-contextmenu-wrapper ul .e-menu-item .e-previous::before,
 .e-contextmenu-container ul .e-menu-item .e-previous::before {
@@ -167,6 +168,29 @@
   border: 0;
   margin: 0;
 }
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll {
+  box-shadow: none;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-vscroll-bar,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-vscroll-bar {
+  height: 100%;
+  width: inherit;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav {
+  height: 16px;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll:not(.e-scroll-device),
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll:not(.e-scroll-device) {
+  padding: 16px 0;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll ul,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll ul {
+  box-shadow: none;
+  margin-top: -12px;
+  width: inherit;
+}
 
 .e-rtl.e-contextmenu-wrapper .e-menu-item .e-menu-icon,
 .e-rtl.e-contextmenu-container .e-menu-item .e-menu-icon {
@@ -330,4 +354,14 @@
 .e-contextmenu-wrapper ul .e-separator,
 .e-contextmenu-container ul .e-separator {
   border-bottom-color: #e9ecef;
+}
+
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll {
+  background-color: inherit;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav {
+  border-color: #e9ecef;
 }

package/styles/context-menu/bootstrap4.scss

@@ -1 +1,7 @@
-@import 'ej2-navigations/styles/context-menu/bootstrap4.scss';
+@import 'ej2-base/styles/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/context-menu/bootstrap5-dark.css

@@ -1,3 +1,14 @@
+/*! component's theme wise override definitions and variables */
+@keyframes hscroll-popup-shadow {
+  0% {
+    border-color: rgba(255, 255, 255, 0.5);
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
+  }
+  100% {
+    box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
+  }
+}
+/*! component's theme wise override definitions and variables */
 /*! contextmenu layout */
 .e-contextmenu-wrapper ul .e-menu-item .e-previous::before,
 .e-contextmenu-container ul .e-menu-item .e-previous::before {
@@ -168,6 +179,29 @@
   border: 0;
   margin: 0;
 }
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll {
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-vscroll-bar,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-vscroll-bar {
+  height: 100%;
+  width: inherit;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav {
+  height: 16px;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll:not(.e-scroll-device),
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll:not(.e-scroll-device) {
+  padding: 16px 0;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll ul,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll ul {
+  box-shadow: none;
+  margin-top: -12px;
+  width: inherit;
+}
 
 .e-rtl.e-contextmenu-wrapper .e-menu-item .e-menu-icon,
 .e-rtl.e-contextmenu-container .e-menu-item .e-menu-icon {
@@ -333,4 +367,14 @@
 .e-contextmenu-wrapper ul .e-separator,
 .e-contextmenu-container ul .e-separator {
   border-bottom-color: #444c54;
+}
+
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll {
+  background-color: inherit;
+  border: 1px solid #444c54;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav {
+  border-color: #444c54;
 }

package/styles/context-menu/bootstrap5-dark.scss

@@ -1 +1,7 @@
-@import 'ej2-navigations/styles/context-menu/bootstrap5-dark.scss';
+@import 'ej2-base/styles/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/context-menu/bootstrap5.css

@@ -1,3 +1,14 @@
+/*! component's theme wise override definitions and variables */
+@keyframes hscroll-popup-shadow {
+  0% {
+    border-color: rgba(255, 255, 255, 0.5);
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
+  }
+  100% {
+    box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
+  }
+}
+/*! component's theme wise override definitions and variables */
 /*! contextmenu layout */
 .e-contextmenu-wrapper ul .e-menu-item .e-previous::before,
 .e-contextmenu-container ul .e-menu-item .e-previous::before {
@@ -168,6 +179,29 @@
   border: 0;
   margin: 0;
 }
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll {
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-vscroll-bar,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-vscroll-bar {
+  height: 100%;
+  width: inherit;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav {
+  height: 16px;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll:not(.e-scroll-device),
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll:not(.e-scroll-device) {
+  padding: 16px 0;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll ul,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll ul {
+  box-shadow: none;
+  margin-top: -12px;
+  width: inherit;
+}
 
 .e-rtl.e-contextmenu-wrapper .e-menu-item .e-menu-icon,
 .e-rtl.e-contextmenu-container .e-menu-item .e-menu-icon {
@@ -333,4 +367,14 @@
 .e-contextmenu-wrapper ul .e-separator,
 .e-contextmenu-container ul .e-separator {
   border-bottom-color: #dee2e6;
+}
+
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll {
+  background-color: inherit;
+  border: 1px solid #dee2e6;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav {
+  border-color: #dee2e6;
 }

package/styles/context-menu/bootstrap5.scss

@@ -1 +1,7 @@
-@import 'ej2-navigations/styles/context-menu/bootstrap5.scss';
+@import 'ej2-base/styles/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/context-menu/fabric-dark.css

@@ -167,6 +167,29 @@
   border: 0;
   margin: 0;
 }
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll {
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.26);
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-vscroll-bar,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-vscroll-bar {
+  height: 100%;
+  width: inherit;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav {
+  height: 16px;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll:not(.e-scroll-device),
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll:not(.e-scroll-device) {
+  padding: 16px 0;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll ul,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll ul {
+  box-shadow: none;
+  margin-top: -12px;
+  width: inherit;
+}
 
 .e-rtl.e-contextmenu-wrapper .e-menu-item .e-menu-icon,
 .e-rtl.e-contextmenu-container .e-menu-item .e-menu-icon {
@@ -330,4 +353,14 @@
 .e-contextmenu-wrapper ul .e-separator,
 .e-contextmenu-container ul .e-separator {
   border-bottom-color: #414040;
+}
+
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll {
+  background-color: inherit;
+  border: 1px solid #414040;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav {
+  border-color: #414040;
 }

package/styles/context-menu/fabric-dark.scss

@@ -1 +1,7 @@
-@import 'ej2-navigations/styles/context-menu/fabric-dark.scss';
+@import 'ej2-base/styles/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/context-menu/fabric.css

@@ -1,3 +1,4 @@
+/*! component's theme wise override definitions and variables */
 /*! contextmenu layout */
 .e-contextmenu-wrapper ul .e-menu-item .e-previous::before,
 .e-contextmenu-container ul .e-menu-item .e-previous::before {
@@ -167,6 +168,29 @@
   border: 0;
   margin: 0;
 }
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll {
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-vscroll-bar,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-vscroll-bar {
+  height: 100%;
+  width: inherit;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav {
+  height: 16px;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll:not(.e-scroll-device),
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll:not(.e-scroll-device) {
+  padding: 16px 0;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll ul,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll ul {
+  box-shadow: none;
+  margin-top: -12px;
+  width: inherit;
+}
 
 .e-rtl.e-contextmenu-wrapper .e-menu-item .e-menu-icon,
 .e-rtl.e-contextmenu-container .e-menu-item .e-menu-icon {
@@ -330,4 +354,14 @@
 .e-contextmenu-wrapper ul .e-separator,
 .e-contextmenu-container ul .e-separator {
   border-bottom-color: #eaeaea;
+}
+
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll {
+  background-color: inherit;
+  border: 1px solid #eaeaea;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav {
+  border-color: #eaeaea;
 }

package/styles/context-menu/fabric.scss

@@ -1 +1,7 @@
-@import 'ej2-navigations/styles/context-menu/fabric.scss';
+@import 'ej2-base/styles/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/context-menu/fluent-dark.css

@@ -1,3 +1,14 @@
+/*! component's theme wise override definitions and variables */
+@keyframes hscroll-popup-shadow {
+  0% {
+    border-color: rgba(255, 255, 255, 0.5);
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
+  }
+  100% {
+    box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
+  }
+}
+/*! component's theme wise override definitions and variables */
 /*! contextmenu layout */
 .e-contextmenu-wrapper ul .e-menu-item .e-previous::before,
 .e-contextmenu-container ul .e-menu-item .e-previous::before {
@@ -167,6 +178,29 @@
   border: 0;
   margin: 0;
 }
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll {
+  box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-vscroll-bar,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-vscroll-bar {
+  height: 100%;
+  width: inherit;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav {
+  height: 16px;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll:not(.e-scroll-device),
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll:not(.e-scroll-device) {
+  padding: 16px 0;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll ul,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll ul {
+  box-shadow: none;
+  margin-top: -12px;
+  width: inherit;
+}
 
 .e-rtl.e-contextmenu-wrapper .e-menu-item .e-menu-icon,
 .e-rtl.e-contextmenu-container .e-menu-item .e-menu-icon {
@@ -331,4 +365,14 @@
 .e-contextmenu-wrapper ul .e-separator,
 .e-contextmenu-container ul .e-separator {
   border-bottom-color: #292827;
+}
+
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll {
+  background-color: inherit;
+  border: 1px solid #292827;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav {
+  border-color: #292827;
 }

package/styles/context-menu/fluent-dark.scss

@@ -1 +1,7 @@
-@import 'ej2-navigations/styles/context-menu/fluent-dark.scss';
+@import 'ej2-base/styles/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';