fix(Tab): config active line padding

v5zz · Feb 23, 2022 · 66ee0cb · 66ee0cb
1 parent ec40b65
commit 66ee0cb
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 13 deletions.
diff --git a/src/tab/main.scss b/src/tab/main.scss
@@ -232,6 +232,7 @@
                     $tab-pure-ink-bar-color,
                     0%,
                     0%,
+                    $tab-pure-ink-bar-padding-l,
                     'bottom'
                 );
             }
@@ -305,6 +306,7 @@
                 $tab-wrapped-ink-bar-color,
                 calc(0px - #{$tab-wrapped-border-line-width}),
                 $tab-wrapped-tab-corner-radius,
+                $tab-wrapped-ink-bar-padding-l,
                 'top'
             );
             border-width: $tab-wrapped-border-side-width $tab-wrapped-border-side-width $tab-wrapped-border-line-width $tab-wrapped-border-side-width;
@@ -337,8 +339,8 @@
 
         #{$tab-prefix}-tab {
             margin-right: $tab-wrapped-tab-margin-right;
-            @include tabs-tab-border( $tab-wrapped-bar-border, null, $tab-wrapped-tab-bottom-border-radius, $tab-wrapped-border-line-color-hover, $tab-wrapped-bg-color-selected, $tab-wrapped-border-line-color, $tab-wrapped-border-line-color, $tab-wrapped-border-line-color);
-            @include tabs-tab-inkbar( $tab-wrapped-ink-bar-width, $tab-wrapped-ink-bar-color, calc(0px - #{$tab-wrapped-border-line-width}), $tab-wrapped-tab-corner-radius, 'bottom');
+            @include tabs-tab-border($tab-wrapped-bar-border, null, $tab-wrapped-tab-bottom-border-radius, $tab-wrapped-border-line-color-hover, $tab-wrapped-bg-color-selected, $tab-wrapped-border-line-color, $tab-wrapped-border-line-color, $tab-wrapped-border-line-color);
+            @include tabs-tab-inkbar($tab-wrapped-ink-bar-width, $tab-wrapped-ink-bar-color, calc(0px - #{$tab-wrapped-border-line-width}), $tab-wrapped-tab-corner-radius, $tab-wrapped-ink-bar-padding-l, 'bottom');
         }
     }
 
@@ -354,7 +356,7 @@
             float: none;
             margin-bottom: $tab-wrapped-tab-margin-bottom;
             @include tabs-tab-border( $tab-wrapped-bar-border, null, $tab-wrapped-tab-left-border-radius, $tab-wrapped-border-line-color-hover, $tab-wrapped-border-line-color, $tab-wrapped-bg-color-selected, $tab-wrapped-border-line-color, $tab-wrapped-border-line-color);
-            @include tabs-tab-inkbar($tab-wrapped-ink-bar-width, $tab-wrapped-ink-bar-color, calc(0px - #{$tab-wrapped-border-line-width}), $tab-wrapped-tab-corner-radius, 'left');
+            @include tabs-tab-inkbar($tab-wrapped-ink-bar-width, $tab-wrapped-ink-bar-color, calc(0px - #{$tab-wrapped-border-line-width}), $tab-wrapped-tab-corner-radius, $tab-wrapped-ink-bar-padding-l, 'left');
             border-width: $tab-wrapped-border-side-width $tab-wrapped-border-line-width $tab-wrapped-border-side-width $tab-wrapped-border-side-width;
             &.active {
                 border-width: $tab-wrapped-border-line-width $tab-wrapped-border-line-width $tab-wrapped-border-line-width $tab-wrapped-border-line-width;
@@ -374,7 +376,7 @@
             float: none;
             margin-bottom: $tab-wrapped-tab-margin-bottom;
             @include tabs-tab-border( $tab-wrapped-bar-border, null, $tab-wrapped-tab-right-border-radius, $tab-wrapped-border-line-color-hover, $tab-wrapped-border-line-color, $tab-wrapped-border-line-color, $tab-wrapped-border-line-color, $tab-wrapped-bg-color-selected);
-            @include tabs-tab-inkbar($tab-wrapped-ink-bar-width, $tab-wrapped-ink-bar-color, calc(0px - #{$tab-wrapped-border-line-width}), $tab-wrapped-tab-corner-radius, 'right');
+            @include tabs-tab-inkbar($tab-wrapped-ink-bar-width, $tab-wrapped-ink-bar-color, calc(0px - #{$tab-wrapped-border-line-width}), $tab-wrapped-tab-corner-radius, $tab-wrapped-ink-bar-padding-l, 'right');
             border-width: $tab-wrapped-border-side-width $tab-wrapped-border-side-width $tab-wrapped-border-side-width $tab-wrapped-border-line-width;
             &.active {
                 border-width: $tab-wrapped-border-line-width $tab-wrapped-border-line-width $tab-wrapped-border-line-width $tab-wrapped-border-line-width;

diff --git a/src/tab/scss/mixin.scss b/src/tab/scss/mixin.scss
@@ -36,7 +36,7 @@
     }
 }
 
-@mixin tabs-tab-inkbar($inkbar-width, $inkbar-color, $position-offset, $border-radius, $position: 'bottom') {
+@mixin tabs-tab-inkbar($inkbar-width, $inkbar-color, $position-offset, $border-radius, $line-padding-l, $position: 'bottom') {
     &:before {
         border-radius: $border-radius;
 
@@ -66,12 +66,8 @@
     &.active {
         &:before {
             @if $position == 'top' or $position == 'bottom' {
-                @if get-compiling-value($border-radius) == 0 {
-                    width: 100%;
-                } @else {
-                    width: calc(100% - 2 * #{$border-radius});
-                }
-                left: $border-radius;
+                width: calc(100% - 2 * #{$border-radius} - 2 * #{$line-padding-l});
+                left: calc(0px + #{$border-radius} + #{$line-padding-l});
             } @else {
                 @if get-compiling-value($border-radius) == 0 {
                     height: 100%;

diff --git a/src/tab/scss/variable.scss b/src/tab/scss/variable.scss
@@ -7,7 +7,7 @@
 /// @family navigation
 /// @varPrefix $tab-
 /// @classPrefix {prefix}-tab
-/// @order {"size/nav scroll":10,"size/nav":11,"size/tab":12,"size/content":13,"statement/normal":10,"statement/normal/nav":100,"statement/normal/tab":101,"statement/normal/content":102,"statement/hover":11,"statement/hover/nav":110,"statement/hover/tab":111,"statement/selected":12,"statement/selected/nav":120,"statement/selected/tab":121,"statement/disabled":13,"statement/disabled/nav":130,"statement/disabled/tab":131}
+/// @order {"size/nav scroll":10,"size/tab":11,"size/close icon":12,"size/close cion":13,"size/nav":14,"size/content":15,"statement/normal":10,"statement/normal/close icon":100,"statement/normal/nav":101,"statement/normal/tab":102,"statement/normal/content":103,"statement/normal/icon":104,"statement/hover":11,"statement/hover/close icon":110,"statement/hover/nav":111,"statement/hover/tab":112,"statement/selected":12,"statement/selected/close icon":120,"statement/selected/tab":121,"statement/disabled":13,"statement/disabled/close icon":130,"statement/disabled/nav":131,"statement/disabled/tab":132}
 ////
 
 // tab variables
@@ -41,7 +41,7 @@ $tab-nav-tab-icon-size-s: $icon-xs !default;
 $tab-nav-close-icon-size-m: $icon-xs !default;
 
 /// icon
-/// @namespace size/close cion
+/// @namespace size/close icon
 $tab-nav-close-icon-size-s: $icon-xxs !default;
 
 /// padding (l)
@@ -136,6 +136,10 @@ $tab-pure-divider-line-width: $line-1 !default;
 /// @namespace size/tab
 $tab-pure-ink-bar-width: $line-2 !default;
 
+/// active line padding(l,r)
+/// @namespace size/tab
+$tab-pure-ink-bar-padding-l: $s-zero !default;
+
 // Statement
 
 /// text
@@ -219,6 +223,10 @@ $tab-wrapped-tab-margin-bottom: $s-1 !default;
 /// @namespace size/tab
 $tab-wrapped-ink-bar-width: $line-2 !default;
 
+/// active line padding(l,r)
+/// @namespace size/tab
+$tab-wrapped-ink-bar-padding-l: $s-zero !default;
+
 /// background
 /// @namespace statement/normal/nav
 $tab-wrapped-bar-bg-color: $color-transparent !default;