@syncfusion/ej2-navigations 21.2.9 → 22.1.34

package/styles/breadcrumb/_material3-definition.scss

@@ -0,0 +1,60 @@
+// Size variables
+$breadcrumb-skin: 'Material3' !default;
+$breadcrumb-last-item-font-weight: $font-weight-normal !default;
+$breadcrumb-font-size: $text-sm !default;
+$breadcrumb-bigger-font-size: $text-base !default;
+$breadcrumb-icon-font-size: $text-sm !default;
+$breadcrumb-icon-bigger-font-size: $text-base !default;
+$breadcrumb-padding: 4px 8px !default;
+$breadcrumb-padding-left: 0 !default;
+$breadcrumb-padding-right: 0 !default;
+$breadcrumb-bigger-padding: 6px 12px !default;
+$breadcrumb-separator-padding: 0 4px !default;
+$breadcrumb-separator-bigger-padding: 0 4px !default;
+$breadcrumb-icon-color: rgba($icon-color) !default;
+$breadcrumb-icon-right-padding: 8px !default;
+$breadcrumb-icon-bigger-right-padding: 8px !default;
+$breadcrumb-collapsed-icon-padding: 4px 4px !default;
+$breadcrumb-collapsed-icon-bigger-padding: 5px 5px !default;
+$breadcrumb-sibling-separator-padding: 0 !default;
+$breadcrumb-sibling-separator-margin-left: -8px !default;
+$breadcrumb-icon-item-padding: 0 !default;
+$breadcrumb-collapsed-icon-font-size: $text-sm !default;
+$breadcrumb-collapsed-icon-bigger-font-size: $text-base !default;
+$breadcrumb-item-focus-padding: 1px !default;
+$breadcrumb-item-focus-bigger-padding: 1px !default;
+$breadcrumb-icon-only-item-padding: 3px 5px !default;
+$breadcrumb-icon-only-item-focus-padding: 2px 4px !default;
+$breadcrumb-icon-only-item-next-separator-padding-left: 5px;
+$breadcrumb-icon-only-item-bigger-padding: 2px 4px !default;
+$breadcrumb-icon-only-item-focus-bigger-padding: 1px 3px !default;
+$breadcrumb-scroll-mode-lineheight: 30px !default;
+$breadcrumb-popup-item-padding: 0 12px !default;
+$breadcrumb-popup-border-radius: 4px !default;
+$breadcrumb-popup-item-height: 32px !default;
+$cmenu-li-hover-outline-offset: 0 !default;
+$breadcrumb-popup-item-bigger-height: 36px !default;
+
+// Color variables
+$breadcrumb-separator-color: rgba($content-text-color) !default;
+$breadcrumb-item-color: rgba($content-text-color-alt1) !default;
+$breadcrumb-item-hover-color: rgba($content-text-color-alt1, .08) !default;
+$breadcrumb-item-focus-color: rgba($content-text-color, .08) !default;
+$breadcrumb-item-active-color: rgba($content-text-color-alt1, .12) !default;
+$breadcrumb-last-item-font-color: rgba($content-text-color) !default;
+$breadcrumb-collapsed-icon-hover-bgcolor: rgba($icon-color, .08) !default;
+$breadcrumb-collapsed-icon-active-bgcolor: rgba($icon-color, .12) !default;
+$breadcrumb-collapsed-icon-focus-bgcolor: rgba($icon-color, .08) !default;
+$breadcrumb-collapsed-icon-color: rgba($icon-color) !default;
+$breadcrumb-collapsed-icon-hover-color: rgba($icon-color) !default;
+$breadcrumb-disabled-item-color: $content-text-color-disabled !default;
+$breadcrumb-icon-interaction-color: rgba($icon-color) !default;
+$breadcrumb-item-focus-border: 1px solid darken-color(rgba($primary-outline), 10%) !default;
+$breadcrumb-popup-item-color: rgba($flyout-text-color) !default;
+$breadcrumb-popup-border: 1px solid rgba($border-light) !default;
+$breadcrumb-popup-bgcolor: $flyout-bg-color !default;
+$breadcrumb-popup-box-shadow: $shadow-md !default;
+$breadcrumb-popup-item-hover-bgcolor: $flyout-bg-color-hover !default;
+$breadcrumb-popup-item-hover-color: rgba($content-text-color-focus) !default;
+$breadcrumb-popup-item-hover-outline: 0 solid rgba($border-light) !default;
+$breadcrumb-bgcolor: $transparent !default;

package/styles/breadcrumb/_theme.scss

@@ -10,6 +10,7 @@
         &:focus {
           @if $skin-name == 'Material3' {
             background: $breadcrumb-item-hover-color;
+            border-radius: 4px;
           }
           @else {
             color: $breadcrumb-item-hover-color;
@@ -25,6 +26,7 @@
         &:active {
           @if $skin-name == 'Material3' {
             background: $breadcrumb-item-active-color;
+            border-radius: 4px;
           }
           @else {
             color: $breadcrumb-item-active-color;
@@ -35,11 +37,11 @@
       @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' {
         &:not([data-active-item]):not(.e-breadcrumb-separator) {
           &:hover {
-            background-color: $breadcrumb-item-hover-bgcolor;
+            background: $breadcrumb-item-hover-bgcolor;
           }
 
           &:active {
-            background-color: $breadcrumb-item-active-bgcolor;
+            background: $breadcrumb-item-active-bgcolor;
           }
         }
       }
@@ -47,18 +49,18 @@
       @if $breadcrumb-skin == 'material' or $breadcrumb-skin == 'bootstrap' or $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'tailwind' {
         &.e-icon-item {
           &:hover {
-            background-color: $breadcrumb-collapsed-icon-hover-bgcolor;
+            background: $breadcrumb-collapsed-icon-hover-bgcolor;
             color: $breadcrumb-collapsed-icon-hover-color;
           }
 
           &:active {
-            background-color: $breadcrumb-collapsed-icon-active-bgcolor;
+            background: $breadcrumb-collapsed-icon-active-bgcolor;
             color: $breadcrumb-collapsed-icon-hover-color;
           }
 
           @if $breadcrumb-skin == 'material' or $breadcrumb-skin == 'bootstrap' {
             .e-breadcrumb-text:focus {
-              background-color: $breadcrumb-collapsed-icon-focus-bgcolor;
+              background: $breadcrumb-collapsed-icon-focus-bgcolor;
               color: $breadcrumb-collapsed-icon-hover-color;
             }
           }
@@ -119,12 +121,12 @@
       color: $breadcrumb-collapsed-icon-color;
 
       &:hover {
-        background-color: $breadcrumb-collapsed-icon-hover-bgcolor;
+        background: $breadcrumb-collapsed-icon-hover-bgcolor;
         color: $breadcrumb-collapsed-icon-hover-color;
       }
 
       &:active {
-        background-color: $breadcrumb-collapsed-icon-active-bgcolor;
+        background: $breadcrumb-collapsed-icon-active-bgcolor;
         @if $skin-name == 'FluentUI' {
           color: $breadcrumb-collapsed-icon-active-color;
         }
@@ -139,7 +141,7 @@
           color: $breadcrumb-collapsed-icon-focus-color;
         }
         @else {
-          background-color: $breadcrumb-collapsed-icon-focus-bgcolor;
+          background: $breadcrumb-collapsed-icon-focus-bgcolor;
           color: $breadcrumb-collapsed-icon-hover-color;
         }
       }
@@ -157,19 +159,19 @@
   }
 
   .e-breadcrumb-popup {
-    background-color: $breadcrumb-popup-bgcolor;
+    background: $breadcrumb-popup-bgcolor;
 
     .e-breadcrumb-text {
       color: $breadcrumb-popup-item-color;
 
       &:hover {
-        background-color: $breadcrumb-popup-item-hover-bgcolor;
+        background: $breadcrumb-popup-item-hover-bgcolor;
         color: $breadcrumb-popup-item-hover-color;
       }
     }
 
     .e-breadcrumb-item .e-breadcrumb-text:focus {
-      background-color: $breadcrumb-popup-item-hover-bgcolor;
+      background: $breadcrumb-popup-item-hover-bgcolor;
       color: $breadcrumb-popup-item-hover-color;
     }
   }

package/styles/breadcrumb/bootstrap-dark.css

@@ -326,15 +326,15 @@
   color: #57a5ff;
 }
 .e-breadcrumb .e-breadcrumb-item.e-icon-item:hover {
-  background-color: #484848;
+  background: #484848;
   color: #acacac;
 }
 .e-breadcrumb .e-breadcrumb-item.e-icon-item:active {
-  background-color: #585858;
+  background: #585858;
   color: #acacac;
 }
 .e-breadcrumb .e-breadcrumb-item.e-icon-item .e-breadcrumb-text:focus {
-  background-color: #676767;
+  background: #676767;
   color: #acacac;
 }
 .e-breadcrumb .e-breadcrumb-item[data-active-item] .e-breadcrumb-text {
@@ -357,17 +357,17 @@
 }
 .e-breadcrumb .e-breadcrumb-collapsed:hover,
 .e-breadcrumb .e-breadcrumb-menu:hover {
-  background-color: #484848;
+  background: #484848;
   color: #acacac;
 }
 .e-breadcrumb .e-breadcrumb-collapsed:active,
 .e-breadcrumb .e-breadcrumb-menu:active {
-  background-color: #585858;
+  background: #585858;
   color: #acacac;
 }
 .e-breadcrumb .e-breadcrumb-collapsed:focus,
 .e-breadcrumb .e-breadcrumb-menu:focus {
-  background-color: #676767;
+  background: #676767;
   color: #acacac;
 }
 .e-breadcrumb.e-disabled .e-breadcrumb-item .e-breadcrumb-text,
@@ -380,16 +380,16 @@
 }
 
 .e-breadcrumb-popup {
-  background-color: #313131;
+  background: #313131;
 }
 .e-breadcrumb-popup .e-breadcrumb-text {
   color: #f0f0f0;
 }
 .e-breadcrumb-popup .e-breadcrumb-text:hover {
-  background-color: #484848;
+  background: #484848;
   color: #f0f0f0;
 }
 .e-breadcrumb-popup .e-breadcrumb-item .e-breadcrumb-text:focus {
-  background-color: #484848;
+  background: #484848;
   color: #f0f0f0;
 }

package/styles/breadcrumb/bootstrap.css

@@ -326,15 +326,15 @@
   color: #2a6496;
 }
 .e-breadcrumb .e-breadcrumb-item.e-icon-item:hover {
-  background-color: #e6e6e6;
+  background: #e6e6e6;
   color: #777;
 }
 .e-breadcrumb .e-breadcrumb-item.e-icon-item:active {
-  background-color: #ddd;
+  background: #ddd;
   color: #777;
 }
 .e-breadcrumb .e-breadcrumb-item.e-icon-item .e-breadcrumb-text:focus {
-  background-color: #e6e6e6;
+  background: #e6e6e6;
   color: #777;
 }
 .e-breadcrumb .e-breadcrumb-item[data-active-item] .e-breadcrumb-text {
@@ -357,17 +357,17 @@
 }
 .e-breadcrumb .e-breadcrumb-collapsed:hover,
 .e-breadcrumb .e-breadcrumb-menu:hover {
-  background-color: #e6e6e6;
+  background: #e6e6e6;
   color: #777;
 }
 .e-breadcrumb .e-breadcrumb-collapsed:active,
 .e-breadcrumb .e-breadcrumb-menu:active {
-  background-color: #ddd;
+  background: #ddd;
   color: #777;
 }
 .e-breadcrumb .e-breadcrumb-collapsed:focus,
 .e-breadcrumb .e-breadcrumb-menu:focus {
-  background-color: #e6e6e6;
+  background: #e6e6e6;
   color: #777;
 }
 .e-breadcrumb.e-disabled .e-breadcrumb-item .e-breadcrumb-text,
@@ -380,16 +380,16 @@
 }
 
 .e-breadcrumb-popup {
-  background-color: #fff;
+  background: #fff;
 }
 .e-breadcrumb-popup .e-breadcrumb-text {
   color: #777;
 }
 .e-breadcrumb-popup .e-breadcrumb-text:hover {
-  background-color: #f5f5f5;
+  background: #f5f5f5;
   color: #555;
 }
 .e-breadcrumb-popup .e-breadcrumb-item .e-breadcrumb-text:focus {
-  background-color: #f5f5f5;
+  background: #f5f5f5;
   color: #555;
 }

package/styles/breadcrumb/bootstrap4.css

@@ -326,15 +326,15 @@
   color: #004a99;
 }
 .e-breadcrumb .e-breadcrumb-item.e-icon-item:hover {
-  background-color: #dee2e6;
+  background: #dee2e6;
   color: #495057;
 }
 .e-breadcrumb .e-breadcrumb-item.e-icon-item:active {
-  background-color: #ced4da;
+  background: #ced4da;
   color: #495057;
 }
 .e-breadcrumb .e-breadcrumb-item.e-icon-item .e-breadcrumb-text:focus {
-  background-color: #dee2e6;
+  background: #dee2e6;
   color: #495057;
 }
 .e-breadcrumb .e-breadcrumb-item[data-active-item] .e-breadcrumb-text {
@@ -357,17 +357,17 @@
 }
 .e-breadcrumb .e-breadcrumb-collapsed:hover,
 .e-breadcrumb .e-breadcrumb-menu:hover {
-  background-color: #dee2e6;
+  background: #dee2e6;
   color: #495057;
 }
 .e-breadcrumb .e-breadcrumb-collapsed:active,
 .e-breadcrumb .e-breadcrumb-menu:active {
-  background-color: #ced4da;
+  background: #ced4da;
   color: #495057;
 }
 .e-breadcrumb .e-breadcrumb-collapsed:focus,
 .e-breadcrumb .e-breadcrumb-menu:focus {
-  background-color: #dee2e6;
+  background: #dee2e6;
   color: #495057;
 }
 .e-breadcrumb.e-disabled .e-breadcrumb-item .e-breadcrumb-text,
@@ -380,16 +380,16 @@
 }
 
 .e-breadcrumb-popup {
-  background-color: #fff;
+  background: #fff;
 }
 .e-breadcrumb-popup .e-breadcrumb-text {
   color: #6c757d;
 }
 .e-breadcrumb-popup .e-breadcrumb-text:hover {
-  background-color: #f2f4f6;
+  background: #f2f4f6;
   color: #212529;
 }
 .e-breadcrumb-popup .e-breadcrumb-item .e-breadcrumb-text:focus {
-  background-color: #f2f4f6;
+  background: #f2f4f6;
   color: #212529;
 }

package/styles/breadcrumb/bootstrap5-dark.css

@@ -345,11 +345,11 @@
   color: #0262ef;
 }
 .e-breadcrumb .e-breadcrumb-item.e-icon-item:hover {
-  background-color: #31373d;
+  background: #31373d;
   color: #adb5bd;
 }
 .e-breadcrumb .e-breadcrumb-item.e-icon-item:active {
-  background-color: #495057;
+  background: #495057;
   color: #adb5bd;
 }
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text:focus {
@@ -371,17 +371,17 @@
 }
 .e-breadcrumb .e-breadcrumb-collapsed:hover,
 .e-breadcrumb .e-breadcrumb-menu:hover {
-  background-color: #31373d;
+  background: #31373d;
   color: #adb5bd;
 }
 .e-breadcrumb .e-breadcrumb-collapsed:active,
 .e-breadcrumb .e-breadcrumb-menu:active {
-  background-color: #495057;
+  background: #495057;
   color: #adb5bd;
 }
 .e-breadcrumb .e-breadcrumb-collapsed:focus,
 .e-breadcrumb .e-breadcrumb-menu:focus {
-  background-color: #31373d;
+  background: #31373d;
   color: #adb5bd;
 }
 .e-breadcrumb.e-disabled .e-breadcrumb-item .e-breadcrumb-text,
@@ -394,16 +394,16 @@
 }
 
 .e-breadcrumb-popup {
-  background-color: #343a40;
+  background: #343a40;
 }
 .e-breadcrumb-popup .e-breadcrumb-text {
   color: #7b848d;
 }
 .e-breadcrumb-popup .e-breadcrumb-text:hover {
-  background-color: #444c54;
+  background: #444c54;
   color: #fff;
 }
 .e-breadcrumb-popup .e-breadcrumb-item .e-breadcrumb-text:focus {
-  background-color: #444c54;
+  background: #444c54;
   color: #fff;
 }

package/styles/breadcrumb/bootstrap5.css

@@ -345,11 +345,11 @@
   color: #024dbc;
 }
 .e-breadcrumb .e-breadcrumb-item.e-icon-item:hover {
-  background-color: #e9ecef;
+  background: #e9ecef;
   color: #6c757d;
 }
 .e-breadcrumb .e-breadcrumb-item.e-icon-item:active {
-  background-color: #ced4da;
+  background: #ced4da;
   color: #6c757d;
 }
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text:focus {
@@ -371,17 +371,17 @@
 }
 .e-breadcrumb .e-breadcrumb-collapsed:hover,
 .e-breadcrumb .e-breadcrumb-menu:hover {
-  background-color: #e9ecef;
+  background: #e9ecef;
   color: #6c757d;
 }
 .e-breadcrumb .e-breadcrumb-collapsed:active,
 .e-breadcrumb .e-breadcrumb-menu:active {
-  background-color: #ced4da;
+  background: #ced4da;
   color: #6c757d;
 }
 .e-breadcrumb .e-breadcrumb-collapsed:focus,
 .e-breadcrumb .e-breadcrumb-menu:focus {
-  background-color: #e9ecef;
+  background: #e9ecef;
   color: #6c757d;
 }
 .e-breadcrumb.e-disabled .e-breadcrumb-item .e-breadcrumb-text,
@@ -394,16 +394,16 @@
 }
 
 .e-breadcrumb-popup {
-  background-color: #fff;
+  background: #fff;
 }
 .e-breadcrumb-popup .e-breadcrumb-text {
   color: #6c757d;
 }
 .e-breadcrumb-popup .e-breadcrumb-text:hover {
-  background-color: #e9ecef;
+  background: #e9ecef;
   color: #212529;
 }
 .e-breadcrumb-popup .e-breadcrumb-item .e-breadcrumb-text:focus {
-  background-color: #e9ecef;
+  background: #e9ecef;
   color: #212529;
 }

package/styles/breadcrumb/fabric-dark.css

@@ -333,10 +333,10 @@
   color: #f8f8f8;
 }
 .e-breadcrumb .e-breadcrumb-item:not([data-active-item]):not(.e-breadcrumb-separator):hover {
-  background-color: #4a4848;
+  background: #4a4848;
 }
 .e-breadcrumb .e-breadcrumb-item:not([data-active-item]):not(.e-breadcrumb-separator):active {
-  background-color: #6f6c6c;
+  background: #6f6c6c;
 }
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text:focus {
   border: 1px solid #c8c8c8;
@@ -357,12 +357,12 @@
 }
 .e-breadcrumb .e-breadcrumb-collapsed:hover,
 .e-breadcrumb .e-breadcrumb-menu:hover {
-  background-color: #4a4848;
+  background: #4a4848;
   color: #38a9ff;
 }
 .e-breadcrumb .e-breadcrumb-collapsed:active,
 .e-breadcrumb .e-breadcrumb-menu:active {
-  background-color: #6f6c6c;
+  background: #6f6c6c;
   color: #38a9ff;
 }
 .e-breadcrumb .e-breadcrumb-collapsed:focus,
@@ -380,16 +380,16 @@
 }
 
 .e-breadcrumb-popup {
-  background-color: #282727;
+  background: #282727;
 }
 .e-breadcrumb-popup .e-breadcrumb-text {
   color: #f8f8f8;
 }
 .e-breadcrumb-popup .e-breadcrumb-text:hover {
-  background-color: #414040;
+  background: #414040;
   color: #fff;
 }
 .e-breadcrumb-popup .e-breadcrumb-item .e-breadcrumb-text:focus {
-  background-color: #414040;
+  background: #414040;
   color: #fff;
 }

package/styles/breadcrumb/fabric.css

@@ -333,10 +333,10 @@
   color: #333;
 }
 .e-breadcrumb .e-breadcrumb-item:not([data-active-item]):not(.e-breadcrumb-separator):hover {
-  background-color: #f4f4f4;
+  background: #f4f4f4;
 }
 .e-breadcrumb .e-breadcrumb-item:not([data-active-item]):not(.e-breadcrumb-separator):active {
-  background-color: #c8c8c8;
+  background: #c8c8c8;
 }
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text:focus {
   border: 1px solid #767676;
@@ -357,12 +357,12 @@
 }
 .e-breadcrumb .e-breadcrumb-collapsed:hover,
 .e-breadcrumb .e-breadcrumb-menu:hover {
-  background-color: #f4f4f4;
+  background: #f4f4f4;
   color: #0078d6;
 }
 .e-breadcrumb .e-breadcrumb-collapsed:active,
 .e-breadcrumb .e-breadcrumb-menu:active {
-  background-color: #c8c8c8;
+  background: #c8c8c8;
   color: #0078d6;
 }
 .e-breadcrumb .e-breadcrumb-collapsed:focus,
@@ -380,16 +380,16 @@
 }
 
 .e-breadcrumb-popup {
-  background-color: #fff;
+  background: #fff;
 }
 .e-breadcrumb-popup .e-breadcrumb-text {
   color: #333;
 }
 .e-breadcrumb-popup .e-breadcrumb-text:hover {
-  background-color: #f4f4f4;
+  background: #f4f4f4;
   color: #333;
 }
 .e-breadcrumb-popup .e-breadcrumb-item .e-breadcrumb-text:focus {
-  background-color: #f4f4f4;
+  background: #f4f4f4;
   color: #333;
 }

package/styles/breadcrumb/fluent-dark.css

@@ -333,12 +333,12 @@
 }
 .e-breadcrumb .e-breadcrumb-collapsed:hover,
 .e-breadcrumb .e-breadcrumb-menu:hover {
-  background-color: #252423;
+  background: #252423;
   color: #a19f9d;
 }
 .e-breadcrumb .e-breadcrumb-collapsed:active,
 .e-breadcrumb .e-breadcrumb-menu:active {
-  background-color: #323130;
+  background: #323130;
   color: #c8c6c4;
 }
 .e-breadcrumb .e-breadcrumb-collapsed:focus,
@@ -356,16 +356,16 @@
 }
 
 .e-breadcrumb-popup {
-  background-color: #252423;
+  background: #252423;
 }
 .e-breadcrumb-popup .e-breadcrumb-text {
   color: #a19f9d;
 }
 .e-breadcrumb-popup .e-breadcrumb-text:hover {
-  background-color: #323130;
+  background: #323130;
   color: #f3f2f1;
 }
 .e-breadcrumb-popup .e-breadcrumb-item .e-breadcrumb-text:focus {
-  background-color: #323130;
+  background: #323130;
   color: #f3f2f1;
 }

package/styles/breadcrumb/fluent.css

@@ -333,12 +333,12 @@
 }
 .e-breadcrumb .e-breadcrumb-collapsed:hover,
 .e-breadcrumb .e-breadcrumb-menu:hover {
-  background-color: #f3f2f1;
+  background: #f3f2f1;
   color: #605e5c;
 }
 .e-breadcrumb .e-breadcrumb-collapsed:active,
 .e-breadcrumb .e-breadcrumb-menu:active {
-  background-color: #e1dfdd;
+  background: #e1dfdd;
   color: #201f1e;
 }
 .e-breadcrumb .e-breadcrumb-collapsed:focus,
@@ -356,16 +356,16 @@
 }
 
 .e-breadcrumb-popup {
-  background-color: #fff;
+  background: #fff;
 }
 .e-breadcrumb-popup .e-breadcrumb-text {
   color: #605e5c;
 }
 .e-breadcrumb-popup .e-breadcrumb-text:hover {
-  background-color: #f3f2f1;
+  background: #f3f2f1;
   color: #201f1e;
 }
 .e-breadcrumb-popup .e-breadcrumb-item .e-breadcrumb-text:focus {
-  background-color: #f3f2f1;
+  background: #f3f2f1;
   color: #201f1e;
 }

package/styles/breadcrumb/highcontrast-light.css

@@ -333,10 +333,10 @@
   color: #fff;
 }
 .e-breadcrumb .e-breadcrumb-item:not([data-active-item]):not(.e-breadcrumb-separator):hover {
-  background-color: #ecf;
+  background: #ecf;
 }
 .e-breadcrumb .e-breadcrumb-item:not([data-active-item]):not(.e-breadcrumb-separator):active {
-  background-color: #400074;
+  background: #400074;
 }
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text:focus {
   border: 1px solid #400074;
@@ -364,12 +364,12 @@
 }
 .e-breadcrumb .e-breadcrumb-collapsed:hover,
 .e-breadcrumb .e-breadcrumb-menu:hover {
-  background-color: #ecf;
+  background: #ecf;
   color: #000;
 }
 .e-breadcrumb .e-breadcrumb-collapsed:active,
 .e-breadcrumb .e-breadcrumb-menu:active {
-  background-color: #400074;
+  background: #400074;
   color: #000;
 }
 .e-breadcrumb .e-breadcrumb-collapsed:focus,
@@ -387,16 +387,16 @@
 }
 
 .e-breadcrumb-popup {
-  background-color: #fff;
+  background: #fff;
 }
 .e-breadcrumb-popup .e-breadcrumb-text {
   color: #000;
 }
 .e-breadcrumb-popup .e-breadcrumb-text:hover {
-  background-color: #ecf;
+  background: #ecf;
   color: #000;
 }
 .e-breadcrumb-popup .e-breadcrumb-item .e-breadcrumb-text:focus {
-  background-color: #ecf;
+  background: #ecf;
   color: #000;
 }