Pure CSS3 lightsaber checkbox

May the force be with you

by vucko

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
<div id="lightsaber">
    <input type="checkbox" id="trigger" />
    <label for="trigger" class="handle">
        <span class="first">
            <span></span>
            <span></span>
            <span></span>
        </span><!--
     --><span class="second">
            <span></span><!--
         --><span></span><!--
         --><span></span><!--
         --><span></span>
        </span><!--
     --><span class="third"></span><!--
     --><span class="fourth">
            <span>
                <span class="red-light">
                    <span></span>
                </span>
                <span class="button"></span>
            </span> 
        </span><!--
     --><span class="fifth"></span><!--
     --><span class="sixth"></span>
    </label>
    <label class="blade"></label>
</div>

SCSS

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
          border-radius: $radius;
}

@mixin transition($transition-property, $transition-time, $method) {
    -webkit-transition: $transition-property $transition-time $method;
       -moz-transition: $transition-property $transition-time $method;
        -ms-transition: $transition-property $transition-time $method;
         -o-transition: $transition-property $transition-time $method;
            transition: $transition-property $transition-time $method;
     -webkit-transform: translate3d(0, 0, 0);
     -webkit-backface-visibility: hidden;
}

.inline{
    display:inline-block;
    vertical-align: top;
}

#lightsaber{

    -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    -moz-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    -ms-transform: rotate(-45deg); /* IE 9 */
    -o-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    transform: rotate(-45deg);
    
    >#trigger{
        display:none;
    }
   
    .handle{
        @extend .inline;
        cursor: pointer;
        height: 30px;
        position: relative;
        z-index: 10;
        
        
        >span{
            &.first{
                @extend .inline;
                @include border-radius(5px);
                    
                width: 50px;
                height: 100%;
                background: #5e585d; /* Old browsers */
                /* IE9 SVG, needs conditional override of 'filter' to 'none' */
                background:...

JavaScript

// google-ing "lightsaber" this image shower as the first result:
// http://goo.gl/yxJ9hD
// so I decided to make it using only CSS3

// I used:
// Normalize.css: http://necolas.github.io/normalize.css/
// Paul Irish's border-sizing: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
// SASS: http://sass-lang.com/

// Why am I commenting in HTML?
// Because I'm using `display:inline-block` -> http://stackoverflow.com/a/18262352/1763929

// Also I used this tool for the linear gradient's
// http://www.colorzilla.com/gradient-editor/

// Hope you like it :)