@syncfusion/ej2-navigations 31.2.12 → 32.1.19

package/styles/tab/_tailwind-definition.scss

@@ -1,14 +1,21 @@
+@use 'ej2-base/styles/definition/tailwind' as *;
+@forward 'ej2-base/styles/definition/tailwind';
 $tab-skin: 'tailwind' !default;
 $tab-big-vertical-scroll-nav-top-bottom: 23px !default;
 $tab-big-vertical-nav-arrow-size: $text-base !default;
+$tab-big-vertical-nav-arrow-height: $text-base !default;
+$tab-big-vertical-nav-arrow-line-height: 16px !default;
 $tab-big-vertical-nav-arrow-font-size: $text-base !default;
 $tab-font-family: $font-family !default;
 $tab-nrml-vertical-scroll-nav-top-bottom: 15px !default;
 $tab-nrml-vertical-nav-arrow-size: $text-sm !default;
+$tab-nrml-vertical-nav-arrow-line-height: 14px !default;
 $tab-nrml-vertical-nav-arrow-font-size: $text-sm !default;
 $tab-text-transform: capitalize !default;
 $tab-big-height: 48px !default;
+$tab-big-min-height: 48px !default;
 $tab-nrml-height: 38px !default;
+$tab-nrml-min-height: 38px !default;
 $tab-big-text-wrap-height: 24px !default;
 $tab-nrml-text-wrap-height: 22px !default;
 $tab-focus-big-height: 48px !default;
@@ -18,15 +25,23 @@ $tab-active-nrml-height: 38px !default;
 $tab-active-focus-big-height: 48px !default;
 $tab-active-focus-nrml-height: 38px !default;
 $tab-big-fill-height: 46px !default;
+$tab-big-fill-min-height: 46px !default;
 $tab-nrml-fill-height: 34px !default;
+$tab-nrml-fill-minheight: 34px !default;
 $tab-mob-fill-height: 46px !default;
+$tab-mob-fill-min-height: 46px !default;
 $tab-focus-big-fill-height: 46px !default;
 $tab-focus-nrml-fill-height: 34px !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: $content-text-color !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;
@@ -55,13 +70,18 @@ $tab-nrml-item-margin: 0 !default;
 $tab-big-item-padding: 0 8px !default;
 $tab-nrml-item-padding: 0 6px !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: 48px !default;
+$tab-pop-big-icon-top-bottom-item-min-height: 48px !default;
 $tab-pop-nrml-icon-top-bottom-item-height: 36px !default;
+$tab-pop-nrml-icon-top-bottom-item-min-height: 36px !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: 70px !default;
+$tab-big-fill-icon-top-bottom-item-min-height: 70px !default;
 $tab-nrml-fill-icon-top-bottom-item-height: 60px !default;
+$tab-nrml-fill-icon-top-bottom-item-min-height: 60px !default;
 $tab-big-focus-fill-icon-top-bottom-item-height: 70px !default;
 $tab-nrml-focus-fill-icon-top-bottom-item-height: 60px !default;
 $tab-big-first-item-margin: 0 !default;
@@ -81,13 +101,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: $tab-big-height !default;
+$tab-big-pop-item-min-height: $tab-big-height !default;
 $tab-nrml-pop-item-height: $tab-nrml-height !default;
+$tab-nrml-pop-item-min-height: $tab-nrml-height !default;
 $tab-alt-item-margin: 0 !default;
 $tab-big-rtl-item-margin: 0 !default;
 $tab-nrml-rtl-item-margin: 0 !default;
 $tab-big-rtl-alt-item-margin: 0 !default;
 $tab-nrml-rtl-alt-item-margin: 0 !default;
 $tab-mob-pop-item-height: 48px !default;
+$tab-mob-pop-item-min-height: 48px !default;
 $tab-ripple-bg-color: rgba($transparent, .12) !default;
 $tab-fill-ripple-bg-color: rgba($transparent, .05) !default;
 $tab-alt-ripple-bg-color: rgba($transparent, .1) !default;
@@ -181,6 +204,7 @@ $tab-nrml-even-active-text-container-height: 38px !default;
 $tab-even-active-text-container-margin: 0 !default;
 $tab-big-font-size: $text-base !default;
 $tab-nrml-font-size: $text-sm !default;
+$tab-nrml-font-icon-size: $text-sm !default;
 $tab-font-weight: $font-weight-medium !default;
 $tab-semi-font-weight: $font-weight-medium !default;
 $tab-light-font-weight: $font-weight-medium !default;
@@ -222,7 +246,10 @@ $tab-clone-text-color: $content-text-color-alt1 !default;
 $tab-icon-container-width: auto !default;
 $tab-nav-pop-press-border: 0 !default;
 $tab-big-nav-icon-container-size: 48px !default;
+$tab-big-nav-icon-container-height: 48px !default;
+$tab-big-nav-icon-container-line-height: 48px !default;
 $tab-nrml-nav-icon-container-size: 24px !default;
+$tab-nrml-nav-icon-container-line-height: 24px !default;
 $tab-big-nav-icon-size: $text-base !default;
 $tab-nrml-nav-icon-size: $text-sm !default;
 $tab-mob-nav-icon-size: $text-base !default;
@@ -231,8 +258,13 @@ $tab-nrml-icon-size: $text-sm !default;
 $tab-mob-icon-size: $text-base !default;
 $tab-mob-nav-vicon-size: $text-base !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: 24px !default;
+$tab-mob-icon-container-height: 24px !default;
 $tab-big-nav-icon-top: 2px !default;
 $tab-nrml-nav-icon-top: 2px !default;
 $tab-big-nav-pop-icon-top: 5px !default;
@@ -391,6 +423,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;
@@ -646,3 +679,20 @@ $tab-background-accent-indicator-bg: $tab-alt-border-color !default;
 $tab-background-active-text-font-weight: $font-weight-medium !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;

package/styles/tab/_tailwind3-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@forward 'ej2-base/styles/definition/tailwind3';
 $tab-skin: $skin-name !default;
 $tab-font-family: $font-family !default;
 $tab-big-vertical-nav-arrow-font-size: $text-xs !default;
@@ -5,11 +7,14 @@ $tab-nrml-vertical-nav-arrow-font-size: $text-xxs !default;
 $tab-content-font-color: $content-text-color !default;
 $tab-big-font-size: $text-base !default;
 $tab-nrml-font-size: $text-sm !default;
+$tab-nrml-font-icon-size: 14px !default;
 $tab-font-weight: $font-weight-medium !default;
 $tab-semi-font-weight: $font-weight-medium !default;
 $tab-light-font-weight: $font-weight-medium !default;
 $tab-big-height: 56px !default;
+$tab-big-min-height: 56px !default;
 $tab-nrml-height: 48px !default;
+$tab-nrml-min-height: 48px !default;
 $tab-focus-big-height: 42px !default;
 $tab-focus-nrml-height: 32px !default;
 $tab-active-big-height: 42px !default;
@@ -17,20 +22,31 @@ $tab-active-nrml-height: 32px !default;
 $tab-active-focus-big-height: 42px !default;
 $tab-active-focus-nrml-height: 32px !default;
 $tab-big-fill-height: 56px !default;
+$tab-big-fill-min-height: 56px !default;
 $tab-nrml-fill-height: 48px !default;
+$tab-nrml-fill-minheight: 48px !default;
 $tab-mob-fill-height: 56px !default;
+$tab-mob-fill-min-height: 56px !default;
 $tab-focus-big-fill-height: 56px !default;
 $tab-focus-nrml-fill-height: 48px !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-big-vertical-scroll-nav-top-bottom: 23px !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-nrml-vertical-scroll-nav-top-bottom: 15px !default;
 $tab-nrml-vertical-nav-arrow-size: 16px !default;
+$tab-nrml-vertical-nav-arrow-line-height: 16px !default;
 $tab-text-transform: capitalize !default;
 $tab-border-width: 2px !default;
-$tab-border-style: $tab-border-width Solid !default;
+$tab-border-height: 2px !default;
+$tab-border-style: 2px Solid !default;
 $tab-focus-outline: 0 !default;
 $tab-active-focus-outline: 0 !default;
 $tab-active-text-item-border: 0 !default;
@@ -46,19 +62,24 @@ $tab-border: none !default;
 $tab-focus-hscroll-content-padding: 1px 0 !default;
 $tab-hdr-border-width: 0 0 1px 0 !default;
 $tab-alt-hdr-border: 0 !default;
-$tab-items-border: 1px solid $primary-text-color !default;
+$tab-items-border: 0 solid $primary-text-color !default;
 $tab-big-item-margin: 0 !default;
 $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;
@@ -78,13 +99,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: 56px !default;
+$tab-big-pop-item-min-height: 56px !default;
 $tab-nrml-pop-item-height: 40px !default;
+$tab-nrml-pop-item-min-height: 40px !default;
 $tab-alt-item-margin: 0 2px 0 0 !default;
 $tab-big-rtl-item-margin: 0 !default;
 $tab-nrml-rtl-item-margin: 0 !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-item-border: none !default;
 $tab-active-item-border: none !default;
 $tab-active-item-hide-border: 1px solid $content-bg-color !default;
@@ -101,12 +125,12 @@ $tab-big-boot-active-item-padding-bottom: 0 !default;
 $tab-nrml-boot-active-item-padding-bottom: 0 !default;
 $tab-big-even-boot-active-item-padding-bottom: 1px !default;
 $tab-nrml-even-boot-active-item-padding-bottom: 0 !default;
-$tab-active-item-border-radius: 0 !default;
-$tab-item-wrap-border-radius: 0 !default;
-$tab-top-active-item-border-radius: 0 !default;
-$tab-bottom-active-item-border-radius: 0 !default;
-$tab-left-active-item-border-radius: 0 !default;
-$tab-right-active-item-border-radius: 0 !default;
+$tab-active-item-border-radius: $radius-0 !default;
+$tab-item-wrap-border-radius: $radius-0 !default;
+$tab-top-active-item-border-radius: $radius-0 !default;
+$tab-bottom-active-item-border-radius: $radius-0 !default;
+$tab-left-active-item-border-radius: $radius-0 !default;
+$tab-right-active-item-border-radius: $radius-0 !default;
 $tab-hscroll-item-padding: 0 !default;
 $tab-big-item-last-child-padding-bottom: 3px !default;
 $tab-nrml-item-last-child-padding-bottom: 1px !default;
@@ -178,7 +202,10 @@ $tab-fill-big-even-active-text-height: 50px !default;
 $tab-fill-nrml-even-active-text-height: 40px !default;
 $tab-icon-container-width: auto !default;
 $tab-big-nav-icon-container-size: 56px !default;
+$tab-big-nav-icon-container-height: 56px !default;
+$tab-big-nav-icon-container-line-height: 56px !default;
 $tab-nrml-nav-icon-container-size: 48px !default;
+$tab-nrml-nav-icon-container-line-height: 48px !default;
 $tab-big-nav-icon-size: 18px !default;
 $tab-nrml-nav-icon-size: 16px !default;
 $tab-mob-nav-icon-size: 16px !default;
@@ -187,8 +214,13 @@ $tab-big-icon-size: 16px !default;
 $tab-nrml-icon-size: 16px !default;
 $tab-mob-icon-size: 20px !default;
 $tab-big-icon-container-size: 24px !default;
+$tab-big-icon-container-height: 24px !default;
+$tab-big-icon-container-width: 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;
@@ -237,7 +269,7 @@ $tab-nrml-pop-close-top: 0 !default;
 $tab-big-safari-close-icon-top: 0 !default;
 $tab-nrml-safari-close-icon-top: -1px !default;
 $tab-pop-border: 1px solid $flyout-border !default;
-$tab-pop-border-radius: 4px !default;
+$tab-pop-border-radius: $radius-4 !default;
 $tab-big-nav-right-icon-padding: 0 !default;
 $tab-nrml-nav-right-icon-padding: 0 !default;
 $tab-mob-nav-right-icon-padding: 0 !default;
@@ -340,7 +372,7 @@ $tab-bgr-active-last-margin: 1px 2px 0 0 !default;
 $tab-bgr-hscroll-items-nav-width: 38px !default;
 $tab-bgr-item-textwrap-height: $tab-big-height !default;
 $tab-bgr-active-icon-top: -.5px !default;
-$tab-bgr-icon-line-height: $tab-big-icon-container-size !default;
+$tab-bgr-icon-line-height: 24px !default;
 $tab-bgr-mob-item-iconright-margin: 0 !default;
 $tab-bgr-pop-item-textwrap-height: $tab-big-pop-item-height !default;
 $tab-bgr-scroll-nav-arrow-before-top: 0 !default;
@@ -363,9 +395,9 @@ $tab-bgr-background-active-padding: $tab-alt-big-active-item-padding !default;
 $tab-bgr-fill-active-item-padding: 0 !default;
 $tab-bgr-item-text-margin-bottom: 0 !default;
 $tab-nrml-hscroll-items-nav-width: 32px !default;
-$tab-nrml-hscroll-items-bdr-radius: 4px !default;
+$tab-nrml-hscroll-items-bdr-radius: $radius-4 !default;
 $tab-nrml-item-text-wrap-height: $tab-nrml-height !default;
-$tab-nrml-item-tabicon-line-height: 1 !default;
+$tab-nrml-item-tabicon-line-height: 16px !default;
 $tab-nrml-pop-item-textwrap-height: $tab-nrml-pop-item-height !default;
 $tab-nrml-scroll-nav-arrow-before-top: 0 !default;
 $tab-nrml-hor-pop-lineheight: 32px !default;
@@ -387,6 +419,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;
@@ -397,7 +430,7 @@ $tab-nrml-item-active-after-font-weight: $font-weight-normal !default;
 $tab-nrml-item-active-after-height: unset !default;
 $tab-nrml-item-active-after-overflow: unset !default;
 $tab-nrml-hscroll-bar-padding: 0 !default;
-$tab-nrml-vertical-indicator-bdr-radius: 0 !default;
+$tab-nrml-vertical-indicator-bdr-radius: $radius-0 !default;
 $tab-nrml-indicator-transition: all .4s cubic-bezier(.25, .46, .45, .94) !default;
 $tab-nrml-active-item-tabicon-before-top: -1px !default;
 $tab-nrml-bottom-active-before-top: unset !default;
@@ -485,7 +518,7 @@ $tab-item-icon-before-top: 1px !default;
 $tab-item-icon-before-left: 5px !default;
 $tab-item-active-border-bottom: initial !default;
 $tab-pop-wrap-hover-border: none !default;
-$tab-pop-wrap-hover-border-radius: 0 !default;
+$tab-pop-wrap-hover-border-radius: $radius-0 !default;
 $tab-pop-wrap-hover-close-color: $tab-hover-text-color !default;
 $tab-pop-wrap-active-border-color: transparent !default;
 $tab-pop-wrap-active-icon-font: $flyout-text-color-pressed !default;
@@ -606,14 +639,14 @@ $tab-background-popicon-focus-active-bg: $tab-pop-focus-icon-active-bg !default;
 $tab-background-popicon-focus-active-border-color: unset !default;
 $tab-background-popicon-focus-active-color: $tab-bg-hover-nav-icon-color !default;
 $tab-background-bottom-active-wrap-border-color: $tab-alt-active-bg-color !default;
-$tab-background-bottom-active-wrap-border-radius: 0 0 4px 4px !default;
+$tab-background-bottom-active-wrap-border-radius: $radius-0 $radius-0 $radius-4 $radius-4 !default;
 $tab-background-bottom-active-wrap-border-width: 0 2px 2px !default;
 $tab-background-vertical-left-active-border-color: unset !default;
 $tab-background-vertical-left-active-border-width: 0 !default;
-$tab-background-vertical-left-active-wrap-border-radius: 4px 0 0 4px !default;
+$tab-background-vertical-left-active-wrap-border-radius: $radius-4 $radius-0 $radius-0 $radius-4 !default;
 $tab-background-vertical-left-active-wrap-border-width: 0 !default;
 $tab-background-vertical-right-active-border-width: 0 !default;
-$tab-background-vertical-right-active-wrap-border-radius: 0 !default;
+$tab-background-vertical-right-active-wrap-border-radius: $radius-0 !default;
 $tab-background-vertical-right-active-wrap-border-width: 0 !default;
 $tab-background-focused-active-wrap-hover-bg: $tab-background-active-wrap-bg !default;
 $tab-background-focused-active-wrap-hover-border: 0 !default;
@@ -632,3 +665,21 @@ $tab-background-accent-indicator-bg: $primary-text !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: $primary-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: $radius-0 !default;
+$tab-text-wrap-border-radius: $radius-3 $radius-3 $radius-0 $radius-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;

package/styles/tab/_theme-variables.scss

@@ -0,0 +1 @@
+@forward './_tailwind3-definition';

package/styles/tab/_theme.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('tab-theme') {
   .e-tab {
     background: $tab-bg-color;
@@ -5,8 +7,8 @@
 
     .e-tab-header {
       background: inherit;
-      border: 0;
-      border-radius: 0;
+      border: $tab-border-none;
+      border-radius: $tab-border-radius-none;
       box-shadow: none;
       font-weight: $tab-header-font-weight;
       border-bottom: $tab-header-border-bottom;
@@ -26,7 +28,7 @@
 
         .e-toolbar-item.e-active {
           border-bottom: $tab-item-active-border-bottom;
-          margin-bottom: 0;
+          margin-bottom: $tab-margin-none;
         }
       }
 
@@ -110,7 +112,7 @@
               position: $tab-active-wrap-before-position;
               width: $tab-active-wrap-before-width;
               @if ($skin-name == 'Material3' or $skin-name == 'tailwind3') {
-                border-radius: 3px 3px 0 0;
+                border-radius: $tab-text-wrap-border-radius;
                 bottom: $tab-active-wrap-before-top;
               }
               @else {
@@ -248,7 +250,7 @@
       .e-scroll-nav,
       .e-hscroll:not(.e-scroll-device) .e-scroll-nav {
         background: $tab-scroll-nav-bg;
-        border: 0;
+        border: $tab-border-none;
 
         .e-nav-arrow {
           color: $tab-scroll-nav-arrow-font;
@@ -316,7 +318,7 @@
       .e-hor-nav,
       .e-hor-nav:not(.e-expended-nav) {
         background: transparent;
-        border: 0;
+        border: $tab-border-none;
 
         .e-popup-up-icon,
         .e-popup-down-icon {
@@ -363,7 +365,7 @@
         }
 
         &:hover {
-          border: 0;
+          border: $tab-border-none;
           background: $tab-pop-hover-bg;
 
           &:active {
@@ -435,7 +437,7 @@
       }
 
       &.e-vertical {
-        border-bottom: 0;
+        border-bottom: $tab-border-none;
 
         &::before {
           border-width: $tab-vertical-before-border-width;
@@ -496,7 +498,7 @@
           }
 
           .e-nav-arrow {
-            border: 0;
+            border: $tab-border-none;
 
             &:hover {
               background: none;
@@ -535,7 +537,7 @@
 
               &:hover {
                 background: none;
-                border: 0;
+                border: $tab-border-none;
               }
             }
           }
@@ -551,11 +553,11 @@
 
           .e-popup-up-icon,
           .e-popup-down-icon {
-            border: 0;
+            border: $tab-border-none;
 
             &:hover {
               background: inherit;
-              border: 0;
+              border: $tab-border-none;
               color: $tab-vertical-pop-icon-hover-color;
             }
           }
@@ -565,13 +567,13 @@
             .e-popup-up-icon,
             .e-popup-down-icon {
               background: inherit;
-              border: 0;
+              border: $tab-border-none;
 
               &:hover,
               &:active,
               &:active:hover {
                 background: inherit;
-                border: 0;
+                border: $tab-border-none;
                 box-shadow: none;
               }
 
@@ -585,7 +587,7 @@
 
             .e-popup-up-icon,
             .e-popup-down-icon {
-              border: 0;
+              border: $tab-border-none;
             }
           }
         }
@@ -655,7 +657,7 @@
             border-color: $tab-vertical-focused-nav-focus-border-color;
 
             .e-nav-arrow {
-              border: 0;
+              border: $tab-border-none;
             }
           }
         }
@@ -664,7 +666,7 @@
 
           .e-popup-up-icon,
           .e-popup-down-icon {
-            border: 0;
+            border: $tab-border-none;
           }
 
           &:focus {
@@ -710,11 +712,11 @@
         border-bottom: $tab-fill-hdr-border;
 
         .e-toolbar-items.e-hscroll {
-          border: 0;
+          border: $tab-border-none;
         }
 
         .e-toolbar-item {
-          border: 0;
+          border: $tab-border-none;
 
           .e-ripple-element {
             background: $tab-fill-ripple-bg-color;
@@ -749,11 +751,11 @@
           }
 
           .e-text-wrap {
-            margin-top: 0;
+            margin-top: $tab-margin-none;
           }
 
           &.e-active {
-            border: 0;
+            border: $tab-border-none;
 
             &.e-disable.e-overlay {
 
@@ -775,7 +777,7 @@
             }
 
             .e-text-wrap {
-              margin-top: 0;
+              margin-top: $tab-margin-none;
             }
 
             .e-text-wrap::before {
@@ -826,19 +828,19 @@
         }
 
         &.e-horizontal-bottom {
-          border-bottom: 0;
+          border-bottom: $tab-border-none;
           border-top: $tab-fill-hdr-border;
 
           .e-toolbar-item {
 
             &.e-active .e-text-wrap {
-              margin-top: 0;
+              margin-top: $tab-margin-none;
             }
           }
         }
 
         &.e-vertical {
-          border-bottom: 0;
+          border-bottom: $tab-border-none;
 
           &.e-vertical-left {
             border-right: $tab-fill-hdr-border;
@@ -899,7 +901,7 @@
           }
 
           &.e-horizontal-bottom {
-            border-bottom: 0;
+            border-bottom: $tab-border-none;
             border-top: $tab-fill-disable-hdr-border;
           }
         }
@@ -940,14 +942,14 @@
 
       .e-tab-header {
         background: $tab-alt-hdr-bg-color;
-        border: 0;
+        border: $tab-border-none;
 
         .e-toolbar-items {
           background: $tab-alt-item-bg-color;
         }
 
         .e-toolbar-items.e-hscroll {
-          border: 0;
+          border: $tab-border-none;
         }
 
         .e-indicator {
@@ -956,7 +958,7 @@
         }
 
         .e-toolbar-item {
-          border: 0;
+          border: $tab-border-none;
 
           .e-ripple-element {
             background: $tab-alt-ripple-bg-color;
@@ -1004,8 +1006,8 @@
           }
 
           &.e-active {
-            border: 0;
-            margin: 0;
+            border: $tab-border-none;
+            margin: $tab-margin-none;
             background: $tab-background-active-bg;
 
             &.e-disable.e-overlay {
@@ -1092,7 +1094,7 @@
             .e-text-wrap::before {
               border: $tab-nrml-bottom-wrap-before-top;
               @if ($skin-name == 'Material3') {
-                border-radius: 3px 3px 0 0;
+                border-radius: $tab-text-wrap-border-radius;
               }
             }
 
@@ -1266,8 +1268,8 @@
 
         &.e-horizontal-bottom {
           .e-toolbar-item.e-active {
-            border: 0;
-            margin: 0;
+            border: $tab-border-none;
+            margin: $tab-margin-none;
 
             .e-tab-wrap {
               border-color: $tab-background-bottom-active-wrap-border-color;
@@ -1285,7 +1287,7 @@
               border-color: $tab-background-vertical-left-active-border-color;
               border-style: solid;
               border-width: $tab-background-vertical-left-active-border-width;
-              margin: 0;
+              margin: $tab-margin-none;
               @if ($skin-name == 'fluent2') {
                 &::before {
                   background-color: $tab-background-text-color;
@@ -1306,7 +1308,7 @@
               border-color: $tab-background-vertical-left-active-border-color;
               border-style: solid;
               border-width: $tab-background-vertical-right-active-border-width;
-              margin: 0;
+              margin: $tab-margin-none;
 
               @if ($skin-name == 'fluent2') {
                 &::before {
@@ -1326,13 +1328,13 @@
           .e-scroll-nav {
 
             .e-nav-arrow {
-              border: 0;
+              border: $tab-border-none;
             }
 
             &:focus {
 
               .e-nav-arrow {
-                border: 0;
+                border: $tab-border-none;
 
                 &:hover {
                   background: none;
@@ -1546,7 +1548,7 @@
         .e-hscroll.e-rtl {
 
           .e-scroll-nav {
-            border: 0;
+            border: $tab-border-none;
           }
         }
       }