52 lines
1.2 KiB
SCSS
52 lines
1.2 KiB
SCSS
.radioButton {
|
|
--size: 16px;
|
|
--border-width: calc(var(--size) / 4);
|
|
|
|
appearance: none;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
display: inline-flex;
|
|
margin: 0;
|
|
width: var(--size);
|
|
height: var(--size);
|
|
vertical-align: top;
|
|
border-radius: 100%;
|
|
border: var(--border-width) solid transparent;
|
|
box-shadow: 0 0 0 1px var(--color-border-primary);
|
|
background-color: var(--color-bg-primary);
|
|
transition: 0.15s ease-out;
|
|
transition-property: border-color;
|
|
cursor: pointer;
|
|
|
|
/* Increase clickable area, prevents misclicks and covers gap between control and label */
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
|
|
--spread: calc(var(--border-width) + var(--form-field-label-gap, 8px));
|
|
|
|
inset-inline: calc(-1 * var(--spread));
|
|
inset-block: calc(-0.75 * var(--spread));
|
|
}
|
|
|
|
&:disabled {
|
|
background: var(--color-bg-tertiary);
|
|
box-shadow: none;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
&:checked {
|
|
border-color: var(--color-bg-brand-base);
|
|
box-shadow: none;
|
|
|
|
&:disabled {
|
|
border-color: var(--color-text-disabled);
|
|
}
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: var(--outline-focus-default);
|
|
outline-offset: 2px;
|
|
}
|
|
}
|