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

UI Component for chief editor

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

.@{prefixCls}-checkbox {
    display: inline-block;
    line-height: 22px;
    font-size: 14px;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
    user-select: none;
    // 保证和普通表单元素34px高
    padding: 6px 0;
    color: @color-text-grey1;
    .transition();

    &-icon {
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-top: -1.2%;
        vertical-align: middle;
        border: 1px solid @color-neutral5;
        border-radius: @border-radius-sm;
        margin-right: 8px;
        color: @color-text-grey1;
        background-color: transparent;
        text-align: center;
        font-size: 14px;
        line-height: 0;
        .transition();
    }

    &-checked,
    &-indeterminate {
        .@{prefixCls}-checkbox-icon {
            .motion-active-bg();
            .motion-active-border();
        }
    }

    &:not(&-disabled):hover,
    &:not(&-disabled):focus {
        .@{prefixCls}-checkbox-icon {

            .motion-ready-border();

            &-checked {
                .motion-ready-bg();
            }
        }
    }

    &:not(&-disabled):focus {
        .@{prefixCls}-checkbox-icon {
            .motion-stroked-hint();
        }
    }

    &:not(&-disabled):active {
        .@{prefixCls}-checkbox-icon {
            .motion-processing-border();
            .motion-stroked-hint();

            &-checked {
                .motion-processing-bg();
            }
        }
    }

    &-disabled {
        color: @color-text-grey4;
        cursor: not-allowed;

        .@{prefixCls}-checkbox-icon {
            border-color: @color-neutral4;
            background-color: @color-neutral2;
        }
    }

    &-disabled&-checked,
    &-disabled&-indeterminate {
        .@{prefixCls}-checkbox-icon {
            border-color: @color-primary3;
            background-color: @color-primary3;
        }
    }
}