Files
cunningham/packages/react/src/components/Forms/Radio/_index.scss
Lebaud Antoine 430f893645 🩹(react) update stylesheet to use modern SASS
Replaced deprecated '@import' with '@use' to align with best practices.
Refactored stylesheet to behave as a partial, enhancing SASS compilation
efficiency.
2023-10-24 20:32:42 +02:00

42 lines
1009 B
SCSS

.c__radio {
input {
appearance: none;
margin: 0;
width: var(--c--components--forms-checkbox--size);
height: var(--c--components--forms-checkbox--size);
border: 1.5px solid var(--c--components--forms-radio--border-color);
background-color: var(--c--components--forms-radio--background-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
&:focus {
outline: none;
}
&::before {
content: "";
width: 1rem;
height: 1rem;
border-radius: 50%;
transform: scale(0);
transition: all var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
box-shadow: inset 1em 1em var(--c--components--forms-radio--accent-color);
}
&:checked::before {
transform: scale(1);
}
}
&.c__checkbox--disabled {
input {
&::before {
box-shadow: inset 1em 1em var(--c--theme--colors--greyscale-400);
}
}
}
}