@syncfusion/ej2-navigations 25.2.4 → 26.1.35-7502

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

@@ -0,0 +1,52 @@
+$cmenu-back-icon: '\e977' !default;
+$cmenu-back-icon-margin: 8px !default;
+$cmenu-bigger-caret-font-size: 18px !default;
+$cmenu-bigger-font-size: 16px !default;
+$cmenu-bigger-li-height: 18px !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: 14px !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: 14px !default;
+$cmenu-li-padding: 6px !default;
+$cmenu-li-right-padding: 6px !default;
+$cmenu-li-border-width: 1px !default;
+$cmenu-max-width: 240px !default;
+$cmenu-icon-font-size: $text-sm !default;
+$cmenu-icon-bigger-font-size: $text-lg !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: 8px !default;
+$cmenu-ul-padding: 4px !default;
+$cmenu-ul-bigger-padding: 6px !default;
+$cmenu-caret-color: $content-text-color-focus !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-selected !default;
+$cmenu-li-selection-font-color: $flyout-text-color-selected !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-selected !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: $icon-color-hover !default;

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

@@ -1,4 +1,3 @@
-//layout variables
 $cmenu-back-icon: '\e977' !default;
 $cmenu-back-icon-margin: 8px !default;
 $cmenu-bigger-caret-font-size: 16px !default;

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

@@ -1,4 +1,3 @@
-//default
 $cmenu-back-icon: '\e962';
 $cmenu-back-icon-margin: 12px;
 $cmenu-bigger-caret-font-size: 12px;
@@ -49,5 +48,3 @@ $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

@@ -54,6 +54,10 @@
 @mixin li-size {
   height: $cmenu-li-height;
   line-height: $cmenu-li-height;
+  @if $skin-name == 'fluent2' {
+    line-height: 19px;
+    height: 32px;
+  }
   padding: $cmenu-li-padding;
 
   & .e-menu-url {
@@ -74,6 +78,9 @@
     margin-right: 0;
     position: absolute;
     right: $cmenu-caret-right;
+    @if $skin-name == 'fluent2' {
+      padding: 4px 0;
+    }
   }
 
   &.e-menu-caret-icon {
@@ -112,6 +119,9 @@
 @mixin rtl-li-size {
   & .e-menu-icon {
     margin-left: $cmenu-icon-margin-right;
+    @if $skin-name == 'fluent2' {
+      margin: 3px 3px 3px 5px;
+    }
   }
 
   & .e-caret {
@@ -143,6 +153,17 @@
 @mixin bigger-li-size {
   height: $cmenu-bigger-li-height;
   line-height: $cmenu-bigger-li-height;
+  @if $skin-name == 'fluent2' {
+    height: 40px;
+    line-height: 21px;
+    padding: 9px;
+  }
+
+  &.e-menu-caret-icon {
+    @if $skin-name == 'fluent2' {
+      padding: 9px 36px 9px 9px;
+    }
+  }
 
   & .e-menu-icon {
     font-size: $cmenu-icon-bigger-font-size;
@@ -154,6 +175,9 @@
 
   & .e-caret {
     line-height: $cmenu-bigger-li-height;
+    @if $skin-name == 'fluent2' {
+      margin: 3px 0;
+    }
   }
 
   &.e-separator {

package/styles/context-menu/_layout.scss

@@ -1,7 +1,5 @@
 @import 'layout-mixin.scss';
 @include export-module('contextmenu-layout') {
-
-  /*! contextmenu layout */
   .e-contextmenu-wrapper,
   .e-contextmenu-container {
     @at-root {
@@ -30,6 +28,12 @@
           @include li-layout;
           @include li-size;
 
+          & .e-menu-icon {
+            @if $skin-name == 'fluent2' {
+              margin-bottom: 1px;
+            }
+          }
+
           & .e-caret {
             font-size: $cmenu-caret-font-size;
           }
@@ -42,6 +46,20 @@
             cursor: auto;
             pointer-events: none;
           }
+
+          &.e-separator {
+            @if $skin-name == 'fluent2' {
+              padding: 0 !important;  /* stylelint-disable-line declaration-no-important */
+            }
+          }
+
+          &:focus-visible {
+            @if $skin-name == 'fluent2' {
+              border-radius: 4px;
+              background-color: $content-bg-color;
+              box-shadow: $shadow-focus-ring1;
+            }
+          }
         }
 
         .e-menu-item .e-checkbox-wrapper {
@@ -85,7 +103,6 @@
     }
 
     &:not(.e-menu-container) {
-
       & .e-menu-vscroll.e-vscroll {
         box-shadow: $cmenu-parent-ul-box-shadow;
 
@@ -132,8 +149,17 @@
     & .e-menu-item  {
       @include bigger-li-size;
 
+      & .e-menu-icon {
+        @if $skin-name == 'fluent2' {
+          margin-bottom: 2px;
+        }
+      }
+
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;
+        @if $skin-name == 'fluent2' {
+          padding: 0;
+        }
       }
     }
   }
@@ -147,9 +173,23 @@
     }
   }
 
-  .e-contextmenu-wrapper .e-menu-item {
+  .e-contextmenu-wrapper .e-menu-item,
+  .e-contextmenu-container .e-menu-item {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
+  .e-small .e-contextmenu-wrapper ul .e-menu-item .e-caret,
+  .e-small .e-contextmenu-wrapper ul .e-menu-icon {
+    @if $skin-name == 'fluent2' {
+      font-size: 12px;
+    }
+  }
+
+  .e-bigger .e-contextmenu-wrapper.e-rtl ul .e-menu-item.e-menu-caret-icon {
+    @if $skin-name == 'fluent2' {
+      padding: 9px 9px 9px 36px;
+    }
+  }
 }

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

@@ -1,4 +1,3 @@
-//default
 $cmenu-back-icon: '\e977' !default;
 $cmenu-back-icon-margin: 16px !default;
 $cmenu-bigger-caret-font-size: 12px !default;
@@ -49,5 +48,3 @@ $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/_material3-definition.scss

@@ -1,4 +1,3 @@
-//layout variables
 $cmenu-back-icon: '\e977' !default;
 $cmenu-back-icon-margin: 8px !default;
 $cmenu-bigger-caret-font-size: $text-base !default;

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

@@ -1,4 +1,3 @@
-//layout variables
 $cmenu-back-icon: '\e977' !default;
 $cmenu-back-icon-margin: 8px !default;
 $cmenu-bigger-caret-font-size: $text-base !default;

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

@@ -2,10 +2,16 @@
   @if $skin-name != 'bootstrap5' {
     & .e-caret {
       color: $cmenu-caret-color;
+      @if $skin-name == 'fluent2' {
+        color: $cmenu-hover-icon-color;
+      }
     }
   
     & .e-menu-icon {
       color: $cmenu-icon-color;
+      @if $skin-name == 'fluent2' {
+        color: $cmenu-hover-icon-color;
+      }
     }
   }
 }
@@ -34,6 +40,9 @@
   color: $cmenu-li-selection-font-color;
   outline: $cmenu-li-hover-outline;
   outline-offset: $cmenu-li-hover-outline-offset;
+  @if $skin-name == 'fluent2' {
+    border-radius: 4px;
+  }
 }
 
 @mixin selected-color {
@@ -41,6 +50,10 @@
   color: $cmenu-selected-color;
   outline: $cmenu-li-selected-outline;
   outline-offset: $cmenu-li-selected-outline-offset;
+  @if $skin-name == 'fluent2' {
+    border-radius: 4px;
+    box-shadow: none;
+  }
 }
 
 @mixin disabled-color {

package/styles/context-menu/_theme.scss

@@ -1,7 +1,5 @@
 @import 'theme-mixin.scss';
 @include export-module('contextmenu-theme') {
-
-  /*! contextmenu theme */
   .e-contextmenu-wrapper,
   .e-contextmenu-container {
     @at-root {
@@ -16,6 +14,12 @@
 
         & .e-menu-item  {
           @include icon-color;
+          @if $skin-name == 'fluent2' {
+            & .e-menu-icon,
+            & .e-caret {
+              color: $icon-color;
+            }
+          }
 
           & .e-menu-url {
             color: $cmenu-color;
@@ -41,7 +45,6 @@
     }
 
     &:not(.e-menu-container) {
-
       & .e-menu-vscroll.e-vscroll {
         background-color: inherit;
         border: $cmenu-ul-border;

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

@@ -1,4 +1,3 @@
-/*! contextmenu layout */
 .e-contextmenu-wrapper ul .e-menu-item .e-previous::before,
 .e-contextmenu-container ul .e-menu-item .e-previous::before {
   content: "\e94b";
@@ -13,7 +12,6 @@
   content: "\e990";
 }
 
-/*! contextmenu layout */
 .e-contextmenu-wrapper ul,
 .e-contextmenu-container ul {
   font-weight: normal;
@@ -23,13 +21,15 @@
   margin: 0;
   overflow: hidden;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   font-size: 14px;
   padding: 0;
   border: 1px solid #505050;
   border-radius: 4px;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
   display: none;
   min-width: 120px;
   position: absolute;
@@ -37,7 +37,8 @@
 .e-contextmenu-wrapper ul.e-ul, .e-contextmenu-wrapper ul.e-ul *,
 .e-contextmenu-container ul.e-ul,
 .e-contextmenu-container ul.e-ul * {
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
 }
 .e-contextmenu-wrapper ul.e-ul:focus, .e-contextmenu-wrapper ul.e-ul *:focus,
 .e-contextmenu-container ul.e-ul:focus,
@@ -46,7 +47,8 @@
 }
 .e-contextmenu-wrapper ul.e-contextmenu,
 .e-contextmenu-container ul.e-contextmenu {
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
 }
 .e-contextmenu-wrapper ul.e-ul,
 .e-contextmenu-container ul.e-ul {
@@ -130,6 +132,8 @@
 }
 .e-contextmenu-wrapper ul .e-menu-item .e-checkbox-wrapper,
 .e-contextmenu-container ul .e-menu-item .e-checkbox-wrapper {
+  width: -webkit-max-content;
+  width: -moz-max-content;
   width: max-content;
 }
 
@@ -149,7 +153,8 @@
 .e-contextmenu-container.e-sfcontextmenu ul.e-transparent {
   background: transparent;
   border: 0;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   height: 1px;
   left: 0;
   min-width: 0;
@@ -169,7 +174,8 @@
 }
 .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);
+  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+          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 {
@@ -186,7 +192,8 @@
 }
 .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;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   margin-top: -12px;
   width: inherit;
 }
@@ -230,7 +237,8 @@
   font-size: 15px;
   padding: 5px 0;
   white-space: nowrap;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
   max-width: 280px;
   min-width: 112px;
 }
@@ -281,13 +289,13 @@
   padding-left: 36px;
 }
 
-.e-contextmenu-wrapper .e-menu-item {
+.e-contextmenu-wrapper .e-menu-item,
+.e-contextmenu-container .e-menu-item {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-/*! contextmenu theme */
 .e-contextmenu-wrapper ul,
 .e-contextmenu-container ul {
   background-color: #313131;

package/styles/context-menu/bootstrap.css

@@ -1,5 +1,5 @@
-/*! component's theme wise override definitions and variables */ /*! component's theme wise override definitions and variables */
-/*! contextmenu layout */
+/*! component's theme wise override definitions and variables */
+/*! component's theme wise override definitions and variables */
 .e-contextmenu-wrapper ul .e-menu-item .e-previous::before,
 .e-contextmenu-container ul .e-menu-item .e-previous::before {
   content: "\e94b";
@@ -14,7 +14,6 @@
   content: "\e990";
 }
 
-/*! contextmenu layout */
 .e-contextmenu-wrapper ul,
 .e-contextmenu-container ul {
   font-weight: normal;
@@ -24,13 +23,15 @@
   margin: 0;
   overflow: hidden;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   font-size: 14px;
   padding: 0;
   border: 1px solid #ccc;
   border-radius: 4px;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
   display: none;
   min-width: 120px;
   position: absolute;
@@ -38,7 +39,8 @@
 .e-contextmenu-wrapper ul.e-ul, .e-contextmenu-wrapper ul.e-ul *,
 .e-contextmenu-container ul.e-ul,
 .e-contextmenu-container ul.e-ul * {
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
 }
 .e-contextmenu-wrapper ul.e-ul:focus, .e-contextmenu-wrapper ul.e-ul *:focus,
 .e-contextmenu-container ul.e-ul:focus,
@@ -47,7 +49,8 @@
 }
 .e-contextmenu-wrapper ul.e-contextmenu,
 .e-contextmenu-container ul.e-contextmenu {
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 }
 .e-contextmenu-wrapper ul.e-ul,
 .e-contextmenu-container ul.e-ul {
@@ -131,6 +134,8 @@
 }
 .e-contextmenu-wrapper ul .e-menu-item .e-checkbox-wrapper,
 .e-contextmenu-container ul .e-menu-item .e-checkbox-wrapper {
+  width: -webkit-max-content;
+  width: -moz-max-content;
   width: max-content;
 }
 
@@ -150,7 +155,8 @@
 .e-contextmenu-container.e-sfcontextmenu ul.e-transparent {
   background: transparent;
   border: 0;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   height: 1px;
   left: 0;
   min-width: 0;
@@ -170,7 +176,8 @@
 }
 .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);
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+          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 {
@@ -187,7 +194,8 @@
 }
 .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;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   margin-top: -12px;
   width: inherit;
 }
@@ -231,7 +239,8 @@
   font-size: 15px;
   padding: 5px 0;
   white-space: nowrap;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
   max-width: 280px;
   min-width: 112px;
 }
@@ -282,13 +291,13 @@
   padding-left: 36px;
 }
 
-.e-contextmenu-wrapper .e-menu-item {
+.e-contextmenu-wrapper .e-menu-item,
+.e-contextmenu-container .e-menu-item {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-/*! contextmenu theme */
 .e-contextmenu-wrapper ul,
 .e-contextmenu-container ul {
   background-color: #fff;

package/styles/context-menu/bootstrap4.css

@@ -1,5 +1,5 @@
-/*! component's theme wise override definitions and variables */ /*! component's theme wise override definitions and variables */
-/*! contextmenu layout */
+/*! component's theme wise override definitions and variables */
+/*! component's theme wise override definitions and variables */
 .e-contextmenu-wrapper ul .e-menu-item .e-previous::before,
 .e-contextmenu-container ul .e-menu-item .e-previous::before {
   content: "\e728";
@@ -14,7 +14,6 @@
   content: "\e71f";
 }
 
-/*! contextmenu layout */
 .e-contextmenu-wrapper ul,
 .e-contextmenu-container ul {
   font-weight: normal;
@@ -24,13 +23,15 @@
   margin: 0;
   overflow: hidden;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   font-size: 14px;
   padding: 0;
   border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 4px;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   display: none;
   min-width: 120px;
   position: absolute;
@@ -38,7 +39,8 @@
 .e-contextmenu-wrapper ul.e-ul, .e-contextmenu-wrapper ul.e-ul *,
 .e-contextmenu-container ul.e-ul,
 .e-contextmenu-container ul.e-ul * {
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
 }
 .e-contextmenu-wrapper ul.e-ul:focus, .e-contextmenu-wrapper ul.e-ul *:focus,
 .e-contextmenu-container ul.e-ul:focus,
@@ -47,7 +49,8 @@
 }
 .e-contextmenu-wrapper ul.e-contextmenu,
 .e-contextmenu-container ul.e-contextmenu {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-contextmenu-wrapper ul.e-ul,
 .e-contextmenu-container ul.e-ul {
@@ -131,6 +134,8 @@
 }
 .e-contextmenu-wrapper ul .e-menu-item .e-checkbox-wrapper,
 .e-contextmenu-container ul .e-menu-item .e-checkbox-wrapper {
+  width: -webkit-max-content;
+  width: -moz-max-content;
   width: max-content;
 }
 
@@ -150,7 +155,8 @@
 .e-contextmenu-container.e-sfcontextmenu ul.e-transparent {
   background: transparent;
   border: 0;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   height: 1px;
   left: 0;
   min-width: 0;
@@ -170,7 +176,8 @@
 }
 .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;
+  -webkit-box-shadow: none;
+          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 {
@@ -187,7 +194,8 @@
 }
 .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;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   margin-top: -12px;
   width: inherit;
 }
@@ -231,7 +239,8 @@
   font-size: 16px;
   padding: 8px 0;
   white-space: nowrap;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   max-width: 280px;
   min-width: 112px;
 }
@@ -282,13 +291,13 @@
   padding-left: 36px;
 }
 
-.e-contextmenu-wrapper .e-menu-item {
+.e-contextmenu-wrapper .e-menu-item,
+.e-contextmenu-container .e-menu-item {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-/*! contextmenu theme */
 .e-contextmenu-wrapper ul,
 .e-contextmenu-container ul {
   background-color: #fff;