checkbox.css

/* @override http://localhost:8080/checkbox.css */

/* @group Switch */

*{
  box-sizing: border-box;
  -webkit-user-select: inherit;
}

/* Basic switch dimensions */
.checkbox-switch{
  display: block;
  height: 24px;
  width: 60px;
  position: relative;
  padding: 1px;
  overflow: hidden;
  cursor: pointer;
  -webkit-user-select: none;
}

/* @group Toggling bit */

.checkbox-switch div{
  width: 24px;
  height: 22px;
  border-radius: 5px;
  position: relative;

  background-color: #FFF;
  /* TODO: Make the background of the switch a grey --> green gradient, transition it as well */
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.06) 100%);

  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 240ms;
  -webkit-transition-delay: 0;
  -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);

  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(0, 0, 0, 0.05);
}

.checkbox-switch input:checked + div{
  -webkit-transform: translate3d(34px,0,0);
}

/* @end */

/* @group Track */

/* KILL IT WITH FIRE */
.checkbox-switch,
.checkbox-switch input,
.checkbox-switch:active,
.checkbox-switch input:active
{
  -webkit-appearance: none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

.checkbox-switch input{
  margin: 0;
  padding: 0;
  border:  none;
  outline: none;
  -webkit-appearance: none;

  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;

  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%) #eaeaea;
  -webkit-border-radius: 6px;
  -webkit-transition: background-color 240ms ease-in-out;

  box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.2),
    inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.checkbox-switch input:checked{
  background-color: #a9d88c;
}

/* @end */

/* @group Labels */

.checkbox-switch div:before,
.checkbox-switch div:after{
  content: "off";
  width: 26px;
  height: 24px;
  position: absolute;
  top: -1px;
  left: 100%;

  font-weight: 700;
  font-size: 10px;
  line-height: 24px;
  font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;

  text-transform: uppercase;
  padding: 0 6px;
  letter-spacing: 0px;
  text-shadow: 0 1px 1px rgb(255, 255, 255);
  color: #AAA;
  -webkit-user-select: none;
  -webkit-transform: translate3d(0,0,0);
}

.checkbox-switch div:before{
  content: "on";
  text-align: right;
  left: auto;
  right: 100%;
  padding-right: 7px;
  color: #FFF;
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

/* @end */

/* @group Click animation */

.checkbox-switch input:active + div,
.checkbox-switch div:active{
  /* TODO: get this right */
  -webkit-transition-delay: 100ms;
  -webkit-transform: translate3d(3px,0,0);
}

.checkbox-switch input:checked:active + div,
.checkbox-switch input:checked + div:active{
  -webkit-transform: translate3d(31px,0,0);
}

/* @end */

/* @end */

/* @group Extra */

body,html{
  background: #EEE;
  margin: 0;
  -webkit-text-size-adjust: 100%;
}

.checkbox-container{
  background: #FFF;
  border-radius: 6px;

  /* Here's a gross center-in-page hack */
  width: 100px;
  height: 64px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(0, 0, 0, 0.03);
}

.checkbox-switch{
  /* More of that voodoo magic */
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* @end */