perf(tabs): perf multiple-tabs

src/layouts/default/tabs/index.less

@@ -0,0 +1,185 @@
+@import (reference) '../../../design/index.less';
+@prefix-cls: ~'@{namespace}-multiple-tabs';
+
+.@{prefix-cls} {
+  z-index: 10;
+  height: @multiple-height + 2;
+  line-height: @multiple-height + 2;
+  background: @white;
+  box-shadow: 0 1px 2px 0 rgba(29, 35, 41, 0.05);
+
+  .ant-tabs-small {
+    height: @multiple-height;
+  }
+
+  .ant-tabs.ant-tabs-card {
+    .ant-tabs-card-bar {
+      height: @multiple-height;
+      margin: 0;
+      background: @white;
+      border: 0;
+      box-shadow: none;
+
+      .ant-tabs-nav-container {
+        height: @multiple-height;
+        padding-top: 2px;
+      }
+
+      .ant-tabs-tab {
+        height: calc(@multiple-height - 2px);
+        padding-right: 12px;
+        line-height: calc(@multiple-height - 2px);
+        color: @text-color-call-out;
+        background: @white;
+        border: 1px solid darken(@border-color-light, 6%);
+        transition: none;
+
+        &:not(.ant-tabs-tab-active)::before {
+          position: absolute;
+          top: -1px;
+          left: 50%;
+          width: 100%;
+          height: 2px;
+          background-color: @primary-color;
+          content: '';
+          opacity: 0;
+          transform: translate(-50%, 0) scaleX(0);
+          transform-origin: center;
+          transition: none;
+        }
+
+        &:hover {
+          .ant-tabs-close-x {
+            opacity: 1;
+          }
+
+          &:not(.ant-tabs-tab-active)::before {
+            opacity: 1;
+            transform: translate(-50%, 0) scaleX(1);
+            transition: all 0.3s ease-in-out;
+          }
+        }
+
+        .ant-tabs-close-x {
+          width: 8px;
+          height: 12px;
+          font-size: 12px;
+          color: inherit;
+          opacity: 0;
+          transition: none;
+
+          &:hover {
+            svg {
+              width: 0.8em;
+            }
+          }
+        }
+
+        > div {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+        svg {
+          fill: @text-color-base;
+        }
+      }
+
+      .ant-tabs-tab-active {
+        position: relative;
+        padding-left: 26px;
+        color: @white;
+        background: fade(@primary-color, 100%);
+        border: 0;
+        transition: none;
+
+        &::before {
+          position: absolute;
+          top: calc(50% - 3px);
+          left: 8px;
+          width: 6px;
+          height: 6px;
+          background: #fff;
+          border-radius: 50%;
+          content: '';
+          transition: none;
+        }
+
+        .ant-tabs-close-x {
+          opacity: 1;
+        }
+
+        svg {
+          width: 0.7em;
+          fill: @white;
+        }
+      }
+    }
+
+    .ant-tabs-nav > div:nth-child(1) {
+      padding: 0 6px;
+
+      .ant-tabs-tab {
+        margin-right: 3px !important;
+      }
+    }
+  }
+
+  .ant-tabs-tab:not(.ant-tabs-tab-active) {
+    .anticon-close {
+      font-size: 12px;
+
+      svg {
+        width: 0.6em;
+      }
+    }
+  }
+
+  .ant-tabs-extra-content {
+    margin-top: 2px;
+    line-height: @multiple-height !important;
+  }
+
+  .ant-dropdown-trigger {
+    display: inline-flex;
+  }
+
+  &--hide-close {
+    .ant-tabs-close-x {
+      opacity: 0 !important;
+    }
+  }
+
+  &-content {
+    &__extra {
+      display: inline-block;
+      width: @multiple-height;
+      height: @multiple-height;
+      line-height: @multiple-height;
+      color: #999;
+      text-align: center;
+      cursor: pointer;
+      border-left: 1px solid #eee;
+
+      &:hover {
+        color: @text-color-base;
+      }
+
+      span[role='img'] {
+        transform: rotate(90deg);
+      }
+    }
+
+    &__info {
+      display: inline-block;
+      width: 100%;
+      height: @multiple-height - 2;
+      padding-left: 0;
+      margin-left: -10px;
+      font-size: 12px;
+      cursor: pointer;
+      user-select: none;
+    }
+  }
+}