%fieldset
.container
.svg
%input#radio-svg{:type => "radio", :name => "option"}
%div
%svg{:viewBox => "0 0 24 24"}
- 2.times do
%circle{:cx => "12", :cy => "12", :r => "8"}
%label{:for => "radio-svg"} SVG
View Compiled
// colors
$blue: #07f;
$grey: #eee;
$slate: #343434;
// gutter, padding, margin
$p: 12px;
fieldset {
.container {
display: flex;
align-items: center;
align-content: center;
}
label {
cursor: pointer;
margin-left: $p/2;
}
}
.svg {
// setup for positioning
position: relative;
overflow: hidden;
border-radius: 100%;
input {
// hides and positions the input on top of the visuals
cursor: pointer;
appearance: none;
opacity: 0;
position: absolute;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
}
div {
// radio background, darker grey
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: mix($slate, $grey, 20%);
}
svg {
position: relative;
z-index: 2;
display: block;
width: 24px;
height: 24px;
circle {
&:nth-child(1) {
// radio circle, lighter grey
fill: mix(white, $slate, 80%);
}
&:nth-child(2) {
// selected circle, hidden for now
transform-origin: center center;
transform: scale(0);
fill: $blue;
}
}
}
}
View Compiled
This Pen doesn't use any external JavaScript resources.