<form> 
  <h1>ANIMATED TOGGLES! <span>Fun exapmple of what we can do with just CSS, to make boring input elements fun again!!</span></h1>
  <div class="controls">
      <h1>Check Boxes</h1>
    <input id='check-1' type="checkbox" name='check-1' checked='checked' />
    <label for="check-1">Apples</label>
    
     <input id='check-2' type="checkbox" name='check-1' />
    <label for="check-2">Oranges</label>
  </div>
  
  
  <div class="controls">
      <h1>Radio Boxes</h1>
    <input id='radio-1' type="radio" name='r-group-1' checked='checked' />
    <label for="radio-1">Day</label>
    
    <input id='radio-2' type="radio" name='r-group-1' />
    <label for="radio-2">Night</label>
  </div>
    
  <div class="controls">
     <h1>Toggles</h1>
    <input class='toggle' type="checkbox" name='check-3' checked='checked' />
    <input class='toggle' type="checkbox" name='check-4' />
  </div>
</form>

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
$base: #158EC6;
$whiteLight: #fafafa;
body{
  font-family: 'Open Sans', sans-serif;
  font-weight:300;
  background:lighten($base, 20%);
  color:#fff;
  padding-top:20px;
}

form{
  width:80%;
  margin:0 auto;
}
h1{
  font-size:30px;
  line-height:3;
  text-align: center;
  font-weight:700;
  line-height:1;
  margin-bottom:30px;
  span{
    margin-top:10px;
    display:block;
    font-weight:300;
    font-size:70%;
    line-height:1.2;
  }
}
div.controls{
  margin-bottom:12px;
  border: 1px dotted $whiteLight;
  padding:25px 20px;
  position:relative;
  margin-bottom:20px;
  h1{
    font-size:18px;
    font-weight:400;
    line-height:1;
    text-transform: uppercase;
    display: inline-block;
    position:absolute;
    left: 10px;
    top:-10px;
    padding:0 10px;
    color: $whiteLight;
    background-color:lighten($base, 20%);;
  }
}

//begin custom input styles
input[type='radio'],
input[type='checkbox']{
  display:none; //hide by default
  cursor:pointer; //make the cursor a pointer when over the items
  &:focus,
  &:active{
    outline:none;  //remove the annoying outline
  }
 & + label{
   cursor:pointer; 
   display:inline-block;
   position: relative;
   padding-left:25px;
   margin-right:10px;
   color: darken($base, 20%);
   &:before,
   &:after{
    content:'';
    font-family: helvetica;
    display:inline-block;
    width:18px;
    height:18px;      
    left:0;
    bottom:0;
    text-align:center;
    position: absolute;
    }
   &:before{
    background-color:$whiteLight;
    @include transition(all .3s ease-in-out);
   }
   &:after{
    color:#fff;
    }
  }
  &:checked + label:before{
    @include box-shadow(inset 0 0 0 10px $base);    
  }
}

/*Radio Specific styles*/
input[type='radio']{
  & + label:before{
    @include border-radius(50%);
  }
  & + label:hover:after,
  &:checked + label:after{
     content:'\2022';
      position:absolute;
      top:0px;
      font-size:19px;
      line-height:15px;
  }
   & + label:hover:after{
    color:darken($whiteLight, 20%);  
  }
   &:checked + label:after,
   &:checked + label:hover:after{
    color:#fff;
  }
}

/*Checkbox Specific styles*/
input[type='checkbox']{
   & + label:before{
     @include border-radius(3px); 
  }
  
  & + label:hover:after,
  &:checked + label:after{
    content:"\2713";
    line-height:18px;
    font-size:14px;
  }
  & + label:hover:after{
    color:darken($whiteLight, 20%);  
  }
  &:checked + label:after,
  &:checked + label:hover:after{
    color:#fff;
  }
}

/*Toggle Specific styles*/
input[type='checkbox']{
 &.toggle{
    display:inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    width:55px;
    height:28px;
    background-color:$whiteLight;
    position: relative;
    @include border-radius(30px);
    @inlcude box-shadow(none);
    @include transition(all .2s ease-in-out);
    &:hover:after{
     background-color: darken($whiteLight, 20%);
    }
    &:after{      
      content:'';
      display:inline-block;
      position:absolute;
      width:24px;
      height:24px;
      background-color:darken($whiteLight, 30%);
      top:2px;
      left:2px;
      @include border-radius(50%);
      @include transition(all .2s ease-in-out);
    }
  }
  &:checked.toggle{
    @include box-shadow(inset 0 0 0 15px $base);
    &:after{
      left:29px;
      background-color:#fff;
    }
  }
}