tntd/es/upload/upload.less

tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

//拖拽上传
.tntd-upload-dragger-body{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .tntd-upload-dragger-text{
    margin-top: 16px;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
  }
  .tntd-upload-dragger-hint{
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    color: #8B919E
  }
}

//照片墙
.tntd-upload-wrapper-picture-card{
  .ant-upload-list-picture-card-container{
    height: auto;
    .ant-upload-list-item-error{
      background-color: #F8F9FB;
      .anticon-picture{
        svg{
          margin: 20px;
        }
        path:nth-child(1){
          fill: @text-color;
        }
        path:nth-child(2){
          fill: transparent;
        }
        path:nth-child(3){
          fill: transparent;
        }
        path:nth-child(4){
          fill: transparent;
        }
        path:nth-child(5){
          fill: @text-color;
        }
      }
    }
  }
}

//头像
.tntd-upload-wrapper-avatar{
  .ant-upload-picture-card-wrapper{
    width: auto;
    height: auto;
    .ant-upload.ant-upload-select-picture-card{
      margin: 0;
      width: auto;
      height: auto;
      border: transparent;
      background-color: @white;
      .ant-upload{
        padding: 0;
      }
      .avatar-uploader-btn{
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background-size: cover;
        position: relative;
      }
      .avatar-uploader-btn:hover .avatar-uploader-btn-mask{
        display: flex;
      }
      .avatar-uploader-btn-mask{
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        background-color: rgba(0, 0, 0, 0.2);
        position: absolute;
        border-radius: 50%;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        color: @white;
        display: none;
      }
    }
}
}

.tntd-upload-list-Ellipsis.min-width-0{
  text-align: center;
  min-width: 1px;
}
.ant-upload-list-item-error{
  .anticon.anticon-paper-clip{
    color: @text-color;
  }
}