ele-admin-plus 1.0.2 → 1.1.0

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

@@ -1,285 +1,535 @@
 @use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
 @use './css-var.scss' as *;
 
 @include set-tab-var($ele);
 
 /* 标签页 */
-.ele-tabs {
-  & > .el-tabs__header {
-    #{elVarName('tabs', 'header-height')}: eleVar('tab', 'height');
+.ele-tabs.el-tabs > .el-tabs__header {
+  margin: 0;
+
+  .el-tabs__nav-wrap {
     margin: 0;
+    padding: 0;
+    display: flex;
 
-    .el-tabs__nav-wrap {
-      margin: 0;
-      padding: 0;
-      display: flex;
+    &::after {
+      height: 0.8px;
+      background: eleVar('tab', 'line-color');
+    }
+  }
 
-      &::after {
-        height: 0.8px;
-        background-color: eleVar('tab', 'line-color');
-      }
+  .el-tabs__nav-scroll {
+    flex: 1;
+  }
+
+  .el-tabs__nav {
+    float: none;
+    width: max-content;
+    display: inline-flex;
+    box-sizing: border-box;
+  }
+
+  .el-tabs__item {
+    display: block;
+    height: eleVar('tab', 'height');
+    line-height: eleVar('tab', 'height');
+    color: eleVar('tab', 'color');
+    font-size: eleVar('tab', 'font-size');
+    transition: color $ele-transition, background-color $ele-transition,
+      border-color $ele-transition, font-weight $ele-transition;
+    border: none;
+    margin: 0;
+
+    &:hover {
+      color: eleVar('tab', 'hover-color');
     }
 
-    .el-tabs__nav-scroll {
-      flex: 1;
+    &.is-active {
+      color: eleVar('tab', 'active-color');
     }
+  }
 
-    .el-tabs__nav {
-      float: none;
-      display: inline-flex;
-      width: max-content;
+  .el-tabs__nav-wrap .el-tabs__nav-scroll .el-tabs__nav {
+    .el-tabs__item,
+    .el-tabs__item.is-closable,
+    .el-tabs__item.is-top.is-closable {
+      padding: 0;
     }
+  }
 
-    .el-tabs__item {
-      padding: 0 !important;
-      line-height: elVar('tabs', 'header-height');
-      transition: color 0.3s, background-color 0.3s, border-color 0.3s;
+  // 右键菜单
+  .el-tabs__item > .el-dropdown {
+    color: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    position: static;
+    cursor: inherit;
+    display: block;
+  }
 
-      // 右键菜单
-      & > .el-dropdown {
-        color: inherit;
-        font-size: inherit;
-        line-height: inherit;
-        position: static;
-        cursor: inherit;
-        display: block;
-      }
+  // 标题
+  .ele-tab-title {
+    padding: 0 eleVar('tab', 'padding');
+    box-sizing: border-box;
+    outline: none;
+  }
 
-      // 标题
-      .ele-tab-title {
-        padding: 0 eleVar('tab', 'padding');
-        box-sizing: border-box;
-        outline: none;
-      }
+  .el-tabs__item.is-closable .ele-tab-title {
+    $padding: eleVar('tab', 'padding');
+    $size: eleVar('tab', 'close-size');
+    padding-right: calc(#{$padding} + #{$size} / 2 + #{$padding} / 4);
+  }
 
-      &.is-closable .ele-tab-title {
-        padding-right: calc(
-          #{eleVar('tab', 'padding')} + #{elVar('font-size', 'base')}
-        );
-      }
+  // 关闭图标
+  .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item .is-icon-close {
+    margin: 0;
+    width: eleVar('tab', 'close-size');
+    height: eleVar('tab', 'close-size');
+    color: eleVar('tab', 'close-color');
+    font-size: eleVar('tab', 'close-font-size');
+    border-radius: eleVar('tab', 'close-radius');
+    position: absolute;
+    right: calc(#{eleVar('tab', 'padding')} / 2);
+    top: 50%;
+    transform: translateY(-50%);
+    transition: color $ele-transition, background-color $ele-transition;
+
+    & > svg {
+      margin: 0;
+      pointer-events: none;
+    }
 
-      // 关闭图标
-      .is-icon-close {
-        margin: 0;
-        color: elVar('text-color', 'secondary');
-        position: absolute;
-        right: calc(#{eleVar('tab', 'padding')} / 2 + 2px);
-        top: 50%;
-        transform: translateY(-50%);
-        transition: background-color 0.3s, color 0.3s;
+    &:hover {
+      color: eleVar('tab', 'close-hover-color');
+      background: eleVar('tab', 'close-hover-bg');
+    }
+  }
 
-        & > svg {
-          margin: 0;
-          pointer-events: none;
-        }
+  // 拖动
+  .el-tabs__item.sortable-ghost {
+    opacity: 0;
+  }
 
-        &:hover {
-          color: #fff;
-          background: elVar('color-error');
-        }
-      }
+  // 左右箭头
+  .el-tabs__nav-prev,
+  .el-tabs__nav-next {
+    flex-shrink: 0;
+    width: eleVar('tab', 'height');
+    height: eleVar('tab', 'height');
+    line-height: eleVar('tab', 'height');
+    color: eleVar('tab', 'tool-color');
+    font-size: eleVar('tab', 'tool-font-size');
+    transition: color $ele-transition, background-color $ele-transition;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: static;
+    right: auto;
+    left: auto;
 
-      // 拖动
-      &.sortable-ghost {
-        opacity: 0;
-      }
+    &:not(.is-disabled):hover {
+      color: eleVar('tab', 'tool-hover-color');
     }
 
-    // 左右箭头
-    .el-tabs__nav-prev,
-    .el-tabs__nav-next {
-      flex-shrink: 0;
-      width: elVar('tabs', 'header-height');
-      height: elVar('tabs', 'header-height');
-      font-size: elVar('font-size', 'base');
-      color: elVar('text-color', 'secondary');
-      transition: background-color 0.3s, color 0.3s;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: static;
-      right: auto;
-      left: auto;
-
-      &.is-disabled {
-        cursor: not-allowed;
-      }
-
-      &:not(.is-disabled):hover {
-        color: elVar('text-color', 'primary');
-      }
+    &.is-disabled {
+      cursor: not-allowed;
     }
+  }
 
-    .el-tabs__nav-next {
-      order: 1;
-    }
+  .el-tabs__nav-next {
+    order: 1;
   }
+}
 
-  /* 小型尺寸 */
-  &.is-small > .el-tabs__header {
-    #{eleVarName('tab', 'height')}: eleVar('tab-small', 'height');
-    #{eleVarName('tab', 'padding')}: eleVar('tab-small', 'padding');
-    #{elVarName('font-size', 'base')}: elVar('font-size', 'small');
+/* 小型尺寸 */
+.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');
   }
 
-  /* 大型尺寸 */
-  &.is-large > .el-tabs__header {
-    #{eleVarName('tab', 'height')}: eleVar('tab-large', 'height');
-    #{eleVarName('tab', 'padding')}: eleVar('tab-large', 'padding');
-    #{elVarName('font-size', 'base')}: elVar('font-size', 'medium');
+  .ele-tab-title {
+    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-right: calc(#{$padding} + #{$size} / 2 + #{$padding} / 4);
   }
 
-  /* 标签居中 */
-  &.is-center > .el-tabs__header .el-tabs__nav-scroll {
-    text-align: center;
+  .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);
   }
 
-  /* 卡片风格 */
-  &.el-tabs--card > .el-tabs__header {
-    height: auto;
+  .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');
+  }
+}
+
+/* 大型尺寸 */
+.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');
+  }
+
+  .ele-tab-title {
+    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-right: calc(#{$padding} + #{$size} / 2 + #{$padding} / 4);
+  }
+
+  .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);
+  }
+
+  .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');
+  }
+}
+
+/* 标签居中 */
+.ele-tabs.is-center > .el-tabs__header .el-tabs__nav-scroll {
+  text-align: center;
+}
+
+/* 卡片风格 */
+.ele-tabs.el-tabs--card > .el-tabs__header {
+  height: auto;
+  border: none;
+  box-shadow: 0 -0.8px 0 eleVar('tab', 'line-color') inset;
+
+  .el-tabs__item {
+    & + .el-tabs__item {
+      border-left: 1px solid eleVar('tab', 'line-color');
+    }
+
+    &.is-active {
+      background: eleVar('tab', 'bg');
+    }
+  }
+
+  .el-tabs__nav {
+    border: 1px solid eleVar('tab', 'line-color');
+    border-bottom: none;
+    overflow: hidden;
+  }
+}
+
+/* 边框卡片风格 */
+.ele-tabs.el-tabs--border-card {
+  background: eleVar('tab', 'bg');
+  border: 1px solid eleVar('tab', 'line-color');
+
+  & > .el-tabs__header {
     border: none;
-    box-shadow: 0 -1px 0 eleVar('tab', 'line-color') inset;
+    background: eleVar('tab', 'header-bg');
+    box-shadow: 0 -0.8px 0 eleVar('tab', 'line-color') inset;
 
     .el-tabs__item {
-      border-bottom: none;
+      border-left: 1px solid transparent;
+      border-right: 1px solid transparent;
 
       &.is-active {
-        background: elVar('bg-color', 'overlay');
+        border-color: eleVar('tab', 'line-color');
+        background: eleVar('tab', 'bg');
       }
+    }
 
-      .is-icon-close {
-        width: 1em !important;
-        height: 1em !important;
-        font-size: inherit !important;
-      }
+    .el-tabs__nav > .el-tabs__item:first-child {
+      border-left: none;
     }
 
-    .el-tabs__nav {
-      overflow: hidden;
+    .el-tabs__nav-wrap.is-scrollable .el-tabs__item:last-child {
+      border-right: none;
     }
-  }
 
-  /* 边框卡片风格 */
-  &.el-tabs--border-card > .el-tabs__header {
-    border: none;
-    box-shadow: 0 -1px 0 eleVar('tab', 'line-color') inset;
+    .el-tabs__nav-prev {
+      border-right: 1px solid eleVar('tab', 'line-color');
+    }
 
-    .el-tabs__item {
-      margin-top: 0;
-      border-top: none;
-      border-bottom: none;
+    .el-tabs__nav-next {
+      border-left: 1px solid eleVar('tab', 'line-color');
     }
   }
+}
+
+/* 默认风格 */
+.ele-tabs.is-default,
+.ele-tabs.is-plain {
+  & > .el-tabs__header {
+    .el-tabs__item + .el-tabs__item {
+      margin-left: calc(#{eleVar('tab', 'padding')} * 2 - 4px);
+    }
 
-  /* 默认风格 */
-  &.is-default > .el-tabs__header .el-tabs__item,
-  &.is-plain > .el-tabs__header .el-tabs__item {
     .ele-tab-title {
       padding: 0 2px;
     }
 
-    &.is-closable .ele-tab-title {
-      padding-right: calc(#{elVar('font-size', 'base')} + 2px);
+    .el-tabs__item.is-closable .ele-tab-title {
+      padding-right: calc(#{eleVar('tab', 'close-size')} + 2px);
     }
 
-    .is-icon-close {
+    .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item .is-icon-close {
       right: 0;
     }
+  }
 
-    & + .el-tabs__item {
-      margin-left: calc(#{eleVar('tab', 'padding')} * 2 - 4px);
+  &.is-small > .el-tabs__header {
+    .el-tabs__item + .el-tabs__item {
+      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);
     }
   }
 
-  /* 朴素风格 */
-  &.is-plain > .el-tabs__header .el-tabs__nav-wrap::after {
-    display: none;
+  &.is-large > .el-tabs__header {
+    .el-tabs__item + .el-tabs__item {
+      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);
+    }
   }
+}
 
-  /* 简约风格 */
-  &.is-simple > .el-tabs__header,
-  &.is-indicator > .el-tabs__header {
-    .el-tabs__item {
-      // 指示线
-      &::after {
+/* 朴素风格 */
+.ele-tabs.is-plain > .el-tabs__header .el-tabs__nav-wrap::after {
+  display: none;
+}
+
+/* 简约风格 */
+.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;
+
+      &::after,
+      &::before {
         content: '';
-        width: 0;
-        height: 2px;
-        background: elVar('color-primary');
+        width: $size;
+        height: $size;
+        display: eleVar('tab-simple', 'angle-display');
+        transition: all $ele-transition;
+        pointer-events: none;
         position: absolute;
         bottom: 0;
-        left: 0;
       }
 
-      &:hover {
-        background: eleVar('tab-simple', 'hover');
+      &::before {
+        left: calc(0px - $size);
+        background: radial-gradient(
+          #{$bg-size} at left top,
+          transparent 50%,
+          #{$bg} 0
+        );
       }
 
-      // 选中样式
-      &.is-active {
-        background: eleVar('tab-simple', 'active');
+      &::after {
+        right: calc(0px - $size);
+        background: radial-gradient(
+          #{$bg-size} at right top,
+          transparent 50%,
+          #{$bg} 0
+        );
+      }
+    }
+
+    &:hover {
+      $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 {
-          width: 100%;
+          background: radial-gradient(
+            #{$bg-size} at right top,
+            transparent 50%,
+            #{$bg} 0
+          );
         }
       }
     }
 
-    .el-tabs__nav-prev:not(.is-disabled):hover,
-    .el-tabs__nav-next:not(.is-disabled):hover {
-      background: eleVar('tab-simple', 'hover');
+    // 选中样式
+    &.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;
+
+      &::after {
+        width: 100%;
+      }
+
+      & > .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
+          );
+        }
+      }
     }
+  }
 
-    .el-tabs__active-bar,
-    .el-tabs__nav-wrap::after {
+  .el-tabs__nav-prev:not(.is-disabled):hover,
+  .el-tabs__nav-next:not(.is-disabled):hover {
+    background: eleVar('tab-simple', 'hover-bg');
+  }
+
+  .el-tabs__active-bar,
+  .el-tabs__nav-wrap::after {
+    display: none;
+  }
+
+  // 加左右间距为反圆角留点位置
+  .el-tabs__nav {
+    padding: 0 eleVar('tab-simple', 'angle-size');
+  }
+}
+
+/* 指示器风格 */
+.ele-tabs.is-indicator {
+  $size: eleVar('tab-indicator', 'size');
+  $margin: eleVar('tab-indicator', 'margin');
+
+  & > .el-tabs__header {
+    .el-tabs__item::after {
       display: none;
     }
-  }
 
-  /* 指示器风格 */
-  &.is-indicator > .el-tabs__header .el-tabs__item {
     .ele-tab-title {
       $padding: eleVar('tab', 'padding');
-      $size: eleVar('tab-indicator', 'size');
-      $margin: eleVar('tab-indicator', 'margin');
-      padding-left: calc(#{$padding} + #{$size} + #{$margin} - 2px);
+      padding-left: calc(#{$padding} + #{$size} / 2 + #{$margin});
 
       &::before {
         content: '';
+        width: $size;
+        height: $size;
         border-radius: 50%;
-        width: eleVar('tab-indicator', 'size');
-        height: eleVar('tab-indicator', 'size');
         background: eleVar('tab-indicator', 'color');
         position: absolute;
-        left: calc(#{$padding} - 2px);
+        left: calc(#{$padding} - #{$size} / 2);
         top: 50%;
         transform: translateY(-50%);
-        transition: background-color 0.3s;
+        transition: background-color $ele-transition;
       }
     }
 
-    &.is-active .ele-tab-title::before {
+    .el-tabs__item:hover .ele-tab-title::before {
+      background: eleVar('tab-indicator', 'hover-color');
+    }
+
+    .el-tabs__item.is-active .ele-tab-title::before {
       background: elVar('color-primary');
     }
+  }
 
-    &::after {
-      display: none;
+  &.is-small > .el-tabs__header .ele-tab-title {
+    $padding: eleVar('tab-sm', 'padding');
+    padding-left: calc(#{$padding} + #{$size} / 2 + #{$margin});
+
+    &::before {
+      left: calc(#{$padding} - #{$size} / 2);
     }
   }
 
-  /* 按钮风格 */
-  &.is-button > .el-tabs__header {
-    $height: eleVar('tab', 'height');
-    $space: eleVar('tab-button', 'space');
-    #{elVarName('tabs', 'header-height')}: calc(#{$height} - #{$space});
+  &.is-large > .el-tabs__header .ele-tab-title {
+    $padding: eleVar('tab-lg', 'padding');
+    padding-left: calc(#{$padding} + #{$size} / 2 + #{$margin});
+
+    &::before {
+      left: calc(#{$padding} - #{$size} / 2);
+    }
+  }
+}
 
+/* 按钮风格 */
+.ele-tabs.is-button {
+  $space: eleVar('tab-button', 'space');
+
+  & > .el-tabs__header {
     .el-tabs__item {
+      $height: eleVar('tab', 'height');
+      height: calc(#{$height} - #{$space});
+      line-height: calc(#{$height} - #{$space});
       border-radius: eleVar('tab-button', 'radius');
       background: eleVar('tab-button', 'bg');
 
       & + .el-tabs__item {
         margin-left: $space;
       }
+
+      &.is-active {
+        font-weight: eleVar('tab-button', 'active-weight');
+      }
     }
 
     .el-tabs__active-bar,
@@ -287,38 +537,48 @@
       display: none;
     }
   }
-}
 
-/* 页签右键菜单 */
-.ele-tab-popup .el-dropdown-menu__item > .el-icon {
-  font-size: 16px;
-  margin-right: 8px;
+  &.is-small > .el-tabs__header .el-tabs__item {
+    $height: eleVar('tab-sm', 'height');
+    height: calc(#{$height} - #{$space});
+    line-height: calc(#{$height} - #{$space});
+  }
+
+  &.is-large > .el-tabs__header .el-tabs__item {
+    $height: eleVar('tab-lg', 'height');
+    height: calc(#{$height} - #{$space});
+    line-height: calc(#{$height} - #{$space});
+  }
 }
 
 /* 页签操作按钮 */
 .ele-tab-tool {
-  #{elVarName('tabs', 'header-height')}: eleVar('tab', 'height');
-  height: elVar('tabs', 'header-height');
-  line-height: elVar('tabs', 'header-height');
-  min-width: elVar('tabs', 'header-height');
   flex-shrink: 0;
-  font-size: elVar('font-size', 'base');
-  color: elVar('text-color', 'secondary');
-  transition: background-color 0.3s, color 0.3s;
+  height: eleVar('tab', 'height');
+  line-height: eleVar('tab', 'height');
+  min-width: eleVar('tab', 'height');
+  color: eleVar('tab', 'tool-color');
+  font-size: eleVar('tab', 'tool-font-size');
+  transition: color $ele-transition, background-color $ele-transition,
+    border-color $ele-transition, font-weight $ele-transition;
   position: relative;
   cursor: pointer;
 
   &:hover {
-    color: elVar('text-color', 'primary');
+    color: eleVar('tab', 'tool-hover-color');
   }
 
   // 模拟页签
   &.is-tab {
-    color: elVar('text-color', 'primary');
+    color: eleVar('tab', 'color');
+    font-size: eleVar('tab', 'font-size');
+
+    &:hover {
+      color: eleVar('tab', 'hover-color');
+    }
 
-    &:hover,
     &.is-active {
-      color: elVar('color-primary');
+      color: eleVar('tab', 'active-color');
     }
   }
 
@@ -332,11 +592,11 @@
   // 下拉菜单
   & > .el-dropdown {
     color: inherit;
-    cursor: inherit;
     font-size: inherit;
     line-height: inherit;
-    display: block;
     position: static;
+    cursor: inherit;
+    display: block;
   }
 }
 
@@ -356,29 +616,135 @@
     }
   }
 
+  // 取消反圆角预留间距
+  .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'));
+  }
+
   // 小型尺寸
   &.is-small .ele-tab-tool {
-    #{eleVarName('tab', 'height')}: eleVar('tab-small', 'height');
-    #{eleVarName('tab', 'padding')}: eleVar('tab-small', 'padding');
-    #{elVarName('font-size', 'base')}: elVar('font-size', 'small');
+    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');
+    }
   }
 
   // 大型尺寸
   &.is-large .ele-tab-tool {
-    #{eleVarName('tab', 'height')}: eleVar('tab-large', 'height');
-    #{eleVarName('tab', 'padding')}: eleVar('tab-large', 'padding');
-    #{elVarName('font-size', 'base')}: elVar('font-size', 'medium');
+    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');
+    }
   }
 
   // 简约风格和指示器风格
   &.is-simple .ele-tab-tool,
   &.is-indicator .ele-tab-tool {
     &:hover {
-      background: eleVar('tab-simple', 'hover');
+      background: eleVar('tab-simple', 'hover-bg');
     }
 
-    &.is-active {
-      background: eleVar('tab-simple', 'active');
+    &.is-tab {
+      border-radius: eleVar('tab-simple', 'radius');
+
+      // 两侧反圆角
+      & > .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;
+          position: absolute;
+          bottom: 0;
+        }
+
+        &::before {
+          left: calc(0px - $size);
+          background: radial-gradient(
+            #{$bg-size} at left top,
+            transparent 50%,
+            #{$bg} 0
+          );
+        }
+
+        &::after {
+          right: calc(0px - $size);
+          background: radial-gradient(
+            #{$bg-size} at right top,
+            transparent 50%,
+            #{$bg} 0
+          );
+        }
+      }
+
+      &:hover {
+        color: eleVar('tab-simple', 'hover-color');
+        z-index: eleVar('tab', 'hover-index');
+
+        & > .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
+            );
+          }
+        }
+      }
+
+      &.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
+            );
+          }
+        }
+      }
     }
   }
 
@@ -386,7 +752,8 @@
     &::after {
       content: '';
       width: 0;
-      height: 2px;
+      height: eleVar('tab-simple', 'active-line');
+      display: eleVar('tab-simple', 'line-display');
       background: elVar('color-primary');
       position: absolute;
       bottom: 0;
@@ -399,15 +766,38 @@
   }
 
   // 按钮风格
-  &.is-button .ele-tab-tool {
-    $height: eleVar('tab', 'height');
+  &.is-button {
     $space: eleVar('tab-button', 'space');
-    #{elVarName('tabs', 'header-height')}: calc(#{$height} - #{$space});
-    background: eleVar('tab-button', 'bg');
-    border-radius: eleVar('tab-button', 'radius');
 
-    & + .ele-tab-tool {
-      margin-left: $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', 'bg');
+
+      & + .ele-tab-tool {
+        margin-left: $space;
+      }
+
+      &.is-tab.is-active {
+        font-weight: eleVar('tab-button', 'active-weight');
+      }
+    }
+
+    &.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});
     }
   }
 }