72 lines
1.3 KiB
SCSS
72 lines
1.3 KiB
SCSS
// Radio Button styles
|
|
// ----------------------------------------------
|
|
|
|
/* SG
|
|
# Forms/Radio2
|
|
|
|
|
|
```
|
|
<input class="CDB-Radio" type="radio" name="Gender" value="01" checked>
|
|
<input class="CDB-Radio" type="radio" name="Gender" value="02">
|
|
<input class="CDB-Radio" type="radio" name="Gender" value="03" disabled>
|
|
```
|
|
*/
|
|
|
|
@import '../../cdb-variables/sizes';
|
|
@import '../../cdb-variables/colors';
|
|
|
|
.CDB-Radio {
|
|
position: relative;
|
|
width: $baseSize * 2;
|
|
height: $baseSize * 2;
|
|
border: 1px solid $cMainLine;
|
|
border-radius: 50%;
|
|
|
|
&:before {
|
|
display: block;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: $baseSize - 2;
|
|
height: $baseSize - 2;
|
|
margin-top: -3px;
|
|
margin-left: -3px;
|
|
border-radius: 50%;
|
|
background: $cSecondaryLine;
|
|
content: '';
|
|
}
|
|
|
|
&:checked {
|
|
border: 1px solid $cBlue;
|
|
background: $cBlue;
|
|
|
|
&:hover {
|
|
border: 1px solid $cBlue;
|
|
}
|
|
|
|
&:before {
|
|
background: $cWhite;
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
border: 1px solid $cBlue;
|
|
}
|
|
|
|
&:hover {
|
|
border: 1px solid $cHoverLine;
|
|
}
|
|
|
|
&:disabled {
|
|
border: 1px solid $cSecondaryLine;
|
|
background: $cThirdBackground;
|
|
|
|
&:hover {
|
|
border: 1px solid $cSecondaryLine;
|
|
}
|
|
|
|
&:before {
|
|
background: $cWhite;
|
|
}
|
|
}
|
|
} |