@syncfusion/ej2-navigations 19.2.59 → 19.3.44

package/styles/tab/_theme.scss

@@ -9,11 +9,11 @@
       border: 0;
       border-radius: 0;
 
-      @if $tab-skin == 'tailwind' or $tab-skin == 'tailwind-dark' {
+      @if $tab-skin == 'tailwind' {
         font-weight: $tab-font-weight;
       }
 
-      @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' {
+      @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
 
         &::before {
           border-color: $tab-hdr-bdr-color;
@@ -69,12 +69,15 @@
             border: 2px solid $tab-wrap-border-color;
           }
 
-          @if $tab-skin == 'bootstrap4' {
+          @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
             border: $tab-vscroll-nav-border;
           }
 
           .e-tab-icon {
             color: $tab-text-color;
+            @if $tbar-skin == 'bootstrap5' {
+              color: $tab-comb-icon-color;
+            }
           }
 
           @media screen and (max-width: 480px) {
@@ -92,7 +95,7 @@
           &:hover {
             background: $tab-item-hover-bg-color;
 
-            @if $tab-skin == 'bootstrap4' {
+            @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
               border: 1px solid $tab-hover-border-color;
               border-radius: $tab-top-active-item-border-radius;
             }
@@ -122,7 +125,7 @@
               }
             }
 
-            @if $tab-skin == 'bootstrap4' {
+            @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
               border: 0;
             }
           }
@@ -219,7 +222,7 @@
                 background: $tab-wrap-hover-bg-color;
               }
 
-              @if $tab-skin == 'bootstrap4' {
+              @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                 border: $tab-vscroll-nav-border;
                 border-radius: 0;
               }
@@ -244,7 +247,7 @@
                   color: $tab-wrap-active-color;
                 }
               }
-              @if $tab-skin == 'bootstrap4' {
+              @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
 
                 .e-tab-text,
                 .e-tab-icon {
@@ -265,7 +268,7 @@
 
       .e-scroll-nav,
       .e-hscroll:not(.e-scroll-device) .e-scroll-nav {
-        @if $tab-skin != 'tailwind' and $tab-skin != 'tailwind-dark' {
+        @if $tab-skin != 'tailwind' {
           background: inherit;
         }
         border: 0;
@@ -290,7 +293,7 @@
               border: 2px solid $tab-wrap-hover-border-color;
             }
 
-            @if $tab-skin == 'tailwind' or $tab-skin == 'tailwind-dark' {
+            @if $tab-skin == 'tailwind' {
               background: $tab-pop-icon-hover-bg-color;
             }
           }
@@ -336,7 +339,7 @@
             }
           }
 
-          @if $tab-skin == 'tailwind' or $tab-skin == 'tailwind-dark' {
+          @if $tab-skin == 'tailwind' {
             background: $tab-nav-focus-bg-color;
           }
         }
@@ -347,11 +350,11 @@
             box-shadow: $tab-nav-active-box-shadow;
           }
 
-          @if $tab-skin == 'bootstrap4' {
+          @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
             border: $tab-nav-pop-press-active-border;
           }
 
-          @if $tab-skin == 'tailwind' or $tab-skin == 'tailwind-dark' {
+          @if $tab-skin == 'tailwind' {
             background: $tab-active-bg-color;
           }
         }
@@ -369,7 +372,7 @@
                 border-color: $tab-nav-disable-hover-border-color;
               }
 
-              @if $tab-skin == 'tailwind' or $tab-skin == 'tailwind-dark' {
+              @if $tab-skin == 'tailwind' {
                 background: $tab-pop-icon-hover-bg-color;
               }
             }
@@ -382,7 +385,7 @@
         background: transparent;
         border: 0;
 
-        @if $tab-skin == 'bootstrap4' {
+        @if $tab-skin == 'bootstrap4'or $tab-skin == 'bootstrap5' {
           border: $tab-nav-pop-press-border;
         }
 
@@ -398,7 +401,7 @@
             border: 2px solid $tab-wrap-border-color;
           }
 
-          @if $tab-skin == 'bootstrap4' {
+          @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
             border: $tab-active-text-item-border;
           }
 
@@ -415,7 +418,7 @@
               border: 2px solid $tab-wrap-hover-border-color;
             }
 
-            @if $tab-skin == 'bootstrap4' {
+            @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
               border: $tab-active-text-item-border;
             }
           }
@@ -426,7 +429,7 @@
           &:hover {
             color: $tab-hover-nav-icon-color;
 
-            @if $tab-skin == 'bootstrap4' {
+            @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
               border: $tab-active-text-item-border;
             }
           }
@@ -449,7 +452,7 @@
               background: $tab-nav-focus-bg-color;
             }
 
-            @if $tab-skin == 'bootstrap4' {
+            @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
               border: $tab-active-text-item-border;
             }
 
@@ -470,7 +473,7 @@
                 border: 2px solid $tab-nav-focus-hover-border-color;
               }
 
-              @if $tab-skin == 'bootstrap4' {
+              @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
                 border: $tab-active-text-item-border;
               }
             }
@@ -485,7 +488,7 @@
                 border: 1px solid $tab-nav-focus-active-border-color;
               }
 
-              @if $tab-skin == 'bootstrap4' {
+              @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
                 border: $tab-active-text-item-border;
               }
 
@@ -497,7 +500,7 @@
             }
           }
 
-          @if $tab-skin == 'tailwind' or $tab-skin == 'tailwind-dark' {
+          @if $tab-skin == 'tailwind' {
             background: $tab-nav-focus-bg-color;
           }
         }
@@ -505,7 +508,7 @@
         &:hover {
           border: 0;
 
-          @if $tab-skin == 'bootstrap4' {
+          @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
             border: $tab-nav-pop-press-border;
           }
 
@@ -513,7 +516,7 @@
             background: transparent;
           }
 
-          @if $tab-skin == 'tailwind' or $tab-skin == 'tailwind-dark' {
+          @if $tab-skin == 'tailwind' {
             background: $tab-pop-icon-hover-bg-color;
           }
         }
@@ -524,7 +527,7 @@
             box-shadow: $tab-nav-active-box-shadow;
           }
 
-          @if $tab-skin == 'tailwind' or $tab-skin == 'tailwind-dark' {
+          @if $tab-skin == 'tailwind' {
             background: $tab-active-bg-color;
           }
         }
@@ -534,7 +537,7 @@
           border: 0;
           box-shadow: none;
 
-          @if $tab-skin == 'bootstrap4' {
+          @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
             background: $tab-nav-focus-bg-color;
             border: $tab-nav-pop-press-active-border;
             border-radius: $tab-active-item-border-radius;
@@ -547,7 +550,7 @@
 
             &:focus {
               border: $tab-nav-pop-arrow-active-focus-border;
-              @if $tab-skin == 'bootstrap4' {
+              @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
                 border: 0;
               }
             }
@@ -557,7 +560,7 @@
 
       &.e-horizontal-bottom {
 
-        @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' {
+        @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
 
           &[style*= 'overflow: hidden'] {
             border: 0;
@@ -581,7 +584,7 @@
             border-top: $tab-active-item-hide-border;
             border-top-color: $tab-active-item-border-color;
 
-            @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' {
+            @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
               border-bottom: 1px solid $tab-even-active-item-bottom-border-color;
             }
           }
@@ -701,7 +704,7 @@
             &:hover {
               background: inherit;
               border: 0;
-              @if $tab-skin == 'bootstrap4' {
+              @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
                 color: $gray-900;
               }
             }
@@ -742,7 +745,7 @@
       }
     }
 
-    &.e-focused .e-tab-header {
+    &.e-focused > .e-tab-header {
 
       .e-toolbar-item {
 
@@ -753,6 +756,10 @@
             border-color: $tab-focused-wrap-focus-border-color;
           }
 
+          @if $tab-skin == 'bootstrap5' {
+            border: 1px solid $tab-focused-wrap-focus-border-color;
+          }
+
           @if $tab-skin == 'highcontrast' {
             border-style: solid;
           }
@@ -876,7 +883,7 @@
       .e-tab-header {
         border-bottom: $tab-fill-hdr-border;
 
-        @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' {
+        @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
           .e-toolbar-items.e-hscroll {
             border: 0;
           }
@@ -939,7 +946,12 @@
             }
 
             .e-close-icon:hover {
-              color: $tab-alt-active-hover-close-icon-color;
+              @if $tab-skin != 'tailwind' {
+                color: $tab-alt-active-hover-close-icon-color;
+              }
+              @if $tab-skin == 'bootstrap5' {
+                color: $tab-alt-active-close-icon-color;
+              }
             }
           }
         }
@@ -958,7 +970,7 @@
 
           .e-tab-wrap {
             &:hover {
-              @if $tab-skin == 'bootstrap4' {
+              @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
 
                 background: $tab-active-bg-color;
 
@@ -1069,7 +1081,7 @@
               border-color: $tab-fill-focused-active-wrap-focus-border-color;
             }
 
-            @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' {
+            @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
 
               .e-tab-text,
               .e-close-icon {
@@ -1084,7 +1096,7 @@
             .e-tab-text,
             .e-tab-icon {
               color: $tab-alt-active-hover-text-color;
-              @if $tab-skin == 'bootstrap4' {
+              @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
                 color: $tab-alt-active-style-hover-text-color;
               }
             }
@@ -1103,7 +1115,7 @@
           background: $tab-alt-item-bg-color;
         }
 
-        @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' {
+        @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
           .e-toolbar-items.e-hscroll {
             border: 0;
           }
@@ -1112,7 +1124,7 @@
         .e-indicator {
           background: $tab-alt-border-color;
 
-          @if $tab-skin == 'tailwind' or $tab-skin == 'tailwind-dark' {
+          @if $tab-skin == 'tailwind' {
             bottom: 1px;
           }
         }
@@ -1120,6 +1132,10 @@
         .e-toolbar-item {
           border: $tab-alt-item-border;
 
+          @if $tab-skin == 'bootstrap5' {
+            margin: 0;
+          }
+
           .e-ripple-element {
             background: $tab-alt-ripple-bg-color;
           }
@@ -1168,6 +1184,12 @@
                   color: $tab-close-icon-color;
                 }
               }
+              @if $tab-skin == 'bootstrap5' {
+                .e-tab-text,
+                .e-close-icon {
+                  color: $tab-alt-active-text-color;
+                }
+              }
 
               @if $tab-skin == 'highcontrast' {
                 background-color: $tab-alt-wrap-hover-bg-color;
@@ -1197,6 +1219,12 @@
 
           .e-close-icon {
             color: $tab-alt-close-icon-color;
+            @if $tab-skin == 'tailwind' {
+              color: $tab-alt-active-close-icon-color;
+            }
+            @if $tab-skin == 'bootstrap5' {
+              color: $tab-alt-active-text-color;
+            }
           }
 
           .e-close-icon:hover {
@@ -1205,10 +1233,21 @@
 
           &.e-active {
             border: 0;
+            margin: 0;
 
             .e-tab-wrap {
-              background: $tab-alt-active-bg-color;
-              border-radius: $tab-active-item-border-radius;
+
+              @if $tab-skin == 'bootstrap5' {
+                background: $tab-active-item-border-color;
+                border-color: $tab-alt-active-bg-color;
+                border-radius: $tab-top-active-item-border-radius;
+                border-style: solid;
+                border-width: 2px 2px 0;
+              }
+              @else {
+                background: $tab-alt-active-bg-color;
+                border-radius: $tab-active-item-border-radius;
+              }
 
               @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                 border-color: $tab-alt-active-wrap-border-color;
@@ -1221,6 +1260,13 @@
                   color: $tab-alt-active-text-color;
                 }
 
+                @if $tab-skin == 'bootstrap5' {
+                  .e-tab-text,
+                  .e-close-icon {
+                    color:  $tab-active-text-color;
+                  }
+                }
+
                 @if $tab-skin == 'fabric' {
                   background: $tab-alt-active-wrap-hover-bg-color;
                 }
@@ -1263,10 +1309,14 @@
               &:focus {
                 background: $tab-alt-active-focus-bg-color;
 
+                @if $tab-skin == 'bootstrap5' {
+                  background-color: $tab-active-item-border-color;
+                }
+
                 .e-tab-text,
                 .e-tab-icon {
                   color: $tab-alt-active-text-color;
-                  @if $tab-skin == 'bootstrap4' {
+                  @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
                     color: $tab-alt-active-hover-text-color;
                   }
                 }
@@ -1274,6 +1324,13 @@
 
               &:focus:hover {
 
+                @if $tab-skin == 'bootstrap5' {
+                  .e-tab-text,
+                  .e-close-icon {
+                    color: $tab-active-text-color;
+                  }
+                }
+
                 @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' {
 
                   .e-tab-text,
@@ -1300,7 +1357,18 @@
             }
 
             .e-close-icon:hover {
-              color: $tab-alt-active-hover-close-icon-color;
+              @if $tab-skin != 'tailwind' {
+                color: $tab-alt-active-hover-close-icon-color;
+              }
+            }
+
+            @if $tab-skin == 'bootstrap5' {
+              .e-close-icon:hover,
+              .e-tab-text:hover,
+              .e-close-icon,
+              .e-tab-text {
+                color: $tab-active-text-color;
+              }
             }
 
             &.e-itop .e-tab-wrap,
@@ -1333,7 +1401,7 @@
               &:hover {
                 background: $tab-alt-hover-bg-color;
 
-                @if $tab-skin == 'bootstrap4' {
+                @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
                   background: $tab-active-bg-color;
                 }
 
@@ -1463,11 +1531,11 @@
               background: $tab-bg-hover-nav-bg-color;
               color: $tab-bg-hover-nav-icon-color;
 
-              @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' {
+              @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
                 background: $tab-alt-nav-hover-bg-color;
               }
 
-              @if $tab-skin == 'bootstrap4' {
+              @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
                 background: $tab-pop-icon-hover-bg-color;
               }
 
@@ -1541,8 +1609,54 @@
           }
         }
 
+        @if $tab-skin == 'bootstrap5' {
+          &.e-horizontal-bottom {
+            .e-toolbar-item.e-active {
+              border: 0;
+              margin: 0;
+
+              .e-tab-wrap {
+                border-color: $tab-alt-active-bg-color;
+                border-radius: 0 0 4px 4px;
+                border-style: solid;
+                border-width: 0 2px 2px;
+              }
+            }
+          }
+        }
+
         &.e-vertical {
 
+          @if $tab-skin == 'bootstrap5' {
+            &.e-vertical-left {
+              .e-toolbar-item.e-active {
+                border: 0;
+                margin: 0;
+
+                .e-tab-wrap {
+                  border-color: $tab-alt-active-bg-color;
+                  border-radius: 4px 0 0 4px;
+                  border-style: solid;
+                  border-width: 2px 0 2px 2px;
+                }
+              }
+            }
+
+            &.e-vertical-right {
+              .e-toolbar-item.e-active {
+                border: 0;
+                margin: 0;
+
+                .e-tab-wrap {
+                  border-color: $tab-alt-active-bg-color;
+                  border-radius: 0 4px 4px 0;
+                  border-style: solid;
+                  border-width: 2px 2px 2px 0;
+                }
+              }
+            }
+          }
+
           .e-scroll-nav {
 
             .e-nav-arrow {
@@ -1643,7 +1757,7 @@
         .e-indicator {
           background: $tab-border-color;
 
-          @if $tab-skin == 'tailwind' or $tab-skin == 'tailwind-dark' {
+          @if $tab-skin == 'tailwind' {
             background: $tab-alt-border-color;
             bottom: 1px;
           }
@@ -1675,7 +1789,7 @@
               border-style: solid;
             }
 
-            @if $tab-skin == 'bootstrap4' {
+            @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
               background: $tab-active-bg-color;
             }
 
@@ -1690,7 +1804,7 @@
 
             .e-tab-wrap:focus {
 
-              @if $tab-skin == 'material' or $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' {
+              @if $tab-skin == 'material' or $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
                 background: $tab-key-alt-active-focus-bg-color;
               }
 
@@ -1714,7 +1828,7 @@
                 background: $tab-alt-focused-active-wrap-hover-bg-color;
               }
 
-              @if $tab-skin == 'bootstrap4' {
+              @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
                 border: 1px solid $tab-hover-border-color;
                 border-radius: $tab-top-active-item-border-radius;
             }
@@ -1723,7 +1837,7 @@
             .e-tab-wrap:focus,
             .e-tab-wrap:hover {
 
-              @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' {
+              @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
                 .e-tab-text,
                 .e-close-icon {
                   color: $tab-alt-focused-active-wrap-focus-or-hover-color;
@@ -1733,7 +1847,7 @@
 
             .e-tab-wrap:focus:hover {
 
-              @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' {
+              @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
 
                 .e-tab-text,
                 .e-close-icon {
@@ -1796,10 +1910,9 @@
         background: inherit;
         color: $tab-content-font-color;
 
-        @if $tab-skin == 'tailwind' or $tab-skin == 'tailwind-dark' {
+        @if $tab-skin == 'tailwind' {
           font-size: $tab-nrml-font-size;
           line-height: $tab-nrml-text-wrap-height;
-          padding: 12px 0;
         }
       }
     }
@@ -1820,7 +1933,7 @@
         border: 2px $tab-wrap-border-color;
       }
 
-      @if $tab-skin == 'bootstrap4' {
+      @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
         border: $tab-vscroll-nav-border;
       }
 

package/styles/tab/bootstrap-dark.css

@@ -50,11 +50,11 @@
 }
 
 .e-tab.e-vertical-tab .e-tab-header .e-scroll-nav .e-nav-up-arrow::before {
-  content: '\ebba';
+  content: '\eb04';
 }
 
 .e-tab.e-vertical-tab .e-tab-header .e-scroll-nav .e-nav-down-arrow::before {
-  content: '\ebbc';
+  content: '\eb05';
 }
 
 .e-tab.e-vertical-tab .e-tab-header .e-popup-up-icon::before {
@@ -3814,34 +3814,34 @@
   border: 0;
 }
 
-.e-tab.e-focused .e-tab-header .e-toolbar-item .e-tab-wrap:focus {
+.e-tab.e-focused > .e-tab-header .e-toolbar-item .e-tab-wrap:focus {
   background: #414141;
 }
 
-.e-tab.e-focused .e-tab-header .e-toolbar-item .e-tab-wrap:focus .e-tab-icon,
-.e-tab.e-focused .e-tab-header .e-toolbar-item .e-tab-wrap:focus .e-tab-text {
+.e-tab.e-focused > .e-tab-header .e-toolbar-item .e-tab-wrap:focus .e-tab-icon,
+.e-tab.e-focused > .e-tab-header .e-toolbar-item .e-tab-wrap:focus .e-tab-text {
   color: #f0f0f0;
 }
 
-.e-tab.e-focused .e-tab-header .e-scroll-nav:focus .e-nav-arrow {
+.e-tab.e-focused > .e-tab-header .e-scroll-nav:focus .e-nav-arrow {
   color: #f0f0f0;
 }
 
-.e-tab.e-focused .e-tab-header .e-hor-nav:focus .e-popup-up-icon,
-.e-tab.e-focused .e-tab-header .e-hor-nav:focus .e-popup-down-icon {
+.e-tab.e-focused > .e-tab-header .e-hor-nav:focus .e-popup-up-icon,
+.e-tab.e-focused > .e-tab-header .e-hor-nav:focus .e-popup-down-icon {
   color: #f0f0f0;
 }
 
-.e-tab.e-focused .e-tab-header.e-vertical .e-scroll-nav:focus .e-nav-arrow {
+.e-tab.e-focused > .e-tab-header.e-vertical .e-scroll-nav:focus .e-nav-arrow {
   border: 0;
 }
 
-.e-tab.e-focused .e-tab-header.e-vertical .e-hor-nav .e-popup-up-icon,
-.e-tab.e-focused .e-tab-header.e-vertical .e-hor-nav .e-popup-down-icon {
+.e-tab.e-focused > .e-tab-header.e-vertical .e-hor-nav .e-popup-up-icon,
+.e-tab.e-focused > .e-tab-header.e-vertical .e-hor-nav .e-popup-down-icon {
   border: 0;
 }
 
-.e-tab.e-focused .e-tab-header.e-vertical .e-hor-nav:focus {
+.e-tab.e-focused > .e-tab-header.e-vertical .e-hor-nav:focus {
   outline: 0;
 }
 
@@ -4044,7 +4044,7 @@
 
 .e-tab.e-background .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-text,
 .e-tab.e-background .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-close-icon {
-  color: #002957;
+  color: #fff;
 }
 
 .e-tab.e-background .e-tab-header .e-toolbar-item .e-tab-text,
@@ -4063,6 +4063,7 @@
 
 .e-tab.e-background .e-tab-header .e-toolbar-item.e-active {
   border: 0;
+  margin: 0;
 }
 
 .e-tab.e-background .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
@@ -4076,7 +4077,7 @@
 }
 
 .e-tab.e-background .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover .e-close-icon {
-  color: #393939;
+  color: #fff;
 }
 
 .e-tab.e-background .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus {