@syncfusion/ej2-navigations 16.4.45 → 16.4.52-46585

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

@@ -0,0 +1,52 @@
+//layout variables
+$cmenu-back-icon: '\e7e4' !default;
+$cmenu-back-icon-margin: 8px !default;
+$cmenu-bigger-caret-font-size: $text-lg !default;
+$cmenu-bigger-font-size: $text-base !default;
+$cmenu-bigger-li-height: 40px !default;
+$cmenu-bigger-li-padding: 0 12px !default;
+$cmenu-bigger-max-width: 280px !default;
+$cmenu-bigger-min-width: 112px !default;
+$cmenu-caret-blank-icon: $text-base !default;
+$cmenu-caret-font-size: $text-base !default;
+$cmenu-caret-icon: '\e7c2' !default;
+$cmenu-caret-icon-rtl: '\e7c1' !default;
+$cmenu-caret-li-padding: 36px !default;
+$cmenu-caret-right: 7px !default;
+$cmenu-icon-margin-right: 8px !default;
+$cmenu-li-height: 36px !default;
+$cmenu-li-padding: 0 8px !default;
+$cmenu-li-right-padding: 12px !default;
+$cmenu-li-border-width: 1px !default;
+$cmenu-max-width: 240px !default;
+$cmenu-icon-font-size: $text-base !default;
+$cmenu-icon-bigger-font-size: $text-lg !default;
+$cmenu-min-width: 120px !default;
+$cmenu-parent-ul-box-shadow: $shadow-md !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: 0 !default;
+$cmenu-ul-bigger-padding: 4px 0 !default;
+$cmenu-caret-color: $icon-color !default;
+$cmenu-color: $content-text-color !default;
+$cmenu-disable-text: $flyout-text-color-disabled !default;
+$cmenu-font-size: $text-sm !default;
+$cmenu-font-weight: $font-weight-normal !default;
+$cmenu-li-bgcolor: $flyout-bg-color-hover !default;
+$cmenu-li-border-color: $border-light !default;
+$cmenu-li-border-style: solid !default;
+$cmenu-li-selection-bgcolor: $flyout-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: $icon-color-disabled !default;
+$cmenu-selected-color: $cmenu-li-selection-font-color !default;
+$cmenu-sub-ul-box-shadow: $shadow-md !default;
+$cmenu-ul-bgcolor: $flyout-bg-color !default;
+$cmenu-li-hover-outline: 0 solid $cmenu-li-border-color !default;
+$cmenu-caret-hover-color: $icon-color !default;
+$cmenu-hover-icon-color: $icon-color !default;

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

@@ -0,0 +1,52 @@
+//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: 32px !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-li-height: 30px !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: 0 !default;
+$cmenu-ul-bigger-padding: 4px 0 !default;
+$cmenu-caret-color: $icon-color !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: $flyout-bg-color-hover !default;
+$cmenu-li-border-color: $border-light !default;
+$cmenu-li-border-style: solid !default;
+$cmenu-li-selection-bgcolor: $flyout-bg-color-pressed !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: $flyout-text-color-pressed !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: $flyout-text-color-pressed !default;
+$cmenu-hover-icon-color: $flyout-text-color-pressed !default;

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

@@ -5,8 +5,6 @@ $cmenu-bigger-font-size: 15px !default;
 $cmenu-bigger-li-height: 48px !default;
 $cmenu-bigger-max-width: 280px !default;
 $cmenu-bigger-min-width: 112px !default;
-$cmenu-blank-icon: 36px !default;
-$cmenu-blank-icon-bigger: 38px !default;
 $cmenu-caret-font-size: 10px !default;
 $cmenu-caret-blank-icon: 10px !default;
 $cmenu-caret-color:  $content-font !default;

package/styles/context-menu/_highcontrast-light-definition.scss

@@ -1,4 +1,4 @@
-//default 
+//default
 $cmenu-back-icon: '\e962';
 $cmenu-back-icon-margin: 12px;
 $cmenu-bigger-caret-font-size: 12px;
@@ -6,8 +6,6 @@ $cmenu-bigger-font-size: 15px;
 $cmenu-bigger-li-height: 48px;
 $cmenu-bigger-max-width: 280px;
 $cmenu-bigger-min-width: 112px;
-$cmenu-blank-icon: 36px;
-$cmenu-blank-icon-bigger: 38px;
 $cmenu-caret-blank-icon: 10px;
 $cmenu-caret-color:  $content-font;
 $cmenu-caret-icon: '\e219';
@@ -51,4 +49,5 @@ $cmenu-li-hover-outline-offset: -1px;
 $cmenu-li-selected-outline: 0 solid $selection-bg;
 $cmenu-li-selected-outline-offset: 0;
 $cmenu-caret-font-size: 12px !default;
+
 //enddefault

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

@@ -6,6 +6,15 @@
   margin: 0;
   overflow: hidden;
   user-select: none;
+
+  &.e-ul,
+  &.e-ul * {
+    box-sizing: border-box;
+
+    &:focus {
+      outline: none;
+    }
+  }
 }
 
 @mixin ul-size {
@@ -31,7 +40,7 @@
   }
 
   & .e-menu-icon {
-    float: left;
+    display: inline-block;
     vertical-align: middle;
   }
 
@@ -49,16 +58,17 @@
 
   & .e-menu-url {
     display: inline-block;
+    min-width: 120px;
   }
 
   & .e-menu-icon {
     font-size: $cmenu-icon-font-size;
     line-height: $cmenu-li-height;
     margin-right: $cmenu-icon-margin-right;
+    width: 1em;
   }
 
   & .e-caret {
-    font-size: $cmenu-caret-font-size;
     line-height: $cmenu-li-height;
     margin-left: 16px;
     margin-right: 0;
@@ -74,10 +84,6 @@
     @include separator-size;
     margin: $cmenu-seperator-padding;
   }
-
-  &.e-blankicon {
-    padding-left: $cmenu-blank-icon;
-  }
 }
 
 @mixin separator-size {
@@ -93,12 +99,12 @@
 
 @mixin rtl-li-layout {
   & .e-menu-icon {
-    float: right;
     margin-right: 0;
   }
 
   & .e-caret {
     margin-left: 0;
+    margin-right: 16px;
     right: auto;
   }
 }
@@ -113,13 +119,14 @@
   }
 
   &.e-menu-caret-icon {
-    padding-left: $cmenu-caret-li-padding;
+    @if $skin-name != 'FluentUI' {
+      padding-left: $cmenu-caret-li-padding;
+    }
     padding-right: $cmenu-li-right-padding;
   }
 
   &.e-blankicon {
     padding-left: $cmenu-caret-blank-icon;
-    padding-right: $cmenu-blank-icon;
 
     &.e-menu-caret-icon {
       padding-left: $cmenu-caret-li-padding;
@@ -127,7 +134,6 @@
   }
 }
 
-
 @mixin bigger-ul-size {
   font-size: $cmenu-bigger-font-size;
   padding: $cmenu-ul-bigger-padding;
@@ -141,25 +147,22 @@
   & .e-menu-icon {
     font-size: $cmenu-icon-bigger-font-size;
     line-height: $cmenu-bigger-li-height;
+    @if $skin-name == 'tailwind' {
+      margin-right: $cmenu-icon-bigger-margin-right;
+    }
   }
 
   & .e-caret {
-    font-size: $cmenu-bigger-caret-font-size;
     line-height: $cmenu-bigger-li-height;
   }
 
   &.e-separator {
     @include separator-bigger-size;
   }
-
-  &.e-blankicon {
-    padding-left: $cmenu-blank-icon-bigger;
-  }
 }
 
 @mixin bigger-rtl-blank-icon {
   padding-left: $cmenu-caret-blank-icon;
-  padding-right: $cmenu-blank-icon-bigger;
 
   &.e-menu-caret-icon {
     padding-left: $cmenu-caret-li-padding;

package/styles/context-menu/_layout.scss

@@ -1,7 +1,9 @@
 @import 'layout-mixin.scss';
 @include export-module('contextmenu-layout') {
+
   /*! contextmenu layout */
-  .e-contextmenu-wrapper {
+  .e-contextmenu-wrapper,
+  .e-contextmenu-container {
     @at-root {
       & ul {
         @include ul-layout;
@@ -15,12 +17,23 @@
 
         &.e-contextmenu {
           box-shadow: $cmenu-parent-ul-box-shadow;
+          @if $skin-name == 'bootstrap5' or $skin-name == 'tailwind' {
+            padding: 4px 0;
+          }
+        }
+
+        &.e-ul {
+          font-family: $font-family;
         }
 
         & .e-menu-item  {
           @include li-layout;
           @include li-size;
 
+          & .e-caret {
+            font-size: $cmenu-caret-font-size;
+          }
+
           & .e-previous {
             margin-right: $cmenu-back-icon-margin;
           }
@@ -30,29 +43,107 @@
             pointer-events: none;
           }
         }
+
+        .e-menu-item .e-checkbox-wrapper {
+          width: max-content;
+        }
+      }
+    }
+
+    &.e-sfcontextmenu {
+      position: absolute;
+
+      & .e-menu-vscroll {
+        position: absolute;
+      }
+
+      & ul {
+        white-space: nowrap;
+
+        &.e-transparent {
+          background: transparent;
+          border: 0;
+          box-shadow: none;
+          height: 1px;
+          left: 0;
+          min-width: 0;
+          padding: 0;
+          top: 0;
+          width: 0;
+        }
+
+        &.e-transparent .e-menu-item {
+          height: 0;
+          padding: 0;
+        }
+
+        &.e-transparent .e-menu-item.e-separator {
+          border: 0;
+          margin: 0;
+        }
+      }
+    }
+
+    &:not(.e-menu-container) {
+
+      & .e-menu-vscroll.e-vscroll {
+        box-shadow: $cmenu-parent-ul-box-shadow;
+
+        & .e-vscroll-bar {
+          height: 100%;
+          width: inherit;
+        }
+
+        & .e-scroll-nav {
+          height: 16px;
+        }
+
+        &:not(.e-scroll-device) {
+          padding: 16px 0;
+        }
+
+        & ul {
+          box-shadow: none;
+          margin-top: -12px;
+          width: inherit;
+        }
       }
     }
   }
 
-  .e-rtl.e-contextmenu-wrapper .e-menu-item {
+  .e-rtl.e-contextmenu-wrapper .e-menu-item,
+  .e-rtl.e-contextmenu-container .e-menu-item {
     @include rtl-li-layout;
     @include rtl-li-size;
   }
 
   .e-bigger .e-contextmenu-wrapper ul,
-  .e-bigger.e-contextmenu-wrapper ul {
+  .e-bigger.e-contextmenu-wrapper ul,
+  .e-bigger .e-contextmenu-container ul,
+  .e-bigger.e-contextmenu-container ul {
     @include bigger-ul-size;
     box-shadow: $cmenu-parent-ul-box-shadow;
     max-width: $cmenu-bigger-max-width;
     min-width: $cmenu-bigger-min-width;
+    @if $skin-name == 'bootstrap5' {
+      padding: 8px 0;
+    }
 
     & .e-menu-item  {
       @include bigger-li-size;
+
+      & .e-caret {
+        font-size: $cmenu-bigger-caret-font-size;
+      }
     }
   }
 
   .e-bigger .e-contextmenu-wrapper.e-rtl ul .e-blankicon,
-  .e-bigger.e-contextmenu-wrapper.e-rtl ul .e-blankicon {
-    @include bigger-rtl-blank-icon;
+  .e-bigger.e-contextmenu-wrapper.e-rtl ul .e-blankicon,
+  .e-bigger .e-contextmenu-container.e-rtl ul .e-blankicon,
+  .e-bigger.e-contextmenu-container.e-rtl ul .e-blankicon {
+    @if $skin-name != 'FluentUI' {
+      @include bigger-rtl-blank-icon;
+    }
   }
 }

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

@@ -1,54 +1,53 @@
-//default 
-$cmenu-back-icon: '\e977';
-$cmenu-back-icon-margin: 16px;
-$cmenu-bigger-caret-font-size: 12px;
-$cmenu-bigger-font-size: 15px;
-$cmenu-bigger-li-height: 48px;
-$cmenu-bigger-max-width: 280px;
-$cmenu-bigger-min-width: 112px;
-$cmenu-blank-icon: 40px;
-$cmenu-blank-icon-bigger: 42px;
-$cmenu-caret-font-size: 11px;
-$cmenu-caret-color: rgba($grey-dark-font, .7);
-$cmenu-caret-icon: '\e956';
-$cmenu-caret-icon-rtl: '\e937';
-$cmenu-caret-li-padding: 36px;
-$cmenu-caret-right: 8px;
-$cmenu-caret-blank-icon: 16px;
-$cmenu-color: $grey-dark-font;
-$cmenu-disable-text: rgba($grey-dark-font, .3);
-$cmenu-font-size: 14px;
-$cmenu-font-weight: normal;
-$cmenu-icon-margin-right: 10px;
-$cmenu-li-bgcolor: rgba($grey-white, .1);
-$cmenu-li-border-color: $grey-700;
-$cmenu-li-border-style: solid;
-$cmenu-li-border-width: 1px;
-$cmenu-li-height: 36px;
-$cmenu-li-padding: 0 16px;
-$cmenu-li-right-padding: 16px;
-$cmenu-li-selection-bgcolor: rgba($grey-white, .18);
-$cmenu-li-selection-font-color: $grey-dark-font;
-$cmenu-max-width: 240px;
-$cmenu-icon-color: rgba($grey-dark-font, .7);
-$cmenu-icon-disabled-color: rgba($grey-dark-font, .3);
-$cmenu-icon-font-size: 14px;
-$cmenu-icon-bigger-font-size: 16px;
-$cmenu-min-width: 120px;
-$cmenu-parent-ul-box-shadow: 0 3px 8px 0 rgba($grey-black, .26);
-$cmenu-seperator-padding: 8px 0;
-$cmenu-seperator-bigger-padding: 8px 0;
-$cmenu-selected-color: $grey-dark-font;
-$cmenu-sub-ul-box-shadow: 0 8px 10px 0 rgba($grey-black, .24);
-$cmenu-ul-bgcolor: $grey-800;
-$cmenu-ul-border-radius: 0;
-$cmenu-ul-border: none;
-$cmenu-ul-padding: 8px 0;
-$cmenu-ul-bigger-padding: 8px 0;
-$cmenu-li-hover-outline: 0 solid $cmenu-li-border-color;
-$cmenu-caret-hover-color: $grey-dark-font;
-$cmenu-hover-icon-color: $grey-dark-font;
+//default
+$cmenu-back-icon: '\e977' !default;
+$cmenu-back-icon-margin: 16px !default;
+$cmenu-bigger-caret-font-size: 12px !default;
+$cmenu-bigger-font-size: 15px !default;
+$cmenu-bigger-li-height: 48px !default;
+$cmenu-bigger-max-width: 280px !default;
+$cmenu-bigger-min-width: 112px !default;
+$cmenu-caret-font-size: 12px !default;
+$cmenu-caret-color: rgba($grey-dark-font, .7) !default;
+$cmenu-caret-icon: '\e956' !default;
+$cmenu-caret-icon-rtl: '\e937' !default;
+$cmenu-caret-li-padding: 36px !default;
+$cmenu-caret-right: 8px !default;
+$cmenu-caret-blank-icon: 16px !default;
+$cmenu-color: $grey-dark-font !default;
+$cmenu-disable-text: rgba($grey-dark-font, .3) !default;
+$cmenu-font-size: 14px !default;
+$cmenu-font-weight: normal !default;
+$cmenu-icon-margin-right: 10px !default;
+$cmenu-li-bgcolor: rgba($grey-white, .1) !default;
+$cmenu-li-border-color: $grey-700 !default;
+$cmenu-li-border-style: solid !default;
+$cmenu-li-border-width: 1px !default;
+$cmenu-li-height: 36px !default;
+$cmenu-li-padding: 0 16px !default;
+$cmenu-li-right-padding: 16px !default;
+$cmenu-li-selection-bgcolor: rgba($grey-white, .18) !default;
+$cmenu-li-selection-font-color: $grey-dark-font !default;
+$cmenu-max-width: 240px !default;
+$cmenu-icon-color: rgba($grey-dark-font, .7) !default;
+$cmenu-icon-disabled-color: rgba($grey-dark-font, .3) !default;
+$cmenu-icon-font-size: 14px !default;
+$cmenu-icon-bigger-font-size: 16px !default;
+$cmenu-min-width: 120px !default;
+$cmenu-parent-ul-box-shadow: 0 3px 8px 0 rgba($grey-black, .26) !default;
+$cmenu-seperator-padding: 8px 0 !default;
+$cmenu-seperator-bigger-padding: 8px 0 !default;
+$cmenu-selected-color: $grey-dark-font !default;
+$cmenu-sub-ul-box-shadow: 0 8px 10px 0 rgba($grey-black, .24) !default;
+$cmenu-ul-bgcolor: $grey-800 !default;
+$cmenu-ul-border-radius: 0 !default;
+$cmenu-ul-border: none !default;
+$cmenu-ul-padding: 0 !default;
+$cmenu-ul-bigger-padding: 8px 0 !default;
+$cmenu-li-hover-outline: 0 solid $cmenu-li-border-color !default;
+$cmenu-caret-hover-color: $grey-dark-font !default;
+$cmenu-hover-icon-color: $grey-dark-font !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;
+
 //enddefault

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

@@ -5,8 +5,6 @@ $cmenu-bigger-font-size: 15px !default;
 $cmenu-bigger-li-height: 48px !default;
 $cmenu-bigger-max-width: 280px !default;
 $cmenu-bigger-min-width: 112px !default;
-$cmenu-blank-icon: 40px !default;
-$cmenu-blank-icon-bigger: 42px !default;
 $cmenu-caret-font-size: 11px !default;
 $cmenu-caret-color: rgba($grey-light-font, .54) !default;
 $cmenu-caret-icon: '\e956' !default;
@@ -37,15 +35,15 @@ $cmenu-icon-disabled-color: rgba($grey-light-font, .38) !default;
 $cmenu-icon-font-size: 14px !default;
 $cmenu-icon-bigger-font-size: 16px !default;
 $cmenu-min-width: 120px !default;
-$cmenu-parent-ul-box-shadow: 0 3px 8px 0 rgba($grey-black, .26) !default;
+$cmenu-parent-ul-box-shadow: 0 5px 5px -3px rgba($grey-black, .2), 0 8px 10px 1px rgba($grey-black, .14), 0 3px 14px 2px rgba($grey-black, .12) !default;
 $cmenu-seperator-padding: 8px 0 !default;
 $cmenu-seperator-bigger-padding: 8px 0 !default;
 $cmenu-selected-color: rgba($grey-light-font, .87) !default;
-$cmenu-sub-ul-box-shadow: 0 8px 10px 0 rgba($grey-black, .24) !default;
+$cmenu-sub-ul-box-shadow: 0 5px 5px -3px rgba($grey-black, .2), 0 8px 10px 1px rgba($grey-black, .14), 0 3px 14px 2px rgba($grey-black, .12) !default;
 $cmenu-ul-bgcolor: $grey-white !default;
 $cmenu-ul-border-radius: 0 !default;
 $cmenu-ul-border: none !default;
-$cmenu-ul-padding: 8px 0 !default;
+$cmenu-ul-padding: 0 !default;
 $cmenu-ul-bigger-padding: 8px 0 !default;
 $cmenu-li-hover-outline: 0 solid $cmenu-li-border-color !default;
 $cmenu-caret-hover-color: $cmenu-caret-color !default;

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

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

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: $text-base !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: $text-base !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: $text-lg !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

@@ -1,20 +1,24 @@
 @mixin focused-icon-color {
-  & .e-caret {
-    color: $cmenu-caret-color;
-  }
-
-  & .e-menu-icon {
-    color: $cmenu-icon-color;
+  @if $skin-name != 'bootstrap5' {
+    & .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;
+  @if $skin-name != 'bootstrap5' {
+    & .e-caret {
+      color: $cmenu-caret-hover-color;
+    }
+  
+    & .e-menu-icon {
+      color: $cmenu-hover-icon-color;
+    }
   }
 }
 

package/styles/context-menu/_theme.scss

@@ -1,7 +1,9 @@
 @import 'theme-mixin.scss';
 @include export-module('contextmenu-theme') {
+
   /*! contextmenu theme */
-  .e-contextmenu-wrapper {
+  .e-contextmenu-wrapper,
+  .e-contextmenu-container {
     @at-root {
       & ul {
         background-color: $cmenu-ul-bgcolor;
@@ -32,5 +34,17 @@
         }
       }
     }
+
+    &: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;
+        }
+      }
+    }
   }
 }