material design checkbox

by bizamajig

HTML

<div class="container">
      <div class="checkbox"><label><input type="checkbox">Checkbox</label></div>
      
      <div class="form-group">
        <div class="checkbox"><label><input type="checkbox">form group</label></div>
      </div>
      
      <div class="input-group">
        <div class="checkbox"><label><input type="checkbox">input group</label></div>
      </div>
      
      <form class="form">
        <div class="form-group">
          <div class="checkbox"><label><input type="checkbox">form</label></div>
        </div>
      </form>
      
      <form class="form-horizontal">
        <div class="form-group">
          <div class="checkbox"><label><input type="checkbox">form horizontal</label></div>
        </div>
      </form>
      
      <div class="form-group">
        <div class="checkbox checkbox-inline"><label><input type="checkbox">inline</label></div>
        <div class="checkbox checkbox-inline"><label><input type="checkbox">inline</label></div>
        <div class="checkbox checkbox-inline"><label><input type="checkbox">inline</label></div>
      </div>
      
      <div class="input-group">
        <span class="input-group-addon">
          <div class="checkbox"><label><input type="checkbox"></label></div>
        </span>
        <input type="text" value="input group addon">
      </div>
    </div>

CSS

@-webkit-keyframes input-highlight {
  0% {
    left: 20%;
    width: 20%;
  }
  99% {
    width: 0;
    left: 0;
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes input-highlight {
  0% {
    left: 20%;
    width: 20%;
  }
  99% {
    width: 0;
    left: 0;
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes input-highlight {
  0% {
    left: 20%;
    width: 20%;
  }
  99% {
    width: 0;
    left: 0;
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.shadow-z-1 {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.shadow-z-2 {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.shadow-z-2-hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28);
}
.shadow-z-3 {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.shadow-z-4 {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.shadow-z-5 {
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}
body {
  background-color: #EEEEEE;
}
body.inverse {
  background: #333333;
}
body.inverse,
body.inverse .form-control {
  color: rgba(255, 255, 255, 0.84);
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body .well,
.container .well,
.container-fluid .well,
body .well:not([class^="well well-material-"]),
.container .well:not([class^="well well-material-"]),
.container-fluid .well:not([class^="well well-material-"]),
body .well .form-control,
.container .well .form-control,
.container-fluid .well .form-control,
body .well:not([class^="well well-material-"]) .form-control,
.container .well:not([class^="well well-material-"]) .form-control,
.container-fluid .well:not([class^="well well-material-"]) .form-control {
  color: rgba(0, 0, 0, 0.84);
}
body .well .floating-label,
.container .well .floating-label,
.container-fluid .well...