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

Tav UI

@import '../var/index.less';

@border-color: #cecece4d;
@prefix-cls-basic-table: ~'@{namespace}-basic-table';

[data-theme='dark'] {
  .ant-table-tbody > tr:hover.ant-table-row-selected > td,
  .ant-table-tbody > tr.ant-table-row-selected td {
    background-color: #262626;
  }
}

.@{prefix-cls-basic-table} {
  max-width: 100%;

  .ant-popover {
    min-width: 200px;
  }

  &-row__striped {
    td {
      background-color: @app-content-background;
    }
  }

  &-form-container {
    padding: 16px;

    .ant-form {
      padding: 12px 10px 6px;
      margin-bottom: 16px;
      background-color: @component-background;
      border-radius: @primary-border-radius;
    }
  }

  .ant-tag {
    margin-right: 0;
  }

  .ant-table-wrapper {
    padding: 6px;
    background-color: @component-background;
    border-radius: @primary-border-radius;

    .ant-table-title {
      min-height: 40px;
      padding: 0 0 8px !important;
    }

    .ant-table.ant-table-bordered .ant-table-title {
      border: none !important;
    }

    .ant-table-hide-scrollbar::-webkit-scrollbar {
      display: none;
    }
  }

  .ant-table {
    width: 100%;
    overflow-x: hidden;
    &.ant-table-empty .ant-table-body {
      table {
        min-height: 100%;
      }
      .ant-table-cell {
        border: none !important;
      }
    }
    &-title {
      display: flex;
      padding: 8px 6px;
      border-bottom: none;
      justify-content: space-between;
      align-items: center;
    }

    //.ant-table-tbody > tr.ant-table-row-selected td {
    //background-color: fade(@primary-color, 8%) !important;
    //}
  }

  .ant-pagination {
    margin: 10px 0 0;
  }

  .ant-table-footer {
    padding: 0;

    .ant-table-wrapper {
      padding: 0;
    }

    table {
      border: none !important;
    }

    .ant-table-body {
      overflow-x: hidden !important;
      //  overflow-y: scroll !important;
    }

    td {
      padding: 12px 8px;
    }
  }

  &--inset {
    .ant-table-wrapper {
      padding: 0;
    }
  }

  &-mask {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
    background-color: #f6f8ff;
    opacity: 0.5;
  }
}

// header
@prefix-cls-basic-table-header: ~'@{namespace}-basic-table-header';

.@{prefix-cls-basic-table-header} {
  &__toolbar {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    > * {
      margin-right: 8px;
    }
  }
}

// table setting
.table-settings {
  & > * {
    margin-right: 12px;
  }

  svg {
    width: 1.3em;
    height: 1.3em;
  }
}

@prefix-cls-basic-column-setting: ~'@{namespace}-basic-column-setting';

.table-column-drag-icon {
  margin: 0 5px;
  cursor: move;
}

.@{prefix-cls-basic-column-setting} {
  &__popover-title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__check-item {
    display: flex;
    align-items: center;
    min-width: 100%;
    padding: 4px 16px 8px 0;

    .ant-checkbox-wrapper {
      width: 100%;

      &:hover {
        color: @primary-color;
      }
    }
  }

  &__fixed-left,
  &__fixed-right {
    color: rgb(0 0 0 / 45%);
    cursor: pointer;

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

    &.disabled {
      color: @disabled-color;
      cursor: not-allowed;
    }
  }

  &__fixed-right {
    transform: rotate(180deg);
  }

  &__cloumn-list {
    svg {
      width: 1em !important;
      height: 1em !important;
    }

    .ant-popover-inner-content {
      // max-height: 360px;
      padding-right: 0;
      padding-left: 0;
      // overflow: auto;
    }

    .ant-checkbox-group {
      width: 100%;
      min-width: 260px;
      // flex-wrap: wrap;
    }

    .scrollbar {
      height: 220px;
    }
  }
}

// table edit cell
@prefix-cls-editable-cell: ~'@{namespace}-editable-cell';

.edit-cell-align-left {
  text-align: left;

  input:not(.ant-picker-input, .ant-time-picker-input) {
    text-align: left;
  }
}

.edit-cell-align-center {
  text-align: center;

  input:not(.ant-picker-input, .ant-time-picker-input) {
    text-align: center;
  }
}

.edit-cell-align-right {
  text-align: right;

  input:not(.ant-calendar-picker-input, .ant-time-picker-input) {
    text-align: right;
  }
}

.edit-cell-rule-popover {
  .ant-popover-inner-content {
    padding: 4px 8px;
    color: @error-color;
    // border: 1px solid @error-color;
    border-radius: @primary-border-radius;
  }
}

.@{prefix-cls-editable-cell} {
  position: relative;

  &__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;

    > .ant-select {
      min-width: calc(100% - 50px);
    }
  }

  &__icon {
    &:hover {
      transform: scale(1.2);

      svg {
        color: @primary-color;
      }
    }
  }

  .ellipsis-cell {
    .cell-content {
      overflow-wrap: break-word;
      word-break: break-word;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  &__normal {
    &-icon {
      position: absolute;
      top: 4px;
      right: 0;
      display: none;
      width: 20px;
      cursor: pointer;
    }
  }

  &:hover {
    .@{prefix-cls}__normal-icon {
      display: inline-block;
    }
  }
}

// table title
@prefix-cls-basic-table-title: ~'@{namespace}-basic-table-title';

.@{prefix-cls-basic-table-title} {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

// table custom action
@prefix-cls-basic-table-custom-action: ~'@{namespace}-basic-table-custom-action';

.@{prefix-cls-basic-table-custom-action} {
  .refresh-btn {
    min-width: auto !important;
    color: @primary-color;
    border-color: @primary-color;
  }

  button + button {
    margin-left: 16px;
  }
}

// table filter
@prefix-cls-basic-table-filter: ~'@{namespace}-basic-table-filter';

.filter-pannel-form .ant-form-item-label label {
  color: #999 !important;
}

.@{prefix-cls-basic-table-filter} {
  flex: 1 1 50%;

  .filter-input-form {
    width: 380px;
    margin-right: @gapy;

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

    .ant-form-item-control {
      width: 100% !important;
    }
  }

  .filter-pannel-form-modal-activator {
    .ant-badge {
      position: absolute;
      top: -15px;
      right: -80%;
    }
  }
}

// table header cell
@prefix-cls-basic-table-header-cell: ~'@{namespace}-basic-table-header-cell';

.@{prefix-cls-basic-table-header-cell} {
  &__help {
    margin-left: 8px;
    color: rgb(0 0 0 / 65%) !important;
  }
}

// table action
@prefix-cls-basic-table-action: ~'@{namespace}-basic-table-action';

.@{prefix-cls-basic-table-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;

    // cover global.ta-basic-button.min-width === 100px
    &.ta-basic-button {
      min-width: unset;
    }

    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;
    }
  }
}

// table img
@prefix-cls-basic-table-img: ~'@{namespace}-basic-table-img';

.@{prefix-cls-basic-table-img} {
  .ant-image {
    margin-right: 4px;
    cursor: zoom-in;

    img {
      border-radius: @primary-border-radius;
    }
  }

  .img-div {
    display: inline-grid;
  }
}