Forked from White Wolf Wizard's Pen Radio & Checkbox.
A Pen by Jordan Halvorsen on CodePen.
%form | |
.frame | |
%input#radio_1{:type=>'radio',:name=>'radio',:checked=>'checked'} | |
%label.radio{:for=>'radio_1'} <i class="fa fa-times"></i> | |
%input#radio_2{:type=>'radio',:name=>'radio'} | |
%label.radio{:for=>'radio_2'} <i class="fa fa-times"></i> | |
%input#radio_3{:type=>'radio',:name=>'radio'} | |
%label.radio{:for=>'radio_3'} <i class="fa fa-times"></i> | |
%input#radio_4{:type=>'radio',:name=>'radio'} | |
%label.radio{:for=>'radio_4'} <i class="fa fa-times"></i> | |
%input#radio_5{:type=>'radio',:name=>'radio'} | |
%label.radio{:for=>'radio_5'} <i class="fa fa-times"></i> | |
.frame | |
%input#check_1{:type=>'checkbox',:name=>'check',:checked=>'checked'} | |
%label.check{:for=>'check_1'} <i class="fa fa-check"></i> | |
%input#check_2{:type=>'checkbox',:name=>'check'} | |
%label.check{:for=>'check_2'} <i class="fa fa-check"></i> | |
%input#check_3{:type=>'checkbox',:name=>'check'} | |
%label.check{:for=>'check_3'} <i class="fa fa-check"></i> | |
%input#check_4{:type=>'checkbox',:name=>'check'} | |
%label.check{:for=>'check_4'} <i class="fa fa-check"></i> | |
%input#check_5{:type=>'checkbox',:name=>'check'} | |
%label.check{:for=>'check_5'} <i class="fa fa-check"></i> |
Forked from White Wolf Wizard's Pen Radio & Checkbox.
A Pen by Jordan Halvorsen on CodePen.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css); | |
$accent: #369; $speed: .3s; $ease: ease-in-out; | |
form { | |
width: 100vw; height: 100vh; | |
display: flex; | |
flex-flow: column wrap; | |
justify-content: center; | |
align-items: center; | |
.frame { | |
display: flex; | |
flex-flow: row nowrap; | |
input { display: none; } | |
label { | |
cursor: pointer; | |
position: relative; | |
width: 30px; height: 30px; | |
margin: 10px; | |
background: $accent; | |
transition: all $speed $ease; | |
font-size: 12pt; | |
color: #FFF; | |
font-smoothing: antialiased; | |
&.radio { border-radius: 100%; } | |
&.check { border-radius: 5px; } | |
.fa { | |
position: absolute; | |
top: 0; left: 0; right: 0; bottom: 0; | |
opacity: 0; | |
transform: scale(0); | |
transition: all $speed $ease; | |
line-height: 30px; | |
text-align: center; | |
} | |
} | |
input:checked + label { background: shade($accent,15%); | |
.fa { opacity: 1; transform: scale(1); } | |
} | |
} | |
} |