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

Go to download
Show more of this group Show more artifacts with this name
Show all versions of n2o-react
There is a newer version: 7.28.3
.n2o-radio-input-wrapper {
    input.alt-radio {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }
}

.n2o-radio-input {
    cursor: pointer;
    display: flex;
    align-items: center;

    &.disabled {
        cursor: default;
        color: $gray-600;
    }

    /// type = default
    &.n2o-radio-input-n2o, // для обратной совместимости
    &.n2o-radio-input-default {
        margin: $n2o-radio-margin;

        &::before {
            content: ' ';
            width: $n2o-radio-width;
            height: $n2o-radio-height;
            margin-right: 0.5rem;
            background: white;
            border-radius: 50%;
            border: 1px solid $gray-400;
            display: inline-block;
        }

        &.checked::before {
            background: $n2o-radio-checked-background-color;
            border: 5px solid;
            border-color: $n2o-radio-checked-border-color;
        }

        &.disabled::before {
            background: $gray-100;
            box-shadow: none !important;
        }

        &:focus::before,
        &:hover::before {
            box-shadow: $n2o-radio-focus-box-shadow;
        }

        span {
            margin-bottom: 1px;
        }
    }

    /// type = tabs
    &.n2o-radio-input-tabs {
        border: $n2o-radio-input-border-width solid transparent;
        padding: $n2o-radio-input-tabs-padding;
        margin: 0;
        width: 100%;

        &.checked {
            border-color: $n2o-radio-input-border-color;
            color: $gray-700;
        }

        &:hover:not(.checked):not(.disabled),
        &:focus:not(.checked):not(.disabled) {
            border-color: $n2o-radio-input-hover-border-color;
            color: black;
        }
    }

    /// type = btn
    // Просто наследуемся от бутстрап классов, чтобы самим не переопределять ничего
    &.n2o-radio-input-btn {
        @extend .btn;
        @extend .btn-secondary;
    }
}

.n2o-radio-input.invalid,
.n2o-radio-input.invalid:hover,
.n2o-radio-input.active.invalid {
    span {
        color: $danger;
    }
}

.n2o-radio-group {
    display: flex;
    flex-direction: column;

    /// type = default
    &.n2o-radio-group-n2o, // для обратной совместимости
    &.n2o-radio-group-default {
        .n2o-radio-input-wrapper {
            // focus при табуляции на кастомный компонент радиокнопки
            // FIXME: временно выделяем фокус от табуляции тенью как при ховере. заменить на стили от дизайнеров, когда они появятся
            .alt-radio:focus-visible + .n2o-radio-input-default::before {
                box-shadow: $n2o-radio-focus-box-shadow;
            }
        }
    }

    /// type = tabs
    &.n2o-radio-group-tabs {
        position: relative;

        .n2o-radio-input-wrapper {
            // focus при табуляции на кастомный компонент радиотаба
            // FIXME: временно выделяем фокус от табуляции цветом шрифта как при ховере. заменить на стили от дизайнеров, когда они появятся
            .alt-radio:focus-visible + .n2o-radio-input-tabs {
                color: black;
            }
        }

        &::before {
            z-index: -1;
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            top: 0;
        }

        &.n2o-radio-group-inline {
            width: 100%;

            &::before {
                border-bottom: $n2o-radio-input-border-width solid $n2o-radio-input-border-color;
            }

            .n2o-radio-input.n2o-radio-input-tabs {
                &.checked {
                    border-bottom: $n2o-radio-input-border-width solid $white;
                }

                &:not(.checked) {
                    border-bottom: transparent;
                }
            }
        }

        &.n2o-radio-group-vertical {
            &::before {
                border-right: $n2o-radio-input-border-width solid $n2o-radio-input-border-color;
            }

            // stylelint-disable-next-line
            .n2o-radio-input.n2o-radio-input-tabs {
                &.checked {
                    border-right: $n2o-radio-input-border-width solid $white;
                }

                &:not(.checked) {
                    border-right: transparent;
                }
            }
        }
    }

    &.n2o-radio-group-inline {
        flex-direction: row;

        .n2o-radio-input-wrapper {
            margin-right: $n2o-radio-input-margin-right;
            margin-bottom: 0;
        }

        .n2o-radio-input-wrapper:last-child {
            margin-right: 0;
        }
    }

    /// type = btn
    // Просто наследуемся от бутстрап классов, чтобы самим не переопределять ничего
    &.n2o-radio-group-btn {
        @extend .btn-group-toggle;

        &.n2o-radio-group-inline {
            @extend .btn-group;
        }

        &.n2o-radio-group-vertical {
            @extend .btn-group-vertical;
        }
    }
}