tav-ui/theme-chalk/src/components/table-pro.less

Tav UI

@import '../var/index.less';
@keyframes loadingCircle {
  to {
    transform: rotate(360deg);
  }
}

.ta-table-pro {
  // position: relative;
  // width: 100%;
  // height: 100%;
  // flex: 1;

  &-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    // display: flex;
    // flex-direction: column;
  }

  &--fill-inner {
    .ta-table-pro {
      padding: @gap16 @gap16 12px;
      border-radius: @primary-border-radius;
      background-color: #fff;
    }
  }

  .vxe-grid--pager-wrapper {
    .vxe-pager--wrapper {
      margin-top: 6px;
    }
  }

  // &--pagination-disabled {
  //   .vxe-grid--pager-wrapper {
  //     display: none;
  //   }
  // }

  .vxe-table--render-default.size--small {
    font-size: 14px;
  }
  .vxe-cell--sort-vertical-layout {
    justify-content: center;
    [class*='vxe-icon-'] {
      font-size: 13px;
    }
  }

  .vxe-table--render-default.size--small .vxe-header--column.col--ellipsis,
  .vxe-table--render-default.size--small .vxe-header--column {
    height: 42px; // 取决于table-pro的row-config的height
    line-height: unset;
  }

  // loading
  &-loading {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 48 48"%3E%3Cpath fill="none" stroke="dodgerblue" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M4 24c0 11.046 8.954 20 20 20s20-8.954 20-20S35.046 4 24 4"%2F%3E%3C%2Fsvg%3E');
    background-size: 100% 100%;
    animation: loadingCircle 1s infinite linear;
  }

  // cell padding
  .vxe-table--render-default.size--small .vxe-body--column:not(.col--ellipsis) {
    padding: 6px !important;
  }
  .vxe-table--render-default.size--small
    .vxe-footer--column:not(.col--ellipsis),
  .vxe-table--render-default.size--small
    .vxe-header--column:not(.col--ellipsis) {
    padding: 0px 6px !important;
  }

  // tree icon
  .vxe-icon-caret-top {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: 100% 100%;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGFyaWEtaGlkZGVuPSJ0cnVlIiByb2xlPSJpbWciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDI1NiAyNTYpIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjQ4IiBkPSJtMTg0IDExMmwxNDQgMTQ0bC0xNDQgMTQ0Ii8+PC9nPjwvc3ZnPg==');
  }
  .vxe-icon-caret-left {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: 100% 100%;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGFyaWEtaGlkZGVuPSJ0cnVlIiByb2xlPSJpbWciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTgwIDI1NiAyNTYpIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjQ4IiBkPSJtMTg0IDExMmwxNDQgMTQ0bC0xNDQgMTQ0Ii8+PC9nPjwvc3ZnPg==');
  }
  .vxe-icon-caret-right {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: 100% 100%;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGFyaWEtaGlkZGVuPSJ0cnVlIiByb2xlPSJpbWciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI0OCIgZD0ibTE4NCAxMTJsMTQ0IDE0NGwtMTQ0IDE0NCIvPjwvc3ZnPg==');
  }
  .vxe-icon-caret-bottom {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: 100% 100%;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGFyaWEtaGlkZGVuPSJ0cnVlIiByb2xlPSJpbWciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoOTAgMjU2IDI1NikiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iNDgiIGQ9Im0xODQgMTEybDE0NCAxNDRsLTE0NCAxNDQiLz48L2c+PC9zdmc+');
  }

  // header cell
  .vxe-header--column,
  .vxe-header--gutter {
    background: #f8f8fb;
  }
  .vxe-header--column {
    .vxe-cell {
      &--title {
        color: #000000d9;
      }
      &--sort {
        > .sort--active {
          border-color: @primary-color;
        }
      }
    }

    // divide
    &:not(.col--last),
    &.col--fixed {
      position: relative;
      &::after {
        content: '';
        position: absolute;
        top: 30%;
        right: 0;
        left: auto;
        bottom: auto;
        width: 1px;
        height: 40%;
        background-color: #e8eaec;
      }
    }
  }
  .vxe-table--fixed-left-wrapper.scrolling--middle {
    .vxe-header--column {
      // divide
      &.col--fixed {
        position: relative;
        &::after {
          content: '';
          position: absolute;
          top: 30%;
          right: 0;
          left: auto;
          bottom: auto;
          width: 1px;
          height: 40%;
          background-color: transparent;
        }
      }
    }
  }
  .vxe-table--fixed-right-wrapper {
    .vxe-header--column {
      // divide
      &.col--fixed {
        position: relative;
        &::after {
          content: '';
          position: absolute;
          top: 30%;
          right: 0;
          left: auto;
          bottom: auto;
          width: 1px;
          height: 40%;
          background-color: transparent;
        }
      }
    }
  }

  .vxe-table {
    .vxe-table--main-wrapper .vxe-table--body-wrapper {
      &::-webkit-scrollbar {
        height: 6px !important;
      }
    }

    &.is--scroll-x {
      .vxe-table--fixed-left-wrapper,
      .vxe-table--fixed-right-wrapper {
        .vxe-table--body {
          padding-bottom: 6px;
        }
      }
    }
  }

  // firefox bug 暂时注释
  // .vxe-table--fixed-left-wrapper,
  // .vxe-table--fixed-right-wrapper {
  //   height: stretch !important;
  // }

  // header cell highlight
  .vxe-table--render-default.column--highlight
    .vxe-header--column:not(.col--seq):hover {
    background-color: #f5f7fa;
  }

  // resize bar
  .vxe-table--render-default .vxe-table--resizable-bar:before {
    background-color: #e8eaec;
  }

  // checkbox
  .is--checked.vxe-custom--option .vxe-checkbox--icon:before,
  .is--checked.vxe-export--panel-column-option .vxe-checkbox--icon:before,
  .is--checked.vxe-table--filter-option .vxe-checkbox--icon:before,
  .is--indeterminate.vxe-custom--option .vxe-checkbox--icon:before,
  .is--indeterminate.vxe-export--panel-column-option .vxe-checkbox--icon:before,
  .is--indeterminate.vxe-table--filter-option .vxe-checkbox--icon:before,
  .vxe-table--render-default
    .is--checked.vxe-cell--checkbox
    .vxe-checkbox--icon:before,
  .vxe-table--render-default
    .is--indeterminate.vxe-cell--checkbox
    .vxe-checkbox--icon:before {
    border-color: @primary-color;
    background-color: @primary-color;
  }

  .vxe-custom--option:not(.is--disabled):hover .vxe-checkbox--icon:before,
  .vxe-export--panel-column-option:not(.is--disabled):hover
    .vxe-checkbox--icon:before,
  .vxe-table--filter-option:not(.is--disabled):hover .vxe-checkbox--icon:before,
  .vxe-table--render-default
    .vxe-cell--checkbox:not(.is--disabled):hover
    .vxe-checkbox--icon:before {
    border-color: @primary-color;
  }

  .vxe-custom--option .vxe-checkbox--icon:before,
  .vxe-export--panel-column-option .vxe-checkbox--icon:before,
  .vxe-table--filter-option .vxe-checkbox--icon:before,
  .vxe-table--render-default .vxe-cell--checkbox .vxe-checkbox--icon:before {
    border-radius: @primary-border-radius;
    border: 1px solid #dcdfe6;
  }

  // highlight
  .vxe-table--render-default .vxe-body--row.row--checked,
  .vxe-table--render-default .vxe-body--row.row--radio {
    background-color: @table-selected-row-bg;
  }
  .vxe-table--render-default .vxe-body--row.row--checked {
    background: #dee8ff;
  }
  .vxe-table--render-default .vxe-body--row.row--hover.row--checked {
    background: #d4e1ff;
  }

  // loading
  .vxe-grid.is--loading:before {
    background-color: #f0f2f566;
    // height: calc(100% + 10px);
  }
  .vxe-table .vxe-loading {
    background-color: transparent;

    .vxe-loading--spinner {
      width: 36px;
      height: 36px;
    }
  }

  // pagination
  .vxe-pager .vxe-pager--jump-next:not(.is--disabled):hover,
  .vxe-pager .vxe-pager--jump-prev:not(.is--disabled):hover,
  .vxe-pager .vxe-pager--next-btn:not(.is--disabled):hover,
  .vxe-pager .vxe-pager--num-btn:not(.is--disabled):hover,
  .vxe-pager .vxe-pager--prev-btn:not(.is--disabled):hover {
    color: @primary-color;
  }
  .vxe-pager--wrapper {
    font-size: 12px;
    color: #555;
    line-height: 27px;

    .is--disabled {
      display: none;
    }

    .vxe-pager--sizes,
    .vxe-pager--total {
      float: left;
    }

    .vxe-pager--sizes {
      .vxe-input--inner {
        height: 24px;
        line-height: 24px;
      }
    }

    .vxe-pager--num-btn {
      padding: 0 10px;
      margin: 0 6px 0 4px;
      border: 1px solid @primary-color;
      color: @primary-color;
      border-radius: @primary-border-radius;
      background-color: #fff;

      &.is--active {
        background-color: @primary-color;
        color: #fff !important;
      }
    }

    .vxe-pager--prev-btn,
    .vxe-pager--next-btn {
      min-width: 70px !important;
      color: @primary-color;
      border: 1px solid @primary-color;
      border-radius: @primary-border-radius;
      background-color: #fff !important;

      .vxe-pager--btn-icon {
        display: none;
      }
      &::after {
        content: attr(title);
      }
    }

    .vxe-select.is--active:not(.is--filter) > .vxe-input .vxe-input--inner {
      border: 1px solid @primary-color;
    }

    .vxe-select-option.is--selected {
      color: @primary-color;
    }
  }

  // cell
  &-cell {
    // &[data-type="header"] {}
    // &[data-type="body"] {}
    &-content {
      &.-ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  // operations => filter-form + custom action
  &-operations {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  // filter-form
  &-filter-form {
    display: flex;
    align-items: center;
    flex: 1 1 50%;
    margin-bottom: @gap16;

    &-input {
      position: relative;
      display: flex;
      align-items: center;
      width: 380px;
      margin-right: 16px;

      &-inner {
        width: calc(100% - 46px);
      }

      .ant-input-search-button {
        position: absolute;
        right: 3px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }

      .ant-form-item {
        margin-bottom: 0 !important;
      }
    }

    &-pannel {
      &-activator {
        height: 32px !important;
        line-height: 30px !important;

        .ant-badge {
          position: absolute;
          top: -15px;
          right: -80%;
        }
      }

      &-form {
        .ant-form-item-label label {
          color: #999 !important;
        }
      }
    }
  }
  // custom action
  &-custom-action {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: @gap16;

    .ta-basic-button {
      height: 32px !important;
      line-height: 30px !important;
      margin-left: @gap12;
      & + & {
        margin-right: @gap12;
      }
    }

    &-settings {
      position: relative;
      margin-left: @gap12;

      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: 1px;
        height: 50%;
        transform: translateY(-50%);
        background-color: #e8eaec;
      }

      .refresh,
      .column,
      .checkbox-cache {
        min-width: auto !important;
        padding: 0 !important;
        margin: 0 0 0 @gap12 !important;
        color: @primary-color !important;
        // border-color: @primary-color;
        &:hover,
        &:active,
        &:focus {
          background: transparent;
        }
      }

      .column-popver {
        min-width: 300px;

        &-title {
          display: flex;
          align-items: center;
          justify-content: space-between;

          &-btns {
            .ant-btn {
              min-width: auto !important;
            }
          }
        }

        .ant-popover-inner-content {
          padding-left: 0;
          padding-right: 0;
          height: 300px;

          .scroll-back-top {
            position: fixed;
            bottom: 40px;
            right: 15px;
            padding: 6px;
            text-align: center;
            transition: all 0.3s;
            cursor: pointer;
            pointer-events: all;
            border-radius: 50%;
            z-index: 2;
            background-color: #ccc;
            user-select: none;
          }
        }

        .ant-checkbox-group {
          width: 100%;
        }
        .ant-tree {
          &-treenode {
            width: 100%;
          }

          &-node-content-wrapper {
            flex: 1;
            &-open {
              position: relative;
            }
          }
          &-title {
            display: block;
          }
        }
        &-tree-option {
          position: relative;
          display: flex;
          justify-content: space-between;
          span.anticon {
            position: absolute;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
          }
        }
      }

      .checkbox-cache {
        position: relative;

        .ant-badge {
          position: absolute;
          top: -8px;
          right: -10px;
          transform: scale(0.8);
        }
      }

      &-checkbox-cache {
        &-popver {
          min-width: 300px;

          .ant-popover-title {
            padding: 5px 12px;
          }

          &-title {
            display: flex;
            align-items: center;
            justify-content: space-between;

            &-btns {
              .ant-btn {
                min-width: auto !important;
                padding: 0 !important;
                margin: 0 !important;
                color: #276dff !important;
                line-height: 1 !important;
              }
            }
          }

          &-content-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
          }

          .ant-popover-inner-content {
            padding-left: 0;
            padding-right: 0;
            height: 300px;

            .ant-select-item-option:not(.ant-select-item-option-disabled) {
              &:hover {
                background-color: #f5f5f5;
              }
            }

            .checkbox-cache-clear {
              min-width: auto !important;
              padding: 0 !important;
              margin: 0 !important;
              color: #276dff !important;
              line-height: 1 !important;
            }
          }
        }
      }
    }
  }

  &-operations-statistical {
    width: 100%;
  }

  // operations
  &-operations {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  // tags
  &-tags {
    .ant-tag {
      margin-right: 0;
    }

    .ant-tag + .ant-tag {
      margin-right: 8px;
    }

    &-scroll-container {
      .scrollbar__bar.is-vertical {
        width: 2px;
      }
      .scrollbar__bar.is-horizontal {
        height: 2px;
      }
    }
  }

  // action
  &-action {
    display: flex;
    align-items: center;

    .action-divider {
      display: table;
    }

    .ant-popover {
      top: 30px !important;

      .ant-popover-arrow {
        // bottom: auto !important;
        // top: 6px !important;
        display: none !important;
      }
    }

    .ant-dropdown-trigger {
      margin-left: 10px;
    }

    &.left {
      justify-content: flex-start;
    }

    &.center {
      justify-content: center;
    }

    &.right {
      justify-content: flex-end;
    }

    button {
      display: flex;
      align-items: center;

      padding-left: 0 !important;
      padding-right: 0 !important;
      font-size: 12px;
      border: none;
      min-width: auto;

      span {
        margin-left: 0 !important;
      }
    }

    button.ant-btn-circle {
      span {
        margin: auto !important;
      }
    }

    .ant-divider,
    .ant-divider-vertical {
      margin: 0 8px;
    }

    .icon-more {
      transform: rotate(90deg);

      svg {
        font-size: 1.1em;
        font-weight: 700;
      }
    }
  }
}
// .anticon {
//   color: @primary-color;
// }
.table-pro-tags-Tooltip {
  .ant-tag {
    height: 20px;
    line-height: 1.5;
    color: @primary-color;
    border-color: @primary-color;
    background: #e6edff;
    margin: 5px;
  }
}