@chief-editor/ui/css/components/Upload/styles.less

UI Component for chief editor

@import "./var.less";
@import "./mixin.less";

.@{prefixCls}-upload {
    .font-height(12px);
    padding: 2 * @base-space 4 * @base-space;
    color: @color-text-grey1;
}

.@{prefixCls}-upload-file-list {
    padding: 0;
    width: 100%;
    list-style: none;

    &:first-child {
        margin: 0 0 16px 0;
    }

    &-active {
        margin-top: 16px;
    }
}

.@{prefixCls}-upload-file-list-picture-item {
    margin-right: 8px;
}


// 图片
.@{prefixCls}-upload-list-picture {
    position: relative;
    background: @color-neutral1;
    box-sizing: content-box;
    border-radius: 4px;
    flex-shrink: 0;
    .transition();

    &:hover {
        .@{prefixCls}-upload-list-picture-action-list {
            opacity: 1;
        }
    }

    .@{prefixCls}-upload-list-picture-container {
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: inherit;
        overflow: hidden;
    }

    .@{prefixCls}-upload-list-picture-preview {
        max-width: 100%;
        max-height: 100%;
    }

    .@{prefixCls}-upload-list-picture-border {
        box-sizing: border-box;
        border: 1px solid @color-neutral6;
        padding: 4px;
        margin-bottom: 8px;

        img {
            max-width: calc(100% - 4px);
            max-height: calc(100% - 4px);
        }
    }

    .@{prefixCls}-upload-list-picture-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: -10px;
        top: -10px;
        width: 20px;
        height: 20px;
        color: @color-neutral1;
        border-radius: 50%;
        background: rgba(0, 0, 0, .5);
        z-index: 99;
    }

    .@{prefixCls}-upload-list-picture-action-list {
        display: flex;
        list-style: none;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, .5);
        opacity: 0;
        align-items: center;
        justify-content: center;
        border-radius: inherit;
        overflow: hidden;
        .transition();
    }

    .@{prefixCls}-upload-list-picture-action-list-item {
        margin-right: 8px;
        margin-left: 8px;
        color: @color-neutral1;
        cursor: pointer;

        &:last-child {
            margin-left: 0;
        }

        &:first-child {
            margin-right: 0;
        }
    }

}


.@{prefixCls}-upload-avatar {
    &-trigger {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        border: 1px dashed @color-neutral6;
        text-align: center;
        color: @color-text-grey2;
        font-size: 14px;
        cursor: pointer;
        background: @color-neutral1;
        box-sizing: border-box;
        .transition();

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

        .@{prefixCls}-upload-avatar-trigger-content {
            color: @color-text-grey2;
            font-size: 14px;
            .font-height(14px)
        }
    }

    .@{prefixCls}-upload-file-list {
        width: auto;

        &:empty {
            margin: 0;
        }

        &-picture-item {
            margin-right: 24px;
        }
    }
}

// 文本显示的文件列表
.@{prefixCls}-upload-file-list-text-item {
    margin-bottom: 8px;
    color: @color-text-grey1;
    .font-height(14px);

    &[data-status="ERROR"] {
        .@{prefixCls}-upload-file-list-text-item-name, .@{prefixCls}-upload-file-list-text-item-close {
            color: @color-danger6;
        }
    }

    .@{prefixCls}-upload-file-list-text-item-content {
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 25px;
    }

    .@{prefixCls}-upload-file-list-text-item-name {
        margin-left: 8px;
    }

    .@{prefixCls}-upload-file-list-text-item-loading {
        color: rgba(61, 144, 255, 1);
    }

    .@{prefixCls}-upload-file-list-text-item-close {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(0, -50%);
        cursor: pointer;
    }
}

// 卡片显示的文件上传列表
.@{prefixCls}-upload-file-list-card-item {
    position: relative;
    margin-bottom: 8px;

    &[data-status="DONE"], &[data-status="ERROR"] {
        .@{prefixCls}-upload-file-list-card-item-name {
            transform: translate3d(0, 4px, 0);
        }
    }

    &[data-status="ERROR"] {
        .@{prefixCls}-upload-file-list-card-item-content {
            border-color: @color-danger6;
        }

        .@{prefixCls}-upload-file-list-card-item-name, .@{prefixCls}-upload-file-list-card-item-close {
            color: @color-danger6;
        }
    }

    .@{prefixCls}-upload-file-list-card-item-picture {
        position: absolute;
        left: 8px;
        top: 8px;
    }

    .@{prefixCls}-upload-file-list-card-item-content {
        display: flex;
        padding: 8px;
        margin: 0;
        border: 1px solid @color-neutral5;
        background: @color-neutral1;
        border-radius: 4px;
    }

    .@{prefixCls}-upload-file-list-card-item-info {
        margin-left: 8px;
        flex: 1;
        width: 0;
    }

    .@{prefixCls}-upload-file-list-card-item-name {
        padding-right: 14px;
        position: relative;
        margin-bottom: 4px;
        color: @color-text-grey1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        .font-height(14px);
        .transition();
    }

    .@{prefixCls}-upload-file-list-card-item-close {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(0, -50%);
        cursor: pointer;
    }

    .@{prefixCls}-upload-file-list-card-item-error {
        margin-top: 4px;
        color: @color-danger6;
        .font-height(12px);
    }
}


// picture

.@{prefixCls}-upload-list-item-picutre {
    display: flex;
}

// trigger
.@{prefixCls}-upload-trigger {
    display: inline-block;
}

.@{prefixCls}-upload-button-trigger-text {
    margin-left: 4px;
}

// drop trigger

.@{prefixCls}-upload-drop-trigger {
    position: relative;
    border: 1px dashed @color-neutral5;
    background: @color-neutral1;
    border-radius: 4px;
    width: 100%;
    height: 160px;
    cursor: pointer;
    .transition();

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

    &.active {
        border-color: @color-primary6;
        background-color: @color-primary1;
    }

    .@{prefixCls}-upload-drop-trigger-info {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 240px;
        text-align: center;

    }

    .@{prefixCls}-upload-drop-trigger-text {
        margin-top: 8px;
        color: @color-text-grey2;
        .font-height(14px)
    }

    .@{prefixCls}-upload-drop-trigger-special-text {
        color: @color-primary6;
    }

    .@{prefixCls}-upload-drop-trigger-upload {
        color: @color-text-grey3;
    }
}

.@{prefixCls}-upload-file-list-picture {
    display: flex;
}

// progress-bar
.@{prefixCls}-upload-progress-bar {

    height: 2px;
    background: @color-neutral5;
    border-radius: 4px;
    overflow: hidden;

    &-done {
        height: 0;
    }

    .@{prefixCls}-upload-progress-bar-inner {
        height: 2px;
        background: @color-primary6;
        border-radius: 4px;
        width: 0;
        transition: width ease .2s;
    }
}

// progress-mask
.@{prefixCls}-upload-progress-mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    color: @color-neutral1;
    border-radius: 4px;
    overflow: hidden;
    z-index: 10;
    .transition();

    &-done {
        display: none;
    }

    .@{prefixCls}-upload-progress-mask-inner {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 3;
    }
}

.@{prefixCls}-upload-progress-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    user-select: none;
}