feat: tabs 增加元素变量应用，修复垂直排列的active状态样式。 (#732)

src/packages/tabs/doc.en-US.md

@@ -419,20 +419,27 @@ The component provides the following CSS variables, which can be used to customi
 | Name | Default Value |
 | --- | --- |
 | --nutui-tabs-tab-smile-color | `  $primary-color` |
+| --nutui-tabs-titles-background-color | `  $background-color` |
 | --nutui-tabs-titles-border-radius | ` 0` |
 | --nutui-tabs-titles-item-large-font-size | `  $font-size-3` |
 | --nutui-tabs-titles-item-font-size | `  $font-size-2` |
 | --nutui-tabs-titles-item-small-font-size | `  $font-size-1` |
 | --nutui-tabs-titles-item-color | `  $title-color` |
 | --nutui-tabs-titles-item-active-color | `  $title-color` |
-| --nutui-tabs-titles-background-color | `  $background-color2` |
+| --nutui-tabs-titles-item-active-font-weight`v1.4.9` | ` 600` |
+| --nutui-tabs-horizontal-tab-line-color`v1.4.9` | `linear-gradient(90deg, $primary-color 0%, rgba(#fa2c19, 0.15) 100%)`|
 | --nutui-tabs-horizontal-line-bottom`v1.4.8` | ` 15%` |
 | --nutui-tabs-horizontal-line-border-radius`v1.4.8` |` 0px`|
+| --nutui-tabs-horizontal-tab-line-opacity`v1.4.9` | ` 1`|
 | --nutui-tabs-horizontal-titles-height | `  46px` |
 | --nutui-tabs-horizontal-titles-item-min-width | `  50px` |
+| --nutui-tabs-horizontal-titles-item-active-background-color`v1.4.9` | ` $background-color3` |
 | --nutui-tabs-horizontal-titles-item-active-line-width | `  40px` |
+| --nutui-tabs-horizontal-titles-item-active-line-height`v1.4.9` | `  3px` |
+| --nutui-tabs-vertical-tab-line-color`v1.4.9` | `linear-gradient(180deg, $primary-color 0%, rgba(#fa2c19, 0.15) 100%)`|
 | --nutui-tabs-vertical-titles-item-height | `  40px` |
+| --nutui-tabs-vertical-titles-item-active-line-width`v1.4.9` | `  3px` |
 | --nutui-tabs-vertical-titles-item-active-line-height | `  14px` |
 | --nutui-tabs-vertical-titles-width | `  100px` |
-| --nutui-tabs-titles-item-line-border-radius | `  0` |
-| --nutui-tabs-titles-item-line-opacity | `  1` |
+| --nutui-tabs-titles-item-line-border-radius`v1.4.9 废弃` | `  0` |
+| --nutui-tabs-titles-item-line-opacity`v1.4.9 废弃` | `  1` |

src/packages/tabs/doc.md

@@ -467,20 +467,27 @@ export default App;
 | 名称 | 默认值 |
 | --- | --- |
 | --nutui-tabs-tab-smile-color | `  $primary-color` |
+| --nutui-tabs-titles-background-color | `  $background-color` |
 | --nutui-tabs-titles-border-radius | ` 0` |
 | --nutui-tabs-titles-item-large-font-size | `  $font-size-3` |
 | --nutui-tabs-titles-item-font-size | `  $font-size-2` |
 | --nutui-tabs-titles-item-small-font-size | `  $font-size-1` |
 | --nutui-tabs-titles-item-color | `  $title-color` |
 | --nutui-tabs-titles-item-active-color | `  $title-color` |
-| --nutui-tabs-titles-background-color | `  $background-color2` |
+| --nutui-tabs-titles-item-active-font-weight`v1.4.9` | ` 600` |
+| --nutui-tabs-horizontal-tab-line-color`v1.4.9` | `linear-gradient(90deg, $primary-color 0%, rgba(#fa2c19, 0.15) 100%)`|
 | --nutui-tabs-horizontal-line-bottom`v1.4.8` | ` 15%` |
 | --nutui-tabs-horizontal-line-border-radius`v1.4.8` |` 0px`|
+| --nutui-tabs-horizontal-tab-line-opacity`v1.4.9` | ` 1`|
 | --nutui-tabs-horizontal-titles-height | `  46px` |
 | --nutui-tabs-horizontal-titles-item-min-width | `  50px` |
+| --nutui-tabs-horizontal-titles-item-active-background-color`v1.4.9` | ` $background-color3` |
 | --nutui-tabs-horizontal-titles-item-active-line-width | `  40px` |
+| --nutui-tabs-horizontal-titles-item-active-line-height`v1.4.9` | `  3px` |
+| --nutui-tabs-vertical-tab-line-color`v1.4.9` | `linear-gradient(180deg, $primary-color 0%, rgba(#fa2c19, 0.15) 100%)`|
 | --nutui-tabs-vertical-titles-item-height | `  40px` |
+| --nutui-tabs-vertical-titles-item-active-line-width`v1.4.9` | `  3px` |
 | --nutui-tabs-vertical-titles-item-active-line-height | `  14px` |
 | --nutui-tabs-vertical-titles-width | `  100px` |
-| --nutui-tabs-titles-item-line-border-radius | `  0` |
-| --nutui-tabs-titles-item-line-opacity | `  1` |
+| --nutui-tabs-titles-item-line-border-radius`v1.4.9 废弃` | `  0` |
+| --nutui-tabs-titles-item-line-opacity`v1.4.9 废弃` | `  1` |

src/packages/tabs/doc.taro.md

@@ -467,20 +467,27 @@ export default App;
 | 名称 | 默认值 |
 | --- | --- |
 | --nutui-tabs-tab-smile-color | `  $primary-color` |
+| --nutui-tabs-titles-background-color | `  $background-color` |
 | --nutui-tabs-titles-border-radius | ` 0` |
 | --nutui-tabs-titles-item-large-font-size | `  $font-size-3` |
 | --nutui-tabs-titles-item-font-size | `  $font-size-2` |
 | --nutui-tabs-titles-item-small-font-size | `  $font-size-1` |
 | --nutui-tabs-titles-item-color | `  $title-color` |
 | --nutui-tabs-titles-item-active-color | `  $title-color` |
-| --nutui-tabs-titles-background-color | `  $background-color2` |
+| --nutui-tabs-titles-item-active-font-weight`v1.4.9` | ` 600` |
+| --nutui-tabs-horizontal-tab-line-color`v1.4.9` | `linear-gradient(90deg, $primary-color 0%, rgba(#fa2c19, 0.15) 100%)`|
 | --nutui-tabs-horizontal-line-bottom`v1.4.8` | ` 15%` |
 | --nutui-tabs-horizontal-line-border-radius`v1.4.8` |` 0px`|
+| --nutui-tabs-horizontal-tab-line-opacity`v1.4.9` | ` 1`|
 | --nutui-tabs-horizontal-titles-height | `  46px` |
 | --nutui-tabs-horizontal-titles-item-min-width | `  50px` |
+| --nutui-tabs-horizontal-titles-item-active-background-color`v1.4.9` | ` $background-color3` |
 | --nutui-tabs-horizontal-titles-item-active-line-width | `  40px` |
+| --nutui-tabs-horizontal-titles-item-active-line-height`v1.4.9` | `  3px` |
+| --nutui-tabs-vertical-tab-line-color`v1.4.9` | `linear-gradient(180deg, $primary-color 0%, rgba(#fa2c19, 0.15) 100%)`|
 | --nutui-tabs-vertical-titles-item-height | `  40px` |
+| --nutui-tabs-vertical-titles-item-active-line-width`v1.4.9` | `  3px` |
 | --nutui-tabs-vertical-titles-item-active-line-height | `  14px` |
 | --nutui-tabs-vertical-titles-width | `  100px` |
-| --nutui-tabs-titles-item-line-border-radius | `  0` |
-| --nutui-tabs-titles-item-line-opacity | `  1` |
+| --nutui-tabs-titles-item-line-border-radius`v1.4.9 废弃` | `  0` |
+| --nutui-tabs-titles-item-line-opacity`v1.4.9 废弃` | `  1` |

src/packages/tabs/doc.zh-TW.md

@@ -387,20 +387,27 @@ export default App;
 | 名稱 | 默認值 |
 | --- | --- |
 | --nutui-tabs-tab-smile-color | `  $primary-color` |
+| --nutui-tabs-titles-background-color | `  $background-color` |
 | --nutui-tabs-titles-border-radius | ` 0` |
 | --nutui-tabs-titles-item-large-font-size | `  $font-size-3` |
 | --nutui-tabs-titles-item-font-size | `  $font-size-2` |
 | --nutui-tabs-titles-item-small-font-size | `  $font-size-1` |
 | --nutui-tabs-titles-item-color | `  $title-color` |
 | --nutui-tabs-titles-item-active-color | `  $title-color` |
-| --nutui-tabs-titles-background-color | `  $background-color2` |
+| --nutui-tabs-titles-item-active-font-weight`v1.4.9` | ` 600` |
+| --nutui-tabs-horizontal-tab-line-color`v1.4.9` | `linear-gradient(90deg, $primary-color 0%, rgba(#fa2c19, 0.15) 100%)`|
 | --nutui-tabs-horizontal-line-bottom`v1.4.8` | ` 15%` |
 | --nutui-tabs-horizontal-line-border-radius`v1.4.8` |` 0px`|
+| --nutui-tabs-horizontal-tab-line-opacity`v1.4.9` | ` 1`|
 | --nutui-tabs-horizontal-titles-height | `  46px` |
 | --nutui-tabs-horizontal-titles-item-min-width | `  50px` |
+| --nutui-tabs-horizontal-titles-item-active-background-color`v1.4.9` | ` $background-color3` |
 | --nutui-tabs-horizontal-titles-item-active-line-width | `  40px` |
+| --nutui-tabs-horizontal-titles-item-active-line-height`v1.4.9` | `  3px` |
+| --nutui-tabs-vertical-tab-line-color`v1.4.9` | `linear-gradient(180deg, $primary-color 0%, rgba(#fa2c19, 0.15) 100%)`|
 | --nutui-tabs-vertical-titles-item-height | `  40px` |
+| --nutui-tabs-vertical-titles-item-active-line-width`v1.4.9` | `  3px` |
 | --nutui-tabs-vertical-titles-item-active-line-height | `  14px` |
 | --nutui-tabs-vertical-titles-width | `  100px` |
-| --nutui-tabs-titles-item-line-border-radius | `  0` |
-| --nutui-tabs-titles-item-line-opacity | `  1` |
+| --nutui-tabs-titles-item-line-border-radius`v1.4.9 废弃` | `  0` |
+| --nutui-tabs-titles-item-line-opacity`v1.4.9 废弃` | `  1` |
\ No newline at end of file

src/packages/tabs/tabs.scss

@@ -15,10 +15,6 @@
 
         &.active {
           color: $dark1;
-
-          .nut-tabs__titles-item__text {
-            color: $dark1;
-          }
         }
 
         &__text {
@@ -63,15 +59,15 @@
         overflow-y: auto;
       }
 
-      &-item {
+      .nut-tabs__titles-item {
         height: $tabs-vertical-titles-item-height;
         flex: none;
 
-        &__smile {
+        .nut-tabs__titles-item__smile {
           transition: width 0.3s ease;
         }
 
-        &__line {
+        .nut-tabs__titles-item__line {
           bottom: none;
           transform: translate(0, -50%);
           transition: height 0.3s ease;
@@ -80,13 +76,13 @@
         }
 
         &.active {
-          background-color: $background-color3;
+          background-color: $tabs-horizontal-titles-item-active-background-color;
 
           .nut-tabs__titles-item__line {
             left: 10px;
-            width: 3px;
-            background: $tabs-vertical-tab-line-color;
+            width: $tabs-vertical-titles-item-active-line-width;
             height: $tabs-vertical-titles-item-active-line-height;
+            background: $tabs-vertical-tab-line-color;
           }
 
           .nut-tabs__titles-item__smile {
@@ -116,7 +112,7 @@
     }
   }
 
-  &__titles {
+  .nut-tabs__titles {
     height: $tabs-horizontal-titles-height;
     padding: 0 10px;
     display: flex;
@@ -170,7 +166,7 @@
       }
     }
 
-    &-item {
+    .nut-tabs__titles-item {
       position: relative;
       font-size: $tabs-titles-item-font-size;
       min-width: $tabs-horizontal-titles-item-min-width;
@@ -181,22 +177,16 @@
       flex: 1 0 auto;
       color: $tabs-titles-item-color;
 
-      &-left-align {
-        flex: none;
-      }
-
-      &__text {
-        color: $gray1;
+      .nut-tabs__titles-item__text {
+        text-align: center;
 
         &.ellipsis {
           @include oneline-ellipsis();
         }
-
-        text-align: center;
       }
 
-      &__smile,
-      &__line {
+      .nut-tabs__titles-item__smile,
+      .nut-tabs__titles-item__line {
         position: absolute;
         transition: width 0.3s ease;
         width: 0;
@@ -207,9 +197,10 @@
         transform: translate(-50%, 0);
         overflow: hidden;
         border-radius: $tabs-horizontal-tab-line-border-radius;
+        opacity: $tabs-horizontal-tab-line-opacity;
       }
 
-      &__smile {
+      .nut-tabs__titles-item__smile {
         .nut-icon {
           position: absolute;
           font-size: 12px;
@@ -219,25 +210,22 @@
         }
       }
 
+      &.nut-tabs__titles-item-left-align {
+        flex: none;
+      }
+
       &.disabled {
         color: $disable-color;
-
-        .nut-tabs__titles-item__text {
-          color: $disable-color;
-        }
       }
 
       &.active {
-        font-weight: 600;
-
-        .nut-tabs__titles-item__text {
-          color: $gray1;
-        }
+        color: $tabs-titles-item-active-color;
+        font-weight: $tabs-titles-item-active-font-weight;
 
         .nut-tabs__titles-item__line {
           content: ' ';
           width: $tabs-horizontal-titles-item-active-line-width;
-          height: 3px;
+          height: $tabs-horizontal-titles-item-active-line-height;
           background: $tabs-horizontal-tab-line-color;
         }
       }

src/styles/variables.scss

@@ -1596,6 +1596,10 @@ $tabs-tab-smile-color: var(
   --nutui-tabs-tab-smile-color,
   $primary-color
 ) !default;
+$tabs-titles-background-color: var(
+  --nutui-tabs-titles-background-color,
+  $background-color
+) !default;
 $tabs-titles-border-radius: var(--nutui-tabs-titles-border-radius, 0) !default;
 $tabs-titles-item-large-font-size: var(
   --nutui-tabs-titles-item-large-font-size,
@@ -1615,16 +1619,15 @@ $tabs-titles-item-color: var(
 ) !default;
 $tabs-titles-item-active-color: var(
   --nutui-tabs-titles-item-active-color,
-  $title-color
+  $primary-color
 ) !default;
-$tabs-titles-background-color: var(
-  --nutui-tabs-titles-background-color,
-  $background-color
+$tabs-titles-item-active-font-weight: var(
+  --nutui-tabs-titles-item-active-font-weight,
+  600
 ) !default;
-$tabs-horizontal-tab-line-color: linear-gradient(
-  90deg,
-  $primary-color 0%,
-  rgba(#fa2c19, 0.15) 100%
+$tabs-horizontal-tab-line-color: var(
+  --nutui-tabs-horizontal-tab-line-color,
+  linear-gradient(90deg, $primary-color 0%, rgba(#fa2c19, 0.15) 100%)
 ) !default;
 $tabs-horizontal-tab-line-bottom: var(
   --nutui-tabs-horizontal-line-bottom,
@@ -1632,7 +1635,11 @@ $tabs-horizontal-tab-line-bottom: var(
 ) !default;
 $tabs-horizontal-tab-line-border-radius: var(
   --nutui-tabs-horizontal-line-border-radius,
-  0px
+  2px
+) !default;
+$tabs-horizontal-tab-line-opacity: var(
+  --nutui-tabs-horizontal-tab-line-opacity,
+  1
 ) !default;
 $tabs-horizontal-titles-height: var(
   --nutui-tabs-horizontal-titles-height,
@@ -1642,19 +1649,30 @@ $tabs-horizontal-titles-item-min-width: var(
   --nutui-tabs-horizontal-titles-item-min-width,
   50px
 ) !default;
+$tabs-horizontal-titles-item-active-background-color: var(
+  --nutui-tabs-horizontal-titles-item-active-background-color,
+  $background-color3
+) !default;
 $tabs-horizontal-titles-item-active-line-width: var(
   --nutui-tabs-horizontal-titles-item-active-line-width,
   40px
 ) !default;
-$tabs-vertical-tab-line-color: linear-gradient(
-  180deg,
-  $primary-color 0%,
-  rgba($primary-color, 0.15) 100%
+$tabs-horizontal-titles-item-active-line-height: var(
+  --nutui-tabs-horizontal-titles-item-active-line-height,
+  3px
+) !default;
+$tabs-vertical-tab-line-color: var(
+  --nutui-tabs-vertical-tab-line-color,
+  linear-gradient(180deg, $primary-color 0%, rgba(#fa2c19, 0.15) 100%)
 ) !default;
 $tabs-vertical-titles-item-height: var(
   --nutui-tabs-vertical-titles-item-height,
   40px
 ) !default;
+$tabs-vertical-titles-item-active-line-width: var(
+  --nutui-tabs-vertical-titles-item-active-line-width,
+  3px
+) !default;
 $tabs-vertical-titles-item-active-line-height: var(
   --nutui-tabs-vertical-titles-item-active-line-height,
   14px
@@ -1663,14 +1681,6 @@ $tabs-vertical-titles-width: var(
   --nutui-tabs-vertical-titles-width,
   100px
 ) !default;
-$tabs-titles-item-line-border-radius: var(
-  --nutui-tabs-titles-item-line-border-radius,
-  0
-) !default;
-$tabs-titles-item-line-opacity: var(
-  --nutui-tabs-titles-item-line-opacity,
-  1
-) !default;
 
 // indicator（✅）
 $indicator-color: var(--nutui-indicator-color, $primary-color) !default;