@import 'base.scss';

.es-avatar-uploader {
  display: inline-block;
  .el-upload--handle {
    .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    &:not(.is-disabled) {
      .el-upload:hover {
        border-color: #409eff;
      }
    }
    .avatar-uploader-icon {
      display: inline-block;
      font-size: 28px;
      color: #8c939d;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      &.is-disabled {
        background-color: rgba(0, 0, 0, 0.04);
        border-color: rgba(0, 0, 0, 0.12) !important;
        color: rgba(0, 0, 0, 0.25);
        cursor: not-allowed;
      }
    }
    .avatar {
      width: 100px;
      height: 100px;
      display: block;
    }
  }
}
.es-upload-button.is-disabled {
  margin-bottom: 8px;
}
.es-uploader-icon {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  &.is-disabled {
    background-color: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.25);
    cursor: not-allowed;
    margin-bottom: 8px;
  }
}
.el-upload--picture-card {
  .es-uploader-icon {
    top: 50%;
    transform: translateY(-50%);
  }
}
.es-upload-text {
  & > .el-upload-list:not(.is-disabled),
  & > .el-scrollbar {
    margin-top: 8px;
  }
}
.el-upload-list {
  .el-upload-list-table {
    .el-upload-list__item-box {
      .el-upload-list_file-info {
        &.el-upload-list_file-info-uploadTime {
          width: 152px;
        }
        &.el-upload-list_file-info-fileSize {
          width: 72px;
        }
        &.el-upload-list_file-info-userName {
          width: 82px;
        }
      }
    }
  }
}
.es-upload-readonly {
  &:not(.es-avatar-uploader) {
    .el-upload {
      display: none;
    }
  }
  &.es-upload-text:not(.es-avatar-uploader) {
    .el-upload-list--text {
      &.is-disabled {
        margin-top: 8px;
      }
      &:not(.is-disabled) {
        .el-upload-list__item:first-child {
          margin-top: 5px;
        }
      }
    }
  }
  &.es-avatar-uploader {
    .el-upload {
      cursor: default;
      border: 0;
    }
  }
}
.es-upload-dialog {
  width: 100%;
  height: 100%;
  @extend .es-flex;
  @extend .es-align-middle;
  @extend .es-align-center;
}
.el-upload--handle {
  display: flex;
  .el-upload--text,
  .el-upload--table {
    & + .es-upload-downloads {
      margin-left: 8px;
    }
  }
}
.es-upload-picture-card.has-handle {
  position: relative;
  padding-top: 40px;
  .el-upload--handle {
    .el-upload--picture-card + .es-upload-downloads {
      position: absolute;
      left: 0;
      top: 0;
    }
  }
  &.es-upload-readonly {
    .el-upload--handle {
      padding-top: 0;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
  &.is-disabled {
    padding-top: 0;
  }
}
.es-upload-picture {
  .el-upload--handle {
    display: block;
    position: relative;
    .el-upload--picture + .es-upload-downloads {
      float: right;
      position: relative;
      top: 68px;
    }
    &.is-disabled:last-child {
    }
  }
}
.el-upload-list--picture.is-readonly {
  .el-upload-list__item:first-child {
    margin-top: 0;
  }
}
