@syncfusion/ej2-navigations 19.2.59 → 19.3.44

package/styles/tab/tailwind-dark.css

@@ -1,5 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-/*! Tailwind-dark theme definition's */
+/*! Tailwind theme definition's */
 /*! component's theme wise override definitions and variables */
 /*! Horizontal Tab */
 @keyframes tbar-alt-popup-shadow {
@@ -209,7 +209,7 @@
 .e-bigger .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap,
 .e-tab.e-bigger .e-tab-header .e-toolbar-item .e-tab-wrap {
   height: 48px;
-  padding: 0 4px;
+  padding: 0 36px;
 }
 
 @media screen and (max-width: 480px) {
@@ -753,7 +753,7 @@
 
 .e-bigger .e-tab .e-tab-header.e-vertical .e-hor-nav,
 .e-tab.e-bigger .e-tab-header.e-vertical .e-hor-nav {
-  padding: 0 4px;
+  padding: 0 36px;
 }
 
 .e-bigger .e-tab .e-tab-header.e-vertical .e-hor-nav .e-popup-up-icon::before,
@@ -1321,7 +1321,7 @@
 
 .e-bigger .e-tab.e-rtl .e-tab-header.e-vertical .e-hor-nav,
 .e-tab.e-bigger.e-rtl .e-tab-header.e-vertical .e-hor-nav {
-  padding: 0 4px;
+  padding: 0 36px;
 }
 
 .e-bigger .e-tab.e-rtl .e-tab-header.e-vertical .e-popup-up-icon::after,
@@ -1331,11 +1331,6 @@
   margin: 0 10px 0 0;
 }
 
-.e-bigger .e-tab .e-content .e-item,
-.e-tab.e-bigger .e-content .e-item {
-  padding: 16px 0;
-}
-
 .e-tab {
   display: block;
   position: relative;
@@ -1477,7 +1472,7 @@
 
 .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
   height: 38px;
-  padding: 0 4px;
+  padding: 0 26px;
   width: 100%;
 }
 
@@ -1622,7 +1617,7 @@
 
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item.e-icon .e-tab-wrap {
-    padding: 0 4px;
+    padding: 0 36px;
   }
 }
 
@@ -2205,7 +2200,7 @@
 }
 
 .e-tab .e-tab-header.e-vertical .e-hor-nav {
-  padding: 0 4px;
+  padding: 0 26px;
   width: 100%;
 }
 
@@ -2269,7 +2264,7 @@
 }
 
 .e-tab.e-rtl .e-tab-header.e-vertical .e-hor-nav {
-  padding: 0 4px;
+  padding: 0 26px;
 }
 
 .e-tab.e-rtl .e-tab-header.e-vertical .e-hor-nav .e-popup-up-icon::before,
@@ -2948,7 +2943,7 @@
 
 .e-tab-clone-element .e-tab-wrap {
   height: 38px;
-  padding: 0 4px;
+  padding: 0 26px;
   width: 100%;
 }
 
@@ -3044,7 +3039,7 @@
 
 @media screen and (max-width: 480px) {
   .e-tab-clone-element.e-icon .e-tab-wrap {
-    padding: 0 4px;
+    padding: 0 36px;
   }
 }
 
@@ -3178,7 +3173,7 @@
 
 .e-bigger .e-tab-clone-element .e-tab-wrap {
   height: 48px;
-  padding: 0 4px;
+  padding: 0 36px;
 }
 
 @media screen and (max-width: 480px) {
@@ -3277,7 +3272,7 @@
 
 /*! tab theme */
 .e-tab {
-  background: #1f2937;
+  background: transparent;
   border: none;
 }
 
@@ -3307,7 +3302,7 @@
 }
 
 .e-tab .e-tab-header .e-toolbar-item .e-ripple-element {
-  background: rgba(31, 41, 55, 0.12);
+  background: rgba(0, 0, 0, 0.12);
 }
 
 .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
@@ -3685,34 +3680,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: rgba(55, 65, 81, 0.12);
 }
 
-.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: #22d3ee;
 }
 
-.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: #d1d5db;
 }
 
-.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: #d1d5db;
 }
 
-.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;
 }
 
@@ -3746,7 +3741,7 @@
 }
 
 .e-tab.e-fill .e-tab-header .e-toolbar-item .e-ripple-element {
-  background: rgba(31, 41, 55, 0.05);
+  background: rgba(0, 0, 0, 0.05);
 }
 
 .e-tab.e-fill .e-tab-header .e-toolbar-item .e-tab-wrap {
@@ -3789,10 +3784,6 @@
   color: #000;
 }
 
-.e-tab.e-fill .e-tab-header .e-toolbar-item.e-active .e-close-icon:hover {
-  color: #22d3ee;
-}
-
 .e-tab.e-fill .e-tab-header.e-horizontal-bottom {
   border-bottom: 0;
   border-top: 1px Solid #4b5563;
@@ -3885,7 +3876,7 @@
 }
 
 .e-tab.e-background .e-tab-header .e-toolbar-item .e-ripple-element {
-  background: rgba(31, 41, 55, 0.1);
+  background: rgba(0, 0, 0, 0.1);
 }
 
 .e-tab.e-background .e-tab-header .e-toolbar-item .e-tab-wrap {
@@ -3909,6 +3900,7 @@
 
 .e-tab.e-background .e-tab-header .e-toolbar-item .e-close-icon {
   color: #d1d5db;
+  color: #000;
 }
 
 .e-tab.e-background .e-tab-header .e-toolbar-item .e-close-icon:hover {
@@ -3917,6 +3909,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 {
@@ -3947,10 +3940,6 @@
   color: #000;
 }
 
-.e-tab.e-background .e-tab-header .e-toolbar-item.e-active .e-close-icon:hover {
-  color: #22d3ee;
-}
-
 .e-tab.e-background .e-tab-header .e-toolbar-item.e-active.e-itop .e-tab-wrap,
 .e-tab.e-background .e-tab-header .e-toolbar-item.e-active.e-ibottom .e-tab-wrap {
   background: rgba(34, 211, 238, 0);
@@ -4149,7 +4138,6 @@
   color: #fff;
   font-size: 14px;
   line-height: 22px;
-  padding: 12px 0;
 }
 
 .e-tab-clone-element {

package/styles/tab/tailwind.css

@@ -209,7 +209,7 @@
 .e-bigger .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap,
 .e-tab.e-bigger .e-tab-header .e-toolbar-item .e-tab-wrap {
   height: 48px;
-  padding: 0 4px;
+  padding: 0 36px;
 }
 
 @media screen and (max-width: 480px) {
@@ -753,7 +753,7 @@
 
 .e-bigger .e-tab .e-tab-header.e-vertical .e-hor-nav,
 .e-tab.e-bigger .e-tab-header.e-vertical .e-hor-nav {
-  padding: 0 4px;
+  padding: 0 36px;
 }
 
 .e-bigger .e-tab .e-tab-header.e-vertical .e-hor-nav .e-popup-up-icon::before,
@@ -1321,7 +1321,7 @@
 
 .e-bigger .e-tab.e-rtl .e-tab-header.e-vertical .e-hor-nav,
 .e-tab.e-bigger.e-rtl .e-tab-header.e-vertical .e-hor-nav {
-  padding: 0 4px;
+  padding: 0 36px;
 }
 
 .e-bigger .e-tab.e-rtl .e-tab-header.e-vertical .e-popup-up-icon::after,
@@ -1331,11 +1331,6 @@
   margin: 0 10px 0 0;
 }
 
-.e-bigger .e-tab .e-content .e-item,
-.e-tab.e-bigger .e-content .e-item {
-  padding: 16px 0;
-}
-
 .e-tab {
   display: block;
   position: relative;
@@ -1477,7 +1472,7 @@
 
 .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
   height: 38px;
-  padding: 0 4px;
+  padding: 0 26px;
   width: 100%;
 }
 
@@ -1622,7 +1617,7 @@
 
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item.e-icon .e-tab-wrap {
-    padding: 0 4px;
+    padding: 0 36px;
   }
 }
 
@@ -2205,7 +2200,7 @@
 }
 
 .e-tab .e-tab-header.e-vertical .e-hor-nav {
-  padding: 0 4px;
+  padding: 0 26px;
   width: 100%;
 }
 
@@ -2269,7 +2264,7 @@
 }
 
 .e-tab.e-rtl .e-tab-header.e-vertical .e-hor-nav {
-  padding: 0 4px;
+  padding: 0 26px;
 }
 
 .e-tab.e-rtl .e-tab-header.e-vertical .e-hor-nav .e-popup-up-icon::before,
@@ -2948,7 +2943,7 @@
 
 .e-tab-clone-element .e-tab-wrap {
   height: 38px;
-  padding: 0 4px;
+  padding: 0 26px;
   width: 100%;
 }
 
@@ -3044,7 +3039,7 @@
 
 @media screen and (max-width: 480px) {
   .e-tab-clone-element.e-icon .e-tab-wrap {
-    padding: 0 4px;
+    padding: 0 36px;
   }
 }
 
@@ -3178,7 +3173,7 @@
 
 .e-bigger .e-tab-clone-element .e-tab-wrap {
   height: 48px;
-  padding: 0 4px;
+  padding: 0 36px;
 }
 
 @media screen and (max-width: 480px) {
@@ -3685,34 +3680,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: rgba(243, 244, 246, 0.12);
 }
 
-.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: #4f46e5;
 }
 
-.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: #6b7280;
 }
 
-.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: #6b7280;
 }
 
-.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;
 }
 
@@ -3789,10 +3784,6 @@
   color: #fff;
 }
 
-.e-tab.e-fill .e-tab-header .e-toolbar-item.e-active .e-close-icon:hover {
-  color: #4f46e5;
-}
-
 .e-tab.e-fill .e-tab-header.e-horizontal-bottom {
   border-bottom: 0;
   border-top: 1px Solid #e5e7eb;
@@ -3909,6 +3900,7 @@
 
 .e-tab.e-background .e-tab-header .e-toolbar-item .e-close-icon {
   color: #6b7280;
+  color: #fff;
 }
 
 .e-tab.e-background .e-tab-header .e-toolbar-item .e-close-icon:hover {
@@ -3917,6 +3909,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 {
@@ -3947,10 +3940,6 @@
   color: #fff;
 }
 
-.e-tab.e-background .e-tab-header .e-toolbar-item.e-active .e-close-icon:hover {
-  color: #4f46e5;
-}
-
 .e-tab.e-background .e-tab-header .e-toolbar-item.e-active.e-itop .e-tab-wrap,
 .e-tab.e-background .e-tab-header .e-toolbar-item.e-active.e-ibottom .e-tab-wrap {
   background: rgba(79, 70, 229, 0);
@@ -4149,7 +4138,6 @@
   color: #111827;
   font-size: 14px;
   line-height: 22px;
-  padding: 12px 0;
 }
 
 .e-tab-clone-element {