yyzone/src/assets/styles/components/upload.less

yyzone vue components and utils

@prefixUploadCls: ~"@{yy-css-prefix}upload";

.@{prefixUploadCls} {
    input[type="file"] {
        display: none;
    }
    
    &-list {
        margin-top: 8px;

        &-file {
            padding: 6px 10px;
            color: @yy-text-info-color;
            border-radius: @yy-btn-border-radius;
            transition: background-color @yy-transition-time @yy-ease-in-out;
            overflow: hidden;
            position: relative;
            background-color: @yy-background-color-base;

            &-item {
                display: flex;
                align-items: center;

                i {
                    display: inline-block;
                    width: @yy-font-size-small;
                    height: @yy-font-size-small;
                    color: @yy-text-primary-color;
                    text-align: center;
                }
            }
            &-name {
                cursor: pointer;
                font-size: @yy-font-size-small;
                display: inline-block;
                vertical-align: middle;
                transition: color @yy-transition-time @yy-ease-in-out;
                margin: 0 10px;
                flex: 1;
                .ellipsis();
            }

            &:hover {
                background-color: fade(@yy-background-color-base, 20%);

                .@{prefixUploadCls}-list-remove {
                    opacity: 1;
                }
                .@{prefixUploadCls}-list-download {
                    opacity: 1;
                }
            }
        }

        &-remove {
            opacity: 0;
            cursor: pointer;
            transition: all @yy-transition-time ease;

            &:hover {
                color: #444;
            }
        }

        &-download {
            margin-right: 18px;
            opacity: 0;
            cursor: pointer;
            transition: all @yy-transition-time ease;

            &:hover {
                color: #444;
            }
        }
    }

    &-select {
        display: inline-block;
    }

    &-drag {
        background: #fff;
        border: 1px dashed @yy-border-color-base;
        border-radius: @yy-btn-border-radius;
        text-align: center;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: border-color @yy-transition-time ease;

        &:hover {
            border: 1px dashed @yy-input-hover-border-color;
        }
    }

    &-dragOver {
        border: 2px dashed @yy-input-hover-border-color;
    }
}