You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

58 lines
1.1 KiB

$color1: #f4f4f4;
$color2: #12cf7f;
.radio {
input[type="radio"] {
position: absolute;
opacity: 0;
+ .radio-label {
&:before {
content: "";
background: $color1;
border-radius: 100%;
border: 1px solid darken($color1, 25%);
display: inline-block;
width: 1.7em;
height: 1.7em;
position: relative;
vertical-align: top;
margin-left: 0.5em;
cursor: pointer;
text-align: center;
transition: all 250ms ease;
}
}
&:checked {
+ .radio-label {
&:before {
background-color: $color2;
box-shadow: inset 0 0 0 4px $color1;
}
}
}
&:focus {
+ .radio-label {
&:before {
outline: none;
border-color: $color2;
}
}
}
&:disabled {
+ .radio-label {
&:before {
box-shadow: inset 0 0 0 4px $color1;
border-color: darken($color1, 25%);
background: darken($color1, 25%);
}
}
}
+ .radio-label {
&:empty {
&:before {
margin-right: 0;
}
}
}
}
}