wux-weapp/packages/core/upload/index.less

一套组件化、可复用、易扩展的微信小程序 UI 组件库

@import "../styles/mixins/index.less";
@import "../styles/themes/index.less";

.@{wux-prefix}-upload {
    position: relative;
    display: block;
    .clearfix();

    &--disabled {
        opacity: @disabled-opacity;
        cursor: not-allowed;
    }

    &--picture-card {
        .@{wux-prefix}-upload__select {
            .square(@upload-size);

            border: @border-width-base @upload-normal-border-style @upload-normal-border-color;
            border-radius: @upload-border-radius;
            margin: 0 8px 8px 0;
            background-color: @upload-bg;
            transition: border-color .3s ease;
            box-sizing: border-box;
            float: left;
            cursor: pointer;
        }

        .@{wux-prefix}-upload__button {
            width: 100%;
            height: 100%;
            display: flex;
            text-align: center;
            justify-content: center;
            align-items: center;
            vertical-align: middle;
            padding: 4px;
            box-sizing: border-box;

            image {
                width: 100%;
                height: 100%;
                display: inline-block;
                overflow: hidden;
            }
        }

        .@{wux-prefix}-upload__files {
            position: relative;
            display: block;
            float: left;
            .clearfix();
        }

        .@{wux-prefix}-upload__file {
            .square(@upload-size);

            float: left;
            margin: 0 8px 8px 0;
            padding: 4px;
            border-radius: @upload-border-radius;
            border: @border-width-base @upload-success-border-style @upload-normal-border-color;
            position: relative;
            box-sizing: border-box;
            cursor: pointer;

            &--uploading {
                border-style: @upload-normal-border-style;
            }

            &--error {
                border-color: @upload-error-border-color;
            }
        }

        .@{wux-prefix}-upload__thumb {
            width: 100%;
            height: 100%;
            display: inline-block;
            overflow: hidden;
        }

        .@{wux-prefix}-upload__remove {
            .square(@upload-icon-size);

            position: absolute;
            right: 6px;
            top: 6px;
            text-align: right;
            vertical-align: top;
            z-index: 2;
            background-repeat: no-repeat;
            background-size: @upload-icon-size auto;
            cursor: pointer;

            .encoded-svg-background(upload_delete);
        }
    }
}