tntd/lib/table/table.less

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

@table-prefix-cls: ~'@{ant-prefix}-table';
@pagination-prefix-cls: ~'@{ant-prefix}-pagination';
@spin-prefix-cls: ~'@{ant-prefix}-spin';
@table-borderless-shadow: 0 0 14px rgba(0, 0, 0, 0.08);

// .@{table-prefix-cls} {
.tnt-table-wrapper {
  background-color: @white;
  border-radius: @border-radius-base;

  &.@{table-prefix-cls}-borderless {
    .@{table-prefix-cls}-small {
      border: none;
    }
  }

  &.@{table-prefix-cls}-bordered-out {
    border: @border-width-base @border-style-base @border-color-split;
    overflow: hidden; // 姚姚和宏宇要求边框需要包括分页
  }

  &.@{table-prefix-cls}-shadowed {
    box-shadow: @table-borderless-shadow;
  }

  &.@{table-prefix-cls}-small-padding{
    .@{table-prefix-cls}-tbody > tr > td {
      padding-top: 8px;
      padding-bottom: 8px;
    }
  }

  &.@{table-prefix-cls}-striped {
    .@{table-prefix-cls}-tbody
      > .@{table-prefix-cls}-row-even:not(:hover):not(.@{table-prefix-cls}-row-hover)
      > td {
      background: @bg-grey-first;
    }
  }

  &.@{table-prefix-cls}-striped .@{table-prefix-cls}:not(.@{table-prefix-cls}-bordered) {
    .@{table-prefix-cls}-thead > tr > th,
    .@{table-prefix-cls}-tbody > tr > td {
      border-bottom: none;
    }
  }

  &.@{table-prefix-cls}-hide-cell-borders {
    .@{table-prefix-cls}-thead > tr > th,
    .@{table-prefix-cls}-tbody > tr > td {
      border-right: none !important;
    }
  }
  &.@{table-prefix-cls}-hide-cell-borders {
    .@{table-prefix-cls}-thead > tr > th,
    .@{table-prefix-cls}-tbody > tr > td {
      border-right: none;
      border-bottom: none;
    }
  }

  // middle table override
  &.@{table-prefix-cls}-size-middle {
    .@{table-prefix-cls}-pagination.@{pagination-prefix-cls} {
      padding: 10px;
    }
  }

  // small table override
  &.@{table-prefix-cls}-size-small {
    .@{table-prefix-cls}-content {
      > .@{table-prefix-cls}-body {
        margin: 0;
      }

      > .ant-table-footer {
        border-top: none;
        background-color: @bg-grey-first;
      }
    }

    .@{table-prefix-cls}-pagination.@{pagination-prefix-cls} {
      padding: 9px 10px;
    }
  }

  .@{table-prefix-cls}-thead > tr > th {
    font-weight: 600;
  }

  .@{table-prefix-cls}-placeholder {
    padding-top: @table-padding-horizontal;
    padding-bottom: @table-padding-horizontal;
    border-bottom: 0;
    border-top: 0;
  }

  // customize the loading of table
  .@{spin-prefix-cls}-nested-loading > div > .@{spin-prefix-cls} {
    // background-color: @white; // 测试反馈很奇怪
    max-height: initial;
  }

  // customize the pagination of table
  .@{table-prefix-cls}-pagination.@{pagination-prefix-cls} {
    width: 100%;
    text-align: right;
    margin: 0;
    padding: 12px 10px;
  }

  .@{pagination-prefix-cls}-total-text {
    float: left;
  }
}