@import "../../style/themes/default"; @import "../../style/mixins/index"; @upload-prefix-cls: ant-upload; @upload-item: ant-upload-list-item; @upload-pictrue-card-size: 96px; .@{upload-prefix-cls} { font-size: @font-size-base; > span { display: block; width: 100%; outline: none; } input[type="file"] { cursor: pointer; } &&-select { display: inline-block; } &&-select-picture-card { border: 1px dashed @border-color-base; width: @upload-pictrue-card-size; height: @upload-pictrue-card-size; padding: 24px 0; border-radius: @border-radius-base; background-color: #fbfbfb; text-align: center; cursor: pointer; transition: border-color 0.3s ease; display: inline-block; vertical-align: top; margin-right: 8px; margin-bottom: 8px; &:hover { border-color: @primary-color; } } &&-drag { border: 1px dashed @border-color-base; transition: border-color 0.3s ease; cursor: pointer; border-radius: @border-radius-base; text-align: center; width: 100%; height: 100%; position: relative; &.@{upload-prefix-cls}-drag-hover { border: 2px dashed tint(@primary-color, 20%); } > span { display: table; height: 100%; } .@{upload-prefix-cls}-drag-container { display: table-cell; vertical-align: middle; } &:hover { border-color: tint(@primary-color, 20%); } p.@{upload-prefix-cls}-drag-icon { .anticon { font-size: 80px; margin-top: -5px; color: tint(@primary-color, 20%); } height: 60px; margin-bottom: 24px; } p.@{upload-prefix-cls}-text { font-size: 14px; } p.@{upload-prefix-cls}-hint { font-size: 12px; color: #999; } .anticon-plus { font-size: 30px; transition: all 0.3s ease; color: #ccc; &:hover { color: #999; } } &:hover .anticon-plus { color: #999; } } } .@{upload-prefix-cls}-list { overflow: hidden; &-item { overflow: hidden; margin-top: 8px; font-size: 12px; &-info { height: 22px; line-height: 22px; padding: 0 4px; transition: background-color 0.3s ease; .anticon-paper-clip { margin-right: 4px; font-size: 12px; color: #999; } .anticon-cross { .iconfont-size-under-12px(10px); transition: all 0.3s ease; opacity: 0; cursor: pointer; float: right; color: #999; line-height: 22px; &:hover { color: #666; } } } &:hover &-info { background-color: tint(@primary-color, 90%); } &:hover .anticon-cross { opacity: 1; } &-error, &-error .anticon-paper-clip { color: @error-color; } &-error .anticon-cross { opacity: 1; } &-progress { padding: 0 8px 0 20px; margin-top: -2px; margin-bottom: 1px; font-size: 12px; .ant-progress-line-inner { vertical-align: middle; } } } &-picture, &-picture-card { .@{upload-item} { padding: 8px; border-radius: @border-radius-base; border: 1px solid @border-color-base; height: 66px; position: relative; &:hover { background: transparent; } } .@{upload-item}-info { padding: 0; } .@{upload-item}:hover .@{upload-item}-info { background: transparent; } .@{upload-item}-uploading { border-style: dashed; } .@{upload-item}-thumbnail { width: 48px; height: 48px; position: absolute; top: 8px; left: 8px; } .@{upload-item}-thumbnail img { width: 48px; height: 48px; display: block; } .@{upload-item}-thumbnail.anticon:before { line-height: 48px; font-size: 24px; color: #999; } .@{upload-item}-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 0 0 8px; line-height: 42px; transition: all 0.3s ease; padding-left: 48px; padding-right: 8px; max-width: 100%; display: inline-block; box-sizing: border-box; } .@{upload-item}-uploading .@{upload-item}-name { line-height: 28px; } .@{upload-item}-progress { padding-left: 56px; margin-top: 0; } .anticon-cross { position: absolute; right: 8px; top: 8px; line-height: 1; } } &-picture-card { display: inline; .@{upload-item} { display: inline-block; width: @upload-pictrue-card-size; height: @upload-pictrue-card-size; margin: 0 8px 8px 0; } .@{upload-item}-info { height: 100%; position: relative; &:before { content: ' '; position: absolute; z-index: 1; background-color: #808080; transition: all 0.3s ease; opacity: 0; width: 100%; height: 100%; } .anticon-eye-o, .anticon-delete { position: absolute; left: 50%; top: 50%; z-index: 10; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; font-size: 16px; width: 16px; line-height: 1; color: #eee; opacity: 0; margin-top: -8px; margin-left: -22px; &:hover { color: #fff; } } .anticon-delete { left: 50%; margin-left: 6px; } &:hover { &:before { opacity: .8; } .anticon-eye-o, .anticon-delete { opacity: 1; } } } .@{upload-item}-thumbnail, .@{upload-item}-thumbnail img { display: block; width: 100%; height: 100%; position: static; } .@{upload-item}-name { display: none; } .@{upload-item}-uploading { &.@{upload-item} { background-color: #fbfbfb; } .@{upload-item}-info { height: auto; &:before, .anticon-eye-o, .anticon-delete { display: none; } } &-text { margin-top: 18px; color: #999; } } .@{upload-item}-progress { padding-left: 0; } } .@{upload-prefix-cls}-success-icon { color: @success-color; font-weight: bold; } .@{upload-prefix-cls}-margin-top-enter { animation: uploadMarginTopIn .3s @ease-in-out-circ; } .@{upload-prefix-cls}-margin-top-leave { animation: uploadMarginTopOut .3s @ease-in-out-circ; } } @keyframes uploadMarginTopIn { from { margin-top: -25px; opacity: 0; } } @keyframes uploadMarginTopOut { to { margin-top: -25px; opacity: 0; } }