@syncfusion/ej2-navigations 31.2.16 → 32.1.24

package/styles/tab/_bigger.scss

@@ -1,3 +1,4 @@
+@use 'ej2-base/styles/common/mixin' as *;
 @mixin tab-mob-last-item-margin {
   @media screen and (max-width: 480px) {
     margin: $tab-mob-last-item-margin;
@@ -14,10 +15,10 @@
 
     .e-tab-header {
       height: $tab-big-height;
-      min-height: $tab-big-height;
+      min-height: $tab-big-min-height;
 
       .e-toolbar-items {
-        height: auto;
+        height: $tab-auto-height;
         min-height: auto;
 
         &:not(.e-tbar-pos) .e-toolbar-item:first-child,
@@ -60,7 +61,7 @@
         &:not(.e-separator) {
           height: $tab-big-height;
           margin: $tab-big-item-margin;
-          min-height: $tab-big-height;
+          min-height: $tab-big-min-height;
           min-width: auto;
           padding: $tab-big-item-padding;
 
@@ -72,7 +73,7 @@
         &:not(.e-separator).e-itop,
         &:not(.e-separator).e-ibottom {
           height: $tab-big-icon-top-bottom-item-height;
-          min-height: $tab-big-icon-top-bottom-item-height;
+          min-height: $tab-big-icon-top-bottom-item-min-height;
         }
 
         .e-tab-wrap {
@@ -138,9 +139,9 @@
         }
 
         .e-icons.e-tab-icon {
-          height: $tab-big-icon-container-size;
+          height: $tab-big-icon-container-height;
           min-width: $tab-big-icon-container-size;
-          width: $tab-big-icon-container-size;
+          width: $tab-big-icon-container-width;
           line-height: $tab-bgr-icon-line-height;
         }
 
@@ -157,7 +158,7 @@
         }
 
         .e-icon-right {
-          margin: 0 0 0 12px;
+          margin: $tab-bgr-icon-right-margin;
 
           @media screen and (max-width: 480px) {
             margin: $tab-bgr-mob-item-iconright-margin;
@@ -180,7 +181,7 @@
             height: $tab-big-icon-top-bottom-item-height;
 
             &:focus .e-text-wrap {
-              height: auto;
+              height: $tab-auto-height;
             }
           }
 
@@ -188,7 +189,7 @@
             height: $tab-big-icon-top-bottom-item-height;
 
             &:focus .e-text-wrap {
-              height: auto;
+              height: $tab-auto-height;
             }
           }
 
@@ -218,11 +219,11 @@
 
         .e-toolbar-item {
           height: $tab-big-pop-item-height;
-          min-height: $tab-big-pop-item-height;
+          min-height: $tab-big-pop-item-min-height;
 
           @if ($skin-name == 'fluent2') {
             &:not(.e-separator) {
-              margin: 1px 6px;
+              margin: $tbar-bgr-item-margin;
             }
           }
 
@@ -243,12 +244,12 @@
             padding-right: $tab-big-pop-text-padding-right;
 
             @media screen and (max-width: 480px) {
-              padding-right: 0;
+              padding-right: $tab-padding-none;
             }
           }
 
           .e-close-icon {
-            margin: 0 0 0 8px;
+            margin: $tab-close-icon-margin;
           }
 
           .e-close-icon::before {
@@ -265,10 +266,10 @@
 
           &.e-itop:not(.e-separator),
           &.e-ibottom:not(.e-separator) {
-            min-height: $tab-pop-big-icon-top-bottom-item-height;
+            min-height: $tab-pop-big-icon-top-bottom-item-min-height;
 
             @media screen and (max-width: 480px) {
-              min-height: $tab-pop-big-icon-top-bottom-item-height;
+              min-height: $tab-pop-big-icon-top-bottom-item-min-height;
             }
           }
 
@@ -285,14 +286,14 @@
 
           &.e-itop .e-tab-text,
           &.e-ibottom .e-tab-text {
-            margin: 0;
-            padding-left: 0;
-            padding-right: 12px;
+            margin: $tab-margin-none;
+            padding-left: $tab-padding-none;
+            padding-right: $tab-popup-text-padding-right;
 
             @media screen and (max-width: 480px) {
-              margin: 0;
-              padding-left: 0;
-              padding-right: 0;
+              margin: $tab-margin-none;
+              padding-left: $tab-padding-none;
+              padding-right: $tab-padding-none;
             }
           }
         }
@@ -300,7 +301,7 @@
 
       .e-scroll-nav {
         height: $tab-big-height;
-        min-height: $tab-big-height;
+        min-height: $tab-big-min-height;
         padding: $tab-big-nav-right-icon-padding;
 
         @media screen and (max-width: 480px) {
@@ -317,14 +318,14 @@
 
         .e-nav-arrow {
           font-size: $tab-big-nav-icon-size;
-          height: $tab-big-nav-icon-container-size;
-          line-height: $tab-big-nav-icon-container-size;
+          height: $tab-big-nav-icon-container-height;
+          line-height: $tab-big-nav-icon-container-line-height;
           width: $tab-big-nav-icon-container-size;
 
           @media screen and (max-width: 480px) {
             font-size: $tab-big-nav-icon-size;
-            height: $tab-big-nav-icon-container-size;
-            line-height: $tab-big-nav-icon-container-size;
+            height: $tab-big-nav-icon-container-height;
+            line-height: $tab-big-nav-icon-container-line-height;
             width: $tab-big-nav-icon-container-size;
           }
         }
@@ -334,7 +335,7 @@
 
           &::before {
             font-size: $tab-big-nav-icon-size;
-            line-height: $tab-big-nav-icon-container-size;
+            line-height: $tab-big-nav-icon-container-line-height;
             top: $tab-bgr-scroll-nav-arrow-before-top;
             vertical-align: initial;
           }
@@ -353,7 +354,7 @@
 
       .e-hor-nav {
         height: $tab-big-height;
-        min-height: $tab-big-height;
+        min-height: $tab-big-min-height;
         padding: $tab-big-nav-right-icon-padding;
 
         @media screen and (max-width: 480px) {
@@ -363,20 +364,20 @@
         .e-popup-up-icon,
         .e-popup-down-icon {
           font-size: $tab-big-nav-icon-size;
-          height: $tab-big-nav-icon-container-size;
-          line-height: $tab-big-nav-icon-container-size;
+          height: $tab-big-nav-icon-container-height;
+          line-height: $tab-big-nav-icon-container-line-height;
           width: $tab-big-nav-icon-container-size;
 
           @media screen and (max-width: 480px) {
             font-size: $tab-big-nav-icon-size;
-            height: $tab-big-nav-icon-container-size;
-            line-height: $tab-big-nav-icon-container-size;
+            height: $tab-big-nav-icon-container-height;
+            line-height: $tab-big-nav-icon-container-line-height;
             width: $tab-big-nav-icon-container-size;
           }
 
           &::before {
             font-size: $tab-big-nav-icon-size;
-            line-height: $tab-big-nav-icon-container-size;
+            line-height: $tab-big-nav-icon-container-line-height;
             top: 0;
             vertical-align: initial;
 
@@ -438,7 +439,7 @@
 
           &.e-active {
             margin: $tab-big-even-boot-item-margin;
-            padding-bottom: 0;
+            padding-bottom: $tab-padding-none;
 
             @media screen and (max-width: 480px) {
               margin: $tab-mob-even-boot-item-margin;
@@ -460,7 +461,7 @@
 
           &.e-active:last-child {
             margin: $tab-big-even-last-item-margin;
-            padding-bottom: 0;
+            padding-bottom: $tab-padding-none;
 
             @media screen and (max-width: 480px) {
               margin: $tab-mob-even-last-item-margin;
@@ -477,8 +478,8 @@
 
           &.e-itop,
           &.e-ibottom {
-            padding-bottom: 0;
-            padding-top: 0;
+            padding-bottom: $tab-padding-none;
+            padding-top: $tab-padding-none;
           }
 
           &.e-ileft.e-active .e-text-wrap {
@@ -487,12 +488,12 @@
 
           &.e-active .e-text-wrap {
             height: $tab-big-even-active-text-container-height;
-            padding: 0;
+            padding: $tab-padding-none;
           }
 
           &.e-itop.e-active .e-text-wrap,
           &.e-ibottom.e-active .e-text-wrap {
-            height: initial;
+            height: $tab-initial-height;
           }
 
           &.e-ileft.e-active {
@@ -515,12 +516,12 @@
         }
 
         .e-toolbar-items {
-          height: inherit;
+          height: $tab-inherit-height;
 
           &:not(.e-tbar-pos) {
 
             .e-toolbar-item:last-child {
-              margin: 0;
+              margin: $tab-margin-none;
             }
           }
         }
@@ -550,13 +551,13 @@
         }
 
         .e-scroll-nav {
-          height: $tab-big-vertical-nav-arrow-size;
+          height: $tab-big-vertical-nav-arrow-height;
           min-height: $tab-big-vertical-nav-arrow-size;
 
           .e-nav-arrow {
             font-size: $tab-big-vertical-nav-arrow-font-size;
-            height: $tab-big-vertical-nav-arrow-size;
-            line-height: $tab-big-vertical-nav-arrow-size;
+            height: $tab-big-vertical-nav-arrow-height;
+            line-height: $tab-big-vertical-nav-arrow-line-height;
             width: $tab-big-vertical-nav-arrow-size;
           }
         }
@@ -588,7 +589,7 @@
         &.e-toolpop {
 
           .e-toolbar-items {
-            height: auto;
+            height: $tab-auto-height;
           }
         }
       }
@@ -598,7 +599,7 @@
 
       > .e-tab-header {
         height: $tab-big-tb-icon-height;
-        min-height: $tab-big-tb-icon-height;
+        min-height: $tab-big-tb-icon-min-height;
 
         > .e-toolbar-items {
           height: $tab-big-tb-icon-height;
@@ -626,11 +627,11 @@
         .e-tab-header.e-vertical {
 
           .e-toolbar-items {
-            height: inherit;
+            height: $tab-inherit-height;
           }
 
           .e-scroll-nav {
-            height: $tab-big-vertical-nav-arrow-size;
+            height: $tab-big-vertical-nav-arrow-height;
           }
         }
       }
@@ -657,12 +658,12 @@
               height: $tab-big-focus-icon-top-bottom-item-height;
 
               .e-text-wrap {
-                height: auto;
+                height: $tab-auto-height;
               }
             }
 
             &.e-active .e-tab-wrap:focus .e-text-wrap {
-              height: auto;
+              height: $tab-auto-height;
             }
           }
         }
@@ -694,7 +695,7 @@
 
               .e-tab-wrap:focus .e-text-wrap {
                 height: $tab-bgr-item-textwrap-height;
-                padding: 0;
+                padding: $tab-padding-none;
               }
 
               &.e-ileft {
@@ -782,19 +783,19 @@
 
       .e-tab-header {
         height: $tab-big-fill-height;
-        min-height: $tab-big-fill-height;
+        min-height: $tab-big-fill-min-height;
 
         @media screen and (max-width: 480px) {
           height: $tab-mob-fill-height;
-          min-height: $tab-mob-fill-height;
+          min-height: $tab-mob-fill-min-height;
         }
 
         .e-toolbar-items {
-          height: auto;
-          min-height: $tab-big-fill-height;
+          height: $tab-auto-height;
+          min-height: $tab-big-fill-min-height;
 
           @media screen and (max-width: 480px) {
-            min-height: $tab-mob-fill-height;
+            min-height: $tab-mob-fill-min-height;
           }
         }
 
@@ -809,19 +810,19 @@
           &:not(.e-separator) {
             height: $tab-big-fill-height;
             margin: $tab-alt-item-margin;
-            min-height: $tab-big-fill-height;
+            min-height: $tab-big-fill-min-height;
             padding: $tab-bgr-fill-active-item-padding;
 
             @media screen and (max-width: 480px) {
               height: $tab-mob-fill-height;
-              min-height: $tab-mob-fill-height;
+              min-height: $tab-mob-fill-min-height;
             }
           }
 
           &:not(.e-separator).e-itop,
           &:not(.e-separator).e-ibottom {
             height: $tab-big-fill-icon-top-bottom-item-height;
-            min-height: $tab-big-fill-icon-top-bottom-item-height;
+            min-height: $tab-big-fill-icon-top-bottom-item-min-height;
           }
 
           .e-tab-wrap {
@@ -877,7 +878,7 @@
 
           .e-toolbar-item.e-itop:not(.e-separator),
           .e-toolbar-item.e-ibottom:not(.e-separator) {
-            height: auto;
+            height: $tab-auto-height;
           }
         }
 
@@ -902,7 +903,7 @@
 
           .e-toolbar-item.e-itop .e-text-wrap,
           .e-toolbar-item.e-ibottom .e-text-wrap {
-            height: auto;
+            height: $tab-auto-height;
           }
 
           .e-toolbar-item.e-itop .e-tab-wrap:focus .e-text-wrap,
@@ -938,10 +939,10 @@
               height: $tab-big-focus-fill-icon-top-bottom-item-height;
 
               .e-text-wrap {
-                height: auto;
+                height: $tab-auto-height;
 
                 @media screen and (max-width: 480px) {
-                  height: auto;
+                  height: $tab-auto-height;
                 }
               }
             }
@@ -959,8 +960,8 @@
       &.e-vertical-icon {
 
         > .e-tab-header {
-          height: $tab-big-tb-icon-height - 2;
-          min-height: $tab-big-tb-icon-height - 2;
+          height: $tab-big-tb-icon-height - $tab-big-tb-icon-height-calc;
+          min-height: $tab-big-tb-icon-min-height - 2;
         }
       }
     }
@@ -1071,14 +1072,14 @@
         .e-toolbar-pop {
 
           .e-toolbar-item {
-            margin: 0;
+            margin: $tab-margin-none;
 
             .e-tab-text {
               padding-left: $tab-rtl-big-pop-text-padding-left;
-              padding-right: 0;
+              padding-right: $tab-padding-none;
 
               @media screen and (max-width: 480px) {
-                padding-left: 0;
+                padding-left: $tab-padding-none;
               }
             }
 
@@ -1097,14 +1098,14 @@
 
             &.e-itop .e-tab-text,
             &.e-ibottom .e-tab-text {
-              margin: 0;
-              padding-left: 12px;
-              padding-right: 0;
+              margin: $tab-margin-none;
+              padding-left: $tab-popup-text-padding-right;
+              padding-right: $tab-padding-none;
 
               @media screen and (max-width: 480px) {
-                margin: 0;
-                padding-left: 0;
-                padding-right: 0;
+                margin: $tab-margin-none;
+                padding-left: $tab-padding-none;
+                padding-right: $tab-padding-none;
               }
             }
           }
@@ -1124,7 +1125,7 @@
           .e-toolbar-item {
 
             &:not(.e-separator) {
-              margin: 0;
+              margin: $tab-margin-none;
             }
 
             &.e-itop,
@@ -1157,7 +1158,7 @@
     &:not(.e-separator) {
       height: $tab-big-height;
       margin: $tab-big-item-margin;
-      min-height: $tab-big-height;
+      min-height: $tab-big-min-height;
       min-width: auto;
       padding: $tab-big-item-padding;
 
@@ -1169,7 +1170,7 @@
     &:not(.e-separator).e-itop,
     &:not(.e-separator).e-ibottom {
       height: $tab-big-icon-top-bottom-item-height;
-      min-height: $tab-big-icon-top-bottom-item-height;
+      min-height: $tab-big-icon-top-bottom-item-min-height;
     }
 
     .e-tab-wrap {
@@ -1206,9 +1207,9 @@
     }
 
     .e-icons.e-tab-icon {
-      height: $tab-big-icon-container-size;
+      height: $tab-big-icon-container-height;
       min-width: $tab-big-icon-container-size;
-      width: $tab-big-icon-container-size;
+      width: $tab-big-icon-container-width;
       line-height: $tab-bgr-icon-line-height;
     }
 
@@ -1225,7 +1226,7 @@
     }
 
     .e-icon-right {
-      margin: 0 0 0 12px;
+      margin: $tab-bgr-icon-right-margin;
 
       @media screen and (max-width: 480px) {
         margin: $tab-bgr-mob-item-iconright-margin;
@@ -1248,7 +1249,7 @@
         height: $tab-big-icon-top-bottom-item-height;
 
         &:focus .e-text-wrap {
-          height: auto;
+          height: $tab-auto-height;
         }
       }
 
@@ -1256,7 +1257,7 @@
         height: $tab-big-icon-top-bottom-item-height;
 
         &:focus .e-text-wrap {
-          height: auto;
+          height: $tab-auto-height;
         }
       }
 

package/styles/tab/_bigger.tailwind-dark.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.tailwind-dark';
+@import './_bigger';

package/styles/tab/_bigger.tailwind.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.tailwind';
+@import './_bigger';

package/styles/tab/_bigger.tailwind3.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.tailwind3';
+@import './_bigger';

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

@@ -1,4 +1,6 @@
 @use 'sass:color';
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap-dark';
 
 $tab-skin: 'bootstrap' !default;
 $tab-big-vertical-scroll-nav-top-bottom: 23px !default;
@@ -6,6 +8,8 @@ $tab-vscroll-big-padding: 24px 0 !default;
 $tab-big-v-wrap-padding: 0 20px !default;
 $tab-v-big-close-icon-top-bottom-right: -20px !default;
 $tab-big-vertical-nav-arrow-size: 24px !default;
+$tab-big-vertical-nav-arrow-height: 24px !default;
+$tab-big-vertical-nav-arrow-line-height: 24px !default;
 $tab-big-vertical-nav-arrow-font-size: 12px !default;
 $tab-big-more-btn-line-height: 48px !default;
 $tab-pop-more-icon-margin: 0 0 0 8px !default;
@@ -18,6 +22,7 @@ $tab-vscroll-nrml-padding: 16px 0 !default;
 $tab-nrml-v-wrap-padding: 0 15px !default;
 $tab-v-nrml-close-icon-top-bottom-right: -15px !default;
 $tab-nrml-vertical-nav-arrow-size: 16px !default;
+$tab-nrml-vertical-nav-arrow-line-height: 16px !default;
 $tab-nrml-vertical-nav-arrow-font-size: 10px !default;
 $tab-nrml-more-btn-line-height: 36px !default;
 $tab-v-rtl-nrml-close-icon-top-bottom-left: -15px !default;
@@ -33,7 +38,9 @@ $tab-v-nav-focus-bg-color: $grey-lighter !default;
 $tab-v-pop-focus-outline: 0 !default;
 $tab-text-transform: capitalize !default;
 $tab-big-height: 50px !default;
+$tab-big-min-height: 50px !default;
 $tab-nrml-height: 40px !default;
+$tab-nrml-min-height: 40px !default;
 $tab-focus-big-height: 50px !default;
 $tab-focus-nrml-height: 40px !default;
 $tab-active-big-height: 50px !default;
@@ -41,15 +48,23 @@ $tab-active-nrml-height: 40px !default;
 $tab-active-focus-big-height: 50px !default;
 $tab-active-focus-nrml-height: 40px !default;
 $tab-big-fill-height: 50px !default;
+$tab-big-fill-min-height: 50px !default;
 $tab-nrml-fill-height: 40px !default;
+$tab-nrml-fill-minheight: 40px !default;
 $tab-mob-fill-height: 50px !default;
+$tab-mob-fill-min-height: 50px !default;
 $tab-focus-big-fill-height: 50px !default;
 $tab-focus-nrml-fill-height: 40px !default;
 $tab-disable-cnt-opacity: .38 !default;
 $tab-big-tb-icon-height: 72px !default;
+$tab-big-tb-icon-height-calc: 2 !default;
+$tab-big-tb-icon-min-height: 72px !default;
 $tab-nrml-tb-icon-height: 62px !default;
+$tab-nrml-tb-icon-height-calc: 2 !default;
+$tab-nrml-tb-icon-min-height: 62px !default;
 $tab-content-font-color: $grey-dark-font !default;
 $tab-border-width: 2px !default;
+$tab-border-height: 2px !default;
 $tab-border-style: $tab-border-width Solid !default;
 $tab-focus-outline: 0 !default;
 $tab-active-focus-outline: 0 !default;
@@ -78,13 +93,18 @@ $tab-nrml-item-margin: 0 !default;
 $tab-big-item-padding: 0 !default;
 $tab-nrml-item-padding: 0 !default;
 $tab-big-icon-top-bottom-item-height: 72px !default;
+$tab-big-icon-top-bottom-item-min-height: 72px !default;
 $tab-nrml-icon-top-bottom-item-height: 62px !default;
 $tab-pop-big-icon-top-bottom-item-height: 50px !default;
+$tab-pop-big-icon-top-bottom-item-min-height: 50px !default;
 $tab-pop-nrml-icon-top-bottom-item-height: 40px !default;
+$tab-pop-nrml-icon-top-bottom-item-min-height: 40px !default;
 $tab-big-focus-icon-top-bottom-item-height: 72px !default;
 $tab-nrml-focus-icon-top-bottom-item-height: 62px !default;
 $tab-big-fill-icon-top-bottom-item-height: 72px !default;
+$tab-big-fill-icon-top-bottom-item-min-height: 72px !default;
 $tab-nrml-fill-icon-top-bottom-item-height: 62px !default;
+$tab-nrml-fill-icon-top-bottom-item-min-height: 62px !default;
 $tab-big-focus-fill-icon-top-bottom-item-height: 72px !default;
 $tab-nrml-focus-fill-icon-top-bottom-item-height: 62px !default;
 $tab-big-first-item-margin: 0 !default;
@@ -104,13 +124,16 @@ $tab-big-alt-first-item-margin: 0 !default;
 $tab-nrml-alt-first-item-margin: 0 !default;
 $tab-pop-item-margin: 0 !default;
 $tab-big-pop-item-height: 40px !default;
+$tab-big-pop-item-min-height: 40px !default;
 $tab-nrml-pop-item-height: 26px !default;
+$tab-nrml-pop-item-min-height: 26px !default;
 $tab-alt-item-margin: 0 2px 0 0 !default;
 $tab-big-rtl-item-margin: 1px 0 -6px 2px !default;
 $tab-nrml-rtl-item-margin: 1px 0 -4px 2px !default;
 $tab-big-rtl-alt-item-margin: 0 0 0 2px !default;
 $tab-nrml-rtl-alt-item-margin: 0 0 0 2px !default;
 $tab-mob-pop-item-height: 50px !default;
+$tab-mob-pop-item-min-height: 50px !default;
 $tab-ripple-bg-color: rgba($grey, 0) !default;
 $tab-fill-ripple-bg-color: rgba($grey, 0) !default;
 $tab-alt-ripple-bg-color: rgba($grey, 0) !default;
@@ -203,6 +226,7 @@ $tab-nrml-even-active-text-container-height: 40px !default;
 $tab-even-active-text-container-margin: 0 !default;
 $tab-big-font-size: 15px !default;
 $tab-nrml-font-size: 14px !default;
+$tab-nrml-font-icon-size: 14px !default;
 $tab-font-weight: 400 !default;
 $tab-semi-font-weight: 400 !default;
 $tab-light-font-weight: 400 !default;
@@ -244,7 +268,10 @@ $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;
+$tab-big-nav-icon-container-height: 44px !default;
+$tab-big-nav-icon-container-line-height: 44px !default;
 $tab-nrml-nav-icon-container-size: 34px !default;
+$tab-nrml-nav-icon-container-line-height: 34px !default;
 $tab-big-nav-icon-size: 16px !default;
 $tab-nrml-nav-icon-size: 16px !default;
 $tab-mob-nav-icon-size: 16px !default;
@@ -253,8 +280,13 @@ $tab-big-icon-size: 20px !default;
 $tab-nrml-icon-size: 16px !default;
 $tab-mob-icon-size: 20px !default;
 $tab-big-icon-container-size: 24px !default;
+$tab-big-icon-container-width: 24px !default;
+$tab-big-icon-container-height: 24px !default;
 $tab-nrml-icon-container-size: 20px !default;
+$tab-nrml-icon-container-height: 20px !default;
+$tab-nrml-icon-container-width: 20px !default;
 $tab-mob-icon-container-size: 20px !default;
+$tab-mob-icon-container-height: 20px !default;
 $tab-big-nav-icon-top: 11px !default;
 $tab-nrml-nav-icon-top: 5px !default;
 $tab-big-nav-pop-icon-top: 13px !default;
@@ -416,6 +448,7 @@ $tab-nrml-item-active-before-bg-font: unset !default;
 $tab-nrml-item-active-before-bottom: unset !default;
 $tab-nrml-item-active-before-content: unset !default;
 $tab-nrml-item-active-before-height: unset !default;
+$tab-nrml-item-active-before-width: unset !default;
 $tab-nrml-item-active-before-left: unset !default;
 $tab-nrml-item-active-before-position: unset !default;
 $tab-nrml-item-active-before-transition: unset !default;
@@ -622,6 +655,23 @@ $tab-background-accent-indicator-bg: $tab-border-color !default;
 $tab-background-active-text-font-weight: $tab-light-font-weight !default;
 $tab-background-text-color: $tab-alt-text-color !default;
 $tab-fill-background-disable-text-color: $tab-disable-text-color !default;
+$tab-bgr-icon-right-margin: 0 0 0 12px !default;
+$tab-padding-none: 0 !default;
+$tab-margin-none: 0 !default;
+$tab-close-icon-margin: 0 0 0 8px !default;
+$tab-popup-text-padding-right: 12px !default;
+$tab-nrml-pop-text-margin: 0 0 0 10px !default;
+$tab-mob-pop-text-margin: 0 0 0 12px !default;
+$tab-nrml-pop-text-padding-right: 10px !default;
+$tab-popup-down-icon-font-size: 12px !default;
+$tab-clone-element-icon-margin: 0 0 0 8px !default;
+$tab-border-none: 0 !default;
+$tab-border-radius-none: 0 !default;
+$tab-content-height: 100% !default;
+$tab-auto-height: auto !default;
+$tab-initial-height: initial !default;
+$tab-inherit-height: inherit !default;
+$tbar-margin-auto: auto !default;
 @mixin tbar-alt-btn-animation-after {
   animation: none;
 }