@syncfusion/ej2-navigations 28.2.12 → 29.1.34

package/styles/stepper/fabric.css

@@ -587,14 +587,14 @@
 .e-stepper:not(.e-step-type-label) .e-indicator:hover,
 .e-stepper:not(.e-step-type-label) .e-step:hover {
   color: #fff;
-  background: #006fc7;
+  background: rgb(0, 111.4205607477, 198.7);
 }
 .e-stepper:not(.e-step-type-label) .e-step-notstarted .e-indicator:hover, .e-stepper:not(.e-step-type-label) .e-step-notstarted .e-step:hover {
   color: #333;
 }
 .e-stepper:not(.e-step-type-label) .e-step-selected .e-indicator:active,
 .e-stepper:not(.e-step-type-label) .e-step-selected .e-step:active {
-  background: #005ba3;
+  background: rgb(0, 91.4018691589, 163);
 }
 .e-stepper:not(.e-step-type-label) .e-step-valid.e-step-selected .e-indicator:active,
 .e-stepper:not(.e-step-type-label) .e-step-valid.e-step-selected .e-step:active {

package/styles/stepper/fluent-dark.css

@@ -594,7 +594,7 @@
 }
 .e-stepper:not(.e-step-type-label) .e-step-selected .e-indicator:active,
 .e-stepper:not(.e-step-type-label) .e-step-selected .e-step:active {
-  background: #0060aa;
+  background: rgb(0, 96, 169.6);
 }
 .e-stepper:not(.e-step-type-label) .e-step-valid.e-step-selected .e-indicator:active,
 .e-stepper:not(.e-step-type-label) .e-step-valid.e-step-selected .e-step:active {

package/styles/stepper/fluent.css

@@ -594,7 +594,7 @@
 }
 .e-stepper:not(.e-step-type-label) .e-step-selected .e-indicator:active,
 .e-stepper:not(.e-step-type-label) .e-step-selected .e-step:active {
-  background: #0060aa;
+  background: rgb(0, 96, 169.6);
 }
 .e-stepper:not(.e-step-type-label) .e-step-valid.e-step-selected .e-indicator:active,
 .e-stepper:not(.e-step-type-label) .e-step-valid.e-step-selected .e-step:active {

package/styles/stepper/material-dark.css

@@ -587,14 +587,14 @@
 .e-stepper:not(.e-step-type-label) .e-indicator:hover,
 .e-stepper:not(.e-step-type-label) .e-step:hover {
   color: #fff;
-  background: #606fc7;
+  background: rgb(95.512295082, 111.3729508197, 199.487704918);
 }
 .e-stepper:not(.e-step-type-label) .e-step-notstarted .e-indicator:hover, .e-stepper:not(.e-step-type-label) .e-step-notstarted .e-step:hover {
   color: #bdbdbd;
 }
 .e-stepper:not(.e-step-type-label) .e-step-selected .e-indicator:active,
 .e-stepper:not(.e-step-type-label) .e-step-selected .e-step:active {
-  background: #7280ce;
+  background: rgb(114.4282786885, 128.4077868852, 206.0717213115);
 }
 .e-stepper:not(.e-step-type-label) .e-step-valid.e-step-selected .e-indicator:active,
 .e-stepper:not(.e-step-type-label) .e-step-valid.e-step-selected .e-step:active {

package/styles/stepper/material.css

@@ -489,12 +489,12 @@
   color: #fff;
 }
 .e-stepper .e-step-error .e-indicator {
-  background: #e51b0d;
+  background: rgb(229.3485849057, 27.3849056604, 12.5514150943);
   color: #fff;
 }
 .e-stepper .e-step-error .e-text,
 .e-stepper .e-step-error .e-label {
-  color: #e51b0d;
+  color: rgb(229.3485849057, 27.3849056604, 12.5514150943);
 }
 .e-stepper .e-step-valid:not(.e-step-notstarted) .e-indicator:hover,
 .e-stepper .e-step-error .e-indicator:hover {
@@ -568,8 +568,8 @@
 .e-stepper .e-step-error.e-step-label-only.e-step-focus .e-label,
 .e-stepper .e-step-error.e-step-text-only.e-step-focus .e-text,
 .e-stepper .e-step-error.e-step-template.e-step-focus {
-  -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 4px #e51b0d, 0 0 0 8px #fff;
-          box-shadow: 0 0 0 2px #fff, 0 0 0 4px #e51b0d, 0 0 0 8px #fff;
+  -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgb(229.3485849057, 27.3849056604, 12.5514150943), 0 0 0 8px #fff;
+          box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgb(229.3485849057, 27.3849056604, 12.5514150943), 0 0 0 8px #fff;
 }
 .e-stepper .e-step-container:not(.e-step-focus).e-step-notstarted .e-step,
 .e-stepper .e-step-container:not(.e-step-focus).e-step-completed .e-step, .e-stepper.e-steps-focus .e-step-container:not(.e-step-focus).e-step-selected .e-step {
@@ -587,14 +587,14 @@
 .e-stepper:not(.e-step-type-label) .e-indicator:hover,
 .e-stepper:not(.e-step-type-label) .e-step:hover {
   color: #fff;
-  background: #32408f;
+  background: rgb(49.8319672131, 64.0696721311, 143.1680327869);
 }
 .e-stepper:not(.e-step-type-label) .e-step-notstarted .e-indicator:hover, .e-stepper:not(.e-step-type-label) .e-step-notstarted .e-step:hover {
   color: #000;
 }
 .e-stepper:not(.e-step-type-label) .e-step-selected .e-indicator:active,
 .e-stepper:not(.e-step-type-label) .e-step-selected .e-step:active {
-  background: #2b387c;
+  background: rgb(43.2479508197, 55.6045081967, 124.2520491803);
 }
 .e-stepper:not(.e-step-type-label) .e-step-valid.e-step-selected .e-indicator:active,
 .e-stepper:not(.e-step-type-label) .e-step-valid.e-step-selected .e-step:active {
@@ -602,7 +602,7 @@
 }
 .e-stepper:not(.e-step-type-label) .e-step-error.e-step-selected .e-indicator:active,
 .e-stepper:not(.e-step-type-label) .e-step-error.e-step-selected .e-step:active {
-  background: #e51b0d;
+  background: rgb(229.3485849057, 27.3849056604, 12.5514150943);
 }
 .e-stepper:not(.e-step-type-label) .e-step-notstarted .e-indicator:hover, .e-stepper:not(.e-step-type-label) .e-step-notstarted .e-step:hover {
   background: #9e9e9e;
@@ -618,7 +618,7 @@
 .e-stepper:not(.e-step-type-label) .e-step-error .e-indicator:hover,
 .e-stepper:not(.e-step-type-label) .e-step-error .e-step:hover {
   color: #fff;
-  background: #e51b0d;
+  background: rgb(229.3485849057, 27.3849056604, 12.5514150943);
 }
 
 .e-bigger.e-stepper.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text) .e-icons.e-step-indicator,

package/styles/tab/_bootstrap-dark-definition.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 $tab-skin: 'bootstrap' !default;
 $tab-big-vertical-scroll-nav-top-bottom: 23px !default;
 $tab-vscroll-big-padding: 24px 0 !default;
@@ -222,23 +224,23 @@ $tab-big-even-active-text-height: 50px !default;
 $tab-nrml-even-active-text-height: 40px !default;
 $tab-fill-big-even-active-text-height: 50px !default;
 $tab-fill-nrml-even-active-text-height: 40px !default;
-$tab-text-color: lighten($brand-primary, 15%) !default;
+$tab-text-color: color.adjust($brand-primary, $lightness: 15%) !default;
 $tab-wrap-comb-icon-color: $tab-text-color !default;
 $tab-disable-text-color: $grey-light !default;
 $tab-active-text-color: $grey-dark-font !default;
 $tab-disable-active-text-color: $grey-light !default;
 $tab-focus-text-color: $grey-dark-font !default;
-$tab-hover-text-color: lighten($brand-primary, 10%) !default;
+$tab-hover-text-color: color.adjust($brand-primary, $lightness: 10%) !default;
 $tab-pop-active-item-text-color: $tab-active-text-color !default;
-$tab-alt-text-color: lighten($brand-primary, 15%) !default;
+$tab-alt-text-color: color.adjust($brand-primary, $lightness: 15%) !default;
 $tab-alt-disable-text-color: $grey-light !default;
 $tab-alt-active-text-color: $brand-primary-font !default;
 $tab-alt-disable-active-text-color: $brand-primary-font !default;
-$tab-alt-hover-text-color: lighten($brand-primary, 10%) !default;
+$tab-alt-hover-text-color: color.adjust($brand-primary, $lightness: 10%) !default;
 $tab-alt-active-hover-text-color: $brand-primary-font !default;
 $tab-alt-active-style-hover-icon-color: $tab-alt-active-hover-text-color !default;
 $tab-clone-item-bg-color: rgba($grey-light, .87) !default;
-$tab-clone-text-color: lighten($brand-primary, 15%) !default;
+$tab-clone-text-color: color.adjust($brand-primary, $lightness: 15%) !default;
 $tab-icon-container-width: auto !default;
 $tab-nav-pop-press-border: 0 !default;
 $tab-big-nav-icon-container-size: 44px !default;
@@ -353,7 +355,7 @@ $tab-v-popup-box-shadow: $tab-pop-box-shadow !default;
 $tab-pop-icon-transition: none !default;
 $tab-pop-up-icon-transform: rotate(0deg) !default;
 $tab-pop-down-icon-transform: rotate(0deg) !default;
-$tab-alt-focused-active-wrap-focus-or-hover-color: lighten($brand-primary-font, 15%) !default;
+$tab-alt-focused-active-wrap-focus-or-hover-color: color.adjust($brand-primary-font, $lightness: 15%) !default;
 $tab-alt-focused-active-wrap-focus-and-hover-color: $brand-primary-darken-25 !default;
 $tab-even-active-item-bottom-border-color: 0 !default;
 $tab-fill-focused-active-wrap-focus-color: $brand-primary-darken-25 !default;

package/styles/tab/_bootstrap4-definition.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 $tab-skin: 'bootstrap4' !default;
 $tab-big-vertical-scroll-nav-top-bottom: 23px !default;
 $tab-big-vertical-nav-arrow-size: 24px !default;
@@ -138,7 +140,7 @@ $tab-big-fill-tb-wrap-height: 50px !default;
 $tab-nrml-fill-tb-wrap-height: 44px !default;
 $tab-focus-bg-color: #eee !default;
 $tab-fill-focus-bg-color: #eee !default;
-$tab-hover-bg-color: darken($gray-100, 2%) !default;
+$tab-hover-bg-color: color.adjust($gray-100, $lightness: -2%) !default;
 $tab-active-bg-color: $primary !default;
 $tab-fill-active-bg-color: $primary !default;
 $tab-fill-disable-active-bg-color: #37b !default;
@@ -212,8 +214,8 @@ $tab-wrap-comb-icon-color: $tab-text-color !default;
 $tab-disable-text-color:  $gray-600 !default;
 $tab-active-text-color: $gray-700 !default;
 $tab-disable-active-text-color:  $gray-600 !default;
-$tab-focus-text-color: darken($primary, 15%) !default;
-$tab-hover-text-color: darken($primary, 15%) !default;
+$tab-focus-text-color: color.adjust($primary, $lightness: -15%) !default;
+$tab-hover-text-color: color.adjust($primary, $lightness: -15%) !default;
 $tab-pop-active-item-text-color: $tab-active-text-color !default;
 $tab-alt-text-color: $primary !default;
 $tab-alt-disable-text-color: $gray-600 !default;
@@ -221,7 +223,7 @@ $tab-alt-active-text-color: $primary-font !default;
 $tab-alt-active-style-hover-text-color: $gray-900 !default;
 $tab-alt-active-style-hover-icon-color: $tab-alt-active-style-hover-text-color !default;
 $tab-alt-disable-active-text-color: $gray-600 !default;
-$tab-alt-hover-text-color: darken($gray-600, 7.5%) !default;
+$tab-alt-hover-text-color: color.adjust($gray-600, $lightness: -7.5%) !default;
 $tab-alt-active-hover-text-color: $primary-font !default;
 $tab-clone-item-bg-color: rgba($gray-600, .87) !default;
 $tab-clone-text-color: $white !default;
@@ -314,7 +316,7 @@ $tab-big-nav-tb-icon-top: 0 !default;
 $tab-nrml-nav-tb-icon-top: 0 !default;
 $tab-big-nav-icons-top: -2px !default;
 $tab-nrml-nav-icons-top: 0 !default;
-$tab-hover-nav-bg-color: darken($gray-600, 7.5%) !default;
+$tab-hover-nav-bg-color: color.adjust($gray-600, $lightness: -7.5%) !default;
 $tab-bg-hover-nav-bg-color: inherit !default;
 $tab-nav-icon-color: $gray-900 !default;
 $tab-alt-nav-icon-color: $gray-900 !default;
@@ -326,8 +328,8 @@ $tab-nav-focus-bg-color: $gray-600 !default;
 $tab-nav-focus-icon-color: $gray-900 !default;
 $tab-bg-nav-focus-icon-color: $primary-font !default;
 $tab-pop-icon-color: $gray-900 !default;
-$tab-pop-icon-hover-bg-color: darken($gray-600, 7.5%) !default;
-$tab-pop-icon-hover-border: 1px solid darken($gray-600, 10%) !default;
+$tab-pop-icon-hover-bg-color: color.adjust($gray-600, $lightness: -7.5%) !default;
+$tab-pop-icon-hover-border: 1px solid color.adjust($gray-600, $lightness: -10%) !default;
 $tab-pop-icon-focus-border: 1px solid #aaa !default;
 $tab-pop-icon-active-border: 1px solid #aaa !default;
 $tab-pop-border-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
@@ -427,13 +429,13 @@ $tab-nrml-item-text-margin-bottom: 0 !default;
 @mixin hscroll-alt-btn-animation-after {
   animation: none;
 }
-$tab-alt-focused-active-wrap-focus-or-hover-color: darken($primary, 15%) !default;
-$tab-alt-focused-active-wrap-focus-and-hover-color: darken($primary, 15%) !default;
+$tab-alt-focused-active-wrap-focus-or-hover-color: color.adjust($primary, $lightness: -15%) !default;
+$tab-alt-focused-active-wrap-focus-and-hover-color: color.adjust($primary, $lightness: -15%) !default;
 $tab-even-active-item-bottom-border-color: 1px solid #ddd !default;
-$tab-fill-focused-active-wrap-focus-color: darken($primary, 15%) !default;
+$tab-fill-focused-active-wrap-focus-color: color.adjust($primary, $lightness: -15%) !default;
 $tab-alt-active-wrap-hover-close-color: $primary-font !default;
 $tab-alt-pop-wrap-hover-color: #37b !default;
-$tab-alt-wrap-hover-color: darken($primary, 15%) !default;
+$tab-alt-wrap-hover-color: color.adjust($primary, $lightness: -15%) !default;
 $tab-nav-active-box-shadow: inset 0 0 0 3px rgba($gray-600, .5) !default;
 $tab-nav-focus-border-color: #eee !default;
 $tab-alt-nav-hover-bg-color: #eee !default;

package/styles/tab/_bootstrap5-definition.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 $tab-skin: 'bootstrap5' !default;
 $tab-font-family: $font-family !default;
 $tab-big-vertical-nav-arrow-font-size: $text-xs !default;
@@ -430,7 +432,7 @@ $tab-even-active-item-bottom-border-color: 1px solid $border-light !default;
 $tab-fill-focused-active-wrap-focus-color: $content-bg-color-alt5 !default;
 $tab-alt-active-wrap-hover-close-color: $primary !default;
 $tab-alt-pop-wrap-hover-color: $content-text-color-alt2 !default;
-$tab-alt-wrap-hover-color: darken($secondary, 15%) !default;
+$tab-alt-wrap-hover-color: color.adjust($secondary, $lightness: -15%) !default;
 $tab-nav-active-box-shadow: inset 0 0 0 3px rgba($secondary, .5) !default;
 $tab-nav-focus-border-color: $secondary !default;
 $tab-alt-nav-hover-bg-color: $secondary !default;

package/styles/tab/_bootstrap5.3-definition.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 $tab-skin: 'bootstrap5.3' !default;
 $tab-font-family: $font-family !default;
 $tab-big-vertical-nav-arrow-font-size: $text-xs !default;
@@ -431,7 +433,7 @@ $tab-even-active-item-bottom-border-color: 1px solid $border-light !default;
 $tab-fill-focused-active-wrap-focus-color: $content-bg-color-alt5 !default;
 $tab-alt-active-wrap-hover-close-color: $primary !default;
 $tab-alt-pop-wrap-hover-color: $content-text-color-alt2 !default;
-$tab-alt-wrap-hover-color: darken($secondary, 15%) !default;
+$tab-alt-wrap-hover-color: color.adjust($secondary, $lightness: -15%) !default;
 $tab-nav-active-box-shadow: inset 0 0 0 3px rgba($secondary, .5) !default;
 $tab-nav-focus-border-color: $secondary !default;
 $tab-alt-nav-hover-bg-color: $secondary !default;

package/styles/tab/_fluent-definition.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 $tab-skin: 'FluentUI' !default;
 $tab-big-vertical-scroll-nav-top-bottom: 23px !default;
 $tab-big-vertical-nav-arrow-size: 24px !default;
@@ -431,8 +433,8 @@ $tab-even-active-item-bottom-border-color: 0 !default;
 $tab-fill-focused-active-wrap-focus-color: $content-bg-color-alt5 !default;
 $tab-alt-active-wrap-hover-close-color: $primary !default;
 $tab-alt-pop-wrap-hover-color: $content-text-color-alt2 !default;
-$tab-alt-wrap-hover-color: darken($content-text-color-alt2, 15%) !default;
-$tab-item-wrap-hover-bg-color: darken($primary, 10%) !default;
+$tab-alt-wrap-hover-color: color.adjust($content-text-color-alt2, $lightness: -15%) !default;
+$tab-item-wrap-hover-bg-color: color.adjust($primary, $lightness: -10%) !default;
 $tab-bg-item-wrap-hover-bg-color: $tab-item-wrap-hover-bg-color !default;
 $tab-nav-active-box-shadow: inset 0 0 0 3px rgba($content-text-color-alt2, .5) !default;
 $tab-nav-focus-border-color: $content-text-color-alt2 !default;

package/styles/tab/_layout.scss

@@ -454,6 +454,10 @@
           .e-text-wrap {
             height: $tab-nrml-pop-item-textwrap-height;
             width: 100%;
+
+            @media screen and (max-width: 480px) {
+              height: $tab-big-height;
+            }
           }
 
           .e-tab-text {

package/styles/tab/bds.css

@@ -513,6 +513,11 @@
   height: 42px;
   width: 100%;
 }
+@media screen and (max-width: 480px) {
+  .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-text-wrap {
+    height: 46px;
+  }
+}
 .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-tab-text {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;

package/styles/tab/bootstrap-dark.css

@@ -465,6 +465,11 @@
   height: 26px;
   width: 100%;
 }
+@media screen and (max-width: 480px) {
+  .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-text-wrap {
+    height: 50px;
+  }
+}
 .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-tab-text {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -1903,11 +1908,11 @@
 }
 .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
   border-radius: 4px;
-  color: #3e98ff;
+  color: rgb(61.5, 151.8, 255);
   border: 0;
 }
 .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-icon {
-  color: #3e98ff;
+  color: rgb(61.5, 151.8, 255);
 }
 .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
   background: #313131;
@@ -1921,7 +1926,7 @@
 }
 .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-text,
 .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-icon {
-  color: #248aff;
+  color: rgb(36, 138.2, 255);
 }
 .e-tab .e-tab-header .e-toolbar-item.e-active {
   border: 1px solid #505050;
@@ -2008,7 +2013,7 @@
 .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-tab-wrap:hover .e-tab-text,
 .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-tab-wrap:hover .e-tab-icon,
 .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-tab-wrap:hover .e-close-icon {
-  color: #248aff;
+  color: rgb(36, 138.2, 255);
 }
 .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-tab-wrap:active {
   background: #313131;
@@ -2362,13 +2367,13 @@
   background: rgba(49, 49, 49, 0);
 }
 .e-tab.e-fill .e-tab-header .e-toolbar-item .e-tab-wrap {
-  color: #3e98ff;
+  color: rgb(61.5, 151.8, 255);
 }
 .e-tab.e-fill .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-text, .e-tab.e-fill .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-icon {
-  color: #248aff;
+  color: rgb(36, 138.2, 255);
 }
 .e-tab.e-fill .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-icon {
-  color: #248aff;
+  color: rgb(36, 138.2, 255);
 }
 .e-tab.e-fill .e-tab-header .e-toolbar-item .e-text-wrap {
   margin-top: 0;
@@ -2412,13 +2417,13 @@
   background: #313131;
 }
 .e-tab.e-fill .e-tab-header .e-toolbar-pop .e-tab-wrap:hover .e-tab-text {
-  color: #248aff;
+  color: rgb(36, 138.2, 255);
 }
 .e-tab.e-fill .e-tab-header .e-toolbar-pop .e-tab-wrap:hover .e-tab-icon {
-  color: #248aff;
+  color: rgb(36, 138.2, 255);
 }
 .e-tab.e-fill .e-tab-header .e-toolbar-pop .e-tab-wrap:hover .e-close-icon {
-  color: #248aff;
+  color: rgb(36, 138.2, 255);
 }
 .e-tab.e-fill .e-tab-header.e-horizontal-bottom {
   border-bottom: 0;
@@ -2468,17 +2473,17 @@
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item .e-tab-wrap:focus .e-tab-icon,
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item .e-tab-wrap:focus .e-tab-text,
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item .e-tab-wrap:focus .e-close-icon {
-  color: #248aff;
+  color: rgb(36, 138.2, 255);
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus {
   background: #414141;
   border-color: unset;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-text {
-  color: #002957;
+  color: rgb(0, 40.6, 87);
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-close-icon {
-  color: #002957;
+  color: rgb(0, 40.6, 87);
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-text,
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-icon {
@@ -2510,10 +2515,10 @@
 }
 .e-tab.e-background .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-icon,
 .e-tab.e-background .e-tab-header .e-toolbar-item .e-tab-wrap .e-close-icon {
-  color: #3e98ff;
+  color: rgb(61.5, 151.8, 255);
 }
 .e-tab.e-background .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-text {
-  color: #3e98ff;
+  color: rgb(61.5, 151.8, 255);
 }
 .e-tab.e-background .e-tab-header .e-toolbar-item .e-tab-wrap .e-close-icon:hover {
   color: #fff;
@@ -2627,7 +2632,7 @@
 .e-tab.e-background .e-tab-header .e-toolbar-pop .e-toolbar-item .e-tab-wrap .e-tab-text,
 .e-tab.e-background .e-tab-header .e-toolbar-pop .e-toolbar-item .e-tab-wrap .e-tab-icon,
 .e-tab.e-background .e-tab-header .e-toolbar-pop .e-toolbar-item .e-tab-wrap .e-close-icon {
-  color: #3e98ff;
+  color: rgb(61.5, 151.8, 255);
 }
 .e-tab.e-background .e-tab-header .e-toolbar-pop .e-toolbar-item .e-tab-wrap:hover {
   background: #313131;
@@ -2638,13 +2643,13 @@
   color: #0070f0;
 }
 .e-tab.e-background .e-tab-header .e-toolbar-pop .e-toolbar-item .e-tab-wrap:active .e-tab-text {
-  color: #3e98ff;
+  color: rgb(61.5, 151.8, 255);
 }
 .e-tab.e-background .e-tab-header .e-toolbar-pop .e-toolbar-item .e-tab-wrap:active .e-tab-icon {
-  color: #3e98ff;
+  color: rgb(61.5, 151.8, 255);
 }
 .e-tab.e-background .e-tab-header .e-toolbar-pop .e-toolbar-item .e-tab-wrap:active .e-close-icon {
-  color: #3e98ff;
+  color: rgb(61.5, 151.8, 255);
 }
 .e-tab.e-background .e-tab-header .e-hscroll:not(.e-scroll-device) .e-scroll-nav,
 .e-tab.e-background .e-tab-header .e-scroll-nav {
@@ -2847,7 +2852,7 @@
 .e-tab.e-background.e-focused .e-tab-header .e-toolbar-item .e-tab-wrap:focus .e-tab-icon,
 .e-tab.e-background.e-focused .e-tab-header .e-toolbar-item .e-tab-wrap:focus .e-tab-text,
 .e-tab.e-background.e-focused .e-tab-header .e-toolbar-item .e-tab-wrap:focus .e-close-icon {
-  color: #3e98ff;
+  color: rgb(61.5, 151.8, 255);
 }
 .e-tab.e-background.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus {
   background: #414141;
@@ -2863,28 +2868,28 @@
   border-radius: 4px;
 }
 .e-tab.e-background.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-text {
-  color: white;
+  color: hsl(0, 0%, 115%);
 }
 .e-tab.e-background.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-icon {
   color: #fff;
 }
 .e-tab.e-background.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-close-icon {
-  color: white;
+  color: hsl(0, 0%, 115%);
 }
 .e-tab.e-background.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover .e-tab-text {
-  color: white;
+  color: hsl(0, 0%, 115%);
 }
 .e-tab.e-background.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover .e-tab-icon {
   color: #fff;
 }
 .e-tab.e-background.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover .e-close-icon {
-  color: white;
+  color: hsl(0, 0%, 115%);
 }
 .e-tab.e-background.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus:hover .e-tab-text {
-  color: #002957;
+  color: rgb(0, 40.6, 87);
 }
 .e-tab.e-background.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus:hover .e-close-icon {
-  color: #002957;
+  color: rgb(0, 40.6, 87);
 }
 .e-tab.e-background.e-focused .e-tab-header .e-toolbar-item.e-active.e-itop .e-tab-wrap, .e-tab.e-background.e-focused .e-tab-header .e-toolbar-item.e-active.e-ibottom .e-tab-wrap {
   background: #0070f0;
@@ -2913,15 +2918,15 @@
 
 .e-tab-clone-element {
   background: rgba(57, 57, 57, 0.87);
-  color: #3e98ff;
+  color: rgb(61.5, 151.8, 255);
 }
 .e-tab-clone-element .e-tab-wrap {
   border-radius: 4px;
-  color: #3e98ff;
+  color: rgb(61.5, 151.8, 255);
   border: 0;
 }
 .e-tab-clone-element .e-tab-wrap .e-tab-icon {
-  color: #3e98ff;
+  color: rgb(61.5, 151.8, 255);
 }
 
 .e-bigger .e-tab .e-tab-header,

package/styles/tab/bootstrap.css

@@ -465,6 +465,11 @@
   height: 26px;
   width: 100%;
 }
+@media screen and (max-width: 480px) {
+  .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-text-wrap {
+    height: 50px;
+  }
+}
 .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-tab-text {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;