@syncfusion/ej2-navigations 28.2.12 → 29.1.34

package/styles/tailwind.css

@@ -3786,7 +3786,7 @@
 
 .e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll,
 .e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll {
-  background-color: inherit;
+  background-color: #fff;
   border: 1px solid #e5e7eb;
 }
 .e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav,
@@ -4360,6 +4360,11 @@
   height: 38px;
   width: 100%;
 }
+@media screen and (max-width: 480px) {
+  .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-text-wrap {
+    height: 48px;
+  }
+}
 .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-tab-text {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -8208,6 +8213,11 @@
   position: absolute;
   width: 100%;
 }
+@supports (-webkit-overflow-scrolling: touch) {
+  .e-treeview .e-fullrow {
+    z-index: -1;
+  }
+}
 .e-treeview .e-checkbox-wrapper {
   margin: 0 0 0 6px;
   pointer-events: all;
@@ -8574,7 +8584,7 @@
   color: #111827;
 }
 .e-treeview .e-list-item.e-active.e-hover > .e-fullrow, .e-treeview .e-list-item.e-active.e-node-focus > .e-fullrow {
-  background-color: #d6d9e0;
+  background-color: rgb(213.8571428571, 217.2857142857, 224.1428571429);
   border-color: #f3f4f6;
 }
 .e-treeview .e-list-item.e-active.e-hover > .e-text-content, .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content {
@@ -8640,7 +8650,7 @@
   border-color: #e5e7eb;
 }
 .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content, .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-node-focus > .e-text-content {
-  background-color: #d6d9e0;
+  background-color: rgb(213.8571428571, 217.2857142857, 224.1428571429);
   border-color: #f3f4f6;
 }
 .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-active > .e-text-content, .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-hover > .e-text-content, .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-node-focus > .e-text-content {

package/styles/tailwind3-lite.css

@@ -3149,7 +3149,7 @@
 
 .e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll,
 .e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll {
-  background-color: inherit;
+  background-color: var(--color-sf-flyout-bg-color);
   border: 1px solid var(--color-sf-border-light);
 }
 .e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav,
@@ -3618,6 +3618,11 @@
   height: 40px;
   width: 100%;
 }
+@media screen and (max-width: 480px) {
+  .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-text-wrap {
+    height: 56px;
+  }
+}
 .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-tab-text {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -6263,6 +6268,11 @@
   position: absolute;
   width: 100%;
 }
+@supports (-webkit-overflow-scrolling: touch) {
+  .e-treeview .e-fullrow {
+    z-index: -1;
+  }
+}
 .e-treeview .e-checkbox-wrapper {
   margin: 0 0 0 8px;
   pointer-events: all;
@@ -6288,7 +6298,7 @@
   display: inline-block;
   line-height: 20px;
   margin: 0;
-  min-height: 20px;
+  min-height: 40px;
   font-weight: 500;
   padding: 10px 8px;
   text-decoration: none;

package/styles/tailwind3.css

@@ -3843,7 +3843,7 @@
 
 .e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll,
 .e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll {
-  background-color: inherit;
+  background-color: var(--color-sf-flyout-bg-color);
   border: 1px solid var(--color-sf-border-light);
 }
 .e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav,
@@ -4386,6 +4386,11 @@
   height: 40px;
   width: 100%;
 }
+@media screen and (max-width: 480px) {
+  .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-text-wrap {
+    height: 56px;
+  }
+}
 .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-tab-text {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -8232,6 +8237,11 @@
   position: absolute;
   width: 100%;
 }
+@supports (-webkit-overflow-scrolling: touch) {
+  .e-treeview .e-fullrow {
+    z-index: -1;
+  }
+}
 .e-treeview .e-checkbox-wrapper {
   margin: 0 0 0 8px;
   pointer-events: all;
@@ -8257,7 +8267,7 @@
   display: inline-block;
   line-height: 20px;
   margin: 0;
-  min-height: 20px;
+  min-height: 40px;
   font-weight: 500;
   padding: 10px 8px;
   text-decoration: none;
@@ -8755,6 +8765,7 @@
   line-height: 24px;
   min-height: 24px;
   padding: 12px 8px;
+  min-height: 48px;
 }
 .e-bigger .e-treeview .e-list-text .e-input-group,
 .e-treeview.e-bigger .e-list-text .e-input-group {

package/styles/toolbar/_bootstrap4-definition.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 $border-type: solid !default;
 $border-size: 1px !default;
 $tbar-btn-border: 1px solid transparent !default;
@@ -28,17 +30,17 @@ $tbar-hor-active-bg: $gray-600 !default;
 $tbar-pop-bg: $tbar-default-bg !default;
 $tbar-items-default-bg: $tbar-default-bg !default;
 $tbar-hover-bg: $gray-600 !default;
-$tbar-popup-hover-bg: darken($gray-600, 7.5%) !default;
+$tbar-popup-hover-bg: color.adjust($gray-600, $lightness: -7.5%) !default;
 $tbar-pressed-bg: $gray-600 !default;
 $tbar-btn-txt-font-size: 14px !default;
-$tbar-hover-border-color: darken($gray-600, 10%) !default;
+$tbar-hover-border-color: color.adjust($gray-600, $lightness: -10%) !default;
 $tbar-focus-bg: $tbar-hover-bg !default;
-$tbar-active-btn-bg: darken($gray-600, 10%) !default;
+$tbar-active-btn-bg: color.adjust($gray-600, $lightness: -10%) !default;
 $tbar-focus-border-color: $gray-600 !default;
 $tbar-press-bg: $tbar-hover-bg !default;
 $tbar-btn-press-bg: $tbar-press-bg !default;
 $tbar-press-border-color: $tbar-hover-border-color !default;
-$tbar-active-border-color: darken($gray-600, 12.5%) !default;
+$tbar-active-border-color: color.adjust($gray-600, $lightness: -12.5%) !default;
 $tbar-nrml-size: 38px !default;
 $tbar-bgr-size: 54px !default;
 $tbar-nrml-items-size: 38px !default;
@@ -145,8 +147,8 @@ $tbar-btn-active-text-color: inherit !default;
 $tbar-btn-text-color: $gray-700 !default;
 $tbar-btn-pressed-text-color: $white !default;
 $tbar-btn-pressed-focus-box-shadow: 0 0 0 3px rgba(130, 138, 145, .5) !default;
-$tbar-btn-pressed-bg: darken($gray-600, 10%) !default;
-$tbar-flat-btn-active-box-shadow: 0 0 0 .25em rgba(mix(lighten($tbar-hover-border-color, 50%), $tbar-active-border-color, 15%), .5) !default;
+$tbar-btn-pressed-bg: color.adjust($gray-600, $lightness: -10%) !default;
+$tbar-flat-btn-active-box-shadow: 0 0 0 .25em rgba(color.mix(color.adjust($tbar-hover-border-color, $lightness: 50%), $tbar-active-border-color, 15%), .5) !default;
 $tbar-ext-btn-focus-padding: 0 3px !default;
 $tbar-ext-btn-icon-padding: 0 !default;
 $tbar-ext-btn-icon-font-size: 14px !default;

package/styles/toolbar/_material-dark-definition.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 $tbar-skin: 'material' !default;
 $tbar-zero-value: 0 !default;
 $tbar-pop-icon-bgr-padding: 0 !default;
@@ -151,7 +153,7 @@ $tbar-btn-active-text-color: $tbar-default-icon-color !default;
 $tbar-btn-text-color: $grey-dark-font !default;
 $tbar-btn-pressed-text-color: $grey-dark-font !default;
 $tbar-btn-pressed-focus-box-shadow: none !default;
-$tbar-btn-pressed-bg: mix($grey-dark-font, transparent, 24%) !default;
+$tbar-btn-pressed-bg: color.mix($grey-dark-font, transparent, 24%) !default;
 $tbar-flat-btn-active-box-shadow: none !default;
 $tbar-ext-btn-focus-padding: 0 1.5px !default;
 $tbar-ext-btn-icon-padding: 0 !default;

package/styles/toolbar/_material-definition.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 $tbar-skin: 'material' !default;
 $tbar-pop-icon-bgr-padding: 0;
 $tbar-pop-btn-txt-bgr-pad: 0;
@@ -139,7 +141,7 @@ $tbar-btn-active-text-color: $tbar-hover-font !default;
 $tbar-btn-text-color: $tbar-default-font !default;
 $tbar-btn-pressed-text-color: rgba($grey-black, .87) !default;
 $tbar-btn-pressed-focus-box-shadow: none !default;
-$tbar-btn-pressed-bg: mix($tbar-btn-pressed-text-color, transparent, 24%) !default;
+$tbar-btn-pressed-bg: color.mix($tbar-btn-pressed-text-color, transparent, 24%) !default;
 $tbar-flat-btn-active-box-shadow: none !default;
 $tbar-ext-btn-focus-padding: 0 1.5px !default;
 $tbar-ext-btn-icon-padding: 0 !default;

package/styles/toolbar/bootstrap4.css

@@ -613,9 +613,9 @@
   color: #495057;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn.e-flat.e-active {
-  background: #545b62;
-  -webkit-box-shadow: 0 0 0 0.25em rgba(99, 105, 111, 0.5);
-          box-shadow: 0 0 0 0.25em rgba(99, 105, 111, 0.5);
+  background: rgb(84.3605150215, 91.3905579399, 97.6394849785);
+  -webkit-box-shadow: 0 0 0 0.25em rgba(99.058583691, 105.0384656652, 110.353916309, 0.5);
+          box-shadow: 0 0 0 0.25em rgba(99.058583691, 105.0384656652, 110.353916309, 0.5);
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn.e-flat.e-active .e-tbar-btn-text {
   color: #fff;
@@ -642,7 +642,7 @@
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:hover {
   background: #6c757d;
-  border-color: #545b62;
+  border-color: rgb(84.3605150215, 91.3905579399, 97.6394849785);
   border-style: solid;
   border-width: 1px;
   border-radius: 4px;
@@ -661,8 +661,8 @@
   color: inherit;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:active {
-  background: #545b62;
-  border-color: #545b62;
+  background: rgb(84.3605150215, 91.3905579399, 97.6394849785);
+  border-color: rgb(84.3605150215, 91.3905579399, 97.6394849785);
   border-style: solid;
   border-width: 1px;
   border-radius: 4px;
@@ -727,7 +727,7 @@
   content: "";
 }
 .e-toolbar .e-hor-nav:hover {
-  background: #5a6268;
+  background: rgb(90.2703862661, 97.7929184549, 104.4796137339);
   border-left: 0;
   color: #fff;
 }
@@ -740,7 +740,7 @@
   border-width: 0;
 }
 .e-toolbar .e-hor-nav:hover:active {
-  background: #5a6268;
+  background: rgb(90.2703862661, 97.7929184549, 104.4796137339);
   border-color: #adb5bd;
   border-style: solid;
   border-width: 3px 3px 3px 0;
@@ -791,7 +791,7 @@
   background: #007bff;
   -webkit-box-shadow: none;
           box-shadow: none;
-  border-color: #545b62;
+  border-color: rgb(84.3605150215, 91.3905579399, 97.6394849785);
   border-style: solid;
   border-width: 0;
 }
@@ -799,7 +799,7 @@
   background: #007bff;
   -webkit-box-shadow: none;
           box-shadow: none;
-  border-color: #545b62;
+  border-color: rgb(84.3605150215, 91.3905579399, 97.6394849785);
   border-style: solid;
   border-width: 0;
 }
@@ -835,7 +835,7 @@
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
   background: #6c757d;
   border-radius: 4px;
-  border-color: #545b62;
+  border-color: rgb(84.3605150215, 91.3905579399, 97.6394849785);
   border-style: solid;
   border-width: 1px;
 }
@@ -844,7 +844,7 @@
   border-radius: 4px;
   -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
           box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  border-color: #545b62;
+  border-color: rgb(84.3605150215, 91.3905579399, 97.6394849785);
   border-style: solid;
   border-width: 1px;
 }

package/styles/toolbar/bootstrap5-dark.css

@@ -615,16 +615,16 @@
 /* stylelint-disable property-no-vendor-prefix */
 .e-toolbar {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  background: #282d31;
-  border: 0 solid #444c54;
+  background: rgb(26.177027027, 29.35, 32.522972973);
+  border: 0 solid rgb(68.0034482759, 75.85, 83.6965517241);
   -webkit-box-shadow: none;
           box-shadow: none;
 }
 .e-toolbar .e-toolbar-items {
-  background: #282d31;
+  background: rgb(26.177027027, 29.35, 32.522972973);
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn {
-  background: #282d31;
+  background: rgb(26.177027027, 29.35, 32.522972973);
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
@@ -637,7 +637,7 @@
   color: #fff;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn.e-flat.e-active {
-  background: #565e64;
+  background: rgb(86.4, 93.6, 100);
   -webkit-box-shadow: none;
           box-shadow: none;
 }
@@ -645,18 +645,18 @@
   color: #fff;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn.e-flat.e-active:focus {
-  -webkit-box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
-          box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  -webkit-box-shadow: 0 0 0 4px rgba(130.05, 137.7, 144.5, 0.5);
+          box-shadow: 0 0 0 4px rgba(130.05, 137.7, 144.5, 0.5);
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
-  background: #5c636a;
+  background: rgb(91.8, 99.45, 106.25);
   border-radius: 4px;
   color: #adb5bd;
   border-color: #adb5bd;
   border-style: solid;
   border-width: 0;
-  -webkit-box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
-          box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  -webkit-box-shadow: 0 0 0 4px rgba(130.05, 137.7, 144.5, 0.5);
+          box-shadow: 0 0 0 4px rgba(130.05, 137.7, 144.5, 0.5);
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons {
   color: #fff;
@@ -666,7 +666,7 @@
   color: #fff;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:hover {
-  background: #5c636a;
+  background: rgb(91.8, 99.45, 106.25);
   border-color: #adb5bd;
   border-style: solid;
   border-width: 0;
@@ -687,8 +687,8 @@
   color: #fff;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:active {
-  background: #565e64;
-  border-color: #444c54;
+  background: rgb(86.4, 93.6, 100);
+  border-color: rgb(68.0034482759, 75.85, 83.6965517241);
   border-style: solid;
   border-width: 0;
   border-radius: 4px;
@@ -703,11 +703,11 @@
   color: #fff;
 }
 .e-toolbar .e-toolbar-item.e-separator {
-  border: solid #444c54;
+  border: solid rgb(68.0034482759, 75.85, 83.6965517241);
   border-width: 0 1px 0 0;
 }
 .e-toolbar .e-toolbar-item.e-overlay {
-  background: #282d31;
+  background: rgb(26.177027027, 29.35, 32.522972973);
   opacity: 0.5;
   color: #ced4da;
 }
@@ -718,19 +718,19 @@
   color: #ced4da;
 }
 .e-toolbar.e-vertical .e-hor-nav {
-  border: solid #444c54;
+  border: solid rgb(68.0034482759, 75.85, 83.6965517241);
   border-width: 0 0 0 0;
 }
 .e-toolbar.e-vertical.e-rtl .e-hor-nav {
-  border: solid #444c54;
+  border: solid rgb(68.0034482759, 75.85, 83.6965517241);
   border-width: 0 0 0 0;
 }
 .e-toolbar.e-vertical .e-toolbar-items .e-toolbar-item.e-separator {
   border-width: 0 0 1px 0;
 }
 .e-toolbar .e-hor-nav {
-  background: #282d31;
-  border: solid #444c54;
+  background: rgb(26.177027027, 29.35, 32.522972973);
+  border: solid rgb(68.0034482759, 75.85, 83.6965517241);
   border-width: 0 0 0 0;
 }
 .e-toolbar .e-hor-nav::after {
@@ -744,7 +744,7 @@
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #ced4da;
-  background: #282d31;
+  background: rgb(26.177027027, 29.35, 32.522972973);
 }
 .e-toolbar .e-hor-nav:active .e-icons {
   color: #adb5bd;
@@ -753,7 +753,7 @@
   content: "";
 }
 .e-toolbar .e-hor-nav:hover {
-  background: #5c636a;
+  background: rgb(91.8, 99.45, 106.25);
   border-left: 0;
   color: #fff;
 }
@@ -761,18 +761,18 @@
   color: inherit;
 }
 .e-toolbar .e-hor-nav:hover:not(.e-nav-active) {
-  border-color: #444c54;
+  border-color: rgb(68.0034482759, 75.85, 83.6965517241);
   border-style: solid;
   border-width: 0;
 }
 .e-toolbar .e-hor-nav:hover:active {
-  background: #5c636a;
-  border-color: #444c54;
+  background: rgb(91.8, 99.45, 106.25);
+  border-color: rgb(68.0034482759, 75.85, 83.6965517241);
   border-style: solid;
   border-width: 0;
 }
 .e-toolbar .e-hor-nav:focus {
-  background: #5c636a;
+  background: rgb(91.8, 99.45, 106.25);
   color: #fff;
   border-color: #adb5bd;
   border-style: solid;
@@ -783,16 +783,16 @@
 }
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active,
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active:not(.e-expended-nav) {
-  background: #5c636a;
+  background: rgb(91.8, 99.45, 106.25);
   -webkit-box-shadow: none;
           box-shadow: none;
-  border-color: #5c636a;
+  border-color: rgb(91.8, 99.45, 106.25);
   border-style: solid;
   border-width: 0;
 }
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active:focus,
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active:not(.e-expended-nav):focus {
-  border-color: #5c636a;
+  border-color: rgb(91.8, 99.45, 106.25);
   border-style: solid;
   border-width: 0;
 }
@@ -806,7 +806,7 @@
 }
 .e-toolbar .e-toolbar-pop {
   background: #343a40;
-  border: 0 solid #444c54;
+  border: 0 solid rgb(68.0034482759, 75.85, 83.6965517241);
   -webkit-box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
           box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
 }
@@ -814,7 +814,7 @@
   background: transparent;
 }
 .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:hover {
-  background: #5c636a;
+  background: rgb(91.8, 99.45, 106.25);
   -webkit-box-shadow: none;
           box-shadow: none;
   border-color: #adb5bd;
@@ -822,15 +822,15 @@
   border-width: 0;
 }
 .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:active {
-  background: #565e64;
+  background: rgb(86.4, 93.6, 100);
   -webkit-box-shadow: none;
           box-shadow: none;
-  border-color: #444c54;
+  border-color: rgb(68.0034482759, 75.85, 83.6965517241);
   border-style: solid;
   border-width: 0;
 }
 .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus {
-  background: #5c636a;
+  background: rgb(91.8, 99.45, 106.25);
   border-color: #adb5bd;
   border-style: solid;
   border-width: 0;
@@ -844,55 +844,55 @@
   background: transparent;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn {
-  background: #282d31;
+  background: rgb(26.177027027, 29.35, 32.522972973);
   -webkit-box-shadow: none;
           box-shadow: none;
   border: none;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus {
-  background: #5c636a;
+  background: rgb(91.8, 99.45, 106.25);
   border-radius: 4px;
   border-color: #adb5bd;
   border-style: solid;
   border-width: 0;
-  -webkit-box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
-          box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  -webkit-box-shadow: 0 0 0 4px rgba(130.05, 137.7, 144.5, 0.5);
+          box-shadow: 0 0 0 4px rgba(130.05, 137.7, 144.5, 0.5);
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
-  background: #5c636a;
+  background: rgb(91.8, 99.45, 106.25);
   border-radius: 4px;
   border-color: #adb5bd;
   border-style: solid;
   border-width: 0;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:active {
-  background: #565e64;
+  background: rgb(86.4, 93.6, 100);
   border-radius: 4px;
   -webkit-box-shadow: none;
           box-shadow: none;
-  border-color: #444c54;
+  border-color: rgb(68.0034482759, 75.85, 83.6965517241);
   border-style: solid;
   border-width: 0;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-separator {
-  border: solid #444c54;
+  border: solid rgb(68.0034482759, 75.85, 83.6965517241);
   border-width: 0 1px 0 0;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-overlay {
-  background: #282d31;
+  background: rgb(26.177027027, 29.35, 32.522972973);
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-pop {
-  background: #282d31;
+  background: rgb(26.177027027, 29.35, 32.522972973);
 }
 .e-toolbar.e-rtl .e-hor-nav {
-  background: #282d31;
-  border: solid #444c54;
+  background: rgb(26.177027027, 29.35, 32.522972973);
+  border: solid rgb(68.0034482759, 75.85, 83.6965517241);
   border-width: 0 0 0 0;
 }
 .e-toolbar.e-rtl .e-hor-nav:not(.e-nav-active):hover {
-  background: #5c636a;
+  background: rgb(91.8, 99.45, 106.25);
   color: #adb5bd;
-  border: solid #444c54;
+  border: solid rgb(68.0034482759, 75.85, 83.6965517241);
   border-width: 0 0 0 0;
 }