Webkit custom checkbox made from CSS only - no image

css-checkbox.sass

$input-size: 1.25em
$check-size: $input-size / 6
$r-check-scale: 4
$r-check-trans: (($r-check-scale - 1) / 2) * $check-size
$l-check-scale: 2.6
$l-check-trans: (($l-check-scale - 1) / 2) * $check-size

@media screen and (-webkit-min-device-pixel-ratio:0)
  input, textarea, select
    -webkit-appearance: none

  input, textarea, select
    border: 1px solid #555
    padding: 0.5em
    font-size: 15px
    line-height: 1.2em
    width: 80%
    background: #fff
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc))
    -webkit-appearance: none
    -webkit-box-shadow: 1px 1px 1px #fff
    -webkit-border-radius: 0.5em
 
  input[type=checkbox],
  input[type=radio]
    display: inline-block
    font-size: 15px
    line-height: 1em
    margin: 0 0.25em 0 1em
    padding: 0
    width: $input-size
    height: $input-size
    -webkit-border-radius: 0.25em
    vertical-align: text-top
  
  input[type=radio] 
    -webkit-border-radius: 2em
   
  input[type=checkbox]:checked
    background: -webkit-linear-gradient(black, #999)

  check
    width: $check-size
    height: $check-size
    position: absolute
    content: "\00a0"
    background-color: white
    margin-top: $input-size * .6 - ($check-size / 2)
    margin-left: $input-size * .4 - ($check-size / 2)

  input[type=checkbox]:checked:after
    @extend check
    z-index: 2
    -webkit-box-shadow: .2px 1px .5px black
    -webkit-transform: rotate(-45deg) translateX($r-check-trans) scaleX($r-check-scale) 

  input[type=checkbox]:checked:before
    @extend check
    z-index: 1
    -webkit-transform: rotate(-135deg) translateX($l-check-trans) scaleX($l-check-scale) 
    -webkit-box-shadow: .3px -1px 1px black