ant-design/components/upload/style/index.less

@import "../../style/themes/default";
@import "../../style/mixins/index";

@upload-prefix-cls: ~"@{ant-prefix}-upload";
@upload-item: ~"@{ant-prefix}-upload-list-item";
@upload-pictrue-card-size: 104px;

.@{upload-prefix-cls} {
  .reset-component;
  outline: 0;

  p {
    margin: 0;
  }

  &-btn {
    display: block;
    width: 100%;
    outline: none;
  }

  input[type="file"] {
    cursor: pointer;
  }

  &&-select {
    display: inline-block;
  }

  &&-select-picture-card {
    border: @border-width-base dashed @border-color-base;
    width: @upload-pictrue-card-size;
    height: @upload-pictrue-card-size;
    border-radius: @border-radius-base;
    background-color: @background-color-light;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.3s ease;
    vertical-align: top;
    margin-right: 8px;
    margin-bottom: 8px;
    display: table;

    > .@{upload-prefix-cls} {
      width: 100%;
      height: 100%;
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      padding: 8px;
    }

    &:hover {
      border-color: @primary-color;
    }
  }

  &&-drag {
    border: @border-width-base dashed @border-color-base;
    transition: border-color .3s;
    cursor: pointer;
    border-radius: @border-radius-base;
    text-align: center;
    width: 100%;
    height: 100%;
    position: relative;
    padding: 16px 0;
    background: @background-color-light;

    &.@{upload-prefix-cls}-drag-hover:not(.@{upload-prefix-cls}-disabled) {
      border: 2px dashed @primary-5;
    }

    &.@{upload-prefix-cls}-disabled {
      cursor: not-allowed;
    }

    .@{upload-prefix-cls}-btn {
      display: table;
      height: 100%;
    }

    .@{upload-prefix-cls}-drag-container {
      display: table-cell;
      vertical-align: middle;
    }

    &:not(.@{upload-prefix-cls}-disabled):hover {
      border-color: @primary-5;
    }

    p.@{upload-prefix-cls}-drag-icon {
      .@{iconfont-css-prefix} {
        font-size: 48px;
        color: @primary-5;
      }
      margin-bottom: 20px;
    }
    p.@{upload-prefix-cls}-text {
      font-size: @font-size-lg;
      margin: 0 0 4px;
      color: @heading-color;
    }
    p.@{upload-prefix-cls}-hint {
      font-size: @font-size-base;