// Fancy Checkboxes
.fancycheckbox {
display: inline-block;
padding-right: 5px;
padding-top: 3px;
input[type=checkbox] {
display: none;
}
&.is-block {
margin: .5em .2em;
.check {
cursor: pointer;
position: relative;
margin: auto;
width: 18px;
height: 18px;
-webkit-tap-highlight-color: transparent;
transform: translate3d(0, 0, 0);
&:hover svg {
stroke: $primary;
span {
font-size: 0.8em;
vertical-align: top;
padding-left: .5em;
svg {
z-index: 1;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke: #c8ccd4;
stroke-width: 1.5;
transition: all 0.2s ease;
path {
stroke-dasharray: 60;
stroke-dashoffset: 0;
polyline {
stroke-dasharray: 22;
stroke-dashoffset: 66;
&.is-disabled .check:hover svg {
input[type=checkbox]:checked + .check svg {
input[type=checkbox]:checked + .check svg path {
stroke-dashoffset: 60;
transition: all 0.3s linear;
input[type=checkbox]:checked + .check svg polyline {
stroke-dashoffset: 42;
transition: all 0.2s linear;
transition-delay: 0.15s;