@syncfusion/ej2-angular-navigations 20.4.53 → 21.1.35

package/styles/menu/_bootstrap5-definition.scss

@@ -12,7 +12,7 @@ $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-font-size: $text-sm !default;
 $menu-caret-icon: '\e706' !default;
 $menu-caret-icon-rtl: '\e70f' !default;
 $menu-caret-right: 8px !default;
@@ -32,7 +32,7 @@ $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-font-size: $text-lg !default;
 $menu-icon-bigger-font-size: 22px !default;
 $menu-li-selected-outline-offset: 0 !default;
 $menu-hscroll-nav-size: 28px !default;

package/styles/menu/_layout.scss

@@ -72,7 +72,7 @@
           & .e-caret {
             font-size: $menu-caret-font-size;
             height: auto;
-            @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
+            @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' {
               line-height: $menu-icon-li-height;
             }
             @else {

package/styles/menu/_tailwind-definition.scss

@@ -11,7 +11,7 @@ $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-font-size: $text-base !default;
 $menu-caret-icon: '\e706' !default;
 $menu-caret-icon-rtl: '\e70f' !default;
 $menu-caret-right: 8px !default;
@@ -32,7 +32,7 @@ $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-font-size: $text-lg !default;
 $menu-icon-bigger-font-size: 22px !default;
 $menu-li-selected-outline-offset: 0 !default;
 $menu-hscroll-nav-size: 28px !default;

package/styles/menu/_theme.scss

@@ -4,7 +4,7 @@
   /*! menu theme */
   .e-menu-wrapper,
   .e-menu-container {
-    background-color: $menu-ul-bgcolor;
+    background: $menu-ul-bgcolor;
 
     @at-root {
       & .e-menu {
@@ -12,7 +12,7 @@
           background-color: $cmenu-ul-bgcolor;
         }
         @else {
-          background-color: inherit;
+          background: inherit;
         }
         color: $menu-color;
 
@@ -51,7 +51,7 @@
             outline: $menu-li-hover-outline;
             outline-offset: $menu-li-hover-outline-offset;
             @if $skin-name == 'bootstrap4' {
-              background-color: $menu-ul-bgcolor;
+              background: $menu-ul-bgcolor;
 
               & .e-caret {
                 color: $menu-caret-color;
@@ -63,7 +63,10 @@
             }
             @else {
               @include focused-icon-color;
-              background-color: $menu-li-bgcolor;
+              background: $menu-li-bgcolor;
+              @if $skin-name == 'Material3' {
+                border-radius: 20px;
+              }
             }
           }
 
@@ -72,21 +75,34 @@
             outline: $menu-li-selected-outline;
             outline-offset: $menu-li-selected-outline-offset;
             @if $skin-name == 'bootstrap4' {
-              background-color: $menu-ul-bgcolor;
+              background: $menu-ul-bgcolor;
             }
             @if $skin-name == 'FluentUI' {
-              background-color: $cmenu-li-bgcolor;
+              background: $cmenu-li-bgcolor;
             }
             @else {
-              background-color: $menu-li-selection-bgcolor;
+              background: $menu-li-selection-bgcolor;
+            }
+            @if $skin-name == 'Material3' {
+              border-radius: 20px;
             }
 
             & .e-caret {
-              color: $menu-caret-color;
+              @if $skin-name == 'Material3' {
+                color: $menu-icon-focussed-color;
+              }
+              @else {
+                color: $menu-caret-color;
+              }
             }
 
             & .e-menu-icon {
-              color: $menu-caret-color;
+              @if $skin-name == 'Material3' {
+                color: $menu-icon-focussed-color;
+              }
+              @else {
+                color: $menu-caret-color;
+              }
             }
           }
 
@@ -99,7 +115,7 @@
       }
 
       & .e-ul {
-        background-color: inherit;
+        background: inherit;
         color: $submenu-color;
 
         & .e-menu-item {
@@ -166,10 +182,10 @@
     }
 
     &.e-menu-popup {
-      background-color: $cmenu-ul-bgcolor;
+      background: $cmenu-ul-bgcolor;
 
       &.e-sfcontextmenu .e-menu-vscroll {
-        background-color: inherit;
+        background: inherit;
       }
     }
 
@@ -182,7 +198,7 @@
 
       &:hover {
         @if $skin-name == 'bootstrap4' {
-          background-color: darken($gray-600, 7.5%);
+          background: darken($gray-600, 7.5%);
           border: 1px inset darken($gray-600, 10%);
 
           & .e-icons {
@@ -196,7 +212,7 @@
 
       &:focus {
         @if $skin-name == 'bootstrap4' {
-          background-color: darken($gray-600, 7.5%);
+          background: darken($gray-600, 7.5%);
           border-color: darken($gray-600, 10%);
 
           & .e-icons {
@@ -210,7 +226,7 @@
 
       &:active {
         @if $skin-name == 'bootstrap4' {
-          background-color: darken($gray-600, 7.5%);
+          background: darken($gray-600, 7.5%);
           border: 1px inset darken($gray-600, 10%);
         }
         @else {

package/styles/menu/bootstrap-dark.css

@@ -896,11 +896,11 @@
 /*! menu theme */
 .e-menu-wrapper,
 .e-menu-container {
-  background-color: #131313;
+  background: #131313;
 }
 .e-menu-wrapper .e-menu,
 .e-menu-container .e-menu {
-  background-color: inherit;
+  background: inherit;
   color: #f0f0f0;
 }
 .e-menu-wrapper .e-menu.e-menu:not(.e-vertical) .e-separator,
@@ -932,7 +932,7 @@
   color: inherit;
   outline: 0 solid #414141;
   outline-offset: 0;
-  background-color: #313131;
+  background: #313131;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-focused .e-caret,
 .e-menu-container .e-menu .e-menu-item.e-focused .e-caret {
@@ -947,7 +947,7 @@
   color: #f0f0f0;
   outline: 0 solid #313131;
   outline-offset: 0;
-  background-color: #313131;
+  background: #313131;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
 .e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
@@ -981,7 +981,7 @@
 
 .e-menu-wrapper .e-ul,
 .e-menu-container .e-ul {
-  background-color: inherit;
+  background: inherit;
   color: #f0f0f0;
 }
 .e-menu-wrapper .e-ul .e-menu-item .e-menu-url,
@@ -1009,11 +1009,11 @@
 
 .e-menu-wrapper.e-menu-popup,
 .e-menu-container.e-menu-popup {
-  background-color: #313131;
+  background: #313131;
 }
 .e-menu-wrapper.e-menu-popup.e-sfcontextmenu .e-menu-vscroll,
 .e-menu-container.e-menu-popup.e-sfcontextmenu .e-menu-vscroll {
-  background-color: inherit;
+  background: inherit;
 }
 .e-menu-wrapper .e-menu-hscroll.e-hscroll .e-scroll-nav,
 .e-menu-container .e-menu-hscroll.e-hscroll .e-scroll-nav {

package/styles/menu/bootstrap.css

@@ -897,11 +897,11 @@
 /*! menu theme */
 .e-menu-wrapper,
 .e-menu-container {
-  background-color: #f8f8f8;
+  background: #f8f8f8;
 }
 .e-menu-wrapper .e-menu,
 .e-menu-container .e-menu {
-  background-color: inherit;
+  background: inherit;
   color: #333;
 }
 .e-menu-wrapper .e-menu.e-menu:not(.e-vertical) .e-separator,
@@ -933,7 +933,7 @@
   color: initial;
   outline: 0 solid #ccc;
   outline-offset: 0;
-  background-color: #e6e6e6;
+  background: #e6e6e6;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-focused .e-caret,
 .e-menu-container .e-menu .e-menu-item.e-focused .e-caret {
@@ -948,7 +948,7 @@
   color: #333;
   outline: 0 solid #ddd;
   outline-offset: 0;
-  background-color: #ddd;
+  background: #ddd;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
 .e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
@@ -982,7 +982,7 @@
 
 .e-menu-wrapper .e-ul,
 .e-menu-container .e-ul {
-  background-color: inherit;
+  background: inherit;
   color: #333;
 }
 .e-menu-wrapper .e-ul .e-menu-item .e-menu-url,
@@ -1010,11 +1010,11 @@
 
 .e-menu-wrapper.e-menu-popup,
 .e-menu-container.e-menu-popup {
-  background-color: #fff;
+  background: #fff;
 }
 .e-menu-wrapper.e-menu-popup.e-sfcontextmenu .e-menu-vscroll,
 .e-menu-container.e-menu-popup.e-sfcontextmenu .e-menu-vscroll {
-  background-color: inherit;
+  background: inherit;
 }
 .e-menu-wrapper .e-menu-hscroll.e-hscroll .e-scroll-nav,
 .e-menu-container .e-menu-hscroll.e-hscroll .e-scroll-nav {

package/styles/menu/bootstrap4.css

@@ -897,7 +897,7 @@
 /*! menu theme */
 .e-menu-wrapper,
 .e-menu-container {
-  background-color: transparent;
+  background: transparent;
 }
 .e-menu-wrapper .e-menu,
 .e-menu-container .e-menu {
@@ -929,7 +929,7 @@
   color: #0056b3;
   outline: 0 solid #f8f9fa;
   outline-offset: 0;
-  background-color: transparent;
+  background: transparent;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-focused .e-caret,
 .e-menu-container .e-menu .e-menu-item.e-focused .e-caret {
@@ -944,8 +944,8 @@
   color: #0056b3;
   outline: 0 solid #f2f4f6;
   outline-offset: 0;
-  background-color: transparent;
-  background-color: #f2f4f6;
+  background: transparent;
+  background: #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 {
@@ -979,7 +979,7 @@
 
 .e-menu-wrapper .e-ul,
 .e-menu-container .e-ul {
-  background-color: inherit;
+  background: inherit;
   color: #212529;
 }
 .e-menu-wrapper .e-ul .e-menu-item .e-caret,
@@ -1031,11 +1031,11 @@
 
 .e-menu-wrapper.e-menu-popup,
 .e-menu-container.e-menu-popup {
-  background-color: #fff;
+  background: #fff;
 }
 .e-menu-wrapper.e-menu-popup.e-sfcontextmenu .e-menu-vscroll,
 .e-menu-container.e-menu-popup.e-sfcontextmenu .e-menu-vscroll {
-  background-color: inherit;
+  background: inherit;
 }
 .e-menu-wrapper .e-menu-hscroll.e-hscroll .e-scroll-nav,
 .e-menu-container .e-menu-hscroll.e-hscroll .e-scroll-nav {
@@ -1047,7 +1047,7 @@
 }
 .e-menu-wrapper .e-menu-hscroll.e-hscroll .e-scroll-nav:hover,
 .e-menu-container .e-menu-hscroll.e-hscroll .e-scroll-nav:hover {
-  background-color: #5a6268;
+  background: #5a6268;
   border: 1px inset #545b62;
 }
 .e-menu-wrapper .e-menu-hscroll.e-hscroll .e-scroll-nav:hover .e-icons,
@@ -1056,7 +1056,7 @@
 }
 .e-menu-wrapper .e-menu-hscroll.e-hscroll .e-scroll-nav:focus,
 .e-menu-container .e-menu-hscroll.e-hscroll .e-scroll-nav:focus {
-  background-color: #5a6268;
+  background: #5a6268;
   border-color: #545b62;
 }
 .e-menu-wrapper .e-menu-hscroll.e-hscroll .e-scroll-nav:focus .e-icons,
@@ -1065,7 +1065,7 @@
 }
 .e-menu-wrapper .e-menu-hscroll.e-hscroll .e-scroll-nav:active,
 .e-menu-container .e-menu-hscroll.e-hscroll .e-scroll-nav:active {
-  background-color: #5a6268;
+  background: #5a6268;
   border: 1px inset #545b62;
 }
 .e-menu-wrapper.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav,

package/styles/menu/bootstrap5-dark.css

@@ -907,11 +907,11 @@
 /*! menu theme */
 .e-menu-wrapper,
 .e-menu-container {
-  background-color: #282d31;
+  background: #282d31;
 }
 .e-menu-wrapper .e-menu,
 .e-menu-container .e-menu {
-  background-color: inherit;
+  background: inherit;
   color: #fff;
 }
 .e-menu-wrapper .e-menu.e-menu:not(.e-vertical) .e-separator,
@@ -935,14 +935,14 @@
   color: #fff;
   outline: 0 solid #444c54;
   outline-offset: 0;
-  background-color: #495057;
+  background: #495057;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-selected,
 .e-menu-container .e-menu .e-menu-item.e-selected {
   color: #fff;
   outline: 0 solid #495057;
   outline-offset: 0;
-  background-color: #495057;
+  background: #495057;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
 .e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
@@ -976,7 +976,7 @@
 
 .e-menu-wrapper .e-ul,
 .e-menu-container .e-ul {
-  background-color: inherit;
+  background: inherit;
   color: #fff;
 }
 .e-menu-wrapper .e-ul .e-menu-item .e-menu-url,
@@ -1004,11 +1004,11 @@
 
 .e-menu-wrapper.e-menu-popup,
 .e-menu-container.e-menu-popup {
-  background-color: #343a40;
+  background: #343a40;
 }
 .e-menu-wrapper.e-menu-popup.e-sfcontextmenu .e-menu-vscroll,
 .e-menu-container.e-menu-popup.e-sfcontextmenu .e-menu-vscroll {
-  background-color: inherit;
+  background: inherit;
 }
 .e-menu-wrapper .e-menu-hscroll.e-hscroll .e-scroll-nav,
 .e-menu-container .e-menu-hscroll.e-hscroll .e-scroll-nav {

package/styles/menu/bootstrap5.css

@@ -907,11 +907,11 @@
 /*! menu theme */
 .e-menu-wrapper,
 .e-menu-container {
-  background-color: #f8f9fa;
+  background: #f8f9fa;
 }
 .e-menu-wrapper .e-menu,
 .e-menu-container .e-menu {
-  background-color: inherit;
+  background: inherit;
   color: #212529;
 }
 .e-menu-wrapper .e-menu.e-menu:not(.e-vertical) .e-separator,
@@ -935,14 +935,14 @@
   color: #212529;
   outline: 0 solid #dee2e6;
   outline-offset: 0;
-  background-color: #dee2e6;
+  background: #dee2e6;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-selected,
 .e-menu-container .e-menu .e-menu-item.e-selected {
   color: #212529;
   outline: 0 solid #dee2e6;
   outline-offset: 0;
-  background-color: #dee2e6;
+  background: #dee2e6;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
 .e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
@@ -976,7 +976,7 @@
 
 .e-menu-wrapper .e-ul,
 .e-menu-container .e-ul {
-  background-color: inherit;
+  background: inherit;
   color: #212529;
 }
 .e-menu-wrapper .e-ul .e-menu-item .e-menu-url,
@@ -1004,11 +1004,11 @@
 
 .e-menu-wrapper.e-menu-popup,
 .e-menu-container.e-menu-popup {
-  background-color: #fff;
+  background: #fff;
 }
 .e-menu-wrapper.e-menu-popup.e-sfcontextmenu .e-menu-vscroll,
 .e-menu-container.e-menu-popup.e-sfcontextmenu .e-menu-vscroll {
-  background-color: inherit;
+  background: inherit;
 }
 .e-menu-wrapper .e-menu-hscroll.e-hscroll .e-scroll-nav,
 .e-menu-container .e-menu-hscroll.e-hscroll .e-scroll-nav {

package/styles/menu/fabric-dark.css

@@ -896,11 +896,11 @@
 /*! menu theme */
 .e-menu-wrapper,
 .e-menu-container {
-  background-color: #333232;
+  background: #333232;
 }
 .e-menu-wrapper .e-menu,
 .e-menu-container .e-menu {
-  background-color: inherit;
+  background: inherit;
   color: #dadada;
 }
 .e-menu-wrapper .e-menu.e-menu:not(.e-vertical) .e-separator,
@@ -932,7 +932,7 @@
   color: inherit;
   outline: 0 solid #414040;
   outline-offset: 0;
-  background-color: #414040;
+  background: #414040;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-focused .e-caret,
 .e-menu-container .e-menu .e-menu-item.e-focused .e-caret {
@@ -947,7 +947,7 @@
   color: #fff;
   outline: 0 solid #514f4f;
   outline-offset: 0;
-  background-color: #514f4f;
+  background: #514f4f;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
 .e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
@@ -981,7 +981,7 @@
 
 .e-menu-wrapper .e-ul,
 .e-menu-container .e-ul {
-  background-color: inherit;
+  background: inherit;
   color: #dadada;
 }
 .e-menu-wrapper .e-ul .e-menu-item .e-menu-url,
@@ -1009,11 +1009,11 @@
 
 .e-menu-wrapper.e-menu-popup,
 .e-menu-container.e-menu-popup {
-  background-color: #282727;
+  background: #282727;
 }
 .e-menu-wrapper.e-menu-popup.e-sfcontextmenu .e-menu-vscroll,
 .e-menu-container.e-menu-popup.e-sfcontextmenu .e-menu-vscroll {
-  background-color: inherit;
+  background: inherit;
 }
 .e-menu-wrapper .e-menu-hscroll.e-hscroll .e-scroll-nav,
 .e-menu-container .e-menu-hscroll.e-hscroll .e-scroll-nav {

package/styles/menu/fabric.css

@@ -897,11 +897,11 @@
 /*! menu theme */
 .e-menu-wrapper,
 .e-menu-container {
-  background-color: #f4f4f4;
+  background: #f4f4f4;
 }
 .e-menu-wrapper .e-menu,
 .e-menu-container .e-menu {
-  background-color: inherit;
+  background: inherit;
   color: #333;
 }
 .e-menu-wrapper .e-menu.e-menu:not(.e-vertical) .e-separator,
@@ -933,7 +933,7 @@
   color: inherit;
   outline: 0 solid #eaeaea;
   outline-offset: 0;
-  background-color: #eaeaea;
+  background: #eaeaea;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-focused .e-caret,
 .e-menu-container .e-menu .e-menu-item.e-focused .e-caret {
@@ -948,7 +948,7 @@
   color: #000;
   outline: 0 solid #dadada;
   outline-offset: 0;
-  background-color: #dadada;
+  background: #dadada;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
 .e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
@@ -982,7 +982,7 @@
 
 .e-menu-wrapper .e-ul,
 .e-menu-container .e-ul {
-  background-color: inherit;
+  background: inherit;
   color: #333;
 }
 .e-menu-wrapper .e-ul .e-menu-item .e-menu-url,
@@ -1010,11 +1010,11 @@
 
 .e-menu-wrapper.e-menu-popup,
 .e-menu-container.e-menu-popup {
-  background-color: #fff;
+  background: #fff;
 }
 .e-menu-wrapper.e-menu-popup.e-sfcontextmenu .e-menu-vscroll,
 .e-menu-container.e-menu-popup.e-sfcontextmenu .e-menu-vscroll {
-  background-color: inherit;
+  background: inherit;
 }
 .e-menu-wrapper .e-menu-hscroll.e-hscroll .e-scroll-nav,
 .e-menu-container .e-menu-hscroll.e-hscroll .e-scroll-nav {

package/styles/menu/fluent-dark.css

@@ -906,11 +906,11 @@
 /*! menu theme */
 .e-menu-wrapper,
 .e-menu-container {
-  background-color: transparent;
+  background: transparent;
 }
 .e-menu-wrapper .e-menu,
 .e-menu-container .e-menu {
-  background-color: inherit;
+  background: inherit;
   color: #f3f2f1;
 }
 .e-menu-wrapper .e-menu.e-menu:not(.e-vertical) .e-separator,
@@ -942,7 +942,7 @@
   color: #f3f2f1;
   outline: 0 solid #292827;
   outline-offset: 0;
-  background-color: #292827;
+  background: #292827;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-focused .e-caret,
 .e-menu-container .e-menu .e-menu-item.e-focused .e-caret {
@@ -957,7 +957,7 @@
   color: #f3f2f1;
   outline: 0 solid #292827;
   outline-offset: 0;
-  background-color: #323130;
+  background: #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 {
@@ -991,7 +991,7 @@
 
 .e-menu-wrapper .e-ul,
 .e-menu-container .e-ul {
-  background-color: inherit;
+  background: inherit;
   color: #f3f2f1;
 }
 .e-menu-wrapper .e-ul .e-menu-item .e-caret,
@@ -1027,11 +1027,11 @@
 
 .e-menu-wrapper.e-menu-popup,
 .e-menu-container.e-menu-popup {
-  background-color: #252423;
+  background: #252423;
 }
 .e-menu-wrapper.e-menu-popup.e-sfcontextmenu .e-menu-vscroll,
 .e-menu-container.e-menu-popup.e-sfcontextmenu .e-menu-vscroll {
-  background-color: inherit;
+  background: inherit;
 }
 .e-menu-wrapper .e-menu-hscroll.e-hscroll .e-scroll-nav,
 .e-menu-container .e-menu-hscroll.e-hscroll .e-scroll-nav {

package/styles/menu/fluent.css

@@ -906,11 +906,11 @@
 /*! menu theme */
 .e-menu-wrapper,
 .e-menu-container {
-  background-color: transparent;
+  background: transparent;
 }
 .e-menu-wrapper .e-menu,
 .e-menu-container .e-menu {
-  background-color: inherit;
+  background: inherit;
   color: #201f1e;
 }
 .e-menu-wrapper .e-menu.e-menu:not(.e-vertical) .e-separator,
@@ -942,7 +942,7 @@
   color: #201f1e;
   outline: 0 solid #edebe9;
   outline-offset: 0;
-  background-color: #edebe9;
+  background: #edebe9;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-focused .e-caret,
 .e-menu-container .e-menu .e-menu-item.e-focused .e-caret {
@@ -957,7 +957,7 @@
   color: #201f1e;
   outline: 0 solid #edebe9;
   outline-offset: 0;
-  background-color: #f3f2f1;
+  background: #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 {
@@ -991,7 +991,7 @@
 
 .e-menu-wrapper .e-ul,
 .e-menu-container .e-ul {
-  background-color: inherit;
+  background: inherit;
   color: #201f1e;
 }
 .e-menu-wrapper .e-ul .e-menu-item .e-caret,
@@ -1027,11 +1027,11 @@
 
 .e-menu-wrapper.e-menu-popup,
 .e-menu-container.e-menu-popup {
-  background-color: #fff;
+  background: #fff;
 }
 .e-menu-wrapper.e-menu-popup.e-sfcontextmenu .e-menu-vscroll,
 .e-menu-container.e-menu-popup.e-sfcontextmenu .e-menu-vscroll {
-  background-color: inherit;
+  background: inherit;
 }
 .e-menu-wrapper .e-menu-hscroll.e-hscroll .e-scroll-nav,
 .e-menu-container .e-menu-hscroll.e-hscroll .e-scroll-nav {