sass.n2o.controls.CheckboxAlternative.scss Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of n2o-react
The newest version!
.custom-checkbox {
    min-height: $checkbox-custom-control-size;
    min-width: $checkbox-custom-control-size;
    margin: 0;
    padding: 0;
    overflow: visible !important;

    .custom-control-label {
        display: flex;
        gap: 8px;

        &::before {
            position: relative;
            top: $checkbox-position-top;
            left: $checkbox-position-left;
            right: $checkbox-position-right;
            bottom: $checkbox-position-bottom;
            width: $checkbox-width;
            min-width: $checkbox-width;
            height: $checkbox-height;
            background-color: $checkbox-background-color;
            border: $checkbox-border;
            border-radius: $checkbox-border-radius;
        }

        &:hover::before {
            border: $checkbox-hover-border;
        }
    }

    .custom-control-input {
        ~ .custom-control-label {
            &::after {
                top: $checkbox-position-top;
                left: $checkbox-position-left;
                right: $checkbox-position-right;
                bottom: $checkbox-position-bottom;
                width: $checkbox-width;
                min-width: $checkbox-width;
                height: $checkbox-height;
            }
        }

        &:focus ~ .custom-control-label::before {
            box-shadow: $checkbox-focus-shadow;
        }

        &:checked {
            ~.custom-control-label {
                &::after {
                    background-image: $checkbox-background-image;
                    background-size: $checkbox-background-size;
                    background-position: $checkbox-background-position;
                    background-repeat: $checkbox-background-repeat;
                }

                &::before {
                    background-color: $checkbox-background-color-checked;
                    border-color: $checkbox-border-color-checked;
                }
            }
        }

        &:disabled {
            &:checked {
                ~ .custom-control-label {
                    &::before {
                        border-color: $checkbox-border-color-checked;
                    }
                }
            }
        }
    }
}