Radio buttons

[roomfive]

Preview:

---

CSS (limited):

Regular:

/* Input & label */
margin: 3px 0;

/* Input */
width: 16px;
height: 16px;
border-radius: 100%;
background: $white;
border: 1px solid $gray300;

/* Label (normal) */
margin-left: 10px;
font: $regular2;
color: $weworkblack;

/* Checked (dot) */
height: 8px;
width: 8px;
border-radius: 100%;
background-color: $weworkblack;
top: 3px;
left: 3px;
transition: background 0.2s linear;

/* Hover (input) */
border-color: $gray200;

/* Hover (label) */
opacity: 0.7;

/* Focus (input) */
border-color: $gray200;
box-shadow: 0 0 4px 1px $gray300;

/* Focus (label) */
opacity: 0.4;

/* Error (input) */
border-color: $warningred;

/* Error (text below fieldset) */
font: $bold6;
color: $warningred;

Large:

/* Input & label */
margin: 6px 0;

/* Label (normal) */
font: $regular1;