benivo-ui-library/checkbox.less

Benivo UI library

//
//Checkbox
//
.form-check {
    position: relative;
    padding-left: 1.75rem;
    min-height: 1.75rem;
    min-width: 1.75rem;
    font-size: 1rem;

    &.round-checkbox {
        padding-left: 46px;

        .checkbox-box {
            top: 0;
            height: 20px;
            width: 36px;
            border: solid 1px var(--border-100);
            .border-radius(100px);
            background-color: var(--bg-100);
            transition: .4s;

            &:after {
                position: absolute;
                top: 1px;
                bottom: 1px;
                left: 3px;
                content: '';
                height: 16px;
                width: 16px;
                .border-radius(50%);
                background-color: var(--white);
                transition: .4s;
            }

            &:hover {
                &:after {
                    top: 1px;
                    left: 3px;
                }
            }
        }

        input {
            &:checked {
                &+.checkbox-box:after {
                    content: '';
                    top: 1px;
                    left: 18px;
                    transform: none;
                }
            }
        }
    }

    .field-invalid-msg {
        color: var(--error-main);
        font-size: 12px;
        margin-top: 2px;
    }

    .not-allowed,
    .disabled,
    [readonly] {
        pointer-events: none;
    }

    [readonly]~label {
        pointer-events: none;
    }

    &.checkbox-loading-state {
        pointer-events: none;

        input {
            &:checked {
                &+.checkbox-box {
                    background-color: var(--white);
                    border-color: var(--border-200);
                }
            }
        }
    }

    input {
        display: none;

        &+.checkbox-box.disabled {
            box-shadow: none;
            background-color: var(--bg-50);
            border-color: var(--grey-300);

            &:after {
                color: var(--white);
            }
        }

        &:checked {
            &+.checkbox-box {
                background-color: var(--primary);
                border-color: var(--primary);

                &:after {
                    display: inline-block;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    .transform(translate(-50%, -50%));
                    content: '\e91a';
                    font-family: 'icomoon';
                    font-size: 0.5rem;
                    color: var(--white);
                }

                &:focus-visible {
                    outline: none;
                    box-shadow: 0 0 0 4px rgba(41, 112, 255, 0.24);
                }

                &.disabled {
                    box-shadow: none;
                    background-color: var(--bg-50);
                    border-color: var(--grey-300);

                    &:after {
                        color: var(--white);
                    }
                }
            }
        }

        &:hover:not(:checked):not(:disabled) {
            &+.checkbox-box {
                border-color: var(--primary);
            }
        }
    }

    .checkbox-box {
        position: absolute;
        left: 0;
        top: 0.25rem;
        height: 1.25rem;
        width: 1.25rem;
        border: 1px solid var(--border-200);
        margin-right: .25px;
        color: var(--white);
        display: flex;
        justify-content: center;
        align-items: center;
        .border-radius(.25rem);

        &:focus-visible {
            outline: none;
            box-shadow: 0 0 0 4px rgba(152, 162, 179, 0.14);
        }
    }

    label[data-focus-click]:focus-visible:before {
        outline: 1px auto Highlight;
        outline: 1px auto -webkit-focus-ring-color;
    }

    // Validation
    input {
        &.field-invalid {

            &~label {
                color: var(--error-main);
            }

            &+.checkbox-box {
                border-color: var(--error-main);
            }
        }
    }

    small {
        display: block;
    }

    label {
        cursor: pointer;
    }

    &.right-side {
        text-align: right;
        padding-left: 0;
        padding-right: 1.75rem;

        .checkbox-box {
            left: inherit;
            right: 0;
        }
    }

    .form-check-label {
        color: var(--grey-700);

        &:focus-visible {
            outline: 1px auto Highlight;
            outline: 1px auto -webkit-focus-ring-color;
        }

        .icon-info-circle-light {
            margin-left: 0.5rem;
            vertical-align: middle;
        }
    }

    &.on-off {
        padding-left: 40px;

        &.right-side {
            padding-left: 0;
            padding-right: 40px;

            .on-off-slide {
                left: initial;
                right: 0;
            }
        }

        .on-off-slide {
            width: 36px;
            height: 20px;
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border: solid 1px var(--border-100);
            .border-radius(18px);
            background-color: var(--bg-100);
            .transition(.4s);

            &:focus-visible {
                outline: none;
                box-shadow: 0 0 0 4px rgba(152, 162, 179, 0.20);
            }


            &:before {
                position: absolute;
                content: "";
                height: 16px;
                width: 16px;
                left: 2px;
                bottom: 1px;
                top: 1px;
                .border-radius(50%);
                background-color: var(--white);
                box-shadow: 0 1px 3px 0 rgba(16, 24, 40, 0.10), 0 1px 2px 0 rgba(16, 24, 40, 0.06);
                .transition(.4s);
            }

            &.disabled {
                .filter(grayscale(100%));
                box-shadow: none;

                &:before {
                    background-color: var(--bg-50);
                }
            }
        }

        input:not(:checked):hover+label.on-off-slide {
            border-color: var(--primary);

            &:before {
                border-color: rgba(0, 0, 0, 0.15);
            }
        }

        input:checked+.on-off-slide {
            background-color: var(--primary);
            border-color: var(--primary);

            &:focus-visible {
                box-shadow: 0 0 0 4px rgba(41, 112, 255, 0.24);
            }

            &.not-allowed,
            &.disabled {
                box-shadow: none;
                background-color: color-mix(in srgb, white 20%, var(--primary));
                border-color: color-mix(in srgb, white 20%, var(--primary));

                &::before {
                    border-color: color-mix(in srgb, white 20%, var(--primary));
                }
            }
        }

        input:focus+.on-off-slide {
            .box-shadow(0 0 1px var(--primary));
        }

        input:checked+.on-off-slide:before {
            .transform(translateX(15px));
        }

        input:checked+label:after {
            content: none;
        }

        label:before {
            content: none;
        }

        .checkbox-box {
            display: none;
        }
    }
}

.form-row {
    .form-check {
        padding-left:~"calc(@{gatter} + 1.75rem)";

        &.on-off,
        &.round-checkbox {
            padding-left:~"calc(@{gatter} + 40px)";
        }

        .checkbox-box,
        .on-off-slide {
            left: @gatter;
        }

        &.right-side {
            padding-left: 0;
            padding-right:~"calc(@{gatter} + 1.75rem)";

            &.on-off,
            &.round-checkbox {
                padding-right:~"calc(@{gatter} + 40px)";
            }

            .checkbox-box,
            .on-off-slide {
                left: initial;
                right: @gatter;
            }
        }
    }
}