benivo-ui-library/radiobutton.less

Benivo UI library

//
// Radiobutton
//
.form-radio {
    position: relative;
    font-size: 1rem;
    padding-left: 1.75rem;
    margin-bottom: @spacer;
    min-height: 1.5rem;
    min-width: 1rem;

    input {
        display: none;

        &:checked {
            &+label:before {
                background-color: var(--primary);
                border-color: var(--primary);
            }

            &+label:after {
                content: '';
                display: inline-block;
                position: absolute;
                left: 0.25rem;
                top: 0.5rem;
                width: 0.5rem;
                height: 0.5rem;
                .border-radius(50%);
                background: var(--white);
            }
        }

        &.field-invalid {
            &+label:before {
                border-color: var(--error-main) !important;
            }

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

    label:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.25rem;
        height: 1rem;
        width: 1rem;
        border: var(--border-200);
        margin-right: .25px;
        color: var(--white);
        display: flex;
        justify-content: center;
        align-items: center;
        .border-radius(50%);
    }

    label:hover {
        cursor: pointer;
    }

    &.form-radio-larg {
        padding-left: 0;

        .locked {
            &:before {
                font-size: 1.35rem;
                top: 12px;
                right: 1.35rem;
            }
        }

        .info {
            width: 22px;
            height: 22px;
            left: 100%;
            transform: translate(-26px, -36px);
            position: absolute;

            &:before {
                font-size: 1.35rem;
            }
        }

        input {

            &:checked {
                &+label {
                    border-color: var(--primary);
                }

                &+label:after {
                    display: none;
                }
            }
        }

        label {
            display: block;
            border: 1px solid rgba(0, 0, 0, 0.15);
            background-color: var(--white);
            padding: 14px 24px;
            .border-radius(@border-radius);

            &:before {
                display: none;
            }
        }

        &:hover {
            label {
                border-color: var(--primary);
            }
        }
    }

    small {
        display: block;
    }
}