@syncfusion/ej2-navigations 20.4.48 → 20.4.51

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

@@ -119,7 +119,9 @@
   }
 
   &.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;
   }
 

package/styles/context-menu/_layout.scss

@@ -142,6 +142,8 @@
   .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 {
-    @include bigger-rtl-blank-icon;
+    @if $skin-name != 'FluentUI' {
+      @include bigger-rtl-blank-icon;
+    }
   }
 }

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

@@ -117,7 +117,7 @@
 }
 .e-contextmenu-wrapper ul .e-menu-item.e-menu-caret-icon,
 .e-contextmenu-container ul .e-menu-item.e-menu-caret-icon {
-  padding-right: 24px;
+  padding-right: 36px;
 }
 .e-contextmenu-wrapper ul .e-menu-item.e-separator,
 .e-contextmenu-container ul .e-menu-item.e-separator {
@@ -222,7 +222,6 @@
 }
 .e-rtl.e-contextmenu-wrapper .e-menu-item.e-menu-caret-icon,
 .e-rtl.e-contextmenu-container .e-menu-item.e-menu-caret-icon {
-  padding-left: 24px;
   padding-right: 12px;
 }
 .e-rtl.e-contextmenu-wrapper .e-menu-item.e-blankicon,
@@ -231,7 +230,7 @@
 }
 .e-rtl.e-contextmenu-wrapper .e-menu-item.e-blankicon.e-menu-caret-icon,
 .e-rtl.e-contextmenu-container .e-menu-item.e-blankicon.e-menu-caret-icon {
-  padding-left: 24px;
+  padding-left: 36px;
 }
 
 .e-bigger .e-contextmenu-wrapper ul,
@@ -279,19 +278,6 @@
   font-size: 18px;
 }
 
-.e-bigger .e-contextmenu-wrapper.e-rtl ul .e-blankicon,
-.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 {
-  padding-left: 16px;
-}
-.e-bigger .e-contextmenu-wrapper.e-rtl ul .e-blankicon.e-menu-caret-icon,
-.e-bigger.e-contextmenu-wrapper.e-rtl ul .e-blankicon.e-menu-caret-icon,
-.e-bigger .e-contextmenu-container.e-rtl ul .e-blankicon.e-menu-caret-icon,
-.e-bigger.e-contextmenu-container.e-rtl ul .e-blankicon.e-menu-caret-icon {
-  padding-left: 24px;
-}
-
 /*! contextmenu theme */
 .e-contextmenu-wrapper ul,
 .e-contextmenu-container ul {

package/styles/context-menu/fluent.css

@@ -117,7 +117,7 @@
 }
 .e-contextmenu-wrapper ul .e-menu-item.e-menu-caret-icon,
 .e-contextmenu-container ul .e-menu-item.e-menu-caret-icon {
-  padding-right: 24px;
+  padding-right: 36px;
 }
 .e-contextmenu-wrapper ul .e-menu-item.e-separator,
 .e-contextmenu-container ul .e-menu-item.e-separator {
@@ -222,7 +222,6 @@
 }
 .e-rtl.e-contextmenu-wrapper .e-menu-item.e-menu-caret-icon,
 .e-rtl.e-contextmenu-container .e-menu-item.e-menu-caret-icon {
-  padding-left: 24px;
   padding-right: 12px;
 }
 .e-rtl.e-contextmenu-wrapper .e-menu-item.e-blankicon,
@@ -231,7 +230,7 @@
 }
 .e-rtl.e-contextmenu-wrapper .e-menu-item.e-blankicon.e-menu-caret-icon,
 .e-rtl.e-contextmenu-container .e-menu-item.e-blankicon.e-menu-caret-icon {
-  padding-left: 24px;
+  padding-left: 36px;
 }
 
 .e-bigger .e-contextmenu-wrapper ul,
@@ -279,19 +278,6 @@
   font-size: 18px;
 }
 
-.e-bigger .e-contextmenu-wrapper.e-rtl ul .e-blankicon,
-.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 {
-  padding-left: 16px;
-}
-.e-bigger .e-contextmenu-wrapper.e-rtl ul .e-blankicon.e-menu-caret-icon,
-.e-bigger.e-contextmenu-wrapper.e-rtl ul .e-blankicon.e-menu-caret-icon,
-.e-bigger .e-contextmenu-container.e-rtl ul .e-blankicon.e-menu-caret-icon,
-.e-bigger.e-contextmenu-container.e-rtl ul .e-blankicon.e-menu-caret-icon {
-  padding-left: 24px;
-}
-
 /*! contextmenu theme */
 .e-contextmenu-wrapper ul,
 .e-contextmenu-container ul {

package/styles/fabric-dark.css

@@ -2774,15 +2774,15 @@
   border: 1px solid #414040;
   border-radius: 0;
 }
-.e-accordion .e-active {
-  background: #201f1f;
-}
 .e-accordion .e-acrdn-item {
   border-color: #201f1f;
   border-style: solid;
   border-width: 1px 0 1px 0;
   border-radius: 0;
 }
+.e-accordion .e-acrdn-item.e-active {
+  background: #201f1f;
+}
 .e-accordion .e-acrdn-item.e-select:last-child {
   border-bottom: 1px solid #201f1f;
   border-radius: 0;
@@ -8611,24 +8611,24 @@ ejs-sidebar {
 
 .e-rtl.e-menu-wrapper ul.e-vertical .e-caret::before,
 .e-rtl.e-menu-container ul.e-vertical .e-caret::before {
-  content: "\e937";
+  content: "\e98f";
 }
 .e-rtl.e-menu-wrapper ul.e-ul .e-caret::before,
 .e-rtl.e-menu-container ul.e-ul .e-caret::before {
-  content: "\e937";
+  content: "\e98f";
 }
 
 .e-bigger .e-rtl.e-menu-wrapper ul.e-vertical .e-caret::before,
 .e-bigger.e-rtl.e-menu-wrapper ul.e-vertical .e-caret::before,
 .e-bigger .e-rtl.e-menu-container ul.e-vertical .e-caret::before,
 .e-bigger.e-rtl.e-menu-container ul.e-vertical .e-caret::before {
-  content: "\e937";
+  content: "\e98f";
 }
 .e-bigger .e-rtl.e-menu-wrapper ul.e-ul .e-caret::before,
 .e-bigger.e-rtl.e-menu-wrapper ul.e-ul .e-caret::before,
 .e-bigger .e-rtl.e-menu-container ul.e-ul .e-caret::before,
 .e-bigger.e-rtl.e-menu-container ul.e-ul .e-caret::before {
-  content: "\e937";
+  content: "\e98f";
 }
 
 .e-bigger .e-rtl.e-menu-wrapper.e-hamburger ul.e-ul .e-caret::before,
@@ -8751,6 +8751,7 @@ ejs-sidebar {
   line-height: 42px;
   margin-right: 8px;
   text-align: center;
+  margin-bottom: 4px;
 }
 .e-menu-wrapper ul .e-menu-item .e-caret,
 .e-menu-container ul .e-menu-item .e-caret {

package/styles/fabric.css

@@ -2777,15 +2777,15 @@
   border: 1px solid #eaeaea;
   border-radius: 0;
 }
-.e-accordion .e-active {
-  background: #fff;
-}
 .e-accordion .e-acrdn-item {
   border-color: #fff;
   border-style: solid;
   border-width: 1px 0 1px 0;
   border-radius: 0;
 }
+.e-accordion .e-acrdn-item.e-active {
+  background: #fff;
+}
 .e-accordion .e-acrdn-item.e-select:last-child {
   border-bottom: 1px solid #fff;
   border-radius: 0;
@@ -8622,24 +8622,24 @@ ejs-sidebar {
 
 .e-rtl.e-menu-wrapper ul.e-vertical .e-caret::before,
 .e-rtl.e-menu-container ul.e-vertical .e-caret::before {
-  content: "\e937";
+  content: "\e98f";
 }
 .e-rtl.e-menu-wrapper ul.e-ul .e-caret::before,
 .e-rtl.e-menu-container ul.e-ul .e-caret::before {
-  content: "\e937";
+  content: "\e98f";
 }
 
 .e-bigger .e-rtl.e-menu-wrapper ul.e-vertical .e-caret::before,
 .e-bigger.e-rtl.e-menu-wrapper ul.e-vertical .e-caret::before,
 .e-bigger .e-rtl.e-menu-container ul.e-vertical .e-caret::before,
 .e-bigger.e-rtl.e-menu-container ul.e-vertical .e-caret::before {
-  content: "\e937";
+  content: "\e98f";
 }
 .e-bigger .e-rtl.e-menu-wrapper ul.e-ul .e-caret::before,
 .e-bigger.e-rtl.e-menu-wrapper ul.e-ul .e-caret::before,
 .e-bigger .e-rtl.e-menu-container ul.e-ul .e-caret::before,
 .e-bigger.e-rtl.e-menu-container ul.e-ul .e-caret::before {
-  content: "\e937";
+  content: "\e98f";
 }
 
 .e-bigger .e-rtl.e-menu-wrapper.e-hamburger ul.e-ul .e-caret::before,
@@ -8762,6 +8762,7 @@ ejs-sidebar {
   line-height: 42px;
   margin-right: 8px;
   text-align: center;
+  margin-bottom: 4px;
 }
 .e-menu-wrapper ul .e-menu-item .e-caret,
 .e-menu-container ul .e-menu-item .e-caret {

package/styles/fluent-dark.css

@@ -2810,15 +2810,15 @@
   border: 1px solid #292827;
   border-radius: 2px;
 }
-.e-accordion .e-active {
-  background: #1b1a19;
-}
 .e-accordion .e-acrdn-item {
   border-color: #292827;
   border-style: solid;
   border-width: 0;
   border-radius: 0;
 }
+.e-accordion .e-acrdn-item.e-active {
+  background: #1b1a19;
+}
 .e-accordion .e-acrdn-item.e-select:last-child {
   border-bottom: 0;
   border-radius: 0;
@@ -3441,7 +3441,7 @@
 }
 .e-contextmenu-wrapper ul .e-menu-item.e-menu-caret-icon,
 .e-contextmenu-container ul .e-menu-item.e-menu-caret-icon {
-  padding-right: 24px;
+  padding-right: 36px;
 }
 .e-contextmenu-wrapper ul .e-menu-item.e-separator,
 .e-contextmenu-container ul .e-menu-item.e-separator {
@@ -3546,7 +3546,6 @@
 }
 .e-rtl.e-contextmenu-wrapper .e-menu-item.e-menu-caret-icon,
 .e-rtl.e-contextmenu-container .e-menu-item.e-menu-caret-icon {
-  padding-left: 24px;
   padding-right: 12px;
 }
 .e-rtl.e-contextmenu-wrapper .e-menu-item.e-blankicon,
@@ -3555,7 +3554,7 @@
 }
 .e-rtl.e-contextmenu-wrapper .e-menu-item.e-blankicon.e-menu-caret-icon,
 .e-rtl.e-contextmenu-container .e-menu-item.e-blankicon.e-menu-caret-icon {
-  padding-left: 24px;
+  padding-left: 36px;
 }
 
 .e-bigger .e-contextmenu-wrapper ul,
@@ -3603,19 +3602,6 @@
   font-size: 18px;
 }
 
-.e-bigger .e-contextmenu-wrapper.e-rtl ul .e-blankicon,
-.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 {
-  padding-left: 16px;
-}
-.e-bigger .e-contextmenu-wrapper.e-rtl ul .e-blankicon.e-menu-caret-icon,
-.e-bigger.e-contextmenu-wrapper.e-rtl ul .e-blankicon.e-menu-caret-icon,
-.e-bigger .e-contextmenu-container.e-rtl ul .e-blankicon.e-menu-caret-icon,
-.e-bigger.e-contextmenu-container.e-rtl ul .e-blankicon.e-menu-caret-icon {
-  padding-left: 24px;
-}
-
 /*! contextmenu theme */
 .e-contextmenu-wrapper ul,
 .e-contextmenu-container ul {
@@ -8926,6 +8912,7 @@ ejs-sidebar {
   line-height: 40px;
   margin-right: 4px;
   text-align: center;
+  margin-bottom: 4px;
 }
 .e-menu-wrapper ul .e-menu-item .e-caret,
 .e-menu-container ul .e-menu-item .e-caret {
@@ -8983,7 +8970,7 @@ ejs-sidebar {
 }
 .e-menu-wrapper .e-ul .e-menu-item.e-menu-caret-icon,
 .e-menu-container .e-ul .e-menu-item.e-menu-caret-icon {
-  padding-right: 24px;
+  padding-right: 36px;
 }
 .e-menu-wrapper .e-ul .e-menu-item.e-separator,
 .e-menu-container .e-ul .e-menu-item.e-separator {
@@ -9171,7 +9158,6 @@ ejs-sidebar {
 }
 .e-rtl.e-menu-wrapper ul.e-ul .e-menu-item.e-menu-caret-icon,
 .e-rtl.e-menu-container ul.e-ul .e-menu-item.e-menu-caret-icon {
-  padding-left: 24px;
   padding-right: 12px;
 }
 .e-rtl.e-menu-wrapper ul.e-ul .e-menu-item.e-blankicon,
@@ -9180,7 +9166,7 @@ ejs-sidebar {
 }
 .e-rtl.e-menu-wrapper ul.e-ul .e-menu-item.e-blankicon.e-menu-caret-icon,
 .e-rtl.e-menu-container ul.e-ul .e-menu-item.e-blankicon.e-menu-caret-icon {
-  padding-left: 24px;
+  padding-left: 36px;
 }
 
 .e-rtl.e-menu-container:not(.e-hamburger) .e-menu.e-vertical .e-blankicon {
@@ -9291,7 +9277,7 @@ ejs-sidebar {
 .e-bigger.e-menu-wrapper ul.e-ul .e-menu-item.e-menu-caret-icon,
 .e-bigger .e-menu-container ul.e-ul .e-menu-item.e-menu-caret-icon,
 .e-bigger.e-menu-container ul.e-ul .e-menu-item.e-menu-caret-icon {
-  padding-right: 24px;
+  padding-right: 36px;
 }
 .e-bigger .e-menu-wrapper ul.e-ul .e-menu-item .e-menu-icon,
 .e-bigger.e-menu-wrapper ul.e-ul .e-menu-item .e-menu-icon,
@@ -9386,7 +9372,7 @@ ejs-sidebar {
 .e-bigger.e-rtl.e-menu-wrapper ul.e-ul .e-menu-item.e-menu-caret-icon,
 .e-bigger .e-rtl.e-menu-container ul.e-ul .e-menu-item.e-menu-caret-icon,
 .e-bigger.e-rtl.e-menu-container ul.e-ul .e-menu-item.e-menu-caret-icon {
-  padding-left: 24px;
+  padding-left: 36px;
   padding-right: 12px;
 }
 .e-bigger .e-rtl.e-menu-wrapper ul.e-ul .e-menu-item.e-blankicon,
@@ -9399,7 +9385,7 @@ ejs-sidebar {
 .e-bigger.e-rtl.e-menu-wrapper ul.e-ul .e-menu-item.e-blankicon.e-menu-caret-icon,
 .e-bigger .e-rtl.e-menu-container ul.e-ul .e-menu-item.e-blankicon.e-menu-caret-icon,
 .e-bigger.e-rtl.e-menu-container ul.e-ul .e-menu-item.e-blankicon.e-menu-caret-icon {
-  padding-left: 24px;
+  padding-left: 36px;
 }
 
 .e-bigger .e-rtl.e-menu-container:not(.e-hamburger) .e-menu.e-vertical .e-blankicon,
@@ -9642,7 +9628,7 @@ ejs-sidebar {
 }
 .e-menu-wrapper .e-menu,
 .e-menu-container .e-menu {
-  background-color: #252423;
+  background-color: inherit;
   color: #f3f2f1;
 }
 .e-menu-wrapper .e-menu.e-menu:not(.e-vertical) .e-separator,

package/styles/fluent.css

@@ -2810,15 +2810,15 @@
   border: 1px solid #edebe9;
   border-radius: 2px;
 }
-.e-accordion .e-active {
-  background: #fff;
-}
 .e-accordion .e-acrdn-item {
   border-color: #edebe9;
   border-style: solid;
   border-width: 0;
   border-radius: 0;
 }
+.e-accordion .e-acrdn-item.e-active {
+  background: #fff;
+}
 .e-accordion .e-acrdn-item.e-select:last-child {
   border-bottom: 0;
   border-radius: 0;
@@ -3441,7 +3441,7 @@
 }
 .e-contextmenu-wrapper ul .e-menu-item.e-menu-caret-icon,
 .e-contextmenu-container ul .e-menu-item.e-menu-caret-icon {
-  padding-right: 24px;
+  padding-right: 36px;
 }
 .e-contextmenu-wrapper ul .e-menu-item.e-separator,
 .e-contextmenu-container ul .e-menu-item.e-separator {
@@ -3546,7 +3546,6 @@
 }
 .e-rtl.e-contextmenu-wrapper .e-menu-item.e-menu-caret-icon,
 .e-rtl.e-contextmenu-container .e-menu-item.e-menu-caret-icon {
-  padding-left: 24px;
   padding-right: 12px;
 }
 .e-rtl.e-contextmenu-wrapper .e-menu-item.e-blankicon,
@@ -3555,7 +3554,7 @@
 }
 .e-rtl.e-contextmenu-wrapper .e-menu-item.e-blankicon.e-menu-caret-icon,
 .e-rtl.e-contextmenu-container .e-menu-item.e-blankicon.e-menu-caret-icon {
-  padding-left: 24px;
+  padding-left: 36px;
 }
 
 .e-bigger .e-contextmenu-wrapper ul,
@@ -3603,19 +3602,6 @@
   font-size: 18px;
 }
 
-.e-bigger .e-contextmenu-wrapper.e-rtl ul .e-blankicon,
-.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 {
-  padding-left: 16px;
-}
-.e-bigger .e-contextmenu-wrapper.e-rtl ul .e-blankicon.e-menu-caret-icon,
-.e-bigger.e-contextmenu-wrapper.e-rtl ul .e-blankicon.e-menu-caret-icon,
-.e-bigger .e-contextmenu-container.e-rtl ul .e-blankicon.e-menu-caret-icon,
-.e-bigger.e-contextmenu-container.e-rtl ul .e-blankicon.e-menu-caret-icon {
-  padding-left: 24px;
-}
-
 /*! contextmenu theme */
 .e-contextmenu-wrapper ul,
 .e-contextmenu-container ul {
@@ -8926,6 +8912,7 @@ ejs-sidebar {
   line-height: 40px;
   margin-right: 4px;
   text-align: center;
+  margin-bottom: 4px;
 }
 .e-menu-wrapper ul .e-menu-item .e-caret,
 .e-menu-container ul .e-menu-item .e-caret {
@@ -8983,7 +8970,7 @@ ejs-sidebar {
 }
 .e-menu-wrapper .e-ul .e-menu-item.e-menu-caret-icon,
 .e-menu-container .e-ul .e-menu-item.e-menu-caret-icon {
-  padding-right: 24px;
+  padding-right: 36px;
 }
 .e-menu-wrapper .e-ul .e-menu-item.e-separator,
 .e-menu-container .e-ul .e-menu-item.e-separator {
@@ -9171,7 +9158,6 @@ ejs-sidebar {
 }
 .e-rtl.e-menu-wrapper ul.e-ul .e-menu-item.e-menu-caret-icon,
 .e-rtl.e-menu-container ul.e-ul .e-menu-item.e-menu-caret-icon {
-  padding-left: 24px;
   padding-right: 12px;
 }
 .e-rtl.e-menu-wrapper ul.e-ul .e-menu-item.e-blankicon,
@@ -9180,7 +9166,7 @@ ejs-sidebar {
 }
 .e-rtl.e-menu-wrapper ul.e-ul .e-menu-item.e-blankicon.e-menu-caret-icon,
 .e-rtl.e-menu-container ul.e-ul .e-menu-item.e-blankicon.e-menu-caret-icon {
-  padding-left: 24px;
+  padding-left: 36px;
 }
 
 .e-rtl.e-menu-container:not(.e-hamburger) .e-menu.e-vertical .e-blankicon {
@@ -9291,7 +9277,7 @@ ejs-sidebar {
 .e-bigger.e-menu-wrapper ul.e-ul .e-menu-item.e-menu-caret-icon,
 .e-bigger .e-menu-container ul.e-ul .e-menu-item.e-menu-caret-icon,
 .e-bigger.e-menu-container ul.e-ul .e-menu-item.e-menu-caret-icon {
-  padding-right: 24px;
+  padding-right: 36px;
 }
 .e-bigger .e-menu-wrapper ul.e-ul .e-menu-item .e-menu-icon,
 .e-bigger.e-menu-wrapper ul.e-ul .e-menu-item .e-menu-icon,
@@ -9386,7 +9372,7 @@ ejs-sidebar {
 .e-bigger.e-rtl.e-menu-wrapper ul.e-ul .e-menu-item.e-menu-caret-icon,
 .e-bigger .e-rtl.e-menu-container ul.e-ul .e-menu-item.e-menu-caret-icon,
 .e-bigger.e-rtl.e-menu-container ul.e-ul .e-menu-item.e-menu-caret-icon {
-  padding-left: 24px;
+  padding-left: 36px;
   padding-right: 12px;
 }
 .e-bigger .e-rtl.e-menu-wrapper ul.e-ul .e-menu-item.e-blankicon,
@@ -9399,7 +9385,7 @@ ejs-sidebar {
 .e-bigger.e-rtl.e-menu-wrapper ul.e-ul .e-menu-item.e-blankicon.e-menu-caret-icon,
 .e-bigger .e-rtl.e-menu-container ul.e-ul .e-menu-item.e-blankicon.e-menu-caret-icon,
 .e-bigger.e-rtl.e-menu-container ul.e-ul .e-menu-item.e-blankicon.e-menu-caret-icon {
-  padding-left: 24px;
+  padding-left: 36px;
 }
 
 .e-bigger .e-rtl.e-menu-container:not(.e-hamburger) .e-menu.e-vertical .e-blankicon,
@@ -9642,7 +9628,7 @@ ejs-sidebar {
 }
 .e-menu-wrapper .e-menu,
 .e-menu-container .e-menu {
-  background-color: #fff;
+  background-color: inherit;
   color: #201f1e;
 }
 .e-menu-wrapper .e-menu.e-menu:not(.e-vertical) .e-separator,

package/styles/highcontrast-light.css

@@ -2774,15 +2774,15 @@
   border: 1px solid #757575;
   border-radius: 0;
 }
-.e-accordion .e-active {
-  background: #ccc;
-}
 .e-accordion .e-acrdn-item {
   border-color: #757575;
   border-style: solid;
   border-width: 0;
   border-radius: 0;
 }
+.e-accordion .e-acrdn-item.e-active {
+  background: #ccc;
+}
 .e-accordion .e-acrdn-item.e-select:last-child {
   border-bottom: 0;
   border-radius: 0;
@@ -8745,6 +8745,7 @@ ejs-sidebar {
   line-height: 36px;
   margin-right: 10px;
   text-align: center;
+  margin-bottom: 4px;
 }
 .e-menu-wrapper ul .e-menu-item .e-caret,
 .e-menu-container ul .e-menu-item .e-caret {

package/styles/highcontrast.css

@@ -2777,15 +2777,15 @@
   border: 1px solid #969696;
   border-radius: 0;
 }
-.e-accordion .e-active {
-  background: #000;
-}
 .e-accordion .e-acrdn-item {
   border-color: #969696;
   border-style: solid;
   border-width: 0;
   border-radius: 0;
 }
+.e-accordion .e-acrdn-item.e-active {
+  background: #000;
+}
 .e-accordion .e-acrdn-item.e-select:last-child {
   border-bottom: 0;
   border-radius: 0;
@@ -8778,6 +8778,7 @@ ejs-sidebar {
   line-height: 40px;
   margin-right: 8px;
   text-align: center;
+  margin-bottom: 4px;
 }
 .e-menu-wrapper ul .e-menu-item .e-caret,
 .e-menu-container ul .e-menu-item .e-caret {

package/styles/material-dark.css

@@ -2853,15 +2853,15 @@
   border: 1px solid #616161;
   border-radius: 0;
 }
-.e-accordion .e-active {
-  background: #303030;
-}
 .e-accordion .e-acrdn-item {
   border-color: #616161;
   border-style: solid;
   border-width: 0;
   border-radius: 0;
 }
+.e-accordion .e-acrdn-item.e-active {
+  background: #303030;
+}
 .e-accordion .e-acrdn-item.e-select:last-child {
   border-bottom: 1px solid transparent;
   border-radius: 0;
@@ -8893,6 +8893,7 @@ ejs-sidebar {
   line-height: 42px;
   margin-right: 8px;
   text-align: center;
+  margin-bottom: 4px;
 }
 .e-menu-wrapper ul .e-menu-item .e-caret,
 .e-menu-container ul .e-menu-item .e-caret {

package/styles/material.css

@@ -2859,15 +2859,15 @@
   border: 1px solid rgba(0, 0, 0, 0.12);
   border-radius: 0;
 }
-.e-accordion .e-active {
-  background: #fff;
-}
 .e-accordion .e-acrdn-item {
   border-color: rgba(0, 0, 0, 0.12);
   border-style: solid;
   border-width: 0;
   border-radius: 0;
 }
+.e-accordion .e-acrdn-item.e-active {
+  background: #fff;
+}
 .e-accordion .e-acrdn-item.e-select:last-child {
   border-bottom: 1px solid transparent;
   border-radius: 0;
@@ -8913,6 +8913,7 @@ ejs-sidebar {
   line-height: 42px;
   margin-right: 8px;
   text-align: center;
+  margin-bottom: 4px;
 }
 .e-menu-wrapper ul .e-menu-item .e-caret,
 .e-menu-container ul .e-menu-item .e-caret {

package/styles/menu/_layout.scss

@@ -66,6 +66,7 @@
             line-height: $menu-li-height;
             margin-right: $menu-icon-margin-right;
             text-align: center;
+            margin-bottom: 4px;
           }
 
           & .e-caret {

package/styles/menu/_theme.scss

@@ -8,7 +8,7 @@
 
     @at-root {
       & .e-menu {
-        @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
+        @if $skin-name == 'bootstrap4' {
           background-color: $cmenu-ul-bgcolor;
         }
         @else {

package/styles/menu/bootstrap-dark.css

@@ -183,6 +183,7 @@
   line-height: 42px;
   margin-right: 8px;
   text-align: center;
+  margin-bottom: 4px;
 }
 .e-menu-wrapper ul .e-menu-item .e-caret,
 .e-menu-container ul .e-menu-item .e-caret {

package/styles/menu/bootstrap.css

@@ -184,6 +184,7 @@
   line-height: 40px;
   margin-right: 8px;
   text-align: center;
+  margin-bottom: 4px;
 }
 .e-menu-wrapper ul .e-menu-item .e-caret,
 .e-menu-container ul .e-menu-item .e-caret {

package/styles/menu/bootstrap4.css

@@ -184,6 +184,7 @@
   line-height: 30px;
   margin-right: 8px;
   text-align: center;
+  margin-bottom: 4px;
 }
 .e-menu-wrapper ul .e-menu-item .e-caret,
 .e-menu-container ul .e-menu-item .e-caret {

package/styles/menu/bootstrap5-dark.css

@@ -194,6 +194,7 @@
   line-height: 32px;
   margin-right: 8px;
   text-align: center;
+  margin-bottom: 4px;
 }
 .e-menu-wrapper ul .e-menu-item .e-caret,
 .e-menu-container ul .e-menu-item .e-caret {

package/styles/menu/bootstrap5.css

@@ -194,6 +194,7 @@
   line-height: 32px;
   margin-right: 8px;
   text-align: center;
+  margin-bottom: 4px;
 }
 .e-menu-wrapper ul .e-menu-item .e-caret,
 .e-menu-container ul .e-menu-item .e-caret {