/*! * SPDX-License-Identifier: Apache-2.0 * * The OpenSearch Contributors require contributions made to * this file be licensed under the Apache-2.0 license or a * compatible open source license. * * Modifications Copyright OpenSearch Contributors. See * GitHub history for details. */ .ouiRadio { position: relative; .ouiRadio__input { @include ouiScreenReaderOnly; ~ .ouiRadio__label { display: inline-block; padding-left: ($ouiRadioSize * 1.5); line-height: $ouiSizeL; font-size: $ouiFontSizeS; position: relative; z-index: 2; cursor: pointer; } + .ouiRadio__circle { @include ouiCustomControl($type: 'round', $size: $ouiRadioSize); display: inline-block; position: absolute; left: 0; top: (($ouiSizeL - $ouiRadioSize) / 2) - 1px; } &:checked { + .ouiRadio__circle { @include ouiCustomControlSelected($type: 'dot'); } } &[disabled] { //sass-lint:disable no-important cursor: not-allowed !important; ~ .ouiRadio__label { color: $ouiFormControlDisabledColor; cursor: not-allowed !important; } + .ouiRadio__circle { @include ouiCustomControlDisabled; } } &:checked[disabled] { + .ouiRadio__circle { @include ouiCustomControlDisabled($type: 'dot'); } } &:focus, &:active:not(:disabled) { + .ouiRadio__circle { @include ouiCustomControlFocused; } } } /** * 1. Float above the visual radio and match its dimension, so that when users try to click it * they actually click this input. */ &.ouiRadio--inList, &.ouiRadio--noLabel { min-height: $ouiRadioSize; min-width: $ouiRadioSize; .ouiRadio__circle { top: 0; } .ouiRadio__input { @include size($ouiRadioSize); /* 1 */ position: absolute; /* 1 */ opacity: 0; /* 1 */ z-index: 1; /* 1 */ margin: 0; /* 1 */ left: 0; /* 1 */ cursor: pointer; } } }