ele-admin-plus 1.1.9-beta.10 → 1.1.9-beta.12

package/lib/ele-tabs/style/index.scss

@@ -112,6 +112,15 @@
     }
   }
 
+  .el-tabs__nav-wrap .el-tabs__item.is-active .is-icon-close {
+    color: eleVar('tab', 'active-close-color');
+
+    &:hover {
+      color: eleVar('tab', 'active-close-hover-color');
+      background: eleVar('tab', 'active-close-hover-bg');
+    }
+  }
+
   /* 拖动 */
   .el-tabs__item.sortable-ghost {
     opacity: 0;
@@ -180,74 +189,74 @@
 /* 小型尺寸 */
 .ele-tabs.is-small > .el-tabs__header {
   .el-tabs__item {
-    height: eleVar('tab-sm', 'height');
-    line-height: eleVar('tab-sm', 'height');
-    font-size: eleVar('tab-sm', 'font-size');
+    height: eleVar('tab', 'sm-height');
+    line-height: eleVar('tab', 'sm-height');
+    font-size: eleVar('tab', 'sm-font-size');
   }
 
   .ele-tab-title {
-    padding: 0 eleVar('tab-sm', 'padding');
+    padding: 0 eleVar('tab', 'sm-padding');
   }
 
   .el-tabs__item.is-closable .ele-tab-title {
-    $padding: eleVar('tab-sm', 'padding');
-    $size: eleVar('tab-sm', 'close-size');
+    $padding: eleVar('tab', 'sm-padding');
+    $size: eleVar('tab', 'sm-close-size');
     padding-right: calc(#{$padding} + #{$size} / 2 + #{$padding} / 4);
   }
 
   .ele-tab-icon {
-    font-size: eleVar('tab-sm', 'icon-font-size');
+    font-size: eleVar('tab', 'sm-icon-font-size');
   }
 
   .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item .is-icon-close {
-    width: eleVar('tab-sm', 'close-size');
-    height: eleVar('tab-sm', 'close-size');
-    font-size: eleVar('tab-sm', 'close-font-size');
-    right: calc(#{eleVar('tab-sm', 'padding')} / 2);
+    width: eleVar('tab', 'sm-close-size');
+    height: eleVar('tab', 'sm-close-size');
+    font-size: eleVar('tab', 'sm-close-font-size');
+    right: calc(#{eleVar('tab', 'sm-padding')} / 2);
   }
 
   .el-tabs__nav-prev,
   .el-tabs__nav-next {
-    width: eleVar('tab-sm', 'height');
-    height: eleVar('tab-sm', 'height');
-    font-size: eleVar('tab-sm', 'tool-font-size');
+    width: eleVar('tab', 'sm-height');
+    height: eleVar('tab', 'sm-height');
+    font-size: eleVar('tab', 'sm-tool-font-size');
   }
 }
 
 /* 大型尺寸 */
 .ele-tabs.is-large > .el-tabs__header {
   .el-tabs__item {
-    height: eleVar('tab-lg', 'height');
-    line-height: eleVar('tab-lg', 'height');
-    font-size: eleVar('tab-lg', 'font-size');
+    height: eleVar('tab', 'lg-height');
+    line-height: eleVar('tab', 'lg-height');
+    font-size: eleVar('tab', 'lg-font-size');
   }
 
   .ele-tab-title {
-    padding: 0 eleVar('tab-lg', 'padding');
+    padding: 0 eleVar('tab', 'lg-padding');
   }
 
   .el-tabs__item.is-closable .ele-tab-title {
-    $padding: eleVar('tab-lg', 'padding');
-    $size: eleVar('tab-lg', 'close-size');
+    $padding: eleVar('tab', 'lg-padding');
+    $size: eleVar('tab', 'lg-close-size');
     padding-right: calc(#{$padding} + #{$size} / 2 + #{$padding} / 4);
   }
 
   .ele-tab-icon {
-    font-size: eleVar('tab-lg', 'icon-font-size');
+    font-size: eleVar('tab', 'lg-icon-font-size');
   }
 
   .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item .is-icon-close {
-    width: eleVar('tab-lg', 'close-size');
-    height: eleVar('tab-lg', 'close-size');
-    font-size: eleVar('tab-lg', 'close-font-size');
-    right: calc(#{eleVar('tab-lg', 'padding')} / 2);
+    width: eleVar('tab', 'lg-close-size');
+    height: eleVar('tab', 'lg-close-size');
+    font-size: eleVar('tab', 'lg-close-font-size');
+    right: calc(#{eleVar('tab', 'lg-padding')} / 2);
   }
 
   .el-tabs__nav-prev,
   .el-tabs__nav-next {
-    width: eleVar('tab-lg', 'height');
-    height: eleVar('tab-lg', 'height');
-    font-size: eleVar('tab-lg', 'tool-font-size');
+    width: eleVar('tab', 'lg-height');
+    height: eleVar('tab', 'lg-height');
+    font-size: eleVar('tab', 'lg-tool-font-size');
   }
 }
 
@@ -340,21 +349,21 @@
 
   &.is-small > .el-tabs__header {
     .el-tabs__item + .el-tabs__item {
-      margin-left: calc(#{eleVar('tab-sm', 'padding')} * 2 - 4px);
+      margin-left: calc(#{eleVar('tab', 'sm-padding')} * 2 - 4px);
     }
 
     .el-tabs__item.is-closable .ele-tab-title {
-      padding-right: calc(#{eleVar('tab-sm', 'close-size')} + 2px);
+      padding-right: calc(#{eleVar('tab', 'sm-close-size')} + 2px);
     }
   }
 
   &.is-large > .el-tabs__header {
     .el-tabs__item + .el-tabs__item {
-      margin-left: calc(#{eleVar('tab-lg', 'padding')} * 2 - 4px);
+      margin-left: calc(#{eleVar('tab', 'lg-padding')} * 2 - 4px);
     }
 
     .el-tabs__item.is-closable .ele-tab-title {
-      padding-right: calc(#{eleVar('tab-lg', 'close-size')} + 2px);
+      padding-right: calc(#{eleVar('tab', 'lg-close-size')} + 2px);
     }
   }
 }
@@ -367,150 +376,160 @@
 /* 简约风格 */
 .ele-tabs.is-simple > .el-tabs__header,
 .ele-tabs.is-indicator > .el-tabs__header {
-  .el-tabs__item {
-    border-radius: eleVar('tab-simple', 'radius');
-
-    /* 指示线 */
-    &::after {
-      content: '';
-      width: 0;
-      height: eleVar('tab-simple', 'active-line');
-      display: eleVar('tab-simple', 'line-display');
-      background: elVar('color-primary');
-      pointer-events: none;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-    }
-
-    /* 两侧反圆角 */
-    & > .el-dropdown {
-      $size: eleVar('tab-simple', 'angle-size');
-      $bg-size: calc(#{$size} * 2);
-      $bg: transparent;
+  $angle-size: eleVar('tab', 'simple-angle-size');
 
-      &::after,
-      &::before {
-        content: '';
-        width: $size;
-        height: $size;
-        display: eleVar('tab-simple', 'angle-display');
-        transition: all $ele-transition;
-        pointer-events: none;
-        position: absolute;
-        bottom: 0;
-      }
+  .el-tabs__item {
+    border-radius: eleVar('tab', 'simple-radius');
+  }
 
-      &::before {
-        left: calc(0px - $size);
-        background: radial-gradient(
-          #{$bg-size} at left top,
-          transparent 50%,
-          #{$bg} 0
-        );
-      }
+  .el-tabs__nav-prev,
+  .el-tabs__nav-next {
+    width: calc(#{eleVar('tab', 'height')} - #{$angle-size});
 
-      &::after {
-        right: calc(0px - $size);
-        background: radial-gradient(
-          #{$bg-size} at right top,
-          transparent 50%,
-          #{$bg} 0
-        );
-      }
+    &:not(.is-disabled):hover {
+      background: eleVar('tab', 'simple-tool-hover-bg');
     }
+  }
 
+  /* 加左右间距为反圆角留点位置 */
+  .el-tabs__nav {
+    padding: 0 $angle-size;
+  }
+}
+
+.ele-tabs.is-simple > .el-tabs__header,
+.ele-tabs.is-indicator > .el-tabs__header,
+.ele-tabs.is-tag > .el-tabs__header {
+  .el-tabs__item {
     &:hover {
-      $bg: eleVar('tab-simple', 'hover-bg');
-      color: eleVar('tab-simple', 'hover-color');
+      $bg: eleVar('tab', 'simple-hover-bg');
+      color: eleVar('tab', 'simple-hover-color');
       z-index: eleVar('tab', 'hover-index');
       background: $bg;
-
-      & > .el-dropdown {
-        $bg-size: calc(#{eleVar('tab-simple', 'angle-size')} * 2);
-
-        &::before {
-          background: radial-gradient(
-            #{$bg-size} at left top,
-            transparent 50%,
-            #{$bg} 0
-          );
-        }
-
-        &::after {
-          background: radial-gradient(
-            #{$bg-size} at right top,
-            transparent 50%,
-            #{$bg} 0
-          );
-        }
-      }
     }
 
-    /* 选中样式 */
     &.is-active {
-      $bg: eleVar('tab-simple', 'active-bg');
-      color: eleVar('tab-simple', 'active-color');
-      font-weight: eleVar('tab-simple', 'active-weight');
+      $bg: eleVar('tab', 'simple-active-bg');
+      color: eleVar('tab', 'simple-active-color');
+      font-weight: eleVar('tab', 'simple-active-weight');
       z-index: eleVar('tab', 'active-index');
       background: $bg;
+    }
+  }
 
-      &::after {
-        width: 100%;
-      }
+  .el-tabs__active-bar,
+  .el-tabs__nav-wrap::after {
+    display: none;
+  }
+}
 
-      & > .el-dropdown {
-        $bg-size: calc(#{eleVar('tab-simple', 'angle-size')} * 2);
+/* 简约风格指示线 */
+.ele-tabs.is-simple > .el-tabs__header .el-tabs__item {
+  &::after {
+    content: '';
+    width: 0;
+    height: eleVar('tab', 'simple-active-line');
+    display: eleVar('tab', 'simple-line-display');
+    background: elVar('color-primary');
+    pointer-events: none;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
 
-        &::before {
-          background: radial-gradient(
-            #{$bg-size} at left top,
-            transparent 50%,
-            #{$bg} 0
-          );
-        }
+  &.is-active::after {
+    width: 100%;
+  }
+}
 
-        &::after {
-          background: radial-gradient(
-            #{$bg-size} at right top,
-            transparent 50%,
-            #{$bg} 0
-          );
-        }
-      }
+/* 简约风格两侧反圆角 */
+.ele-tabs.is-simple > .el-tabs__header .el-tabs__item,
+.ele-tabs.is-indicator > .el-tabs__header .el-tabs__item {
+  & > .el-dropdown {
+    $size: eleVar('tab', 'simple-angle-size');
+    $bg-size: calc(#{$size} * 2);
+    $bg: transparent;
+
+    &::after,
+    &::before {
+      content: '';
+      width: $size;
+      height: $size;
+      display: eleVar('tab', 'simple-angle-display');
+      transition: all $ele-transition;
+      pointer-events: none;
+      position: absolute;
+      bottom: 0;
     }
-  }
 
-  .el-tabs__nav-prev:not(.is-disabled),
-  .el-tabs__nav-next:not(.is-disabled) {
-    border-radius: eleVar('tab-simple', 'radius');
+    &::before {
+      left: calc(0px - $size);
+      background: radial-gradient(
+        #{$bg-size} at left top,
+        transparent 50%,
+        #{$bg} 0
+      );
+    }
 
-    &:hover {
-      background: eleVar('tab-simple', 'tool-hover-bg');
+    &::after {
+      right: calc(0px - $size);
+      background: radial-gradient(
+        #{$bg-size} at right top,
+        transparent 50%,
+        #{$bg} 0
+      );
     }
   }
 
-  .el-tabs__active-bar,
-  .el-tabs__nav-wrap::after {
-    display: none;
+  &:hover > .el-dropdown {
+    $bg: eleVar('tab', 'simple-hover-bg');
+    $bg-size: calc(#{eleVar('tab', 'simple-angle-size')} * 2);
+
+    &::before {
+      background: radial-gradient(
+        #{$bg-size} at left top,
+        transparent 50%,
+        #{$bg} 0
+      );
+    }
+
+    &::after {
+      background: radial-gradient(
+        #{$bg-size} at right top,
+        transparent 50%,
+        #{$bg} 0
+      );
+    }
   }
 
-  /* 加左右间距为反圆角留点位置 */
-  .el-tabs__nav {
-    padding: 0 eleVar('tab-simple', 'angle-size');
+  &.is-active > .el-dropdown {
+    $bg: eleVar('tab', 'simple-active-bg');
+    $bg-size: calc(#{eleVar('tab', 'simple-angle-size')} * 2);
+
+    &::before {
+      background: radial-gradient(
+        #{$bg-size} at left top,
+        transparent 50%,
+        #{$bg} 0
+      );
+    }
+
+    &::after {
+      background: radial-gradient(
+        #{$bg-size} at right top,
+        transparent 50%,
+        #{$bg} 0
+      );
+    }
   }
 }
 
 /* 指示器风格 */
 .ele-tabs.is-indicator {
-  $size: eleVar('tab-indicator', 'size');
-  $margin: eleVar('tab-indicator', 'margin');
+  $size: eleVar('tab', 'indicator-dot-size');
+  $margin: eleVar('tab', 'indicator-margin');
 
   & > .el-tabs__header {
-    .el-tabs__item::after {
-      display: none;
-    }
-
     .ele-tab-title {
       $padding: eleVar('tab', 'padding');
       padding-left: calc(#{$padding} + #{$size} / 2 + #{$margin});
@@ -520,7 +539,7 @@
         width: $size;
         height: $size;
         border-radius: 50%;
-        background: eleVar('tab-indicator', 'color');
+        background: eleVar('tab', 'indicator-dot-color');
         position: absolute;
         left: calc(#{$padding} - #{$size} / 2);
         top: 50%;
@@ -530,16 +549,16 @@
     }
 
     .el-tabs__item:hover .ele-tab-title::before {
-      background: eleVar('tab-indicator', 'hover-color');
+      background: eleVar('tab', 'indicator-dot-hover-color');
     }
 
     .el-tabs__item.is-active .ele-tab-title::before {
-      background: elVar('color-primary');
+      background: eleVar('tab', 'indicator-dot-active-color');
     }
   }
 
   &.is-small > .el-tabs__header .ele-tab-title {
-    $padding: eleVar('tab-sm', 'padding');
+    $padding: eleVar('tab', 'sm-padding');
     padding-left: calc(#{$padding} + #{$size} / 2 + #{$margin});
 
     &::before {
@@ -548,7 +567,7 @@
   }
 
   &.is-large > .el-tabs__header .ele-tab-title {
-    $padding: eleVar('tab-lg', 'padding');
+    $padding: eleVar('tab', 'lg-padding');
     padding-left: calc(#{$padding} + #{$size} / 2 + #{$margin});
 
     &::before {
@@ -557,9 +576,77 @@
   }
 }
 
+/* 标签风格 */
+.ele-tabs.is-tag {
+  $space: eleVar('tab', 'tag-space');
+
+  & > .el-tabs__header {
+    $height: calc(#{eleVar('tab', 'height')} - #{$space});
+
+    .el-tabs__nav {
+      padding-top: $space;
+      padding-bottom: $space;
+    }
+
+    .el-tabs__item {
+      height: $height;
+      line-height: $height;
+      border-radius: eleVar('tab', 'tag-radius');
+
+      & + .el-tabs__item {
+        margin-left: $space;
+      }
+    }
+
+    .el-tabs__nav-prev,
+    .el-tabs__nav-next {
+      width: $height;
+      height: $height;
+      line-height: $height;
+      margin-top: $space;
+
+      &::before {
+        display: none;
+      }
+    }
+  }
+
+  &.is-small > .el-tabs__header {
+    $height: calc(#{eleVar('tab', 'sm-height')} - #{$space});
+
+    .el-tabs__item {
+      height: $height;
+      line-height: $height;
+    }
+
+    .el-tabs__nav-prev,
+    .el-tabs__nav-next {
+      width: $height;
+      height: $height;
+      line-height: $height;
+    }
+  }
+
+  &.is-large > .el-tabs__header {
+    $height: calc(#{eleVar('tab', 'lg-height')} - #{$space});
+
+    .el-tabs__item {
+      height: $height;
+      line-height: $height;
+    }
+
+    .el-tabs__nav-prev,
+    .el-tabs__nav-next {
+      width: $height;
+      height: $height;
+      line-height: $height;
+    }
+  }
+}
+
 /* 按钮风格 */
 .ele-tabs.is-button {
-  $space: eleVar('tab-button', 'space');
+  $space: eleVar('tab', 'button-space');
 
   & > .el-tabs__header {
     $height: calc(#{eleVar('tab', 'height')} - #{$space});
@@ -572,21 +659,23 @@
     .el-tabs__item {
       height: $height;
       line-height: $height;
-      border-radius: eleVar('tab-button', 'radius');
-      background: eleVar('tab-button', 'bg');
+      border-radius: eleVar('tab', 'button-radius');
+      background: eleVar('tab', 'button-bg');
 
       & + .el-tabs__item {
         margin-left: $space;
       }
 
       &:hover {
-        background: eleVar('tab-button', 'hover-bg');
+        color: eleVar('tab', 'button-hover-color');
+        background: eleVar('tab', 'button-hover-bg');
       }
 
       &.is-active {
-        font-weight: eleVar('tab-button', 'active-weight');
-        background: eleVar('tab-button', 'active-bg');
-        box-shadow: eleVar('tab-button', 'active-shadow');
+        color: eleVar('tab', 'button-active-color');
+        font-weight: eleVar('tab', 'button-active-weight');
+        background: eleVar('tab', 'button-active-bg');
+        box-shadow: eleVar('tab', 'button-active-shadow');
       }
     }
 
@@ -609,7 +698,7 @@
   }
 
   &.is-small > .el-tabs__header {
-    $height: calc(#{eleVar('tab-sm', 'height')} - #{$space});
+    $height: calc(#{eleVar('tab', 'sm-height')} - #{$space});
 
     .el-tabs__item {
       height: $height;
@@ -625,7 +714,7 @@
   }
 
   &.is-large > .el-tabs__header {
-    $height: calc(#{eleVar('tab-lg', 'height')} - #{$space});
+    $height: calc(#{eleVar('tab', 'lg-height')} - #{$space});
 
     .el-tabs__item {
       height: $height;
@@ -647,10 +736,11 @@
   height: eleVar('tab', 'height');
   line-height: eleVar('tab', 'height');
   min-width: eleVar('tab', 'height');
+  text-align: center;
   color: eleVar('tab', 'tool-color');
   font-size: eleVar('tab', 'tool-font-size');
-  transition-duration: $ele-transition;
   transition-property: eleVar('tab', 'transition');
+  transition-duration: $ele-transition;
   position: relative;
   cursor: pointer;
 
@@ -714,58 +804,77 @@
   /* 取消反圆角预留间距 */
   .ele-tab-tool.is-tab + .ele-tabs.is-simple,
   .ele-tab-tool.is-tab + .ele-tabs.is-indicator {
-    margin-left: calc(0px - eleVar('tab-simple', 'angle-size'));
+    margin-left: calc(0px - eleVar('tab', 'simple-angle-size'));
 
     .el-tabs__nav-wrap.is-scrollable {
-      padding-left: eleVar('tab-simple', 'angle-size');
+      padding-left: eleVar('tab', 'simple-angle-size');
     }
   }
 
   /* 小型尺寸 */
   &.is-small .ele-tab-tool {
-    height: eleVar('tab-sm', 'height');
-    line-height: eleVar('tab-sm', 'height');
-    min-width: eleVar('tab-sm', 'height');
-    font-size: eleVar('tab-sm', 'tool-font-size');
+    height: eleVar('tab', 'sm-height');
+    line-height: eleVar('tab', 'sm-height');
+    min-width: eleVar('tab', 'sm-height');
+    font-size: eleVar('tab', 'sm-tool-font-size');
 
     &.is-tab {
-      font-size: eleVar('tab-sm', 'font-size');
+      font-size: eleVar('tab', 'sm-font-size');
     }
 
     .ele-tab-icon {
-      font-size: eleVar('tab-sm', 'icon-font-size');
+      font-size: eleVar('tab', 'sm-icon-font-size');
     }
   }
 
   /* 大型尺寸 */
   &.is-large .ele-tab-tool {
-    height: eleVar('tab-lg', 'height');
-    line-height: eleVar('tab-lg', 'height');
-    min-width: eleVar('tab-lg', 'height');
-    font-size: eleVar('tab-lg', 'tool-font-size');
+    height: eleVar('tab', 'lg-height');
+    line-height: eleVar('tab', 'lg-height');
+    min-width: eleVar('tab', 'lg-height');
+    font-size: eleVar('tab', 'lg-tool-font-size');
 
     &.is-tab {
-      font-size: eleVar('tab-lg', 'font-size');
+      font-size: eleVar('tab', 'lg-font-size');
     }
 
     .ele-tab-icon {
-      font-size: eleVar('tab-lg', 'icon-font-size');
+      font-size: eleVar('tab', 'lg-icon-font-size');
     }
   }
 
-  /* 简约风格和指示器风格 */
+  /* 简约风格和指示器风格以及标签风格 */
   &.is-simple .ele-tab-tool,
-  &.is-indicator .ele-tab-tool {
-    border-radius: eleVar('tab-simple', 'radius');
-
+  &.is-indicator .ele-tab-tool,
+  &.is-tag .ele-tab-tool {
     &:hover {
-      background: eleVar('tab-simple', 'tool-hover-bg');
+      background: eleVar('tab', 'simple-tool-hover-bg');
+    }
+
+    &.is-tab {
+      &:hover {
+        color: eleVar('tab', 'simple-hover-color');
+        background: eleVar('tab', 'simple-hover-bg');
+        z-index: eleVar('tab', 'hover-index');
+      }
+
+      &.is-active {
+        color: eleVar('tab', 'simple-active-color');
+        font-weight: eleVar('tab', 'simple-active-weight');
+        background: eleVar('tab', 'simple-active-bg');
+        z-index: eleVar('tab', 'active-index');
+      }
     }
+  }
+
+  &.is-simple .ele-tab-tool,
+  &.is-indicator .ele-tab-tool {
+    border-radius: eleVar('tab', 'simple-radius');
 
     &.is-tab {
       /* 两侧反圆角 */
       & > .el-dropdown {
-        $size: eleVar('tab-simple', 'angle-size');
+        $size: eleVar('tab', 'simple-angle-size');
         $bg-size: calc(#{$size} * 2);
         $bg: transparent;
 
@@ -774,7 +883,7 @@
           content: '';
           width: $size;
           height: $size;
-          display: eleVar('tab-simple', 'angle-display');
+          display: eleVar('tab', 'simple-angle-display');
           transition: all $ele-transition;
           position: absolute;
           bottom: 0;
@@ -799,58 +908,45 @@
         }
       }
 
-      &:hover {
-        color: eleVar('tab-simple', 'hover-color');
-        background: eleVar('tab-simple', 'hover-bg');
-        z-index: eleVar('tab', 'hover-index');
+      &:hover > .el-dropdown {
+        $bg-size: calc(#{eleVar('tab', 'simple-angle-size')} * 2);
+        $bg: eleVar('tab', 'simple-hover-bg');
 
-        & > .el-dropdown {
-          $bg-size: calc(#{eleVar('tab-simple', 'angle-size')} * 2);
-          $bg: eleVar('tab-simple', 'hover-bg');
-
-          &::before {
-            background: radial-gradient(
-              #{$bg-size} at left top,
-              transparent 50%,
-              #{$bg} 0
-            );
-          }
-
-          &::after {
-            background: radial-gradient(
-              #{$bg-size} at right top,
-              transparent 50%,
-              #{$bg} 0
-            );
-          }
+        &::before {
+          background: radial-gradient(
+            #{$bg-size} at left top,
+            transparent 50%,
+            #{$bg} 0
+          );
+        }
+
+        &::after {
+          background: radial-gradient(
+            #{$bg-size} at right top,
+            transparent 50%,
+            #{$bg} 0
+          );
         }
       }
 
-      &.is-active {
-        $bg: eleVar('tab-simple', 'active-bg');
-        color: eleVar('tab-simple', 'active-color');
-        font-weight: eleVar('tab-simple', 'active-weight');
-        z-index: eleVar('tab', 'active-index');
-        background: $bg;
-
-        & > .el-dropdown {
-          $bg-size: calc(#{eleVar('tab-simple', 'angle-size')} * 2);
-
-          &::before {
-            background: radial-gradient(
-              #{$bg-size} at left top,
-              transparent 50%,
-              #{$bg} 0
-            );
-          }
-
-          &::after {
-            background: radial-gradient(
-              #{$bg-size} at right top,
-              transparent 50%,
-              #{$bg} 0
-            );
-          }
+      &.is-active > .el-dropdown {
+        $bg-size: calc(#{eleVar('tab', 'simple-angle-size')} * 2);
+        $bg: eleVar('tab', 'simple-active-bg');
+
+        &::before {
+          background: radial-gradient(
+            #{$bg-size} at left top,
+            transparent 50%,
+            #{$bg} 0
+          );
+        }
+
+        &::after {
+          background: radial-gradient(
+            #{$bg-size} at right top,
+            transparent 50%,
+            #{$bg} 0
+          );
         }
       }
     }
@@ -860,8 +956,8 @@
     &::after {
       content: '';
       width: 0;
-      height: eleVar('tab-simple', 'active-line');
-      display: eleVar('tab-simple', 'line-display');
+      height: eleVar('tab', 'simple-active-line');
+      display: eleVar('tab', 'simple-line-display');
       background: elVar('color-primary');
       position: absolute;
       bottom: 0;
@@ -873,17 +969,50 @@
     }
   }
 
+  /* 标签风格 */
+  &.is-tag {
+    $space: eleVar('tab', 'tag-space');
+
+    .ele-tab-tool {
+      $height: eleVar('tab', 'height');
+      height: calc(#{$height} - #{$space});
+      line-height: calc(#{$height} - #{$space});
+      min-width: calc(#{$height} - #{$space});
+      border-radius: eleVar('tab', 'tag-radius');
+      margin-top: $space;
+      margin-bottom: $space;
+
+      & + .ele-tab-tool {
+        margin-left: $space;
+      }
+    }
+
+    &.is-small .ele-tab-tool {
+      $height: eleVar('tab', 'sm-height');
+      height: calc(#{$height} - #{$space});
+      line-height: calc(#{$height} - #{$space});
+      min-width: calc(#{$height} - #{$space});
+    }
+
+    &.is-large .ele-tab-tool {
+      $height: eleVar('tab', 'lg-height');
+      height: calc(#{$height} - #{$space});
+      line-height: calc(#{$height} - #{$space});
+      min-width: calc(#{$height} - #{$space});
+    }
+  }
+
   /* 按钮风格 */
   &.is-button {
-    $space: eleVar('tab-button', 'space');
+    $space: eleVar('tab', 'button-space');
 
     .ele-tab-tool {
       $height: eleVar('tab', 'height');
       height: calc(#{$height} - #{$space});
       line-height: calc(#{$height} - #{$space});
       min-width: calc(#{$height} - #{$space});
-      border-radius: eleVar('tab-button', 'radius');
-      background: eleVar('tab-button', 'hover-bg');
+      border-radius: eleVar('tab', 'button-radius');
+      background: eleVar('tab', 'button-hover-bg');
       margin-top: $space;
       margin-bottom: $space;
 
@@ -892,33 +1021,35 @@
       }
 
       &:not(.is-tab):hover {
-        box-shadow: eleVar('tab-button', 'active-shadow');
+        box-shadow: eleVar('tab', 'button-active-shadow');
       }
 
       &.is-tab {
-        background: eleVar('tab-button', 'bg');
+        background: eleVar('tab', 'button-bg');
 
         &:hover {
-          background: eleVar('tab-button', 'hover-bg');
+          color: eleVar('tab', 'button-hover-color');
+          background: eleVar('tab', 'button-hover-bg');
         }
 
         &.is-active {
-          font-weight: eleVar('tab-button', 'active-weight');
-          background: eleVar('tab-button', 'active-bg');
-          box-shadow: eleVar('tab-button', 'active-shadow');
+          color: eleVar('tab', 'button-active-color');
+          font-weight: eleVar('tab', 'button-active-weight');
+          background: eleVar('tab', 'button-active-bg');
+          box-shadow: eleVar('tab', 'button-active-shadow');
         }
       }
     }
 
     &.is-small .ele-tab-tool {
-      $height: eleVar('tab-sm', 'height');
+      $height: eleVar('tab', 'sm-height');
       height: calc(#{$height} - #{$space});
       line-height: calc(#{$height} - #{$space});
       min-width: calc(#{$height} - #{$space});
     }
 
     &.is-large .ele-tab-tool {
-      $height: eleVar('tab-lg', 'height');
+      $height: eleVar('tab', 'lg-height');
       height: calc(#{$height} - #{$space});
       line-height: calc(#{$height} - #{$space});
       min-width: calc(#{$height} - #{$space});