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

TDesign Component for React

// 组件允许单个组件打包，因此默认引入公共基础样式 --

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

@import "./_var.less";

@import "./_mixin.less";

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

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

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

.@{prefix}-upload {
  .reset;

  .@{prefix}-is-bordered {
    border: @upload-card-content-border;
  }
  .@{prefix}-upload__trigger {
    display: inline-block;
  }

  .t-icon {
    font-size: @upload-icon-size;
    flex-shrink: 0;
  }

  .t-icon-check-circle-filled {
    color: @upload-icon-check-circle-filled-color;
  }

  .t-icon-error-circle-filled {
    color: @upload-icon-error-circle-filled-color;
  }

  .t-icon-time-filled {
    color: @upload-icon-time-filled-color;
  }

  .t-icon-add {
    color: @upload-icon-add-color;
  }

  &__list-file {
    display: flex;
    align-items: center;
    justify-content: center;
    width: @upload-list-file-width;
    height: @upload-list-file-height;
    margin-right: @upload-list-file-margin-right;
    overflow: hidden;

    & .t-icon {
      font-size: @upload-list-file-icon-font-size;
      color: @upload-list-file-icon-color;
    }
  }

  &__list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: @upload-list-item-margin-top;
    width: @upload-list-item-width;
    height: @upload-list-item-height;
    padding: @upload-list-item-padding;
    border: @upload-list-item-border;
    border-radius: @upload-list-item-border-radius;
    font: @upload-list-item-font-size;

    &.@{prefix}-is--error {
      .@{prefix}-upload__list-name {
        color: @upload-list-item-error-color;
      }

      .@{prefix}-upload__list-file .t-icon {
        color: @upload-list-item-error-color;
      }
    }
  }

  &__list-content {
    display: flex;
    align-items: center;
  }

  &-list__control {
    cursor: pointer;

    &:hover {
      color: @upload-list-control-color-hover;
    }
  }

  &__list-img {
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
  }

  &__list-name {
    max-width: @upload-list-name-max-width;
    .text-ellipsis();
  }

  &--highlight {
    color: @upload-highlight-color;
  }

  &__single-name {
    margin-right: @upload-single-name-margin-right;
  }
}

// 照片墙
.@{prefix}-upload {
  &__card {
    font: @upload-card-font;
    overflow: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: @upload-card-item-space;

    & .@{prefix}-is-disabled {
      & :hover {
        cursor: not-allowed;
      }
    }

    &-item {
      cursor: pointer;
      box-sizing: border-box;
      list-style: none;

      &::after {
        content: "";
        display: block;
      }

      &:hover .@{prefix}-upload__card-mask {
        opacity: 1;
        .hover-transition(opacity);
      }

      &.@{prefix}-is--error {
        & .@{prefix}-icon-warning_fill {
          color: @upload-card-item-error-icon-warning-color;
          margin-bottom: @upload-card-item-error-icon-warning-margin-bottom;
        }

        & .@{prefix}-upload__card-status {
          color: @upload-card-item-status-color;
        }
      }

      &.@{prefix}-is-background {
        .hover-transition(border-color);
      }
    }

    & .@{prefix}-icon-loading {
      margin-bottom: @upload-card-icon-loading-margin-bottom;
    }

    &-name {
      max-width: 100%;
      margin-top: @upload-card-name-margin-top;
      .text-ellipsis();
    }

    &-content {
      position: relative;
      width: @upload-img-size;
      height: @upload-img-size;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      background-color: @upload-card-container-bg-color;
      border: @upload-card-contariner-border;
      padding: @upload-card-content-padding;
      border-radius: @upload-card-img-wrap-border-radius;
    }

    &-container {
      width: @upload-img-size;
      height: @upload-img-size;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      background-color: @upload-card-container-bg-color;
      border: @upload-card-contariner-border;
      box-sizing: border-box;
      position: relative;
      border-radius: @upload-card-img-wrap-border-radius;
      .hover-transition(border);

      &:hover:not(.@{prefix}-is-disabled) {
        border-color: @upload-card-item-bg-border-color-hover;
        .hover-transition(border-color);
      }

      > .t-icon {
        color: @upload-icon-color;
      }

      > .t-icon,
      .@{prefix}-loading {
        font-size: @upload-icon-size-large;
        margin-bottom: @upload-card-container-icon-add-margin-bottom;
      }

      > p,
      .@{prefix}-upload__add-text {
        color: @text-color-placeholder;
        margin: 0;
      }
    }

    &-status-wrap {
      text-align: center;

      > svg {
        margin-bottom: @upload-card-status-wrap-svg-margin-bottom;
      }

      .t-icon,
      .@{prefix}-loading {
        font-size: @upload-icon-size-large;
      }
    }

    &-image {
      max-width: 100%;
      max-height: 100%;
      width: 100%;
      height: 100%;
    }

    &-status {
      color: @upload-card-status-color;
      font: @upload-card-status-font;
    }

    &-mask {
      background-color: @upload-card-mask-bg-color;
      color: @upload-card-mask-text-color;
      will-change: transform;
      opacity: 0;
      z-index: @upload-z-index;
      .hover-transition(opacity);
      .horizontal-vertical-center-with-flex();
      .fill-with-position-absolute();
    }

    &-mask-item {
      &-divider {
        margin: @upload-card-mask-divider-margin;
        border-left: 1px @upload-card-mask-text-color solid;
        height: @upload-card-mask-divider-height;
      }

      > .t-icon {
        cursor: pointer;
        font-size: @upload-icon-size;
      }
    }
  }

  &__dialog {
    .@{prefix}-dialog {
      max-width: 80%;

      &--default {
        padding: 32px;
      }

      &-body {
        padding-bottom: 0;

        &-img-box {
          img {
            display: block;
            max-width: 100%;
            max-height: 100%;
          }
        }
      }
    }
  }
}

// 拖拽
.@{prefix}-upload {
  &__dragger {
    display: flex;
    width: @upload-dragger-width;
    height: @upload-dragger-height;
    border: @upload-dragger-border;
    border-radius: @upload-dragger-border-radius;
    font: @upload-dragger-font;
    color: @upload-dragger-color;
    cursor: pointer;
    padding: @upload-dragger-padding;
    position: relative;
    overflow: auto;
    box-sizing: border-box;
    .hover-transition(border-color);

    &.@{prefix}-is--active {
      background-color: @upload-dragger-bg-color-active;
      border-color: @upload-dragger-border-color-active;
    }

    &:hover {
      border-color: @upload-dragger-border-color-hover;
    }

    &-btns {
      position: absolute;
      bottom: @upload-dragger-btns-bottom;
    }

    .@{prefix}-size-s {
      display: block;
    }
  }

  &__dragger-center {
    justify-content: center;
    align-items: center;
  }

  &__dragger-error {
    border-color: @upload-dragger-error-border-color;

    &:hover {
      border-color: @upload-dragger-error-border-color-hover;
    }
  }

  &__dragger-text {
    display: flex;
    align-items: center;
    font: @upload-dragger-text-font;
    color: @upload-dragger-text-color;
    margin-bottom: @upload-single-name-margin-bottom;
    .dragger-inner-max-width(@upload-dragger-width, @upload-dragger-padding, 0);

    .@{prefix}-upload__single-name {
      .text-ellipsis();
    }
  }
}

.@{prefix}-upload__tips {
  display: block;
  color: @upload-small-color;
  margin-top: @upload-tips-margin-top;
  font: @font-body-small;

  &.@{prefix}-upload__tips-error {
    color: @upload-tips-error-color;
  }

  &.@{prefix}-upload__tips-warn {
    color: @upload-tips-warn-color;
  }
}

.@{prefix}-upload__placeholder {
  color: @upload-placeholder-color;
}

.@{prefix}-upload__display-text--margin {
  margin-top: @upload-display-text-margin-top;
}

.@{prefix}-upload__single-display-text {
  color: @upload-single-display-text-color;
  font: @upload-single-display-text-font;
  display: flex;
  align-items: center;
  .@{prefix}-upload__flow-status .t-icon {
    font-size: @upload-icon-size-mini;
  }
}

.t-icon-clear-circle-filled {
  color: @upload-icon-color;
  margin-top: @upload-icon-clear-circle-filled-margin-top;
  .hover-transition(color);

  &:hover {
    color: @upload-icon-color-hover;
    cursor: pointer;
    .hover-transition(color);
  }
}

.@{prefix}-upload__single-percent {
  margin-left: @upload-single-percent-margin-left;
}

.@{prefix}-upload__single-progress {
  color: @upload-single-progress-color;
  display: flex;
  align-items: center;

  .@{prefix}-loading {
    font-size: @upload-icon-size;
    flex-shrink: 0;
  }
}

.@{prefix}-upload__single-input-delete {
  margin-left: @upload-single-input-delete-margin-left;
  font: @upload-single-input-delete-font;
  color: @upload-single-input-delete-color;
  cursor: pointer;
}

.@{prefix}-upload__single-input-preview {
  display: flex;
  justify-content: space-between;
  flex: 1;
}

.@{prefix}-upload__single-input-text {
  display: block;
  .text-ellipsis();
}

.@{prefix}-upload__single-file-input {
  display: flex;
  align-items: center;

  .@{prefix}-upload__trigger {
    margin-left: @upload-single-file-input-trigger-margin-left;
  }

  .@{prefix}-upload__single-progress {
    white-space: nowrap;
  }

  .@{prefix}-input__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.@{prefix}-upload__dragger-progress {
  width: 100%;
  display: flex;

  .t-icon,
  .@{prefix}-loading {
    font-size: @upload-icon-size;
    flex-shrink: 0;
  }
}

.@{prefix}-upload__dragger-img-wrap {
  width: @upload-dragger-img-wrap-width;
  height: @upload-dragger-img-wrap-height;
  background-color: @upload-dragger-img-wrap-bg-color;
  border-radius: @upload-dragger-img-wrap-border-radius;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  > .@{prefix}-image__wrapper--shape-square {
    width: 100%;

    .@{prefix}-space-item {
      text-align: center;
    }
  }

  > img {
    max-width: 100%;
    max-height: 100%;
  }
}

.@{prefix}-upload__dragger {
  &-img-wrap + &-progress-info {
    margin-left: @upload-dragger-img-wrap-margin-right;
    .dragger-inner-max-width(@upload-dragger-width,
    @upload-dragger-padding, calc(@upload-dragger-img-wrap-width + @upload-dragger-img-wrap-margin-right));
  }
}

.@{prefix}-upload__dragger-progress-info {
  flex: 1;

  .@{prefix}-upload__single-display-text {
    margin-bottom: @upload-dragger-progress-info-single-display-text-margin-bottom;
  }

  .@{prefix}-button:hover {
    background-color: @upload-dragger-progress-info-button-bg-color-hover;
  }
}

.@{prefix}-upload__dragger-progress-cancel,
.@{prefix}-upload__dragger-progress-reupload {
  margin-right: @upload-dragger-progress-cancel-margin;

  &:hover {
    border-color: transparent;
  }
}

.@{prefix}-upload__dragger-delete-btn:hover,
.@{prefix}-upload__dragger-upload-btn:hover {
  border-color: transparent;
}

.@{prefix}-upload__flow-image-flow {
  width: @upload-flow-image-flow-width;
}

.@{prefix}-upload__flow {
  min-width: @upload-flow-min-width;
  max-width: @upload-flow-max-width;

  &-placeholder {
    display: inline-block;
    margin-left: @upload-flow-placeholder-margin-left;
  }

  &-op {
    display: flex;
    align-items: center;
  }

  &-bottom {
    display: flex;
    justify-content: flex-end;
    margin-top: @upload-flow-bottom-margin-top;

    .@{prefix}-button + .@{prefix}-button {
      margin-left: @upload-flow-button-margin-left;
    }
  }

  &-empty {
    width: 100%;
    height: @upload-flow-empty-height;
    display: flex;
    justify-content: center;
    align-items: center;
    color: @upload-flow-empty-color;
  }

  &-table {
    width: 100%;
    border: @upload-flow-table-border;
    margin-top: @upload-flow-table-margin-top;
    border-collapse: collapse;

    > thead > tr,
    > tbody > tr,
    > tfoot > tr,
    > tr {
      border-top: @upload-flow-table-tr-border-top;

      > th {
        color: @upload-flow-table-th-color;
        font-weight: @upload-flow-table-th-font-weight;
        border: @upload-flow-table-th-border;
        text-align: @upload-flow-table-th-text-align;
        background-color: @upload-flow-table-th-bg-color;
      }

      > td {
        color: @upload-flow-table-td-color;
      }

      > td,
      > th {
        padding: @upload-flow-table-td-th-padding;
      }
    }

    &__batch-row {
      border-left: 1px solid @component-border;
    }
  }

  &-button {
    color: @upload-flow-button-color;
    cursor: pointer;
    .hover-transition(color);
  }

  &-button:hover {
    color: @upload-flow-button-color-hover;
  }

  &-status {
    display: flex;
    align-items: center;

    .t-icon,
    .@{prefix}-loading {
      margin-right: @upload-flow-status-icon-margin-right;
      font-size: @upload-icon-size;
    }
  }

  &-card-area {
    border: @upload-flow-card-area-border;
    padding: @upload-flow-card-area-padding;
    margin-top: @upload-flow-card-area-margin-top;
    .hover-transition(border);

    &:hover {
      border-color: @upload-card-item-bg-border-color-hover;
      .hover-transition(border-color);
    }
  }
}

.@{prefix}-upload__icon-delete,
.@{prefix}-upload__single-input-clear {
  color: @upload-icon-color;
  cursor: pointer;
  .hover-transition(color);
}

.@{prefix}-upload__icon-delete:hover,
.@{prefix}-upload__single-input-clear:hover {
  color: @upload-icon-color-hover;
  .hover-transition(color);
}

.t-icon.@{prefix}-upload__single-input-clear {
  display: none;
}

.@{prefix}-upload__single-input-preview:hover {
  .@{prefix}-upload__single-input-clear {
    display: initial;
  }
  .@{prefix}-upload__status-icon {
    display: none;
  }
}

.@{prefix}-upload {
  .@{prefix}-upload__single-name {
    color: @upload-file-name-color;
  }

  .@{prefix}-upload__file-thumbnail {
    margin-right: @upload-list-item-inner-padding;
    width: @upload-list-file-thumbnail-size;
    height: @upload-list-file-thumbnail-size;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    > svg {
      font-size: @upload-list-file-thumbnail-icon;
      color: @upload-icon-color;
    }
  }
}

.@{prefix}-upload__card-name {
  margin-top: @spacer;
}

.@{prefix}-upload--theme-file-input {
  width: 100%;
}

.@{prefix}-upload__dragger-btns > .@{prefix}-button {
  padding: 0;
}

.@{prefix}-upload__file-info {
  display: flex;
  align-items: center;
}

.@{prefix}-upload__card-container.@{prefix}-is-disabled {
  cursor: not-allowed;

  .@{prefix}-upload__add-text {
    color: @upload-text-disabled-color;
  }

  .t-icon {
    color: @upload-icon-disabled-color;
  }
}