tntd/lib/tabs/tabs.less

tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

// Tabs 自定义梯形页签样式
@tab-prefix-cls: ~'@{ant-prefix}-tabs';

.tnt-tabs.@{tab-prefix-cls}.@{tab-prefix-cls}-ladder-card.@{tab-prefix-cls}-top {
  padding: 0 12px;
  position: relative;
  left: -12px;
  padding-bottom: 20px;

  > .@{tab-prefix-cls}-top-bar {
    border-bottom: none;
    margin-bottom: 0;
    .@{tab-prefix-cls}-tab {
      // display: inline-block;
      vertical-align: bottom;
      // position: relative;
      min-width: 106px;
      height: 40px;
      line-height: 40px;
      border-top-left-radius: @border-radius-lg;
      filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.1));
      box-shadow: 0px 0px 2px -5px rgba(0, 0, 0, 0.05);
      border: none;
      margin: 0px 30px 0px 0px;
      padding: 0px 12px 0 48px;
      // background: @fill-color-quaternary;
      text-align: right;
      // color: @text-color-secondary;

      &::after {
        content: '';
        position: absolute;
        top: 0;
        right: -52px;
        height: 100%;
        width: 64px;
        z-index: 1;
        background: inherit;
        clip-path: path('M0 0H22.3875C28.4632 0 34.2094 2.76179 38.0049 7.5061L64 40H0V0Z');
      }

      // 兼容clip-path 属性
      @supports not (clip-path: path('M0 0H22.3875C28.4632 0 34.2094 2.76179 38.0049 7.5061L64 40H0V0Z')) {
        & {
          padding: 0px 22px 0 48px !important;
          margin-right: 12px;
        }
        &::after {
          top: 17px !important;
          right: -54px !important;
          width: 93px !important;
          z-index: -1 !important;
          height: 45px !important;
          border-top-right-radius: 24px !important;
          border-top-left-radius: 26px !important;
          transform: rotate(50deg) !important;
        }
      }
      @supports (clip-path: path('M0 0H22.3875C28.4632 0 34.2094 2.76179 38.0049 7.5061L64 40H0V0Z')) {
        &::after {
          clip-path: path('M0 0H22.3875C28.4632 0 34.2094 2.76179 38.0049 7.5061L64 40H0V0Z');
        }
      }
    }
    .@{tab-prefix-cls}-nav {
      margin-top: 12px;
      padding-left: 12px;
    }
    .@{tab-prefix-cls}-nav-container {
      height: auto;
      position: relative;
      left: -12px;
    }
    // 鼠标选中时，active状态在上层
    .@{tab-prefix-cls}-tab-active {
      z-index: 99 !important;
      background: @tabs-active-background;
    }
  }

  & > .@{tab-prefix-cls}-content {
    & > .@{tab-prefix-cls}-tabpane {
      background: @white;
      box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
      padding: 20px 12px 12px;
      border-bottom-right-radius: @border-radius-lg;
      border-bottom-left-radius: @border-radius-lg;
      border-top-right-radius: @border-radius-lg;
    }
  }
}

// // Tabs top类型 全局样式修改
.tnt-tabs.@{tab-prefix-cls}.@{tab-prefix-cls}-top.@{tab-prefix-cls}-line {
  .@{tab-prefix-cls}-nav-container {
    margin-bottom: none;
  }

  .@{tab-prefix-cls}-tab {
    border-bottom: 1px solid transparent;
    margin-bottom: 1px;
    height: 40px;
    line-height: 37px;
    padding: 2px 12px 0;
  }
}

.tnt-tabs.@{tab-prefix-cls} {
  .@{tab-prefix-cls}-nav {
    .@{tab-prefix-cls}-tab {
      color: @tabs-tab-color;
      // 自定义图标默认都是 16px
      i.anticon {
        font-size: @font-size-lg;
        margin-right: 4px;
      }
    }
    .@{tab-prefix-cls}-tab.@{tab-prefix-cls}-tab-active {
      color: @tabs-active-color;
    }
    .@{tab-prefix-cls}-tab.@{tab-prefix-cls}-tab:hover {
      color: @tabs-hover-color;
    }
  }
}