pxt-core/react-common/styles/controls/RadioButtonGroup.less

Microsoft MakeCode provides Blocks / JavaScript / Python tools and editors

.common-radio-group.common-radio-buttons {
    display: flex;
    flex-direction: row;

    .common-radio-choice {
        &:extend(.common-button);
        position: relative;

        padding: 0;
        background: var(--pxt-neutral-background2);
        color: var(--pxt-neutral-foreground2);
        border: 1px solid var(--pxt-neutral-stencil1);

        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;

        i {
            width: 100%;
            margin: 0;
        }

        input {
            position: absolute;

            appearance: none;

            width: 100%;
            height: 100%;

            // Old versions of ios safari require the prefix AND manually
            // overriding the border
            -webkit-appearance: none;
            border: none;
        }
    }

    .common-radio-choice.selected {
        background: var(--pxt-neutral-background1);
        color: var(--pxt-primary-background);
    }
}


.common-radio-group:not(.common-radio-buttons) .common-radio-choice {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}