@odyzeo/form-checkbox/src/less/form-checkbox.less

Odyzeo form checkbox component with Vue

@color--form-checkbox: #50bccb;
.form-checkbox {

}

.form-checkbox__label {
    position: relative;
    display: block;
    cursor: pointer;
}

.form-checkbox__element {
    z-index: 1;

    display: inline-block;
    width: 20px;
    height: 20px;
    padding: 5px;
    vertical-align: text-top;

    background: white content-box;
    border: 1px solid #8d8d8d;
    border-radius: 2px;
    transition: all .3s ease;

    .form-checkbox__input:checked + & {
        background-color: @color--form-checkbox;
    }

    .form-checkbox__input:focus + & {
        border-color: @color--form-checkbox;
    }
}

.form-checkbox__input {
    width: 1px;
    height: 1px;
    opacity: 0;
}

.form-checkbox--disabled,
.form-checkbox--readonly {
    opacity: .4;
}