.vxe-upload { position: relative; color: var(--vxe-ui-font-color); font-family: var(--vxe-ui-font-family); &.show--error { .vxe-upload--file-item { &.is--error { color: var(--vxe-ui-status-error-color); &:hover { .vxe-upload--file-item-name { color: var(--vxe-ui-status-error-color); } } .vxe-upload--file-item-name { text-decoration: line-through; } } } } } .vxe-upload, .vxe-upload--more-popup { &.is--active { .vxe-upload--image-action-box { border-color: var(--vxe-ui-font-primary-color); } .vxe-upload--file-action-btn { & > .vxe-button { border-color: var(--vxe-ui-font-primary-color); border-style: var(--vxe-ui-upload-file-button-border-style); } } } &.is--disabled { .vxe-upload--file-action-btn, .vxe-upload--image-action-box { cursor: no-drop; } } } .vxe-upload--drag-placeholder { display: flex; flex-direction: row; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-weight: 700; font-weight: var(--vxe-ui-font-darken-color); font-size: 1.2em; border-radius: var(--vxe-ui-base-border-radius); background-color: var(--vxe-ui-upload-drag-over-background-color); border: 1px dotted var(--vxe-ui-font-lighten-color); z-index: 9; } .vxe-upload--file-list-wrapper { &.is--horizontal { display: flex; flex-direction: row; & > .vxe-upload--file-list { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; } & > .vxe-upload--file-action { flex-shrink: 0; } } } .vxe-upload--file-list { max-height: 294px; overflow: auto; outline: 0; } .vxe-upload--file-item { position: relative; display: flex; flex-direction: row; align-items: center; line-height: 1.5em; padding: var(--vxe-ui-layout-padding-half); &:hover { background-color: var(--vxe-ui-base-hover-background-color); .vxe-upload--file-item-name { color: var(--vxe-ui-font-primary-color); } } &:last-child { margin-bottom: 0; } &.is--preview { .vxe-upload--file-item-name { cursor: pointer; } } &.is--loading { cursor: progress; color: var(--vxe-ui-input-placeholder-color); &:hover { .vxe-upload--file-item-name { color: var(--vxe-ui-input-placeholder-color); } } } &.is--pending { color: var(--vxe-ui-input-placeholder-color); } } .vxe-upload--file-over-more { display: flex; align-items: center; justify-content: center; flex-shrink: 0; .vxe-button { padding-top: 0; padding-bottom: 0; } } .vxe-upload--file-action-btn { display: inline-block; & > .vxe-button { border-style: var(--vxe-ui-upload-file-button-border-style); } } .vxe-upload--file-action-button { &:hover { border-color: var(--vxe-ui-font-primary-color); } } .vxe-upload--file-action-tip { font-size: 0.9em; padding: var(--vxe-ui-layout-padding-half); color: var(--vxe-ui-input-placeholder-color); } .vxe-upload--file-item-rebtn { padding-right: 0.4em; color: var(--vxe-ui-status-error-color); text-decoration: none; cursor: help; } .vxe-upload--file-item-icon { flex-shrink: 0; padding-right: 0.2em; } .vxe-upload--file-item-name { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 0.2em; } .vxe-upload--file-item-btn-wrapper { display: inline-flex; flex-direction: row; justify-content: center; } .vxe-upload--file-item-loading-icon { padding-right: 0.2em; } .vxe-upload--file-item-loading-icon, .vxe-upload--file-item-loading-text { color: var(--vxe-ui-loading-color); flex-shrink: 0; } .vxe-upload--file-item-corner, .vxe-upload--file-item-download-btn, .vxe-upload--file-item-remove-btn { flex-shrink: 0; } .vxe-upload--file-item-download-btn, .vxe-upload--file-item-remove-btn { padding-left: 0.5em; cursor: pointer; } .vxe-upload--file-item-download-btn { color: var(--vxe-ui-font-primary-color); &:hover { color: var(--vxe-ui-font-primary-lighten-color); } } .vxe-upload--file-item-remove-btn { color: var(--vxe-ui-status-error-color); &:hover { color: var(--vxe-ui-status-error-lighten-color); } } .vxe-upload--image-list, .vxe-upload--image-more-list { display: flex; flex-direction: row; flex-wrap: wrap; } .vxe-upload--image-item, .vxe-upload--image-action, .vxe-upload--image-over-more { flex-shrink: 0; text-align: center; padding: var(--vxe-ui-layout-padding-half); } .vxe-upload--image-over-more { display: flex; align-items: center; justify-content: center; } .vxe-upload--image-action-icon { font-size: 1.2em; padding-bottom: 0.1em; } .vxe-upload--image-action-content { font-size: 0.9em; padding: 0 0.15em 0.5em 0.15em; } .vxe-upload--image-item-box, .vxe-upload--image-action-box { position: relative; border-radius: var(--vxe-ui-base-border-radius); } .vxe-upload--image-item-box { display: flex; flex-direction: row; align-items: center; justify-content: center; } .vxe-upload--image-action-box { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px var(--vxe-ui-upload-image-button-border-style) var(--vxe-ui-input-border-color); cursor: pointer; &:hover { color: var(--vxe-ui-font-primary-color); border-color: var(--vxe-ui-font-primary-color); } } .vxe-upload { &.is--disabled { .vxe-upload--file-action-btn, .vxe-upload--image-action-box { color: var(--vxe-ui-font-disabled-color); cursor: no-drop; } .vxe-upload--image-action-box { &:hover { color: var(--vxe-ui-font-disabled-color); border-color: var(--vxe-ui-input-border-color); } } } } .vxe-upload--image-item { &.is--loading { .vxe-upload--image-item-box { cursor: progress; } } &:hover, &.is--error, &.is--pending { .vxe-upload--image-item-img-wrapper { &::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } } } &:hover { .vxe-upload--image-item-img-wrapper { &::after { background-color: rgba(0, 0, 0, 0.1); } } } &.is--error, &.is--pending { .vxe-upload--image-item-img-wrapper { &::after { background-color: rgba(0, 0, 0, 0.4); } } &:hover { .vxe-upload--image-item-img-wrapper { &::after { background-color: rgba(0, 0, 0, 0.5); } } } } &.is--error { .vxe-upload--image-item-img-wrapper { border-color: var(--vxe-ui-status-error-color); } } &.is--preview { .vxe-upload--image-item-box { cursor: pointer; } } &.is--circle { .vxe-upload--image-item-img-wrapper { border-radius: 50%; overflow: hidden; &::after { border-radius: 50%; } } .vxe-upload--image-item-loading, .vxe-upload--image-item-rebtn { border-radius: 50%; } } } .vxe-upload--image-item-img-wrapper { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: var(--vxe-ui-base-border-radius); border: 1px solid var(--vxe-ui-input-border-color); } .vxe-upload--image-item-img { max-width: 100%; max-height: 100%; } .vxe-upload--image-item-loading { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; top: 0; left: 0; width: 100%; height: 100%; color: var(--vxe-ui-loading-color); background-color: rgba(0, 0, 0, 0.6); z-index: 1; user-select: none; } .vxe-upload--image-item-rebtn { position: absolute; display: flex; flex-direction: row; justify-content: center; align-items: center; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); } .vxe-upload--image-action-hint { font-size: 0.8em; word-break: break-all; color: var(--vxe-ui-input-placeholder-color); } .vxe-upload--image-item-btn-wrapper { display: inline-flex; flex-direction: row; justify-content: center; position: absolute; top: calc(var(--vxe-ui-layout-padding-half) * -1); right: calc(var(--vxe-ui-layout-padding-half) * -1); } .vxe-upload--file-item-, .vxe-upload--image-item-remove-btn { flex-shrink: 0; } .vxe-upload--image-item-remove-btn { display: flex; flex-direction: row; justify-content: center; align-items: center; width: 1.8em; height: 1.8em; font-size: 0.8em; border-radius: 50%; color: #fff; background-color: var(--vxe-ui-status-error-color); z-index: 3; cursor: pointer; &:hover { background-color: var(--vxe-ui-status-error-lighten-color); } } .vxe-upload--file-message-over-error { .vxe-upload--file-message-over-extra { margin-top: 0.5em; max-height: 160px; max-width: 380px; overflow: auto; border: 1px solid var(--vxe-ui-input-border-color); padding: var(--vxe-ui-layout-padding-half) var(--vxe-ui-layout-padding-default); outline: 0; } .vxe-upload--file-message-over-extra-item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /*ζ‹–ζ‹½ζŽ’εΊ*/ .vxe-upload--drag-line { display: none; position: absolute; top: 0; left: 0; z-index: 3; pointer-events: none; } .vxe-upload--drag-line { width: 1px; height: 1px; border: 2px solid transparent; &[drag-pos="top"] { border-top-color: var(--vxe-ui-font-primary-color); } &[drag-pos="bottom"] { border-bottom-color: var(--vxe-ui-font-primary-color); } &[drag-pos="left"] { border-left-color: var(--vxe-ui-font-primary-color); } &[drag-pos="right"] { border-right-color: var(--vxe-ui-font-primary-color); } } .vxe-upload--drag-list-move { transition: transform 0.2s; } .vxe-upload--more-popup { position: relative; .vxe-upload--file-list { max-height: none; } .vxe-upload--file-action-btn { width: 100%; & > .vxe-button { width: 100%; max-width: 100%; } } } .vxe-upload, .vxe-upload--more-popup { font-size: var(--vxe-ui-font-size-default); .vxe-upload--image-item-box, .vxe-upload--image-action-box { width: var(--vxe-ui-upload-image-wh-default); height: var(--vxe-ui-upload-image-wh-default); } &.size--medium { font-size: var(--vxe-ui-font-size-medium); .vxe-upload--image-item-box, .vxe-upload--image-action-box { width: var(--vxe-ui-upload-image-wh-medium); height: var(--vxe-ui-upload-image-wh-medium); } } &.size--small { font-size: var(--vxe-ui-font-size-small); .vxe-upload--image-item-box, .vxe-upload--image-action-box { width: var(--vxe-ui-upload-image-wh-small); height: var(--vxe-ui-upload-image-wh-small); } } &.size--mini { font-size: var(--vxe-ui-font-size-mini); .vxe-upload--image-item-box, .vxe-upload--image-action-box { width: var(--vxe-ui-upload-image-wh-mini); height: var(--vxe-ui-upload-image-wh-mini); } } } .vxe-upload--image-more-list { .vxe-upload--image-item-box { width: var(--vxe-ui-upload-image-wh-default); height: var(--vxe-ui-upload-image-wh-default); } }