magiccube-vue3/package/style/checkbox.less

vue3-js版组件库

@import './root.css';
@import './theme';

.mc-checkbox{
    display: inline-block;
    position: relative;
    user-select: none;
    // &:hover:not(.disabled){
    //     color: @color-default;
    // }

    &.disabled{
        cursor: default;
    }

    &.disabled{
        .mc-checkbox__wrap{
            &::before{
                background: var(--mc-checkbox-disabled-background);
                border-color: var(--mc-checkbox-disabled-background);
            }
            &.active::before{
                background: var(--mc-checkbox-disabled-background);
                border-color: var(--mc-checkbox-disabled-background);
            }
        }
    }

    &__wrap{
        display: flex;
        align-items: center;
        line-height: 12px;

        &::before{
            content: '';
            width: 12px;
            height: 12px;
            border-radius: @border-radius;
            border: 1px solid var(--mc-button-disabled-text);
            box-sizing: border-box;
            transition: all 200ms;
        }

        &.active::before{
            background: var(--mc-main-color);
            border: 1px solid var(--mc-main-color);
        }

        &.active::after{
            content: '';
            position: absolute;
            top: 1px;
            left: 4px;
            width: 3px;
            height: 8px;
            box-sizing: content-box;
            border: 1px solid #fff;
            border-left: 0;
            border-top: 0;
            transform-origin: center;
            transform: rotate(45deg);
            pointer-events: none;
        }

        &.include::after{
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            width: 6px;
            height: 6px;
            pointer-events: none;
            background: var(--mc-main-color);
        }
    }

    &.small{
        .mc-checkbox__wrap{

            &::before{
                width: 10px;
                height: 10px;
            }

            &.active::after{
                content: '';
                position: absolute;
                top: 3px;
                left: 4px;
                width: 3px;
                height: 8px;
                box-sizing: content-box;
                border: 1px solid #fff;
                border-left: 0;
                border-top: 0;
                transform-origin: center;
                transform: rotate(45deg);
                pointer-events: none;
            }
        }
    }

    &__inner{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;

        &:disabled{
            cursor: default;
        }
    }

    &__label{
        font-size: var(--mc-normal-size);
        color: var(--mc-title-color);

        // &.active{
        //     color: var(--mc-main-color)
        // }
    }

    .margin-left{
        margin-left: 5px;
    }
}