@syncfusion/blazor-themes 20.4.44 → 20.4.49

package/SCSS-Themes/material.scss

@@ -2072,16 +2072,16 @@ $acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;
     border: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
     border-radius: $acrdn-border-radius;
 
-    .e-active {
-      background: $acrdn-active-bg-color;
-    }
-
     .e-acrdn-item {
       border-color: $acrdn-item-border-color;
       border-style: $acrdn-item-border-nav-type;
       border-width: $acrdn-item-border-size;
       border-radius: $acrdn-item-border-radius;
 
+      &.e-active {
+        background: $acrdn-active-bg-color;
+      }
+
       &.e-select:last-child {
         border-bottom: $acrdn-item-select-last-child-border-bottom;
         border-radius: $acrdn-item-select-last-child-border-radius;
@@ -27215,6 +27215,10 @@ $cbox-border-style: solid !default;
     }
   }
 
+  .e-checkbox-wrapper[readonly] {
+    pointer-events: none;
+  }
+
   .e-small .e-checkbox-wrapper,
   .e-small.e-checkbox-wrapper,
   .e-small .e-css.e-checkbox-wrapper,
@@ -29459,6 +29463,9 @@ $drop-down-btn-bigger-popup-margin-top: 0 !default;
 
     .e-caret {
       font-size: $drop-down-btn-caret-icon-font-size;
+      @if $skin-name == 'FluentUI' or $skin-name == 'highcontrast' {
+        margin-top: 0;
+      }
     }
 
     &.e-vertical {
@@ -34508,12 +34515,26 @@ $cpicker-blazor-bigger-input-margin: calc(3.425% - 2.38px) !default;
           & .e-slider-track {
             background: linear-gradient(to left, $cpicker-gradient-0 0, $cpicker-gradient-16 16%, $cpicker-gradient-33 33%, $cpicker-gradient-50 50%, $cpicker-gradient-67 67%, $cpicker-gradient-84 84%, $cpicker-gradient-100 100%);
           }
+
+          & .e-handle {
+            @if $skin-name == 'FluentUI' {
+              top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
+            }
+          }
         }
 
         & .e-preview-container {
           margin-left: 0;
           margin-right: $cpicker-preview-margin-left;
         }
+
+        & .e-opacity-slider {
+          & .e-handle-first {
+            @if $skin-name == 'FluentUI' {
+              top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
+            }
+          }
+        }
       }
 
       & .e-selected-value {
@@ -35314,7 +35335,9 @@ $cmenu-hover-icon-color: $cmenu-icon-color !default;
   }
 
   &.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;
   }
 
@@ -35507,28 +35530,34 @@ $cmenu-hover-icon-color: $cmenu-icon-color !default;
   .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;
+    }
   }
 }
 
 
 @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;
+    }
   }
 }
 
@@ -54178,6 +54207,7 @@ $menu-header-icon-padding: 0 16px !default;
             line-height: $menu-li-height;
             margin-right: $menu-icon-margin-right;
             text-align: center;
+            margin-bottom: 4px;
           }
 
           & .e-caret {
@@ -54831,7 +54861,7 @@ $menu-header-icon-padding: 0 16px !default;
 
     @at-root {
       & .e-menu {
-        @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
+        @if $skin-name == 'bootstrap4' {
           background-color: $cmenu-ul-bgcolor;
         }
         @else {
@@ -57266,6 +57296,7 @@ $ddl-sel-chip-close-mobile-left: 12px !default;
 $ddl-chip-sel-mobile-close-height: 40px !default;
 $ddl-chip-sel-mobile-close-margin: 0 0 0 0 !default;
 $ddl-input-text-indent: 0 !default;
+$ddl-input-placeholder-padding: 4px 0 4px 0 !default;
 $ddl-rtl-chip-sel-close-left: -12px !default;
 $ddl-popup-active-focus-bg-color: $grey-300 !default;
 $ddl-popup-active-focus-font-color: $accent !default;
@@ -57821,8 +57852,8 @@ $filled-multiselect-chip-hover-bg-color: darken($grey-300, 7%) !default;
   height: $ddl-input-height;
   min-height: $ddl-input-height;
   outline: none;
-  padding: 0;
-  text-indent: $ddl-input-text-indent;
+  padding: $ddl-input-placeholder-padding;
+  text-indent: 0;
 }
 
 .e-multiselect.e-filled .e-multi-select-wrapper input[type = 'text'] {
@@ -76208,9 +76239,16 @@ $grid-dropitems-count-margin-left: -8px !default;
         margin-top: $grid-reorder-arrow-top-margin;
       }
 
+      .e-gridheader .e-headercontent .e-reorderuparrow-virtual {
+        margin-top: $grid-reorder-virtualarrow-top-margin;
+      }
+
       .e-gridheader .e-headercontent .e-reorderdownarrow {
         margin-top: $grid-reorder-downarrow-top-margin;
       }
+      .e-gridheader .e-headercontent .e-reorderdownarrow-virtual {
+        margin-top: $grid-reorder-virtualdownarrow-top-margin;
+      }
 
       .e-masked-cell.e-rowcell .e-virtualcell {
         background-color: $grid-maskedcell-virtual-background-color;
@@ -76261,6 +76299,11 @@ $grid-dropitems-count-margin-left: -8px !default;
       .e-cc-contentdiv .e-choosercheck {
         white-space: $grid-filter-checkbox-white-space;
       }
+	  
+      .e-filterdiv .e-multiselect.e-input-group:not(.e-rtl),
+      .e-fltrtempdiv .e-multiselect.e-input-group:not(.e-rtl){
+        text-align: left;
+      }
     }
   }
 }
@@ -83012,7 +83055,7 @@ $rte-drop-text-mobile-width: 250px !default;
           font-size: $rte-toolbar-big-icon-size;
         }
 
-        .e-toolbar-item .e-font-color .e-selected-color.e-icons::before,
+        .e-toolbar-item .e-rte-font-color .e-selected-color.e-icons::before,
         .e-toolbar-item .e-background-color .e-selected-color.e-icons::before {
           top: -20px;
         }
@@ -83256,13 +83299,13 @@ $rte-drop-text-mobile-width: 250px !default;
             padding-right: $rte-drop-btn-action-padding-right;
           }
 
-          .e-font-color .e-selected-color.e-icons::before {
+          .e-rte-font-color .e-selected-color.e-icons::before {
             font-size: 12px;
             position: relative;
             top: -18px;
           }
 
-          .e-font-color.e-icons::before {
+          .e-rte-font-color.e-icons::before {
             font-size: 13px;
           }
 
@@ -85546,7 +85589,7 @@ $rte-drop-text-mobile-width: 250px !default;
       content: '\e35f';
     }
 
-    .e-font-color::before {
+    .e-rte-font-color::before {
       content: '\e34c';
     }
 
@@ -103031,6 +103074,12 @@ $pivotpager-single-size-title-padding: 14px !default;
                   background: $pivotgrid-grp-bg-hover-color;
                 }
               }
+
+              &:focus {
+                @if ($skin-name =='bootstrap4') {
+                  background: $pivotgrid-grp-bg-hover-color;
+                }
+              }
             }
           }
         }
@@ -103126,20 +103175,28 @@ $pivotpager-single-size-title-padding: 14px !default;
           @if ($pivotgrid-skin == 'bootstrap4') {
             background-color: $gray-600;
             border-radius: $pivotgrid-default-border-radius;
-        }
+          }
 
-        .e-menu-icon,
-        .e-icons{
-          @if ($pivotgrid-skin == 'bootstrap4') {
-            color: $white;
+          .e-menu-icon,
+          .e-icons{
+            @if ($pivotgrid-skin == 'bootstrap4') {
+              color: $white;
+            }
+
+            @if ($pivotgrid-skin == 'FluentUI') {
+              color: $pivotgrid-active-color;
+            }
           }
+        }
 
-          @if ($pivotgrid-skin == 'FluentUI') {
-            color: $pivotgrid-active-color;
+        ul.e-menu {
+          @if ($pivotgrid-skin == 'fabric') or ($pivotgrid-skin == 'fabric-dark') or
+          ($pivotgrid-skin == 'highcontrast') or ($pivotgrid-skin == 'highcontrast-light') {
+            padding-right: 0 !important;
+            padding-left: 0 !important;
           }
         }
       }
-      }
 
       .e-tab .e-tab-header .e-toolbar-item.e-active {
         margin-left: 18px !important;
@@ -103634,13 +103691,13 @@ $pivotpager-single-size-title-padding: 14px !default;
     .e-toolbar .e-tbar-btn {
       @if ($skin-name == 'tailwind') {
         background-color: transparent;
-    }
+      }
 
       &:hover {
         @if ($skin-name == 'tailwind') {
           background-color: $pivot-toolbar-icon-hover-color;
-    }
-    }
+        }
+      }
     }
 
 
@@ -107865,7 +107922,7 @@ $schedule-tree-content-color: $shadow;
       vertical-align: top;
 
       &.e-translate {
-        transition: transform .3s ease 0s;
+        transition: transform .1s ease 0s;
       }
     }
 
@@ -112721,6 +112778,12 @@ $image-editor-contextual-toolbar: $grey-50 !default;
       border-top: $image-editor-border;
     }
 
+    & .e-canvas-wrapper {
+      & .e-textarea {
+        line-height: initial !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
+
     & .e-bottom-toolbar {
       border-top: $image-editor-border;
     }

package/SCSS-Themes/navigations/accordion/bootstrap-dark.scss

@@ -537,16 +537,16 @@ $acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;
     border: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
     border-radius: $acrdn-border-radius;
 
-    .e-active {
-      background: $acrdn-active-bg-color;
-    }
-
     .e-acrdn-item {
       border-color: $acrdn-item-border-color;
       border-style: $acrdn-item-border-nav-type;
       border-width: $acrdn-item-border-size;
       border-radius: $acrdn-item-border-radius;
 
+      &.e-active {
+        background: $acrdn-active-bg-color;
+      }
+
       &.e-select:last-child {
         border-bottom: $acrdn-item-select-last-child-border-bottom;
         border-radius: $acrdn-item-select-last-child-border-radius;

package/SCSS-Themes/navigations/accordion/bootstrap.scss

@@ -542,16 +542,16 @@ $acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;
     border: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
     border-radius: $acrdn-border-radius;
 
-    .e-active {
-      background: $acrdn-active-bg-color;
-    }
-
     .e-acrdn-item {
       border-color: $acrdn-item-border-color;
       border-style: $acrdn-item-border-nav-type;
       border-width: $acrdn-item-border-size;
       border-radius: $acrdn-item-border-radius;
 
+      &.e-active {
+        background: $acrdn-active-bg-color;
+      }
+
       &.e-select:last-child {
         border-bottom: $acrdn-item-select-last-child-border-bottom;
         border-radius: $acrdn-item-select-last-child-border-radius;

package/SCSS-Themes/navigations/accordion/bootstrap4.scss

@@ -545,16 +545,16 @@ $acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;
     border: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
     border-radius: $acrdn-border-radius;
 
-    .e-active {
-      background: $acrdn-active-bg-color;
-    }
-
     .e-acrdn-item {
       border-color: $acrdn-item-border-color;
       border-style: $acrdn-item-border-nav-type;
       border-width: $acrdn-item-border-size;
       border-radius: $acrdn-item-border-radius;
 
+      &.e-active {
+        background: $acrdn-active-bg-color;
+      }
+
       &.e-select:last-child {
         border-bottom: $acrdn-item-select-last-child-border-bottom;
         border-radius: $acrdn-item-select-last-child-border-radius;

package/SCSS-Themes/navigations/accordion/bootstrap5-dark.scss

@@ -542,16 +542,16 @@ $acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;
     border: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
     border-radius: $acrdn-border-radius;
 
-    .e-active {
-      background: $acrdn-active-bg-color;
-    }
-
     .e-acrdn-item {
       border-color: $acrdn-item-border-color;
       border-style: $acrdn-item-border-nav-type;
       border-width: $acrdn-item-border-size;
       border-radius: $acrdn-item-border-radius;
 
+      &.e-active {
+        background: $acrdn-active-bg-color;
+      }
+
       &.e-select:last-child {
         border-bottom: $acrdn-item-select-last-child-border-bottom;
         border-radius: $acrdn-item-select-last-child-border-radius;

package/SCSS-Themes/navigations/accordion/bootstrap5.scss

@@ -542,16 +542,16 @@ $acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;
     border: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
     border-radius: $acrdn-border-radius;
 
-    .e-active {
-      background: $acrdn-active-bg-color;
-    }
-
     .e-acrdn-item {
       border-color: $acrdn-item-border-color;
       border-style: $acrdn-item-border-nav-type;
       border-width: $acrdn-item-border-size;
       border-radius: $acrdn-item-border-radius;
 
+      &.e-active {
+        background: $acrdn-active-bg-color;
+      }
+
       &.e-select:last-child {
         border-bottom: $acrdn-item-select-last-child-border-bottom;
         border-radius: $acrdn-item-select-last-child-border-radius;

package/SCSS-Themes/navigations/accordion/fabric-dark.scss

@@ -540,16 +540,16 @@ $acrdn-item-exp-not-selected-hdr-focus-border-color: $acrdn-item-exp-hdr-focus-b
     border: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
     border-radius: $acrdn-border-radius;
 
-    .e-active {
-      background: $acrdn-active-bg-color;
-    }
-
     .e-acrdn-item {
       border-color: $acrdn-item-border-color;
       border-style: $acrdn-item-border-nav-type;
       border-width: $acrdn-item-border-size;
       border-radius: $acrdn-item-border-radius;
 
+      &.e-active {
+        background: $acrdn-active-bg-color;
+      }
+
       &.e-select:last-child {
         border-bottom: $acrdn-item-select-last-child-border-bottom;
         border-radius: $acrdn-item-select-last-child-border-radius;

package/SCSS-Themes/navigations/accordion/fabric.scss

@@ -545,16 +545,16 @@ $acrdn-item-exp-not-selected-hdr-focus-border-color: $acrdn-item-exp-hdr-focus-b
     border: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
     border-radius: $acrdn-border-radius;
 
-    .e-active {
-      background: $acrdn-active-bg-color;
-    }
-
     .e-acrdn-item {
       border-color: $acrdn-item-border-color;
       border-style: $acrdn-item-border-nav-type;
       border-width: $acrdn-item-border-size;
       border-radius: $acrdn-item-border-radius;
 
+      &.e-active {
+        background: $acrdn-active-bg-color;
+      }
+
       &.e-select:last-child {
         border-bottom: $acrdn-item-select-last-child-border-bottom;
         border-radius: $acrdn-item-select-last-child-border-radius;

package/SCSS-Themes/navigations/accordion/fluent-dark.scss

@@ -542,16 +542,16 @@ $acrdn-item-exp-not-selected-hdr-focus-border-color: $content-text-color !defaul
     border: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
     border-radius: $acrdn-border-radius;
 
-    .e-active {
-      background: $acrdn-active-bg-color;
-    }
-
     .e-acrdn-item {
       border-color: $acrdn-item-border-color;
       border-style: $acrdn-item-border-nav-type;
       border-width: $acrdn-item-border-size;
       border-radius: $acrdn-item-border-radius;
 
+      &.e-active {
+        background: $acrdn-active-bg-color;
+      }
+
       &.e-select:last-child {
         border-bottom: $acrdn-item-select-last-child-border-bottom;
         border-radius: $acrdn-item-select-last-child-border-radius;

package/SCSS-Themes/navigations/accordion/fluent.scss

@@ -542,16 +542,16 @@ $acrdn-item-exp-not-selected-hdr-focus-border-color: $content-text-color !defaul
     border: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
     border-radius: $acrdn-border-radius;
 
-    .e-active {
-      background: $acrdn-active-bg-color;
-    }
-
     .e-acrdn-item {
       border-color: $acrdn-item-border-color;
       border-style: $acrdn-item-border-nav-type;
       border-width: $acrdn-item-border-size;
       border-radius: $acrdn-item-border-radius;
 
+      &.e-active {
+        background: $acrdn-active-bg-color;
+      }
+
       &.e-select:last-child {
         border-bottom: $acrdn-item-select-last-child-border-bottom;
         border-radius: $acrdn-item-select-last-child-border-radius;

package/SCSS-Themes/navigations/accordion/highcontrast.scss

@@ -567,16 +567,16 @@ $acrdn-item-exp-not-selected-hdr-focus-border-color: $acrdn-focus-exp-hdr-focus-
     border: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
     border-radius: $acrdn-border-radius;
 
-    .e-active {
-      background: $acrdn-active-bg-color;
-    }
-
     .e-acrdn-item {
       border-color: $acrdn-item-border-color;
       border-style: $acrdn-item-border-nav-type;
       border-width: $acrdn-item-border-size;
       border-radius: $acrdn-item-border-radius;
 
+      &.e-active {
+        background: $acrdn-active-bg-color;
+      }
+
       &.e-select:last-child {
         border-bottom: $acrdn-item-select-last-child-border-bottom;
         border-radius: $acrdn-item-select-last-child-border-radius;

package/SCSS-Themes/navigations/accordion/material-dark.scss

@@ -543,16 +543,16 @@ $acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;
     border: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
     border-radius: $acrdn-border-radius;
 
-    .e-active {
-      background: $acrdn-active-bg-color;
-    }
-
     .e-acrdn-item {
       border-color: $acrdn-item-border-color;
       border-style: $acrdn-item-border-nav-type;
       border-width: $acrdn-item-border-size;
       border-radius: $acrdn-item-border-radius;
 
+      &.e-active {
+        background: $acrdn-active-bg-color;
+      }
+
       &.e-select:last-child {
         border-bottom: $acrdn-item-select-last-child-border-bottom;
         border-radius: $acrdn-item-select-last-child-border-radius;

package/SCSS-Themes/navigations/accordion/material.scss

@@ -539,16 +539,16 @@ $acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;
     border: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
     border-radius: $acrdn-border-radius;
 
-    .e-active {
-      background: $acrdn-active-bg-color;
-    }
-
     .e-acrdn-item {
       border-color: $acrdn-item-border-color;
       border-style: $acrdn-item-border-nav-type;
       border-width: $acrdn-item-border-size;
       border-radius: $acrdn-item-border-radius;
 
+      &.e-active {
+        background: $acrdn-active-bg-color;
+      }
+
       &.e-select:last-child {
         border-bottom: $acrdn-item-select-last-child-border-bottom;
         border-radius: $acrdn-item-select-last-child-border-radius;

package/SCSS-Themes/navigations/accordion/tailwind-dark.scss

@@ -541,16 +541,16 @@ $acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;
     border: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
     border-radius: $acrdn-border-radius;
 
-    .e-active {
-      background: $acrdn-active-bg-color;
-    }
-
     .e-acrdn-item {
       border-color: $acrdn-item-border-color;
       border-style: $acrdn-item-border-nav-type;
       border-width: $acrdn-item-border-size;
       border-radius: $acrdn-item-border-radius;
 
+      &.e-active {
+        background: $acrdn-active-bg-color;
+      }
+
       &.e-select:last-child {
         border-bottom: $acrdn-item-select-last-child-border-bottom;
         border-radius: $acrdn-item-select-last-child-border-radius;

package/SCSS-Themes/navigations/accordion/tailwind.scss

@@ -541,16 +541,16 @@ $acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;
     border: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
     border-radius: $acrdn-border-radius;
 
-    .e-active {
-      background: $acrdn-active-bg-color;
-    }
-
     .e-acrdn-item {
       border-color: $acrdn-item-border-color;
       border-style: $acrdn-item-border-nav-type;
       border-width: $acrdn-item-border-size;
       border-radius: $acrdn-item-border-radius;
 
+      &.e-active {
+        background: $acrdn-active-bg-color;
+      }
+
       &.e-select:last-child {
         border-bottom: $acrdn-item-select-last-child-border-bottom;
         border-radius: $acrdn-item-select-last-child-border-radius;

package/SCSS-Themes/navigations/context-menu/bootstrap-dark.scss

@@ -174,7 +174,9 @@ $cmenu-li-selected-outline-offset: 0 !default;
   }
 
   &.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;
   }
 
@@ -367,28 +369,34 @@ $cmenu-li-selected-outline-offset: 0 !default;
   .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;
+    }
   }
 }
 
 
 @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;
+    }
   }
 }