tdesign-react/esm/common/style/web/components/transfer/_index.less

TDesign Component for React

@import "../../base.less";

@import "./_var.less";

@import "../../mixins/_reset.less";

.@{prefix}-transfer {
  .reset;

  font: @transfer-font;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: @transfer-bg-color;
  color: @transfer-font-color;
  max-height: 100%;

  &__list {
    position: relative;
    display: inline-block;
    min-width: @transfer-common-width;
    height: @transfer-common-height;
    padding-top: @transfer-list-header-height;
    border: @transfer-list-border;
    word-break: break-word;
    vertical-align: middle;

    &-source,
    &-target {
      border: @transfer-border;
      border-radius: @transfer-border-radius;
    }

    &-header {
      position: absolute;
      display: flex;
      justify-content: space-between;
      top: 0;
      height: @transfer-list-header-height;
      line-height: @transfer-list-header-height;
      width: @transfer-list-header-width;
      padding: @transfer-list-header-padding;
      margin: @transfer-list-header-margin;
      box-sizing: border-box;

      & + :not(.@{prefix}-transfer__list--with-search) {
        border-top: @transfer-border;
      }

      .@{prefix}-checkbox {
        margin-right: 0;

        &__label {
          margin: 0;
        }
      }

      div {
        display: flex;

        > span {
          margin-left: @transfer-list-header-text-margin-left;
        }
      }

      > span {
        color: @text-color-placeholder;
      }
    }

    &-body {
      position: relative;
      height: 100%;
      box-sizing: border-box;
    }

    &--with-search {
      padding-top: @transfer-list-with-search-padding-top;
      border-top: @transfer-list-with-search-border;
    }

    &-content {
      height: 100%;
      width: 100%;
      overflow: auto;

      .@{prefix}-checkbox-group {
        width: 100%;
        flex-direction: column;
        gap: @transfer-list-checkbox-group-gap;
        margin: @transfer-list-checkbox-group-margin;

        .@{prefix}-checkbox {
          margin-right: @transfer-list-margin-horizontal;

          & + .@{prefix}-checkbox {
            margin-left: @transfer-list-margin-horizontal;
          }

          &__label {
            margin: 0;
            flex: 1;

            > span {
              margin-left: @transfer-list-item-text-margin-left;
              display: inline-block;
            }
          }

          --ripple-color: @bg-color-container-active;
        }
      }
    }

    & &-item {
      padding: @transfer-list-item-padding;
      display: flex;
      cursor: pointer;
      margin: @transfer-list-item-margin;
      border-radius: @border-radius-default;
      transition: background-color @anim-duration-base @anim-time-fn-easing;

      &:first-child {
        margin-top: 0;
      }

      &.@{prefix}-is-disabled {
        &:hover {
          background: @transfer-bg-color;
        }
      }
    }

    &-item:hover {
      background: @transfer-bg-hover;
      transition: background-color @anim-duration-base @anim-time-fn-easing;
    }

    &-item.@{prefix}-is-checked {
      background: @transfer-bg-checked;
    }

    &-wrapper {
      position: relative;
      height: 100%;
      width: 100%;
      overflow: auto;
      padding: @transfer-list-wrapper-padding;
    }

    &-pagination {
      height: @transfer-list-pagination-height;
      vertical-align: middle;
      padding: @transfer-list-pagination-padding;
    }

    &-footer {
      position: absolute;
      left: 0;
      bottom: 0;
      border-top: @transfer-border;
      width: 100%;
    }
  }

  &__operations {
    display: inline-flex;
    flex-direction: column;
    margin: @transfer-operations-margin;
    vertical-align: middle;
    overflow: hidden;
    gap: @transfer-operations-gap;

    .t-icon {
      font-size: @transfer-operations-icon-size;
    }

    .t-icon + .@{prefix}-button__text {
      margin-left: 0;
    }
  }

  &__empty {
    text-align: center;
    position: absolute;
    color: @text-color-placeholder;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  &__search-wrapper {
    position: absolute;
    top: 0;
    width: 100%;
    padding: @transfer-list-search-wrapper-margin;
    box-sizing: border-box;
  }
}

// 只有search时候的高度
.@{prefix}-transfer__search {

  .@{prefix}-transfer__list {
    height: @transfer-with-search-height;
  }
}

// 与Tree组件结合使用时的高度
.@{prefix}-transfer--with-tree {

  .@{prefix}-transfer__list {
    height: auto;

    .@{prefix}-tree {
      padding: @transfer-list-with-tree-padding;
      margin: @transfer-list-with-tree-margin;
    }
  }
}

// 只有翻页时候的高度
.@{prefix}-transfer__pagination {

  .@{prefix}-transfer__list {
    height: @transfer-with-pagination-height;
    padding-bottom: @transfer-with-pagination-padding-bottom;
  }
}

// 只有footer时候的高度
.@{prefix}-transfer__footer {

  .@{prefix}-transfer__list {
    height: @transfer-with-footer-height;
    padding-bottom: @transfer-with-footer-padding-bottom;
  }
}

// 同时有翻页和footer时候的高度
.@{prefix}-transfer__pagination.@{prefix}-transfer__footer {

  .@{prefix}-transfer__list {
    height: @transfer-with-footer-both-height;
    padding-bottom: @transfer-with-pagination-footer-padding-bottom;
  }
}

// 同时有search和footer时候的高度
.@{prefix}-transfer__search.@{prefix}-transfer__footer {

  .@{prefix}-transfer__list {
    height: @transfer-with-footer-both-height;
    padding-bottom: @transfer-with-search-footer-padding-bottom;
  }
}

// 同时有search和pagination时候的高度
.@{prefix}-transfer__search.@{prefix}-transfer__pagination {

  .@{prefix}-transfer__list {
    height: @transfer-with-both-height;
    padding-bottom: @transfer-with-search-pagination-padding-bottom;
  }
}

// 同时有search和pagination和footer
.@{prefix}-transfer__search.@{prefix}-transfer__footer.@{prefix}-transfer__pagination {

  .@{prefix}-transfer__list {
    height: @transfer-with-all-height;
    padding-bottom: @transfer-with-all-padding-bottom;
  }
}

.@{prefix}-transfer__wrapper {

  .@{prefix}-transfer__list {
    height: @transfer-wrap-height;
    width: @transfer-wrap-width;
    overflow: scroll;
  }
}