.label-radio {
padding: 6px 0; cursor: pointer; margin-right: 25px; vertical-align: middle; color: #3c4257; font-size: 14px; .radio + span { position: relative; margin-left: 4px; }
} label.radio {
margin-bottom: initial;
} .radio {
transform: translateY(3px); &.focus { @include focus-outline; } border-radius: 100%; $size: 14px; @include size($size); cursor: pointer; transform: translateY(2px); position: relative; display: inline-block; input[type="radio"] { @include size($size); cursor: pointer; opacity: 0; position: absolute; display: block; bottom: 0; &:checked ~ .icon-radio:after { transform: translateY(0) scale(1); opacity: 1; } } .icon-radio { // prevent overriden by icomoon font-family: inherit !important; line-height: initial !important; &:before { content: '' } transform: translateY(-1px); background-color: #fff; border: 0; border-radius: 50%; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .12), 0 0 0 1px rgba(60, 66, 87, .16), 0 2px 5px 0 rgba(60, 66, 87, .3); @include size(100%); display: inline-block; &:after { transition: .3s all; border-radius: 50%; background-color: #6772e5; @include size(10px); position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; content: ''; display: block; transform: translateY(0) scale(0); opacity: 0; } } @include ripple(34px, -10px, -9px); &.disabled { @extend %radio-disabled; }
}