There are no notes for this item.
<div class="control control--radio radio radio--selected">
<input type="radio" id="radio1" checked name="radio">
<label for="radio1" class="control__name">Selected</label>
<div class="control__indicator"></div>
</div>
/*------------------------------------*\
#RADIO
\*------------------------------------*/
// Check Checkbox CSS
// Makes radio buttons circlular
.control--radio .control__indicator {
border-radius: $radius-circle;
}
// Disabled circle colour
.control--radio input:disabled ~ .control__indicator:after {
opacity: .5;
}
// Radio button inner circle
.control--radio .control__indicator:after {
left: 3px;
top: 3px;
height: 5px;
width: 5px;
border-radius: $radius-circle;
border: 1px solid $border-form;
display: block;
}
.control--radio input:checked ~ .control__indicator:after {
background-color: $border-hover;
border-color: $border-hover;
}
// Radio pressed + Radio pressed when checked
.control--radio input:not([disabled]):active ~ .control__indicator:after,
.control--radio input:not([disabled]):checked:active ~ .control__indicator:after {
border-radius: $radius-circle;
height: 5px;
width: 5px;
top: 3px;
left: 3px;
}