%h1 CSS checkbox toggle
%h2 A full css checkbox button
%hr

.checkbox
  %label.checkbox__container
    %input.checkbox__toggle{:type => "checkbox"}
    %span.checkbox__checker
    %span.checkbox__cross
    %span.checkbox__ok
    %svg.checkbox__bg{:space => "preserve", :style => "enable-background:new 0 0 110 43.76;", :version => "1.1", :viewbox => "0 0 110 43.76"}
      %path.shape{:d => "M88.256,43.76c12.188,0,21.88-9.796,21.88-21.88S100.247,0,88.256,0c-15.745,0-20.67,12.281-33.257,12.281,S38.16,0,21.731,0C9.622,0-0.149,9.796-0.149,21.88s9.672,21.88,21.88,21.88c17.519,0,20.67-13.384,33.263-13.384,S72.784,43.76,88.256,43.76z"}
      
.checkbox
  %label.checkbox__container
    %input.checkbox__toggle{:type => "checkbox"}
    %span.checkbox__checker
    %span.checkbox__txt-left On
    %span.checkbox__txt-right Off
    %svg.checkbox__bg{:space => "preserve", :style => "enable-background:new 0 0 110 43.76;", :version => "1.1", :viewbox => "0 0 110 43.76"}
      %path.shape{:d => "M88.256,43.76c12.188,0,21.88-9.796,21.88-21.88S100.247,0,88.256,0c-15.745,0-20.67,12.281-33.257,12.281,S38.16,0,21.731,0C9.622,0-0.149,9.796-0.149,21.88s9.672,21.88,21.88,21.88c17.519,0,20.67-13.384,33.263-13.384,S72.784,43.76,88.256,43.76z"}

      
%hr

%footer
  %a.link{:href => "http://timguignard.com", :target => "_blank"} timguignard.com

       

//GLOBAL PRESENTATION
body{
  background-color: #eee;
  padding-top: 40px;
}
h1{
  text-align: center;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
h2{
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

hr{
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 50px;
}
footer{
  text-align: center;
  padding-bottom: 50px;
}
.link{
  text-align: center;
  color: #278fb2;
}
//end global



//extend
.ext-cross{
  &:before, &:after{
    content:"";
    display: block;
    position: absolute;
    width: 14px;
    height: 2px;
    margin: 0 auto;
    top: 20px;
    left: 0;
    right: 0;
    background-color: #bf1e1e;
    border-radius: 5px;
    transition-duration: .3s;
  }
  &:before{
    transform: rotateZ(45deg);
  }
  &:after{
    transform: rotateZ(-45deg);
  }
}
.ext-ok{
  &:before, &:after{
    background-color: #0cb018;
  }
  &:before{
    width: 6px;
    top: 23px;
    left: -7px;
  }
  &:after{
    width: 12px;
    left: 5px;
  }
}

//checkbox
.checkbox{
  width: 100px;
  margin: 0 auto 30px auto;
  &__container{
    display: block;
    position: relative;
    height: 42px;
    cursor: pointer;
  }
  &__toggle{
    display: none;
    &:checked + .checkbox__checker{
      left: calc(100% - 43px);
      transform: rotateZ(360deg);
      
      @extend .ext-ok;
    }
  }
  &__checker, &__cross, &__ok{
    display: block;
    position: absolute;
    height: 43px;
    width: 43px;
    top: -1px;
    left: 0px;
    z-index: 1;
    @extend .ext-cross;
  }
  &__checker{
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0px 2px 6px rgba(0,0,0,.5);
    transition: .3s;
     z-index: 2;
    &:before, &:after{
      transition-duration: .3s;
    }
  }
  
  &__cross, &__ok{
    &:before, &:after{
      background-color: #ddd;
    }
  }
  &__ok{
    @extend .ext-ok;
    left: calc(100% - 43px);
  }
  
  &__txt-left, &__txt-right{
    display: block;
    position: absolute;
    width: 42px;
    top: 15px;
    text-align: center;
    color: #fff;
    font-size: 12px;
    z-index: 1;
  }
  &__txt-right{
    right: 0px;
  }
  &__bg{
    position: absolute;
    top: 0;
    left: 0;
    fill: #aaa;
    width: 100%;
    height: 100%;
  }
}