ant-design/components/table/style/index.less

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './size';
@import './bordered';

@table-prefix-cls: ~'@{ant-prefix}-table';
@dropdown-prefix-cls: ~'@{ant-prefix}-dropdown';
@table-header-icon-color: #bfbfbf;
@table-header-icon-color-hover: darken(@table-header-icon-color, 10%);

// Sorter
// Legacy: `table-header-sort-active-bg` is used for hover not real active
@table-header-sort-active-bg: darken(@table-header-bg, 3%);

// Filter
@table-header-filter-active-bg: darken(@table-header-sort-active-bg, 5%);

@table-selection-column-width: 60px;

.@{table-prefix-cls}-wrapper {
  .clearfix;
}

.@{table-prefix-cls} {
  .reset-component;
  position: relative;
  clear: both;

  // https://github.com/ant-design/ant-design/issues/17611
  table {
    width: 100%;
    text-align: left;
    border-radius: @table-border-radius-base @table-border-radius-base 0 0;
    border-collapse: separate;
    border-spacing: 0;
  }

  // ============================= Cell =============================
  thead > tr > th,
  tbody > tr > td,
  tfoot > tr > th,
  tfoot > tr > td {
    position: relative;
    padding: @table-padding-vertical @table-padding-horizontal;
    overflow-wrap: break-word;
  }

  // weak priority
  td {
    background: @component-background;
  }

  &-cell-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: keep-all;

    // Fixed first or last should special process
    &.@{table-prefix-cls}-cell-fix-left-last,
    &.@{table-prefix-cls}-cell-fix-right-first {
      overflow: visible;

      .@{table-prefix-cls}-cell-content {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  // ============================ Title =============================
  &-title {
    padding: @table-padding-vertical @table-padding-horizontal;
  }

  // ============================ Footer ============================
  &-footer {
    padding: @table-padding-vertical @table-padding-horizontal;
  }

  // ============================ Header ============================
  thead {
    > tr {
      > th {
        color: @table-header-color;
        font-weight: 500;
        text-align: left;
        background: @table-header-bg;
        border-bottom: @border-width-base @border-style-base @border-color-split;
        transition: background 0.3s ease;

        &[colspan] {
          text-align: center;
        }
      }
    }

    > tr:not(:last-child) > th {
      &[colspan] {
        border-bottom: 0;
      }
    }
  }

  // ============================= Body =============================
  tbody {
    > tr {
      > td {
        border-bottom: @border-width-base @border-style-base @border-color-split;
        transition: background 0.3s;
      }

      &.@{table-prefix-cls}-row:hover {
        > td {
          background: @table-row-hover-bg;
        }
      }

      &.@{table-prefix-cls}-row-selected {
        > td {
          background: @table-selected-row-bg;
        }

        :hover {
          > td {
            background: @table-selected-row-hover-bg;
          }
        }
      }
    }
  }

  // =========================== Summary ============================
  tfoot {
    > tr {
      > th,
      > td {
        border-bottom: @border-width-base @border-style-base @border-color-split;
      }
    }
  }

  // ============================ Footer ============================
  &-footer {
    padding: @table-padding-vertical @table-padding-horizontal;
    color: @table-footer-color;
    background: @table-footer-bg;
  }

  // ========================== Pagination ==========================
  &-pagination.@{ant-prefix}-pagination {
    float: right;
    margin: 16px 0;
  }

  // ================================================================
  // =                           Function                           =
  // ================================================================

  // ============================ Sorter ============================
  thead th.@{table-prefix-cls}-column-has-sorters {
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      background: @table-header-sort-active-bg;
    }
  }

  thead th.@{table-prefix-cls}-column-sort {
    background: @table-header-sort-bg;
  }
  td&-column-sort {
    background: @table-body-sort-bg;
  }

  &-column-sorters {
    display: inline-flex;
    align-items: center;
  }

  &-column-sorter {
    margin-top: 0.15em;
    margin-bottom: -0.15em;
    margin-left: @padding-xs;
    color: @table-header-icon-color;

    &-full {
      margin-top: -0.2em;
      margin-bottom: 0;
    }

    &-inner {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
    }

    &-up,
    &-down {
      .iconfont-size-under-12px(11px);

      &.active {
        color: @primary-color;
      }
    }

    &-up + &-down {
      margin-top: -0.42em;
    }
  }

  // ============================ Filter ============================
  &-filter-column {
    display: flex;
    align-items: center;
    margin: -@table-padding-vertical -@table-padding-horizontal;
  }

  &-filter-column-title {
    flex: auto;
    padding: @table-padding-vertical 2.3em @table-padding-vertical @table-padding-horizontal;
  }

  &-filter-trigger-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex: none;
    align-items: stretch;
    align-self: stretch;
    transition: background-color 0.3s;

    &-open,
    &:hover {
      background: @table-header-filter-active-bg;
    }
  }

  &-filter-trigger {
    display: block;
    width: 2.3em;
    color: @table-header-icon-color;
    font-size: @font-size-sm;
    transition: color 0.3s;

    .@{iconfont-css-prefix} {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .@{table-prefix-cls}-filter-trigger-container-open &,
    &:hover {
      color: @text-color-secondary;
    }

    &.active {
      color: @primary-color;
    }
  }

  // Dropdown
  &-filter-dropdown {
    .reset-component;

    // Reset menu
    .@{dropdown-prefix-cls}-menu {
      border: 0;
      box-shadow: none;

      // https://github.com/ant-design/ant-design/issues/4916
      &-without-submenu {
        max-height: 400px;
        overflow-x: hidden;
      }
    }
    min-width: 96px;
    background-color: @component-background;

    border-radius: @border-radius-base;
    box-shadow: @box-shadow-base;

    // Checkbox
    &,
    &-submenu {
      .@{ant-prefix}-checkbox-wrapper + span {
        padding-left: 8px;
      }
    }

    // Operation
    &-btns {
      display: flex;
      justify-content: space-between;
      padding: 7px 8px;
      overflow: hidden;
      border-top: @border-width-base @border-style-base @border-color-split;
    }
  }

  // ========================== Selections ==========================
  colgroup {
    > col.@{table-prefix-cls}-selection-col {
      width: @table-selection-column-width;
    }
  }

  table tr th&-selection-column,
  table tr td&-selection-column {
    text-align: center;

    .@{ant-prefix}-radio-wrapper {
      margin-right: 0;
    }
  }

  &-selection {
    position: relative;

    &-extra {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translate(100%, -50%);

      .@{iconfont-css-prefix} {
        .iconfont-size-under-12px(10px);
        color: @table-header-icon-color;

        &:hover {
          color: @table-header-icon-color-hover;
        }
      }
    }
  }

  // ========================== Expandable ==========================
  &-expand-icon-col {
    width: 48px;
  }

  &-row-expand-icon-cell {
    text-align: center;
  }

  &-row-expand-icon {
    .operation-unit();
    position: relative;
    display: inline-flex;
    box-sizing: border-box;

    width: ceil(@font-size-sm * 1.4);
    height: ceil(@font-size-sm * 1.4);
    color: inherit;
    line-height: @font-size-sm;
    vertical-align: floor((@font-size-base - ceil(@font-size-sm * 1.4)) / 2);
    background: @component-background;
    border: @border-width-base @border-style-base @border-color-split;
    border-radius: @border-radius-base;
    outline: none;
    transition: all 0.3s;
    user-select: none;

    &:focus,
    &:hover,
    &:active {
      border-color: currentColor;
    }

    &::before,
    &::after {
      position: absolute;
      background: currentColor;
      transition: transform 0.3s ease-out;
      content: '';
    }

    &::before {
      top: 7px;
      right: 3px;
      left: 3px;
      height: @border-width-base;
    }

    &::after {
      top: 3px;
      bottom: 3px;
      left: 7px;
      width: @border-width-base;
      transform: rotate(90deg);
    }

    // Motion effect
    &-collapsed::before {
      transform: rotate(-180deg);
    }
    &-collapsed::after {
      transform: rotate(0deg);
    }

    &-spaced {
      &::before,
      &::after {
        display: none;
        content: none;
      }
      background: transparent;
      border: 0;
    }

    .@{table-prefix-cls}-row-indent + & {
      margin-right: @padding-xs;
    }
  }

  tr&-expanded-row {
    &,
    &:hover {
      > td {
        background: @table-expanded-row-bg;
      }
    }
  }

  // With fixed
  .@{table-prefix-cls}-expanded-row-fixed {
    position: relative;
    margin: -@table-padding-vertical -@table-padding-horizontal;
    padding: @table-padding-vertical @table-padding-horizontal;
  }

  // ========================= Placeholder ==========================
  tbody > tr&-placeholder {
    &:hover {
      > td {
        background: @component-background;
      }
    }
  }

  // ============================ Fixed =============================
  &-cell-fix-left,
  &-cell-fix-right {
    z-index: 2;
  }

  &-cell-fix-left-last::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: -1px;
    width: 20px;
    transform: translateX(100%);
    transition: box-shadow 0.3s;
    content: '';
    pointer-events: none;
  }
  &-cell-fix-right-first::after {
    position: absolute;
    top: 0;
    bottom: -1px;
    left: 0;
    width: 20px;
    transform: translateX(-100%);
    transition: box-shadow 0.3s;
    content: '';
    pointer-events: none;
  }

  .@{table-prefix-cls}-container {
    &::before,
    &::after {
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 1;
      width: 20px;
      transition: box-shadow 0.3s;
      content: '';
      pointer-events: none;
    }

    &::before {
      left: 0;
    }
    &::after {
      right: 0;
    }
  }

  &-ping-left {
    &:not(.@{table-prefix-cls}-has-fix-left) .@{table-prefix-cls}-container {
      position: relative;

      &::before {
        box-shadow: inset 10px 0 8px -8px darken(@shadow-color, 5%);
      }
    }

    .@{table-prefix-cls}-cell-fix-left-last::after {
      box-shadow: inset 10px 0 8px -8px darken(@shadow-color, 5%);
    }
  }
  &-ping-right {
    &:not(.@{table-prefix-cls}-has-fix-right) .@{table-prefix-cls}-container {
      position: relative;

      &::after {
        box-shadow: inset -10px 0 8px -8px darken(@shadow-color, 5%);
      }
    }

    .@{table-prefix-cls}-cell-fix-right-first::after {
      box-shadow: inset -10px 0 8px -8px darken(@shadow-color, 5%);
    }
  }

  // ========================= Nest Table ===========================
  tbody > tr > td {
    .@{table-prefix-cls} {
      margin: -@table-padding-vertical -@table-padding-horizontal -@table-padding-vertical (@table-padding-horizontal +
            ceil(@font-size-sm * 1.4));

      td {
        background: transparent;
      }

      tbody > tr:last-child > td {
        border-bottom: 0;

        &:first-child,
        &:last-child {
          border-radius: 0;
        }
      }
    }
  }

  // ================================================================
  // =                         Border Radio                         =
  // ================================================================

  /* title + table */
  &-title {
    border-radius: @table-border-radius-base @table-border-radius-base 0 0;
  }

  &-title + &-container {
    border-top-left-radius: 0;
    border-top-right-radius: 0;

    table > thead > tr:first-child {
      th:first-child {
        border-radius: 0;
      }

      th:last-child {
        border-radius: 0;
      }
    }
  }

  /* table */
  &-container {
    border-top-left-radius: @table-border-radius-base;
    border-top-right-radius: @table-border-radius-base;

    table > thead > tr:first-child {
      th:first-child {
        border-top-left-radius: @table-border-radius-base;
      }

      th:last-child {
        border-top-right-radius: @table-border-radius-base;
      }
    }
  }

  /* table + footer */
  &-footer {
    border-radius: 0 0 @table-border-radius-base @table-border-radius-base;
  }
}