cip-components/main/cip-main-tabs/index.less

.cip-main-tabs{
  //margin-top:8px;
  margin-top: 16px;
  .@{elNamespace}-tabs{
    //border: none;
    .@{elNamespace}-tabs__header{
      //border: none;

    }
    .@{elNamespace}-tabs__nav{
      border: none !important;
    }
    &__item{
      display: inline-flex;
      align-items: center;
    }
  }
  .@{elNamespace}-tabs{
    &--card{
      --el-font-size-base: 12px; // 重置为12px
      --el-tabs-header-height: 31px;
      --el-text-color-primary: var(--el-text-color-regular); // 重置为regular
      & > .@{elNamespace}-tabs__header{
        margin-bottom: unset;
        padding: 0 20px;
        .@{elNamespace}-tabs__nav-wrap.is-scrollable{
          padding: 0 33px;
        }
        .tabs__nav_button(){
          width: 32px;
          height: 32px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          background-color: var(--el-fill-color);
        }
        .@{elNamespace}-tabs__nav-prev{
          .tabs__nav_button();
          margin-right: 1px;
          &.is-disabled{
            color: var(--el-text-color-disabled);
          }
        }
        .@{elNamespace}-tabs__nav-next{
          .tabs__nav_button();
          margin-left: 1px;
          &.is-disabled{
            color: var(--el-text-color-disabled);
          }
        }
        .@{elNamespace}-tabs__nav{
          border: none;
        }
        .@{elNamespace}-tabs__item{
          padding-left: 16px !important;
          padding-right: 16px !important;
          border-radius: var(--el-border-radius-base);
          background-color: var(--el-fill-color);
          border: none;
          vertical-align: middle;
          &.is-closable .is-icon-close{
            width: 1em !important;
            height: 1em !important;
          }
          & + .@{elNamespace}-tabs__item{
            margin-left:1px;
          }
          &.is-active{
            background-color: var(--el-color-primary-light-9); //#e0edff
          }
        }
      }
    }
  }
  .cip-main-tab__label{
    display: inline-block;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

// 另一种主题，暂不引入
//.cip-main-tabs--theme-1{
//  margin-top:8px;
//  .@{elNamespace}-tabs{
//    border: none;
//    .@{elNamespace}-tabs__header{
//      border: none;
//    }
//    .@{elNamespace}-tabs__nav{
//      border: none !important;
//    }
//    &__item{
//      border: none !important;
//      border-radius: 7px;
//      margin-top: 6px;
//      margin-right: -24px;
//      height: 38px;
//      line-height: 38px;
//      mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAAAkBAMAAAAdqzmBAAAAMFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlTPQ5AAAAD3RSTlMAr3DvEM8wgCBA379gj5//tJBPAAAAnUlEQVRIx2NgAAM27fj/tAO/xBsYkIHyf9qCT8iWMf6nNQhAsk2f5rYheY7Dnua2/U+A28ZEe8v+F9Ax2v7/F4DbxkUH2wzgtvHTwbYPo7aN2jZq26hto7aN2jZq25Cy7Qvctnw62PYNbls9HWz7S8/G6//PsI6H4396gAUQy1je08W2jxDbpv6nD4gB2uWp+J9eYPsEhv/0BPS1DQBvoBLVZ3BppgAAAABJRU5ErkJggg==);
//      mask-size: 100% 100%;
//      padding: 0 30px !important;
//      display: inline-flex;
//      align-items: center;
//      &:hover{
//        background: #dee1e6;
//        color: inherit;
//      }
//      &.is-active{
//        border: none;
//        color: @primary;
//        background: var(--el-color-primary-light-9);
//      }
//    }
//  }
//  .@{elNamespace}-tabs__header.is-top{
//    margin: 0;
//  }
//  .cip-main-tab__label{
//    display: inline-block;
//    max-width: 120px;
//    overflow: hidden;
//    text-overflow: ellipsis;
//  }
//}