@arco-design/web-vue/lib/upload/style/index.less

Arco Design Vue 2.0: A Vue.js 3 UI Library

@import './token.less';

@upload-prefix-cls: ~'@{prefix}-upload';

.@{upload-prefix-cls} {
  display: inline-block;
  max-width: 100%;
  cursor: pointer;

  &&-draggable {
    width: 100%;
  }

  &-tip {
    margin-top: @upload-tip-margin-top;
    overflow: hidden;
    color: @upload-tip-color-text;
    font-size: @upload-tip-font-size;
    line-height: 1.5;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &-picture-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: @upload-picture-item-width;
    height: @upload-picture-item-width;
    margin-bottom: 0;
    color: @upload-picture-color-text;
    text-align: center;
    background: @upload-picture-color-bg;
    border: @upload-picture-border-width @upload-picture-border-style
      @upload-picture-color-border;
    border-radius: @upload-picture-border-radius;
    transition: all @transition-duration-1 @transition-timing-function-linear;

    &:hover {
      color: @upload-picture-color-text_hover;
      background-color: @upload-picture-color-bg_hover;
      border-color: @upload-picture-color-border_hover;
    }
  }

  &-drag {
    width: 100%;
    padding: @upload-drag-padding-vertical 0;
    color: @upload-drag-color-text;
    text-align: center;
    background-color: @upload-drag-color-bg;
    border: @upload-drag-border-width @upload-drag-border-style
      @upload-drag-color-border;
    border-radius: @upload-drag-border-radius;
    transition: all @transition-duration-2 ease;

    .@{prefix}-icon-plus {
      margin-bottom: @upload-drag-margin-icon-bottom;
      color: @upload-drag-color-icon;
      font-size: @upload-drag-size-icon;
    }

    &:hover {
      background-color: @upload-drag-color-bg_hover;
      border-color: @upload-drag-color-border_hover;

      .@{upload-prefix-cls}-drag-text {
        color: @upload-drag-color-text_hover;
      }

      .@{prefix}-icon-plus {
        color: @upload-drag-color-icon_hover;
      }
    }

    &-active {
      color: @upload-drag-color-text_active;
      background-color: @upload-drag-color-bg_active;
      border-color: @upload-drag-color-border_active;

      .@{upload-prefix-cls}-drag-text {
        color: @upload-drag-color-text_active;
      }

      .@{prefix}-icon-plus {
        color: @upload-drag-color-icon_active;
      }
    }

    .@{upload-prefix-cls}-tip {
      margin-top: @upload-drag-tip-margin-top;
    }
  }

  &-drag-text {
    color: @upload-drag-color-text;
    font-size: @upload-drag-font-size;
    line-height: 1.5;
  }

  &-wrapper {
    width: 100%;

    &&-type-picture-card {
      display: flex;
      justify-content: flex-start;
    }
  }

  &-drag {
    width: 100%;
  }

  &-hide {
    display: none;
  }

  &-disabled {
    .@{upload-prefix-cls}-picture-card,
    .@{upload-prefix-cls}-picture-card:hover {
      color: @upload-picture-color-text_disabled;
      background-color: @upload-picture-color-bg_disabled;
      border-color: @upload-picture-color-border_disabled;
      cursor: not-allowed;
    }

    .@{upload-prefix-cls}-drag,
    .@{upload-prefix-cls}-drag:hover {
      background-color: @upload-drag-color-bg_disabled;
      border-color: @upload-drag-color-border_disabled;
      cursor: not-allowed;

      .@{prefix}-icon-plus,
      .@{upload-prefix-cls}-drag-text {
        color: @upload-drag-color-text_disabled;
      }
    }

    .@{upload-prefix-cls}-tip {
      color: @upload-drag-color-text_disabled;
    }
  }
}

.@{upload-prefix-cls}-icon {
  cursor: pointer;

  &-error {
    margin-left: @upload-text-item-margin-error-icon-left;
    color: @upload-text-item-color-error-icon;
  }

  &-success {
    color: @upload-text-item-color-success-icon;
    font-size: @upload-text-item-size-success-icon;
    line-height: @upload-text-item-size-success-icon;
  }

  &-remove {
    position: relative;
    font-size: @upload-picture-item-size-operation-icon;
  }

  &-start,
  &-cancel {
    position: absolute;
    top: 50%;
    left: 50%;
    color: @upload-text-item-color-status-icon;
    font-size: @upload-text-item-size-status-icon;
    transform: translateX(-50%) translateY(-50%);
  }

  &-upload {
    color: @upload-text-item-color-reupload-icon;
    font-size: @upload-text-item-size-reupload-icon;
    cursor: pointer;
    transition: all @transition-duration-2 ease;

    &:active,
    &:hover {
      color: @upload-text-item-color-reupload-icon_hover;
    }
  }
}

.@{upload-prefix-cls}-list {
  margin: 0;
  padding: 0;
  list-style: none;

  &&-type-text,
  &&-type-picture {
    width: 100%;

    .@{upload-prefix-cls}-list-item:first-of-type {
      margin-top: @upload-list-margin-top;
    }
  }

  /*** listtype is text ****/
  &-item-done &-item-file-icon {
    color: @upload-text-item-color-file-icon_success;
  }

  &-item {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin-top: @upload-text-item-margin-top;

    &-content {
      display: flex;
      flex: 1;
      flex-wrap: nowrap;
      align-items: center;
      box-sizing: border-box;
      width: 100%;
      padding: @upload-text-item-padding-vertical 0;
      padding-right: @upload-text-item-padding-right;
      padding-left: @upload-text-item-padding-left;
      overflow: hidden;
      font-size: @upload-text-item-font-size;
      background-color: @upload-text-item-color-bg;
      border-radius: @upload-text-item-border-radius;
      transition: background-color @transition-duration-1
        @transition-timing-function-linear;
    }

    &-file-icon {
      margin-right: @upload-text-item-margin-file-icon-right;
      color: @upload-text-item-color-file-icon;
      font-size: @upload-text-item-size-file-icon;
      line-height: @upload-text-item-size-file-icon;
    }

    &-thumbnail {
      flex-shrink: 0;
      width: @upload-text-item-thumbnail-width;
      height: @upload-text-item-thumbnail-width;
      margin-right: @upload-text-item-margin-thumbnail-right;

      img {
        width: 100%;
        height: 100%;
      }
    }

    &-name {
      display: flex;
      flex: 1;
      align-items: center;
      margin-right: @upload-text-item-margin-status-left;
      overflow: hidden;
      color: @upload-text-item-color-text;
      font-size: @upload-text-item-font-size;
      line-height: 1.4286;
      white-space: nowrap;
      text-overflow: ellipsis;

      &-link {
        overflow: hidden;
        color: @upload-text-item-color-link;
        text-decoration: none;
        text-overflow: ellipsis;
        cursor: pointer;
      }

      &-text {
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
      }
    }

    & .@{upload-prefix-cls}-progress {
      position: relative;
      margin-left: auto;
      line-height: @upload-text-item-size-status-icon;

      &:hover {
        .@{prefix}-progress-circle-bg {
          stroke: @upload-text-item-color-progress-bg_hover;
        }

        .@{prefix}-progress-circle-bar {
          stroke: @upload-text-item-color-progress-bg_hover_active;
        }
      }
    }

    &-operation {
      margin-left: @upload-text-item-margin-remove-icon-left;
      color: @upload-text-item-color-remove-icon;
      font-size: @upload-text-item-size-operation-icon;

      .@{upload-prefix-cls}-icon-remove {
        font-size: inherit;
      }
    }
  }

  &-item-error,
  &-item-done {
    .@{upload-prefix-cls}-list-status {
      display: none;
    }
  }

  &-type-text {
    .@{upload-prefix-cls}-list-item-error
      .@{upload-prefix-cls}-list-item-name-link,
    .@{upload-prefix-cls}-list-item-error .@{upload-prefix-cls}-list-item-name {
      color: @upload-text-item-color-text_error;
    }

    .@{upload-prefix-cls}-list-item-done
      .@{upload-prefix-cls}-list-item-name
      when
      not(@upload-text-item-color-text_success = unset) {
      color: @upload-text-item-color-text_success;
    }

    .@{upload-prefix-cls}-list-item-uploading
      .@{upload-prefix-cls}-list-item-name
      when
      not(@upload-text-item-color-text_uploading = unset) {
      color: @upload-text-item-color-text_uploading;
    }
  }

  /*** end ****/
  &&-type-picture-card {
    display: flex;
    flex-wrap: wrap;
    vertical-align: top;

    .@{upload-prefix-cls}-list-status {
      top: 50%;
      margin-left: 0;
      transform: translateY(-50%);
    }
  }

  &-picture {
    display: inline-block;
    margin-top: 0;
    margin-right: @upload-picture-item-margin-right;
    margin-bottom: @upload-picture-item-margin-bottom;
    padding-right: 0;
    overflow: hidden;
    vertical-align: top;
    transition: all @transition-duration-2 @transition-timing-function-standard;
  }

  &-picture-status-error &-picture-mask {
    opacity: 1;
  }

  &-picture {
    position: relative;
    box-sizing: border-box;
    width: @upload-picture-item-size-width;
    height: @upload-picture-item-size-width;
    overflow: hidden;
    line-height: @upload-picture-item-size-width;
    text-align: center;
    vertical-align: top;
    border-radius: @upload-picture-item-border-radius;

    img {
      width: 100%;
      height: 100%;
    }

    &-mask {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      color: @upload-picture-item-color-operation-icon;
      font-size: @upload-picture-item-size-mask-icon;
      line-height: @upload-picture-item-size-width;
      text-align: center;
      background: @upload-picture-item-color-operation_bg;
      cursor: pointer;
      opacity: 0;
      transition: opacity @transition-duration-1
        @transition-timing-function-linear;
    }

    &-operation {
      display: none;
      font-size: @upload-picture-item-size-operation-icon;

      .@{upload-prefix-cls}-icon-retry {
        color: @upload-picture-item-color-operation-icon;
      }
    }

    &-error-tip {
      .@{upload-prefix-cls}-icon-error {
        color: @upload-picture-item-color-error-icon;
        font-size: @upload-picture-item-size-error-icon;
      }
    }

    &-mask:hover {
      opacity: 1;
    }

    &-mask:hover &-operation {
      display: flex;
      justify-content: space-evenly;
    }

    &-mask:hover &-error-tip {
      display: none;
    }
  }

  // picture-list
  &-type-picture {
    .@{upload-prefix-cls}-list-item-content {
      padding-top: @upload-picture-text-item-padding-vertical;
      padding-bottom: @upload-picture-text-item-padding-vertical;
    }

    .@{upload-prefix-cls}-list-item-error
      .@{upload-prefix-cls}-list-item-content {
      background-color: @upload-picture-text-item-color-bg_error;
    }

    .@{upload-prefix-cls}-list-item-error
      .@{upload-prefix-cls}-list-item-name-link,
    .@{upload-prefix-cls}-list-item-error .@{upload-prefix-cls}-list-item-name {
      color: @upload-picture-text-item-color-text_error;
    }

    .@{upload-prefix-cls}-list-item-done
      .@{upload-prefix-cls}-list-item-name
      when
      not(@upload-picture-text-item-color-text_success = unset) {
      color: @upload-picture-text-item-color-text_success;
    }

    .@{upload-prefix-cls}-list-item-uploading
      .@{upload-prefix-cls}-list-item-name
      when
      not(@upload-picture-text-item-color-text_uploading = unset) {
      color: @upload-picture-text-item-color-text_uploading;
    }
  }
}

.@{upload-prefix-cls}-hide + .@{upload-prefix-cls}-list {
  .@{upload-prefix-cls}-list-item:first-of-type {
    margin-top: 0;
  }
}

.@{upload-prefix-cls}-slide-up-enter {
  opacity: 0;
}

.@{upload-prefix-cls}-slide-up-enter-active {
  opacity: 1;
  transition: opacity @transition-duration-2
    @transition-timing-function-standard;
}

.@{upload-prefix-cls}-slide-up-exit {
  opacity: 1;
}

.@{upload-prefix-cls}-slide-up-exit-active {
  margin: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity @transition-duration-1 @transition-timing-function-linear,
    height @transition-duration-3 @transition-timing-function-standard
      @transition-duration-1,
    margin @transition-duration-3 @transition-timing-function-standard
      @transition-duration-1;
}

.@{upload-prefix-cls}-list-item {
  &.@{upload-prefix-cls}-slide-inline-enter {
    opacity: 0;
  }

  &.@{upload-prefix-cls}-slide-inline-enter-active {
    opacity: 1;
    transition: opacity @transition-duration-2
      @transition-timing-function-linear;
  }

  &.@{upload-prefix-cls}-slide-inline-exit {
    opacity: 1;
  }

  &.@{upload-prefix-cls}-slide-inline-exit-active {
    margin: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity @transition-duration-1
        @transition-timing-function-linear,
      width @transition-duration-3 @transition-timing-function-standard
        @transition-duration-1,
      margin @transition-duration-3 @transition-timing-function-standard
        @transition-duration-1;
  }
}