54 lines
1.2 KiB
SCSS
54 lines
1.2 KiB
SCSS
$md-radio-checked-color: var(--color-primary);
|
|
$md-radio-border-color: var(--input-border-color);
|
|
$md-radio-size: 20px;
|
|
$md-radio-checked-size: 10px;
|
|
$md-radio-ripple-size: 15px;
|
|
|
|
.form-field--radio {
|
|
position: relative;
|
|
|
|
label {
|
|
cursor: pointer;
|
|
|
|
&:before, &:after {
|
|
content: "";
|
|
position: absolute;
|
|
left:0;
|
|
top: 0;
|
|
border-radius: 50%;
|
|
transition: all .3s ease;
|
|
transition-property: transform, border-color;
|
|
}
|
|
|
|
&:before {
|
|
width: $md-radio-size;
|
|
height: $md-radio-size;
|
|
background: transparent;
|
|
border: 2px solid $md-radio-border-color;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&:after {
|
|
top: $md-radio-size / 2 - $md-radio-checked-size / 2;
|
|
left: $md-radio-size / 2 - $md-radio-checked-size / 2;
|
|
width:$md-radio-checked-size;
|
|
height:$md-radio-checked-size;
|
|
transform: scale(0);
|
|
background:$md-radio-checked-color;
|
|
}
|
|
|
|
}
|
|
|
|
input[type="radio"] {
|
|
visibility: hidden;
|
|
margin-right: 16px;
|
|
|
|
&:checked + label:before {
|
|
border-color: $md-radio-checked-color;
|
|
}
|
|
|
|
&:checked + label:after {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
}
|