@syncfusion/ej2-navigations 25.2.4 → 26.1.35-750253

package/styles/tab/_fusionnew-definition.scss

@@ -1,9 +1,4 @@
-/*! Tab's bootstrap5 theme wise override definitions and variables */
-/* stylelint-disable */
-/*! Horizontal Tab */
 $tab-skin: 'bootstrap5' !default;
-
-// font definitions
 $tab-font-family: $font-family !default;
 $tab-big-vertical-nav-arrow-font-size: 12px !default;
 $tab-nrml-vertical-nav-arrow-font-size: 10px !default;
@@ -13,8 +8,6 @@ $tab-nrml-font-size: 14px !default;
 $tab-font-weight: 400 !default;
 $tab-semi-font-weight: 400 !default;
 $tab-light-font-weight: 400 !default;
-
-// dimension definitions
 $tab-big-height: 42px !default;
 $tab-nrml-height: 32px !default;
 $tab-focus-big-height: 42px !default;
@@ -258,8 +251,6 @@ $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;
-
-// color definitions
 $tab-border-color: $border-light !default;
 $tab-hover-border-color: $border-light !default;
 $tab-disable-border-color: rgba($border-light, .38) !default;
@@ -340,14 +331,12 @@ $tab-pop-icon-focus-border: 1px solid $border-light !default;
 $tab-pop-icon-active-border: 1px solid $border-light !default;
 $tab-pop-border-box-shadow: inset $shadow-sm !default;
 $tab-bg-hover-nav-icon-color: $icon-color !default;
-
 $tab-nav-pop-press-border: 3px solid $transparent !default;
 $tab-nav-pop-press-active-border: 3px solid $border-dark !default;
 $tab-pop-box-shadow: $shadow-lg !default;
 $tab-pop-icon-transition: none !default;
 $tab-pop-up-icon-transform: rotate(0deg) !default;
 $tab-pop-down-icon-transform: rotate(0deg) !default;
-
 $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;
@@ -374,7 +363,6 @@ $tab-bgr-rtl-icon-right-margin: 0 !default;
 $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-item-text-wrap-height: $tab-nrml-height !default;
@@ -432,16 +420,12 @@ $tab-nrml-bottom-wrap-before-top: unset !default;
 $tab-nrml-background-vertical-indicator-display: none !default;
 $tab-nrml-background-active-padding: $tab-alt-nrml-active-item-padding !default;
 $tab-nrml-item-text-margin-bottom: 0 !default;
-
 @mixin tbar-alt-btn-animation-after {
   animation: none;
 }
-
 @mixin hscroll-alt-btn-animation-after {
   animation: none;
 }
-
-/*! Bootstrap specific themes definition's */
 $tab-alt-focused-active-wrap-focus-or-hover-color: $content-text-color-alt2 !default;
 $tab-alt-focused-active-wrap-focus-and-hover-color: $content-text-color-alt2 !default;
 $tab-even-active-item-bottom-border-color: 1px solid $border-light !default;
@@ -452,8 +436,6 @@ $tab-alt-wrap-hover-color: darken($secondary, 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;
-
-/*! Vertical Tab */
 $tab-vscroll-nrml-padding: 16px 0 !default;
 $tab-vscroll-big-padding: 24px 0 !default;
 $tab-big-v-wrap-padding: 0 16px !default;
@@ -476,7 +458,6 @@ $tab-v-pop-focus-outline: 0 !default;
 $tab-vscroll-nav-border-color: rgba($content-bg-color-alt3, .12) !default;
 $tab-v-nav-focus-bg-color: rgba($content-bg-color-alt2, .12) !default;
 $tab-v-nav-hover-bg-color: rgba($content-bg-color-alt2, .12) !default;
-
 $tab-header-font-weight: 400 !default;
 $tab-header-before-border-color: $tab-hdr-bdr-color !default;
 $tab-header-before-border-width: 0 0 1px !default;
@@ -503,7 +484,6 @@ $tab-item-left-icon-before-top: 0 !default;
 $tab-item-icon-before-top: 1px !default;
 $tab-item-icon-before-left: 5px !default;
 $tab-item-active-border-bottom: 1px solid $content-bg-color !default;
-
 $tab-pop-wrap-hover-border: $tab-vscroll-nav-border !default;
 $tab-pop-wrap-hover-border-radius: 0 !default;
 $tab-pop-wrap-hover-close-color: $tab-hover-text-color !default;
@@ -518,7 +498,6 @@ $tab-pop-nav-active-bg: $tab-nav-focus-bg-color !default;
 $tab-pop-nav-active-border: $tab-nav-pop-press-active-border !default;
 $tab-pop-nav-active-border-radius: $tab-active-item-border-radius !default;
 $tab-pop-active-icons-color: $content-text-color-alt2 !default;
-
 $tab-scroll-nav-bg: inherit !default;
 $tab-scroll-nav-arrow-font: $tab-nav-icon-color !default;
 $tab-scroll-arrow-hover-border: $tab-item-active-wrap-border !default;
@@ -534,7 +513,6 @@ $tab-scroll-overlay-arrow-hover-bg: $tab-hover-nav-bg-color !default;
 $tab-scroll-overlay-arrow-hover-border-color: unset !default;
 $tab-scroll-focused-nav-focus-icon-bg: $tab-nav-focus-bg-color !default;
 $tab-scroll-focused-nav-focus-icon-border: $tab-pop-up-icon-focus-border !default;
-
 $tab-bottom-border-color: unset !default;
 $tab-bottom-border-width: 0 !default;
 $tab-bottom-hidden-items-border-color: $primary-text-color !default;
@@ -542,7 +520,6 @@ $tab-bottom-hidden-items-border-width: 1px 0 0 !default;
 $tab-bottom-active-border-color: $tab-active-item-border-color $border-light $border-light !default;
 $tab-bottom-active-border-width: 1px !default;
 $tab-bottom-active-margin-top: 0 !default;
-
 $tab-vertical-scroll-hover-border-color: $tab-vscroll-nav-border-color transparent transparent !default;
 $tab-vertical-scroll-hover-active-bg: $tab-v-nav-focus-bg-color !default;
 $tab-vertical-focus-active-arrow-color: none !default;
@@ -550,7 +527,6 @@ $tab-vertical-pop-icon-hover-color: $tab-hover-text-color !default;
 $tab-vertical-pop-icon-active-color: $tab-nav-focus-icon-color !default;
 $tab-vertical-focused-nav-focus-border-color: $tab-vertical-scroll-hover-border-color !default;
 $tab-vertical-before-border-width: 0 1px 0 0 !default;
-
 $tab-fill-wrap-hover-icon-color: $tab-hover-text-color !default;
 $tab-fill-active-tabwrap-border-color: unset !default;
 $tab-fill-active-text-before-border: unset !default;
@@ -563,7 +539,6 @@ $tab-fill-pop-wrap-hover-close-color: $tab-alt-active-close-icon-color !default;
 $tab-fill-focused-active-tabwrap-focus-border-color: $tab-focused-wrap-focus-border-color !default;
 $tab-fill-focused-active-wrap-focus-text-color: $tab-fill-focused-active-wrap-focus-color !default;
 $tab-fill-focused-active-wrap-focus-close-color: $tab-fill-focused-active-wrap-focus-color !default;
-
 $tab-background-indicator-bottom: 0 !default;
 $tab-background-wrap-border-color: transparent !default;
 $tab-background-close-hover-color: $tab-alt-active-wrap-close-icon-color !default;
@@ -656,5 +631,4 @@ $tab-background-focused-active-wrap-icon-color: $tab-alt-active-hover-text-color
 $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;

package/styles/tab/_highcontrast-definition.scss

@@ -1,6 +1,3 @@
-/*! Fabric theme definition's */
-/*! component's theme wise override definitions and variables */
-/*! Horizontal Tab */
 $tab-skin: 'highcontrast' !default;
 $tab-big-vertical-scroll-nav-top-bottom: 23px !default;
 $tab-big-vertical-nav-arrow-size: 24px !default;
@@ -9,7 +6,6 @@ $tab-font-family: $font-family !default;
 $tab-nrml-vertical-scroll-nav-top-bottom: 15px !default;
 $tab-nrml-vertical-nav-arrow-size: 16px !default;
 $tab-nrml-vertical-nav-arrow-font-size: 10px !default;
-
 $tab-text-transform: capitalize !default;
 $tab-big-height: 50px !default;
 $tab-nrml-height: 40px !default;
@@ -28,7 +24,6 @@ $tab-disable-cnt-opacity: .38 !default;
 $tab-big-tb-icon-height: 72px !default;
 $tab-nrml-tb-icon-height: 62px !default;
 $tab-content-font-color: $content-font !default;
-
 $tab-border-width: 2px !default;
 $tab-border-style: $tab-border-width Solid !default;
 $tab-focus-outline: 0 !default;
@@ -47,16 +42,13 @@ $tab-alt-border-color: $selection-bg !default;
 $tab-alt-disable-border-color: $disable !default;
 $tab-bg-color: transparent !default;
 $tab-border: 1px solid $border-default !default;
-
 $tab-alt-hdr-bg-color: $bg-base-20 !default;
 $tab-focus-hscroll-content-padding: 1px 0 !default;
 $tab-hdr-bdr-color: inherit !default;
 $tab-hdr-border: 0 !default;
 $tab-hdr-border-width: 0 !default;
 $tab-alt-hdr-border: 0 !default;
-
 $tab-items-border: 0 !default;
-
 $tab-big-item-margin: 0 14px 0 0 !default;
 $tab-nrml-item-margin: 0 8px 0 0 !default;
 $tab-big-item-padding: 0 !default;
@@ -123,7 +115,6 @@ $tab-item-wrap-border-radius: 0 !default;
 $tab-hscroll-item-padding: 0 !default;
 $tab-big-item-last-child-padding-bottom: 0 !default;
 $tab-nrml-item-last-child-padding-bottom: 0 !default;
-
 $tab-big-wrap-padding: 0 8px !default;
 $tab-nrml-wrap-padding: 0 8px !default;
 $tab-mob-wrap-padding: 0 8px !default;
@@ -175,7 +166,6 @@ $tab-bg-big-active-item-wrap-margin-bottom: 0 !default;
 $tab-bg-nrml-active-item-wrap-margin-bottom: 0 !default;
 $tab-alt-big-active-item-padding: 0 !default;
 $tab-alt-nrml-active-item-padding: 0 !default;
-
 $tab-active-text-container-margin: 0 !default;
 $tab-big-text-container-margin-right: 22px !default;
 $tab-nrml-text-container-margin-right: 20px !default;
@@ -190,7 +180,6 @@ $tab-fill-nrml-active-it-text-container-height: $tab-nrml-fill-height - 4 !defau
 $tab-big-even-active-text-container-height: $tab-big-height - 4 !default;
 $tab-nrml-even-active-text-container-height: 40px !default;
 $tab-even-active-text-container-margin: 0 0 2px !default;
-
 $tab-big-font-size: 15px !default;
 $tab-nrml-font-size: 14px !default;
 $tab-font-weight: 400 !default;
@@ -232,9 +221,7 @@ $tab-alt-active-hover-text-color: $selection-font !default;
 $tab-alt-active-style-hover-icon-color: $tab-alt-active-hover-text-color !default;
 $tab-clone-item-bg-color: $bg-base-0 !default;
 $tab-clone-text-color: $content-font !default;
-
 $tab-icon-container-width: 50px !default;
-
 $tab-nav-pop-press-border: 0 !default;
 $tab-big-nav-icon-container-size: 32px !default;
 $tab-nrml-nav-icon-container-size: 24px !default;
@@ -266,7 +253,6 @@ $tab-big-edge-pop-icon-line-height: 18px !default;
 $tab-nrml-edge-pop-icon-line-height: 14px !default;
 $tab-comb-icon-color: $content-font !default;
 $tab-comb-text-color: $content-font !default;
-
 $tab-close-icon-size: 10px !default;
 $tab-big-close-icon-size: 12px !default;
 $tab-nrml-close-icon-size: 10px !default;
@@ -310,7 +296,6 @@ $tab-alt-active-hover-close-icon-color: $selection-font !default;
 $tab-pop-bg-color: $bg-base-0 !default;
 $tab-pop-border: 1px solid $border-default !default;
 $tab-pop-border-radius: 0 !default;
-
 $tab-big-nav-right-icon-padding: 0 10px !default;
 $tab-nrml-nav-right-icon-padding: 0 10px !default;
 $tab-mob-nav-right-icon-padding: 0 8px !default;
@@ -343,12 +328,10 @@ $tab-pop-icon-active-border: 0 !default;
 $tab-even-active-item-bottom-border-color: 0 !default;
 $tab-pop-border-box-shadow: none !default;
 $tab-bg-hover-nav-icon-color: $hover-font !default;
-
 $tab-pop-box-shadow: none !default;
 $tab-pop-icon-transition: none !default;
 $tab-pop-up-icon-transform: rotate(0deg) !default;
 $tab-pop-down-icon-transform: rotate(0deg) !default;
-
 $tab-bgr-active-last-margin: 0 14px 0 0 !default;
 $tab-bgr-hscroll-items-nav-width: 50px !default;
 $tab-bgr-item-textwrap-height: $tab-big-height - 4 !default;
@@ -375,7 +358,6 @@ $tab-bgr-rtl-icon-right-margin: 0 !default;
 $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: 40px !default;
 $tab-nrml-hscroll-items-bdr-radius: 0 !default;
 $tab-nrml-item-text-wrap-height: $tab-nrml-height - 4 !default;
@@ -433,16 +415,12 @@ $tab-nrml-bottom-wrap-before-top: 0 !default;
 $tab-nrml-background-vertical-indicator-display: none !default;
 $tab-nrml-background-active-padding: $tab-alt-nrml-active-item-padding !default;
 $tab-nrml-item-text-margin-bottom: 0 !default;
-
 @mixin tbar-alt-btn-animation-after {
   animation: none;
 }
-
 @mixin hscroll-alt-btn-animation-after {
   animation: none;
 }
-
-/*! HighContrast specific themes definition's */
 $tab-active-line-color: $selection-bg !default;
 $tab-wrap-border-color: $bg-base-0 !default;
 $tab-wrap-hover-bg-color: $hover-bg !default;
@@ -493,8 +471,6 @@ $tab-alt-nav-hover-color: $hover-font !default;
 $tab-alt-nav-hover-border-color: $hover-border !default;
 $tab-alt-nav-active-color: $selection-font !default;
 $tab-alt-nav-active-bg-color: $selection-bg !default;
-
-/*! Vertical Tab */
 $tab-vscroll-nrml-padding: 16px 0 !default;
 $tab-vscroll-big-padding: 24px 0 !default;
 $tab-big-v-wrap-padding: 0 8px !default;
@@ -504,23 +480,19 @@ $tab-nrml-more-btn-line-height: 36px !default;
 $tab-big-more-btn-line-height: 48px !default;
 $tab-pop-more-icon-margin: 0 0 0 8px !default;
 $tab-rtl-pop-more-icon-margin: 0 8px 0 0 !default;
-
 $tab-vscroll-nav-border: 1px solid transparent !default;
 $tab-vscroll-nav-border-color: $border-fg !default;
 $tab-v-nav-focus-bg-color: transparent !default;
 $tab-v-nav-hover-bg-color: $hover-bg !default;
 $tab-v-popup-box-shadow: $tab-pop-box-shadow !default;
 $tab-v-nav-icon-border-width: 1px !default;
-
 $tab-v-big-close-icon-top-bottom-right: -22px !default;
 $tab-v-nrml-close-icon-top-bottom-right: -20px !default;
 $tab-v-rtl-big-close-icon-top-bottom-right: 0 !default;
 $tab-v-rtl-nrml-close-icon-top-bottom-right: 0 !default;
 $tab-v-rtl-big-close-icon-top-bottom-left: -22px !default;
 $tab-v-rtl-nrml-close-icon-top-bottom-left: -20px !default;
-
 $tab-v-pop-focus-outline: 1.5px solid $border-fg !default;
-
 $tab-header-font-weight: normal !default;
 $tab-header-before-border-color: unset !default;
 $tab-header-before-border-width: 0 !default;
@@ -547,7 +519,6 @@ $tab-item-left-icon-before-top: 0 !default;
 $tab-item-icon-before-top: 2px !default;
 $tab-item-icon-before-left: 0 !default;
 $tab-item-active-border-bottom: initial !default;
-
 $tab-pop-wrap-hover-border: 2px solid $tab-wrap-hover-border-color !default;
 $tab-pop-wrap-hover-border-radius: 0 !default;
 $tab-pop-wrap-hover-close-color: $tab-hover-text-color !default;
@@ -562,7 +533,6 @@ $tab-pop-nav-active-bg: inherit !default;
 $tab-pop-nav-active-border: 0 !default;
 $tab-pop-nav-active-border-radius: 0 !default;
 $tab-pop-active-icons-color: $tab-nav-pop-arrow-active-color !default;
-
 $tab-scroll-nav-bg: inherit !default;
 $tab-scroll-nav-arrow-font: $tab-nav-icon-color !default;
 $tab-scroll-arrow-hover-border: 2px solid $tab-wrap-hover-border-color !default;
@@ -578,7 +548,6 @@ $tab-scroll-overlay-arrow-hover-bg: $tab-nav-disable-hover-bg-color !default;
 $tab-scroll-overlay-arrow-hover-border-color: $tab-nav-disable-hover-border-color !default;
 $tab-scroll-focused-nav-focus-icon-bg: inherit !default;
 $tab-scroll-focused-nav-focus-icon-border: 2px solid $tab-focused-nav-focus-border-color !default;
-
 $tab-bottom-border-color: unset !default;
 $tab-bottom-border-width: 0 !default;
 $tab-bottom-hidden-items-border-color: unset !default;
@@ -586,7 +555,6 @@ $tab-bottom-hidden-items-border-width: 0 !default;
 $tab-bottom-active-border-color: $tab-active-item-border-color unset unset !default;
 $tab-bottom-active-border-width: 0 !default;
 $tab-bottom-active-margin-top: 0 !default;
-
 $tab-vertical-scroll-hover-border-color: $border-fg !default;
 $tab-vertical-scroll-hover-active-bg: $selection-bg !default;
 $tab-vertical-focus-active-arrow-color: $selection-font !default;
@@ -594,7 +562,6 @@ $tab-vertical-pop-icon-hover-color: $tab-hover-nav-icon-color !default;
 $tab-vertical-pop-icon-active-color: $content-font !default;
 $tab-vertical-focused-nav-focus-border-color: $tab-focused-nav-focus-border-color !default;
 $tab-vertical-before-border-width: 0 !default;
-
 $tab-fill-wrap-hover-icon-color: $tab-hover-text-color !default;
 $tab-fill-active-tabwrap-border-color: $tab-fill-active-wrap-border-color !default;
 $tab-fill-active-text-before-border: 0 !default;
@@ -607,7 +574,6 @@ $tab-fill-pop-wrap-hover-close-color: $tab-hover-text-color !default;
 $tab-fill-focused-active-tabwrap-focus-border-color: $tab-fill-focused-active-wrap-focus-border-color !default;
 $tab-fill-focused-active-wrap-focus-text-color: $tab-alt-active-style-hover-icon-color !default;
 $tab-fill-focused-active-wrap-focus-close-color: $tab-hover-text-color !default;
-
 $tab-background-indicator-bottom: 0 !default;
 $tab-background-wrap-border-color: $tab-alt-wrap-border-color !default;
 $tab-background-close-hover-color: $tab-alt-active-wrap-close-icon-color !default;
@@ -700,5 +666,4 @@ $tab-background-focused-active-wrap-icon-color: $tab-alt-active-hover-text-color
 $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;

package/styles/tab/_highcontrast-light-definition.scss

@@ -1,4 +1,3 @@
-//default
 $tab-skin: 'highcontrast' !default;
 $tab-big-vertical-scroll-nav-top-bottom: 23px !default;
 $tab-vscroll-big-padding: 24px 0 !default;
@@ -66,15 +65,12 @@ $tab-alt-border-color: $selection-bg !default;
 $tab-alt-disable-border-color: $disable !default;
 $tab-bg-color: $bg-base-0 !default;
 $tab-border: 1px solid $border-default !default;
-
 $tab-alt-hdr-bg-color: $bg-base-20 !default;
 $tab-focus-hscroll-content-padding: 1px 0 !default;
 $tab-hdr-bdr-color: inherit !default;
 $tab-hdr-border: 0 !default;
 $tab-alt-hdr-border: 0 !default;
-
 $tab-items-border: 0 !default;
-
 $tab-big-item-margin: 0 14px 0 0 !default;
 $tab-nrml-item-margin: 0 8px 0 0 !default;
 $tab-big-item-padding: 0 !default;
@@ -139,7 +135,6 @@ $tab-item-wrap-border-radius: 0 !default;
 $tab-hscroll-item-padding: 0 !default;
 $tab-big-item-last-child-padding-bottom: 0 !default;
 $tab-nrml-item-last-child-padding-bottom: 0 !default;
-
 $tab-big-wrap-padding: 0 8px !default;
 $tab-nrml-wrap-padding: 0 8px !default;
 $tab-mob-wrap-padding: 0 8px !default;
@@ -191,7 +186,6 @@ $tab-bg-big-active-item-wrap-margin-bottom: 0 !default;
 $tab-bg-nrml-active-item-wrap-margin-bottom: 0 !default;
 $tab-alt-big-active-item-padding: 0 !default;
 $tab-alt-nrml-active-item-padding: 0 !default;
-
 $tab-active-text-container-margin: 0 !default;
 $tab-big-text-container-margin-right: 22px !default;
 $tab-nrml-text-container-margin-right: 20px !default;
@@ -206,7 +200,6 @@ $tab-fill-nrml-active-it-text-container-height: $tab-nrml-fill-height - 4 !defau
 $tab-big-even-active-text-container-height: $tab-big-height - 4 !default;
 $tab-nrml-even-active-text-container-height: 40px !default;
 $tab-even-active-text-container-margin: 0 0 2px !default;
-
 $tab-big-font-size: 15px !default;
 $tab-nrml-font-size: 14px !default;
 $tab-font-weight: 400 !default;
@@ -248,9 +241,7 @@ $tab-alt-active-hover-text-color: $selection-font !default;
 $tab-alt-active-style-hover-icon-color: $tab-alt-active-hover-text-color !default;
 $tab-clone-item-bg-color: rgba($bg-base-0, 0) !default;
 $tab-clone-text-color: $content-font !default;
-
 $tab-icon-container-width: 50px !default;
-
 $tab-nav-pop-press-border: 0 !default;
 $tab-big-nav-icon-container-size: 32px !default;
 $tab-nrml-nav-icon-container-size: 24px !default;
@@ -282,7 +273,6 @@ $tab-big-edge-pop-icon-line-height: 18px !default;
 $tab-nrml-edge-pop-icon-line-height: 14px !default;
 $tab-comb-icon-color: $content-font !default;
 $tab-comb-text-color: $content-font !default;
-
 $tab-close-icon-size: 10px !default;
 $tab-big-close-icon-size: 12px !default;
 $tab-nrml-close-icon-size: 10px !default;
@@ -326,7 +316,6 @@ $tab-alt-active-hover-close-icon-color: $selection-font !default;
 $tab-pop-bg-color: $bg-base-0 !default;
 $tab-pop-border: 1px solid $border-default !default;
 $tab-pop-border-radius: 0 !default;
-
 $tab-big-nav-right-icon-padding: 0 10px !default;
 $tab-nrml-nav-right-icon-padding: 0 10px !default;
 $tab-mob-nav-right-icon-padding: 0 8px !default;
@@ -363,7 +352,6 @@ $tab-even-active-item-bottom-border-color: 0 !default;
 $tab-pop-up-icon-active-border: $tab-pop-icon-active-border !default;
 $tab-pop-border-box-shadow: none !default;
 $tab-bg-hover-nav-icon-color: $hover-font !default;
-
 $tab-pop-box-shadow: none !default;
 $tab-v-popup-box-shadow: $tab-pop-box-shadow !default;
 $tab-pop-icon-transition: none !default;
@@ -415,7 +403,6 @@ $tab-alt-nav-hover-color: $hover-font !default;
 $tab-alt-nav-hover-border-color: $hover-border !default;
 $tab-alt-nav-active-color: $selection-font !default;
 $tab-alt-nav-active-bg-color: $selection-bg !default;
-
 $tab-bgr-active-last-margin: 0 14px 0 0 !default;
 $tab-bgr-hscroll-items-nav-width: 50px !default;
 $tab-bgr-item-textwrap-height: $tab-big-height - 4 !default;
@@ -442,7 +429,6 @@ $tab-bgr-rtl-icon-right-margin: 0 !default;
 $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: 40px !default;
 $tab-nrml-hscroll-items-bdr-radius: 0 !default;
 $tab-nrml-item-text-wrap-height: $tab-nrml-height - 4 !default;
@@ -500,7 +486,6 @@ $tab-nrml-bottom-wrap-before-top: 0 !default;
 $tab-nrml-background-vertical-indicator-display: none !default;
 $tab-nrml-background-active-padding: $tab-alt-nrml-active-item-padding !default;
 $tab-nrml-item-text-margin-bottom: 0 !default;
-
 $tab-header-font-weight: normal !default;
 $tab-header-before-border-color: unset !default;
 $tab-header-before-border-width: 0 !default;
@@ -527,7 +512,6 @@ $tab-item-left-icon-before-top: 0 !default;
 $tab-item-icon-before-top: 2px !default;
 $tab-item-icon-before-left: 0 !default;
 $tab-item-active-border-bottom: initial !default;
-
 $tab-pop-wrap-hover-border: 2px solid $tab-wrap-hover-border-color !default;
 $tab-pop-wrap-hover-border-radius: 0 !default;
 $tab-pop-wrap-hover-close-color: $tab-hover-text-color !default;
@@ -542,7 +526,6 @@ $tab-pop-nav-active-bg: inherit !default;
 $tab-pop-nav-active-border: 0 !default;
 $tab-pop-nav-active-border-radius: 0 4px 4px 0 !default;
 $tab-pop-active-icons-color: $tab-nav-pop-arrow-active-color !default;
-
 $tab-scroll-nav-bg: inherit !default;
 $tab-scroll-nav-arrow-font: $tab-nav-icon-color !default;
 $tab-scroll-arrow-hover-border: 2px solid $tab-wrap-hover-border-color !default;
@@ -558,7 +541,6 @@ $tab-scroll-overlay-arrow-hover-bg: $tab-nav-disable-hover-bg-color !default;
 $tab-scroll-overlay-arrow-hover-border-color: $tab-nav-disable-hover-border-color !default;
 $tab-scroll-focused-nav-focus-icon-bg: inherit !default;
 $tab-scroll-focused-nav-focus-icon-border: 2px solid $tab-focused-nav-focus-border-color !default;
-
 $tab-bottom-border-color: unset !default;
 $tab-bottom-border-width: 0 !default;
 $tab-bottom-hidden-items-border-color: unset !default;
@@ -566,7 +548,6 @@ $tab-bottom-hidden-items-border-width: 0 !default;
 $tab-bottom-active-border-color: $tab-active-item-border-color unset unset !default;
 $tab-bottom-active-border-width: 0 !default;
 $tab-bottom-active-margin-top: 0 !default;
-
 $tab-vertical-scroll-hover-border-color: $border-fg !default;
 $tab-vertical-scroll-hover-active-bg: $selection-bg !default;
 $tab-vertical-focus-active-arrow-color: $selection-font !default;
@@ -574,7 +555,6 @@ $tab-vertical-pop-icon-hover-color: $tab-hover-nav-icon-color !default;
 $tab-vertical-pop-icon-active-color: $content-font !default;
 $tab-vertical-focused-nav-focus-border-color: $tab-focused-nav-focus-border-color !default;
 $tab-vertical-before-border-width: 0 !default;
-
 $tab-fill-wrap-hover-icon-color: $tab-hover-text-color !default;
 $tab-fill-active-tabwrap-border-color: $tab-fill-active-wrap-border-color !default;
 $tab-fill-active-text-before-border: 0 !default;
@@ -587,7 +567,6 @@ $tab-fill-pop-wrap-hover-close-color: $tab-hover-text-color !default;
 $tab-fill-focused-active-tabwrap-focus-border-color: $tab-fill-focused-active-wrap-focus-border-color !default;
 $tab-fill-focused-active-wrap-focus-text-color: $tab-alt-active-style-hover-icon-color !default;
 $tab-fill-focused-active-wrap-focus-close-color: $tab-hover-text-color !default;
-
 $tab-background-indicator-bottom: 0 !default;
 $tab-background-wrap-border-color: $tab-alt-wrap-border-color !default;
 $tab-background-close-hover-color: $tab-alt-active-wrap-close-icon-color !default;
@@ -680,13 +659,10 @@ $tab-background-focused-active-wrap-icon-color: $tab-alt-active-hover-text-color
 $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;
-
 @mixin tbar-alt-btn-animation-after {
   animation: none;
 }
-
 @mixin hscroll-alt-btn-animation-after {
   animation: none;
 }

package/styles/tab/_icons.scss

@@ -1,6 +1,4 @@
 @include export-module('tab-icons') {
-
-  /*! tab icons */
   #{&}.e-tab {
 
     .e-tab-header {

package/styles/tab/_layout.scss

@@ -1,7 +1,14 @@
+@mixin tab-mob-last-item-margin {
+  @media screen and (max-width: 480px) {
+    margin: $tab-mob-last-item-margin;
+  }
+}
+@mixin tab-mob-close-icon-margin {
+  @media screen and (max-width: 480px) {
+    margin: $tab-mob-close-icon-margin;
+  }
+}
 @include export-module('tab-layout') {
-
-  /*! tab layout */
-
   .e-bigger .e-tab,
   .e-tab.e-bigger {
 
@@ -24,10 +31,7 @@
 
         &:not(.e-tbar-pos) .e-toolbar-item:last-child {
           padding-bottom: $tab-big-boot-active-item-padding-bottom;
-
-          @media screen and (max-width: 480px) {
-            margin: $tab-mob-last-item-margin;
-          }
+          @include tab-mob-last-item-margin;
         }
 
         .e-indicator + .e-toolbar-item:last-child.e-active {
@@ -39,10 +43,7 @@
 
         &:not(.e-tbar-pos) .e-toolbar-item:last-child {
           margin: $tab-big-scroll-last-item-margin;
-
-          @media screen and (max-width: 480px) {
-            margin: $tab-mob-last-item-margin;
-          }
+          @include tab-mob-last-item-margin;
 
           &.e-active {
             margin: $tab-big-active-last-item-margin;
@@ -124,10 +125,7 @@
         .e-icons.e-close-icon {
           cursor: pointer;
           margin: $tab-big-close-icon-margin;
-
-          @media screen and (max-width: 480px) {
-            margin: $tab-mob-close-icon-margin;
-          }
+          @include tab-mob-close-icon-margin;
         }
 
         .e-icons.e-close-icon,
@@ -222,6 +220,12 @@
           height: $tab-big-pop-item-height;
           min-height: $tab-big-pop-item-height;
 
+          @if ($skin-name == 'fluent2') {
+            &:not(.e-separator) {
+              margin: 1px 6px;
+            }
+          }
+
           .e-tab-wrap {
             height: $tab-big-pop-item-height;
             padding: $tab-big-pop-item-wrap-padding;
@@ -1189,10 +1193,7 @@
         &:not(.e-tbar-pos) .e-toolbar-item:last-child {
           margin: $tab-nrml-last-item-margin;
           padding-bottom: $tab-big-boot-active-item-padding-bottom;
-
-          @media screen and (max-width: 480px) {
-            margin: $tab-mob-last-item-margin;
-          }
+          @include tab-mob-last-item-margin;
         }
 
         .e-toolbar-item.e-active {
@@ -1247,10 +1248,7 @@
 
         &:not(.e-tbar-pos) .e-toolbar-item:last-child {
           margin: $tab-nrml-scroll-last-item-margin;
-
-          @media screen and (max-width: 480px) {
-            margin: $tab-mob-last-item-margin;
-          }
+          @include tab-mob-last-item-margin;
 
           &.e-active {
             margin: $tab-nrml-active-scroll-last-item-margin;
@@ -1388,10 +1386,7 @@
           display: none;
           margin: $tab-nrml-close-icon-margin;
           min-width: $tab-close-icon-minwidth;
-
-          @media screen and (max-width: 480px) {
-            margin: $tab-mob-close-icon-margin;
-          }
+          @include tab-mob-close-icon-margin;
         }
 
         .e-close-icon,
@@ -2066,6 +2061,9 @@
             @if ($skin-name == 'Material3') {
               border-radius: 3px 0 0 3px;
             }
+            @else if ($skin-name == 'fluent2') {
+              border-radius: $tab-nrml-vertical-indicator-bdr-radius;
+            }
           }
 
           .e-toolbar-items .e-toolbar-item.e-active {
@@ -2112,6 +2110,9 @@
             @if ($skin-name == 'Material3') {
               border-radius: 0 3px 3px 0;
             }
+            @else if ($skin-name == 'fluent2') {
+              border-radius: $tab-nrml-vertical-indicator-bdr-radius;
+            }
           }
 
           .e-tab-wrap {
@@ -3347,10 +3348,7 @@
     .e-icons.e-close-icon {
       cursor: pointer;
       margin: $tab-big-close-icon-margin;
-
-      @media screen and (max-width: 480px) {
-        margin: $tab-mob-close-icon-margin;
-      }
+      @include tab-mob-close-icon-margin;
     }
 
     .e-icons.e-close-icon,