material design checkbox

by learner001

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...

JavaScript

/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
/* globals CustomEvent */

var ripples = {
    init : function(withRipple) {
        "use strict";

        // Cross browser matches function
        function matchesSelector(dom_element, selector) {
            var matches = dom_element.matches || dom_element.matchesSelector || dom_element.webkitMatchesSelector || dom_element.mozMatchesSelector || dom_element.msMatchesSelector || dom_element.oMatchesSelector;
            return matches.call(dom_element, selector);
        }

        // animations time
        var rippleOutTime = 100,
            rippleStartTime = 500;

        // Helper to bind events on dynamically created elements
        var bind = function(event, selector, callback) {
            document.addEventListener(event, function(e) {
                var target = (typeof e.detail !== "number") ? e.detail : e.target;

                if (matchesSelector(target, selector)) {
                    callback(e, target);
                }
            });
        };

        var rippleStart = function(e, target) {

            // Init variables
            var $rippleWrapper  = target,
                $el             = $rippleWrapper.parentNode,
                $ripple         = document.createElement("div"),
                elPos           = $el.getBoundingClientRect(),
                mousePos        = {x: e.clientX - elPos.left, y: e.clientY - elPos.top},
                scale           = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
                rippleEnd       = new CustomEvent("rippleEnd", {detail: $ripple}),
                refreshElementStyle;

            $ripplecache = $ripple;

            // Set ripple class
            $ripple.className = "ripple";

            // Move ripple to the mouse position
            $ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y +...