use more variables in Radio css

This commit is contained in:
Sérgio Ramos 2016-10-27 10:38:33 +01:00
parent 114d6a04f4
commit 0835d1c0df
1 changed files with 5 additions and 3 deletions

View File

@ -1,5 +1,7 @@
:root {
--radio-radius: 20px;
--dot-color: #646464;
--border-color: #cfd1d1;
}
.radio {
@ -18,7 +20,7 @@
content: '';
border : calc( var(--radio-radius) / 4 ) solid white;
border-radius: 50%;
box-shadow: 0 0 0 1px #cfd1d1;
box-shadow: 0 0 0 1px var(--border-color);
display: inline-block;
height: var(--radio-radius);
left: -30px;
@ -35,10 +37,10 @@
&:checked {
& ~ span:before {
background: #D8D8D8;
background: var(--dot-color);
border : calc( var(--radio-radius) / 4 ) solid white;
border-radius: 50%;
box-shadow: 0 0 0 1px #cfd1d1;
box-shadow: 0 0 0 1px var(--border-color);
height: var(--radio-radius);
position: absolute;
width: var(--radio-radius);