zp-bee/lib/bee-table/style/index.less

zp-bee，是一款基于 Dumi，由 React + TypeScript 开发的组件库 🎉。

@import '../../style/themes/default.less';

.beeTableContainer {
  background-color: #ffffff;
  position: relative;

  .table {
    padding-bottom: 30px;

    .ant-table-tbody tr:last-of-type > td {
      border-bottom: none;
    }
  }

  .commonHeader {
    .ant-table-title {
      top: 0;
      border-bottom: none;
      border-radius: 0;
    }

    .react-resizable {
      position: relative;
      background-clip: padding-box;
    }

    // .react-resizable::after {
    // content: '';
    // height: 60%;
    // width: 1px;
    // background-color: #b6bac9;
    // position: absolute;
    // right: 0;
    // top: 20%;
    // }

    .ant-table-thead
      > tr
      > th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
      position: absolute;
      top: 50%;
      right: 0;
      width: 1px;
      height: 1.6em;
      background-color: #b6bac9 !important;
      transform: translateY(-50%);
      transition: background-color 0.3s;
      content: '';
    }

    .react-resizable:last-child::after {
      display: none;
    }

    .react-resizable-handle {
      position: absolute;
      width: 10px;
      height: 100%;
      bottom: 0;
      right: -5px;
      cursor: col-resize;
      z-index: 1;
    }

    .ant-table-selection-column .react-resizable-handle {
      cursor: default;
    }
  }

  .oneHeader {
    .commonHeader;

    .ant-table-column-sorters {
      padding: 16px 16px !important;
    }
  }

  .purePagination {
    padding: 10px 0;

    .ant-pagination {
      text-align: right;
    }
  }

  .scrollFooter {
    color: #fff;
    background-color: rgba(26, 28, 42, 0.5);
    height: 40px;
    width: 100%;

    p {
      color: #ffffff;
    }

    .ant-pagination,
    .ant-pagination-item-link,
    .ant-pagination-item a,
    .ant-select-selection,
    .ant-select-arrow,
    .ant-pagination-options-quick-jumper input,
    .ant-pagination-options-size-changer {
      color: #ffffff;
    }

    .ant-pagination-item-active,
    .ant-select-selection,
    .ant-pagination-options-quick-jumper input,
    .ant-select-selector {
      background-color: rgba(26, 28, 42, 0.2) !important;
      border: none !important;
    }
  }

  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    margin-top: 1px;
    font-size: 12px;

    button {
      height: 26px;
      font-size: 12px;
    }

    .leftWrap {
      display: flex;
      align-items: center;

      p {
        font-size: 12px;
        margin: 0 20px;
      }

      button:not(:first-of-type) {
        margin-left: 8px;
      }
    }

    .ant-pagination-options-quick-jumper {
      margin-right: 14px;
    }

    .ant-select-selection,
    .ant-pagination-item a,
    .ant-pagination-options-quick-jumper,
    .ant-pagination-options-quick-jumper input,
    .ant-select-dropdown-menu-item {
      font-size: 12px;
    }
  }

  .tableColumnResizeProxy {
    position: absolute;
    left: 10px;
    top: 0;
    visibility: visible;
    height: calc(100% - 60px);
    z-index: 9;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    div {
      width: 1px;
      height: 100%;
      border-left: 1px dashed rgba(0, 0, 0, 0.3);
    }
  }
}