Merge pull request #3 from FezVrasta/master

Update Fork

.gitignore

@@ -10,3 +10,4 @@ Thumbs.db
 .grunt/
 /bower_components/
 .build*
+/_SpecRunner.html

CHANGELOG.md

@@ -13,6 +13,9 @@
 - fixed #468 (thanks @MatrixZ)
 - Added :hover, :focus, :active and .active states on buttons
 - Added color variations on toggles
+- Improved shadows to better fit Material Design specs
+- Improved hover state of buttons
+- Material Checkboxes now are a single inline element `.checkbox-material`, this helps when you need to vertical align them
 
 ## v 0.2.1
 

Gruntfile.js

@@ -215,7 +215,7 @@ module.exports = function(grunt) {
       },
       less: {
         files:["less/**/*.less"],
-        tasks: ["default"]
+        tasks: ["material:less"]
       },
       livereload: {
         options: {

dist/css/material.css

@@ -2279,22 +2279,22 @@ Then, run this script to get the list.
   content: "\e8e4";
 }
 .shadow-z-1 {
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
+}
+.shadow-z-1-hover {
+  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
 }
 .shadow-z-2 {
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
-}
-.shadow-z-2-hover {
-  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
+  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 .shadow-z-3 {
-  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
+  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
 }
 .shadow-z-4 {
-  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22), 0 14px 45px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
 }
 .shadow-z-5 {
-  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.22), 0 19px 60px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
 }
 body {
   background-color: #EEEEEE;
@@ -2449,7 +2449,7 @@ body .jumbotron,
   background-color: #fff;
   padding: 19px;
   margin-bottom: 20px;
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   border-radius: 2px;
   border: 0;
 }
@@ -2701,14 +2701,14 @@ body .jumbotron-material-blue-grey,
   text-transform: uppercase;
   text-decoration: none;
   color: rgba(255, 255, 255, 0.84);
-  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: background-color 0.2s ease, box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   outline: none !important;
 }
 .btn:hover:not(.btn-link):not(.btn-flat):not(.btn-fab) {
-  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
+  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
 }
 .btn:active:not(.btn-link):not(.btn-flat):not(.btn-fab) {
-  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
+  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
 }
 .btn.btn-flat:not(.btn-link),
 .btn-default.btn-flat:not(.btn-link) {
@@ -3258,11 +3258,11 @@ body .jumbotron-material-blue-grey,
   color: #a8a8a8 !important;
 }
 .btn.btn-raised {
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
   transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .btn.btn-raised:active:not(.btn-link) {
-  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
+  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
 }
 .btn.btn-fab {
   margin: 0;
@@ -3270,7 +3270,6 @@ body .jumbotron-material-blue-grey,
   font-size: 26px;
   width: 56px;
   height: 56px;
-  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
 }
 .btn.btn-fab,
 .btn.btn-fab:hover,
@@ -3415,11 +3414,12 @@ body .jumbotron-material-blue-grey,
 .btn.btn-fab:active-material-blue-grey {
   background-color: #607d8b;
 }
+.btn.btn-fab,
 .btn.btn-fab:hover {
-  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22), 0 14px 45px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
 }
 .btn.btn-fab:active {
-  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.22), 0 19px 60px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
 }
 .btn.btn-fab,
 .btn.btn-fab .ripple-wrapper {
@@ -3549,12 +3549,12 @@ body .jumbotron-material-blue-grey,
   position: relative;
   border-radius: 2px;
   margin: 10px 1px;
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
   transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .btn-group:active:not(.btn-link),
 .btn-group-vertical:active:not(.btn-link) {
-  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
+  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
 }
 .btn-group.open .dropdown-toggle,
 .btn-group-vertical.open .dropdown-toggle {
@@ -3562,12 +3562,12 @@ body .jumbotron-material-blue-grey,
 }
 .btn-group.btn-group-raised,
 .btn-group-vertical.btn-group-raised {
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
   transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .btn-group.btn-group-raised:active:not(.btn-link),
 .btn-group-vertical.btn-group-raised:active:not(.btn-link) {
-  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
+  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
 }
 .btn-group .btn,
 .btn-group-vertical .btn,
@@ -3584,66 +3584,57 @@ body .jumbotron-material-blue-grey,
 .form-horizontal .checkbox {
   padding-top: 20px;
 }
+.checkbox {
+  -webkit-transform: translateZ(0);
+          transform: translateZ(0);
+}
 .checkbox label {
-  padding-left: 10px;
   cursor: pointer;
+  padding-left: 0;
+}
+.checkbox input[type=checkbox] {
+  opacity: 0;
+  position: absolute;
+  margin: 0;
+  z-index: -1;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  left: 0;
+  pointer-events: none;
+}
+.checkbox .checkbox-material {
+  vertical-align: middle;
   position: relative;
+  top: 3px;
 }
-.checkbox label span {
-  display: block;
-  position: absolute;
-  left: 0px;
-  transition-duration: 0.2s;
-}
-.checkbox label .ripple {
+.checkbox .checkbox-material:before {
   display: block;
   position: absolute;
+  left: 0;
   content: "";
   background-color: rgba(0, 0, 0, 0.84);
-  left: -8px;
-  top: -11px;
-  height: 50px;
-  width: 50px;
+  height: 20px;
+  width: 20px;
   border-radius: 100%;
   z-index: 1;
   opacity: 0;
   margin: 0;
+  -webkit-transform: scale(2.3);
+      -ms-transform: scale(2.3);
+          transform: scale(2.3);
 }
-.checkbox label input[type=checkbox]:not(:checked) ~ .ripple {
-  -webkit-animation: rippleOff 500ms;
-          animation: rippleOff 500ms;
-}
-.checkbox label input[type=checkbox]:checked ~ .ripple {
-  -webkit-animation: rippleOn 500ms;
-          animation: rippleOn 500ms;
-}
-.checkbox label .check {
+.checkbox .checkbox-material .check {
+  position: relative;
   display: inline-block;
   width: 20px;
   height: 20px;
   border: 2px solid;
   border-radius: 2px;
   overflow: hidden;
-  position: relative;
-  top: 5px;
-  left: -3px;
-  margin-right: 11px;
-}
-.checkbox label .check:after {
-  display: block;
-  position: absolute;
-  content: "";
-  background-color: rgba(0, 0, 0, 0.84);
-  left: -5px;
-  top: -15px;
-  height: 50px;
-  width: 50px;
-  border-radius: 100%;
   z-index: 1;
-  opacity: 0;
-  margin: 0;
 }
-.checkbox label .check:before {
+.checkbox .checkbox-material .check:before {
   position: absolute;
   content: "";
   -webkit-transform: rotate(45deg);
@@ -3655,302 +3646,302 @@ body .jumbotron-material-blue-grey,
   width: 0;
   height: 0;
   box-shadow: 0 0 0 0,
-                0 0 0 0,
-                0 0 0 0,
-                0 0 0 0,
-                0 0 0 0,
-                0 0 0 0,
-                0px 0px 0 0px inset;
-  -webkit-animation: checkbox-off 0.3s linear forwards;
-          animation: checkbox-off 0.3s linear forwards;
+        0 0 0 0,
+        0 0 0 0,
+        0 0 0 0,
+        0 0 0 0,
+        0 0 0 0,
+        0 0 0 0 inset;
+  -webkit-animation: checkbox-off 0.3s forwards;
+          animation: checkbox-off 0.3s forwards;
 }
-.checkbox input[type=checkbox] {
-  opacity: 0;
-}
-.checkbox input[type=checkbox]:focus ~ .check:after {
+.checkbox input[type=checkbox]:focus + .checkbox-material .check:after {
   opacity: 0.2;
 }
-.checkbox input[type=checkbox]:checked ~ .check:before {
+.checkbox input[type=checkbox]:checked + .checkbox-material .check:before {
   box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
-  -webkit-animation: checkbox-on 0.3s linear forwards;
-          animation: checkbox-on 0.3s linear forwards;
+  -webkit-animation: checkbox-on 0.3s forwards;
+          animation: checkbox-on 0.3s forwards;
 }
-.checkbox input[type=checkbox]:not(:checked) ~ .check:after {
-  -webkit-animation: rippleOff 500ms linear forwards;
-          animation: rippleOff 500ms linear forwards;
+.checkbox input[type=checkbox]:not(:checked) + .checkbox-material:before {
+  -webkit-animation: rippleOff 500ms;
+          animation: rippleOff 500ms;
 }
-.checkbox input[type=checkbox]:checked ~ .check:after {
-  -webkit-animation: rippleOn 500ms linear forwards;
-          animation: rippleOn 500ms linear forwards;
+.checkbox input[type=checkbox]:checked + .checkbox-material:before {
+  -webkit-animation: rippleOn 500ms;
+          animation: rippleOn 500ms;
 }
-.checkbox:not(:hover) input[type=checkbox] ~ .check:before,
-.checkbox:not(:hover) input[type=checkbox] ~ .check:after {
-  -webkit-animation-duration: 1ms;
-          animation-duration: 1ms;
+.checkbox input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
+  -webkit-animation: rippleOff 500ms forwards;
+          animation: rippleOff 500ms forwards;
 }
-.checkbox input[type=checkbox][disabled]:not(:checked) ~ .check:before,
-.checkbox input[type=checkbox][disabled] ~ .circle {
+.checkbox input[type=checkbox]:checked + .checkbox-material .check:after {
+  -webkit-animation: rippleOn 500ms forwards;
+          animation: rippleOn 500ms forwards;
+}
+.checkbox input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
+.checkbox input[type=checkbox][disabled] + .circle {
   opacity: 0.5;
 }
-.checkbox input[type=checkbox][disabled] ~ .check:after {
+.checkbox input[type=checkbox][disabled] + .checkbox-material .check:after {
   background-color: rgba(0, 0, 0, 0.84);
   -webkit-transform: rotate(-45deg);
       -ms-transform: rotate(-45deg);
           transform: rotate(-45deg);
 }
-.checkbox input[type=checkbox]:checked ~ .check:after,
-.checkbox-default input[type=checkbox]:checked ~ .check:after {
+.checkbox input[type=checkbox]:checked + .checkbox-material .check:after,
+.checkbox-default input[type=checkbox]:checked + .checkbox-material .check:after {
   background-color: #0f9d58;
 }
-.checkbox-black input[type=checkbox]:checked ~ .check:after {
+.checkbox-black input[type=checkbox]:checked + .checkbox-material .check:after {
   background-color: #000000;
 }
-.checkbox-white input[type=checkbox]:checked ~ .check:after {
+.checkbox-white input[type=checkbox]:checked + .checkbox-material .check:after {
   background-color: #ffffff;
 }
-.checkbox-inverse input[type=checkbox]:checked ~ .check:after {
+.checkbox-inverse input[type=checkbox]:checked + .checkbox-material .check:after {
   background-color: #3f51b5;
 }
-.checkbox-primary input[type=checkbox]:checked ~ .check:after {
+.checkbox-primary input[type=checkbox]:checked + .checkbox-material .check:after {
   background-color: #009587;
 }
-.checkbox-success input[type=checkbox]:checked ~ .check:after {
+.checkbox-success input[type=checkbox]:checked + .checkbox-material .check:after {
   background-color: #0f9d58;
 }
-.checkbox-info input[type=checkbox]:checked ~ .check:after {
+.checkbox-info input[type=checkbox]:checked + .checkbox-material .check:after {
   background-color: #03a9f4;
 }
-.checkbox-warning input[type=checkbox]:checked ~ .check:after {
+.checkbox-warning input[type=checkbox]:checked + .checkbox-material .check:after {
   background-color: #ff5722;
 }
-.checkbox-danger input[type=checkbox]:checked ~ .check:after {
+.checkbox-danger input[type=checkbox]:checked + .checkbox-material .check:after {
   background-color: #f44336;
 }
-.checkbox-material-red input[type=checkbox]:checked ~ .check:after {
+.checkbox-material-red input[type=checkbox]:checked + .checkbox-material .check:after {
   background-color: #f44336;
 }
-.checkbox-material-pink input[type=checkbox]:checked ~ .check:after {
+.checkbox-material-pink input[type=checkbox]:checked + .checkbox-material .check:after {
   background-color: #e91e63;
 }
-.checkbox-material-purple input[type=checkbox]:checked ~ .check:after {
+.checkbox-material-purple input[type=checkbox]:checked + .checkbox-material .check:after {
   background-color: #9c27b0;
 }
-.checkbox-material-deep-purple input[type=checkbox]:checked ~ .check:after {
+.checkbox-material-deep-purple input[type=checkbox]:checked + .checkbox-material .check:after {
   background-color: #673ab7;
 }
-.checkbox-material-indigo input[type=checkbox]:checked ~ .check:after {
+.checkbox-material-indigo input[type=checkbox]:checked + .checkbox-material .check:after {
   background-color: #3f51b5;
 }
-.checkbox-material-blue input[type=checkbox]:checked ~ .check:after {
+.checkbox-material-blue input[type=checkbox]:checked + .checkbox-material .check:after {
   background-color: #2196f3;
 }
-.checkbox-material-light-blue input[type=checkbox]:checked ~ .check:after {
+.checkbox-material-light-blue input[type=checkbox]:checked + .checkbox-material .check:after {
   background-color: #03a9f4;
 }
-.checkbox-material-cyan input[type=checkbox]:checked ~ .check:after {
+.checkbox-material-cyan input[type=checkbox]:checked + .checkbox-material .check:after {
   background-color: #00bcd4;
 }
-.checkbox-material-teal input[type=checkbox]:checked ~ .check:after {
+.checkbox-material-teal input[type=checkbox]:checked + .checkbox-material .check:after {
   background-color: #009688;
 }
-.checkbox-material-green input[type=checkbox]:checked ~ .check:after {
+.checkbox-material-green input[type=checkbox]:checked + .checkbox-material .check:after {
   background-color: #4caf50;
 }
-.checkbox-material-light-green input[type=checkbox]:checked ~ .check:after {
+.checkbox-material-light-green input[type=checkbox]:checked + .checkbox-material .check:after {
   background-color: #8bc34a;
 }
-.checkbox-material-lime input[type=checkbox]:checked ~ .check:after {
+.checkbox-material-lime input[type=checkbox]:checked + .checkbox-material .check:after {
   background-color: #cddc39;
 }
-.checkbox-material-yellow input[type=checkbox]:checked ~ .check:after {
+.checkbox-material-yellow input[type=checkbox]:checked + .checkbox-material .check:after {
   background-color: #ffeb3b;
 }
-.checkbox-material-amber input[type=checkbox]:checked ~ .check:after {
+.checkbox-material-amber input[type=checkbox]:checked + .checkbox-material .check:after {
   background-color: #ffc107;
 }
-.checkbox-material-orange input[type=checkbox]:checked ~ .check:after {
+.checkbox-material-orange input[type=checkbox]:checked + .checkbox-material .check:after {
   background-color: #ff9800;
 }
-.checkbox-material-deep-orange input[type=checkbox]:checked ~ .check:after {
+.checkbox-material-deep-orange input[type=checkbox]:checked + .checkbox-material .check:after {
   background-color: #ff5722;
 }
-.checkbox-material-brown input[type=checkbox]:checked ~ .check:after {
+.checkbox-material-brown input[type=checkbox]:checked + .checkbox-material .check:after {
   background-color: #795548;
 }
-.checkbox-material-grey input[type=checkbox]:checked ~ .check:after {
+.checkbox-material-grey input[type=checkbox]:checked + .checkbox-material .check:after {
   background-color: #9e9e9e;
 }
-.checkbox-material-blue-grey input[type=checkbox]:checked ~ .check:after {
+.checkbox-material-blue-grey input[type=checkbox]:checked + .checkbox-material .check:after {
   background-color: #607d8b;
 }
-.checkbox input[type=checkbox]:checked ~ .check:before,
-.checkbox-default input[type=checkbox]:checked ~ .check:before {
+.checkbox input[type=checkbox]:checked + .checkbox-material .check:before,
+.checkbox-default input[type=checkbox]:checked + .checkbox-material .check:before {
   color: #4caf50;
 }
-.checkbox-black input[type=checkbox]:checked ~ .check:before {
+.checkbox-black input[type=checkbox]:checked + .checkbox-material .check:before {
   color: #000000;
 }
-.checkbox-white input[type=checkbox]:checked ~ .check:before {
+.checkbox-white input[type=checkbox]:checked + .checkbox-material .check:before {
   color: #ffffff;
 }
-.checkbox-inverse input[type=checkbox]:checked ~ .check:before {
+.checkbox-inverse input[type=checkbox]:checked + .checkbox-material .check:before {
   color: #3f51b5;
 }
-.checkbox-primary input[type=checkbox]:checked ~ .check:before {
+.checkbox-primary input[type=checkbox]:checked + .checkbox-material .check:before {
   color: #009587;
 }
-.checkbox-success input[type=checkbox]:checked ~ .check:before {
+.checkbox-success input[type=checkbox]:checked + .checkbox-material .check:before {
   color: #0f9d58;
 }
-.checkbox-info input[type=checkbox]:checked ~ .check:before {
+.checkbox-info input[type=checkbox]:checked + .checkbox-material .check:before {
   color: #03a9f4;
 }
-.checkbox-warning input[type=checkbox]:checked ~ .check:before {
+.checkbox-warning input[type=checkbox]:checked + .checkbox-material .check:before {
   color: #ff5722;
 }
-.checkbox-danger input[type=checkbox]:checked ~ .check:before {
+.checkbox-danger input[type=checkbox]:checked + .checkbox-material .check:before {
   color: #f44336;
 }
-.checkbox-material-red input[type=checkbox]:checked ~ .check:before {
+.checkbox-material-red input[type=checkbox]:checked + .checkbox-material .check:before {
   color: #f44336;
 }
-.checkbox-material-pink input[type=checkbox]:checked ~ .check:before {
+.checkbox-material-pink input[type=checkbox]:checked + .checkbox-material .check:before {
   color: #e91e63;
 }
-.checkbox-material-purple input[type=checkbox]:checked ~ .check:before {
+.checkbox-material-purple input[type=checkbox]:checked + .checkbox-material .check:before {
   color: #9c27b0;
 }
-.checkbox-material-deep-purple input[type=checkbox]:checked ~ .check:before {
+.checkbox-material-deep-purple input[type=checkbox]:checked + .checkbox-material .check:before {
   color: #673ab7;
 }
-.checkbox-material-indigo input[type=checkbox]:checked ~ .check:before {
+.checkbox-material-indigo input[type=checkbox]:checked + .checkbox-material .check:before {
   color: #3f51b5;
 }
-.checkbox-material-blue input[type=checkbox]:checked ~ .check:before {
+.checkbox-material-blue input[type=checkbox]:checked + .checkbox-material .check:before {
   color: #2196f3;
 }
-.checkbox-material-light-blue input[type=checkbox]:checked ~ .check:before {
+.checkbox-material-light-blue input[type=checkbox]:checked + .checkbox-material .check:before {
   color: #03a9f4;
 }
-.checkbox-material-cyan input[type=checkbox]:checked ~ .check:before {
+.checkbox-material-cyan input[type=checkbox]:checked + .checkbox-material .check:before {
   color: #00bcd4;
 }
-.checkbox-material-teal input[type=checkbox]:checked ~ .check:before {
+.checkbox-material-teal input[type=checkbox]:checked + .checkbox-material .check:before {
   color: #009688;
 }
-.checkbox-material-green input[type=checkbox]:checked ~ .check:before {
+.checkbox-material-green input[type=checkbox]:checked + .checkbox-material .check:before {
   color: #4caf50;
 }
-.checkbox-material-light-green input[type=checkbox]:checked ~ .check:before {
+.checkbox-material-light-green input[type=checkbox]:checked + .checkbox-material .check:before {
   color: #8bc34a;
 }
-.checkbox-material-lime input[type=checkbox]:checked ~ .check:before {
+.checkbox-material-lime input[type=checkbox]:checked + .checkbox-material .check:before {
   color: #cddc39;
 }
-.checkbox-material-yellow input[type=checkbox]:checked ~ .check:before {
+.checkbox-material-yellow input[type=checkbox]:checked + .checkbox-material .check:before {
   color: #ffeb3b;
 }
-.checkbox-material-amber input[type=checkbox]:checked ~ .check:before {
+.checkbox-material-amber input[type=checkbox]:checked + .checkbox-material .check:before {
   color: #ffc107;
 }
-.checkbox-material-orange input[type=checkbox]:checked ~ .check:before {
+.checkbox-material-orange input[type=checkbox]:checked + .checkbox-material .check:before {
   color: #ff9800;
 }
-.checkbox-material-deep-orange input[type=checkbox]:checked ~ .check:before {
+.checkbox-material-deep-orange input[type=checkbox]:checked + .checkbox-material .check:before {
   color: #ff5722;
 }
-.checkbox-material-brown input[type=checkbox]:checked ~ .check:before {
+.checkbox-material-brown input[type=checkbox]:checked + .checkbox-material .check:before {
   color: #795548;
 }
-.checkbox-material-grey input[type=checkbox]:checked ~ .check:before {
+.checkbox-material-grey input[type=checkbox]:checked + .checkbox-material .check:before {
   color: #9e9e9e;
 }
-.checkbox-material-blue-grey input[type=checkbox]:checked ~ .check:before {
+.checkbox-material-blue-grey input[type=checkbox]:checked + .checkbox-material .check:before {
   color: #607d8b;
 }
-.checkbox input[type=checkbox]:checked ~ .check,
-.checkbox-default input[type=checkbox]:checked ~ .check {
+.checkbox input[type=checkbox]:checked + .checkbox-material .check,
+.checkbox-default input[type=checkbox]:checked + .checkbox-material .check {
   color: #4caf50;
 }
-.checkbox-black input[type=checkbox]:checked ~ .check {
+.checkbox-black input[type=checkbox]:checked + .checkbox-material .check {
   color: #000000;
 }
-.checkbox-white input[type=checkbox]:checked ~ .check {
+.checkbox-white input[type=checkbox]:checked + .checkbox-material .check {
   color: #ffffff;
 }
-.checkbox-inverse input[type=checkbox]:checked ~ .check {
+.checkbox-inverse input[type=checkbox]:checked + .checkbox-material .check {
   color: #3f51b5;
 }
-.checkbox-primary input[type=checkbox]:checked ~ .check {
+.checkbox-primary input[type=checkbox]:checked + .checkbox-material .check {
   color: #009587;
 }
-.checkbox-success input[type=checkbox]:checked ~ .check {
+.checkbox-success input[type=checkbox]:checked + .checkbox-material .check {
   color: #0f9d58;
 }
-.checkbox-info input[type=checkbox]:checked ~ .check {
+.checkbox-info input[type=checkbox]:checked + .checkbox-material .check {
   color: #03a9f4;
 }
-.checkbox-warning input[type=checkbox]:checked ~ .check {
+.checkbox-warning input[type=checkbox]:checked + .checkbox-material .check {
   color: #ff5722;
 }
-.checkbox-danger input[type=checkbox]:checked ~ .check {
+.checkbox-danger input[type=checkbox]:checked + .checkbox-material .check {
   color: #f44336;
 }
-.checkbox-material-red input[type=checkbox]:checked ~ .check {
+.checkbox-material-red input[type=checkbox]:checked + .checkbox-material .check {
   color: #f44336;
 }
-.checkbox-material-pink input[type=checkbox]:checked ~ .check {
+.checkbox-material-pink input[type=checkbox]:checked + .checkbox-material .check {
   color: #e91e63;
 }
-.checkbox-material-purple input[type=checkbox]:checked ~ .check {
+.checkbox-material-purple input[type=checkbox]:checked + .checkbox-material .check {
   color: #9c27b0;
 }
-.checkbox-material-deep-purple input[type=checkbox]:checked ~ .check {
+.checkbox-material-deep-purple input[type=checkbox]:checked + .checkbox-material .check {
   color: #673ab7;
 }
-.checkbox-material-indigo input[type=checkbox]:checked ~ .check {
+.checkbox-material-indigo input[type=checkbox]:checked + .checkbox-material .check {
   color: #3f51b5;
 }
-.checkbox-material-blue input[type=checkbox]:checked ~ .check {
+.checkbox-material-blue input[type=checkbox]:checked + .checkbox-material .check {
   color: #2196f3;
 }
-.checkbox-material-light-blue input[type=checkbox]:checked ~ .check {
+.checkbox-material-light-blue input[type=checkbox]:checked + .checkbox-material .check {
   color: #03a9f4;
 }
-.checkbox-material-cyan input[type=checkbox]:checked ~ .check {
+.checkbox-material-cyan input[type=checkbox]:checked + .checkbox-material .check {
   color: #00bcd4;
 }
-.checkbox-material-teal input[type=checkbox]:checked ~ .check {
+.checkbox-material-teal input[type=checkbox]:checked + .checkbox-material .check {
   color: #009688;
 }
-.checkbox-material-green input[type=checkbox]:checked ~ .check {
+.checkbox-material-green input[type=checkbox]:checked + .checkbox-material .check {
   color: #4caf50;
 }
-.checkbox-material-light-green input[type=checkbox]:checked ~ .check {
+.checkbox-material-light-green input[type=checkbox]:checked + .checkbox-material .check {
   color: #8bc34a;
 }
-.checkbox-material-lime input[type=checkbox]:checked ~ .check {
+.checkbox-material-lime input[type=checkbox]:checked + .checkbox-material .check {
   color: #cddc39;
 }
-.checkbox-material-yellow input[type=checkbox]:checked ~ .check {
+.checkbox-material-yellow input[type=checkbox]:checked + .checkbox-material .check {
   color: #ffeb3b;
 }
-.checkbox-material-amber input[type=checkbox]:checked ~ .check {
+.checkbox-material-amber input[type=checkbox]:checked + .checkbox-material .check {
   color: #ffc107;
 }
-.checkbox-material-orange input[type=checkbox]:checked ~ .check {
+.checkbox-material-orange input[type=checkbox]:checked + .checkbox-material .check {
   color: #ff9800;
 }
-.checkbox-material-deep-orange input[type=checkbox]:checked ~ .check {
+.checkbox-material-deep-orange input[type=checkbox]:checked + .checkbox-material .check {
   color: #ff5722;
 }
-.checkbox-material-brown input[type=checkbox]:checked ~ .check {
+.checkbox-material-brown input[type=checkbox]:checked + .checkbox-material .check {
   color: #795548;
 }
-.checkbox-material-grey input[type=checkbox]:checked ~ .check {
+.checkbox-material-grey input[type=checkbox]:checked + .checkbox-material .check {
   color: #9e9e9e;
 }
-.checkbox-material-blue-grey input[type=checkbox]:checked ~ .check {
+.checkbox-material-blue-grey input[type=checkbox]:checked + .checkbox-material .check {
   color: #607d8b;
 }
 @-webkit-keyframes checkbox-on {
@@ -3999,12 +3990,12 @@ body .jumbotron-material-blue-grey,
     width: 20px;
     height: 20px;
     box-shadow: 0 0 0 0,
-            0 0 0 0,
-            0 0 0 0,
-            0 0 0 0,
-            0 0 0 0,
-            0 0 0 0,
-            0px 0px 0 10px inset;
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0px 0px 0 10px inset;
   }
   100% {
     -webkit-transform: rotate(0deg);
@@ -4014,12 +4005,12 @@ body .jumbotron-material-blue-grey,
     width: 20px;
     height: 20px;
     box-shadow: 0 0 0 0,
-            0 0 0 0,
-            0 0 0 0,
-            0 0 0 0,
-            0 0 0 0,
-            0 0 0 0,
-            0px 0px 0 0px inset;
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0px 0px 0 0px inset;
   }
 }
 @keyframes checkbox-off {
@@ -4046,12 +4037,12 @@ body .jumbotron-material-blue-grey,
     width: 20px;
     height: 20px;
     box-shadow: 0 0 0 0,
-            0 0 0 0,
-            0 0 0 0,
-            0 0 0 0,
-            0 0 0 0,
-            0 0 0 0,
-            0px 0px 0 10px inset;
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0px 0px 0 10px inset;
   }
   100% {
     -webkit-transform: rotate(0deg);
@@ -4061,12 +4052,12 @@ body .jumbotron-material-blue-grey,
     width: 20px;
     height: 20px;
     box-shadow: 0 0 0 0,
-            0 0 0 0,
-            0 0 0 0,
-            0 0 0 0,
-            0 0 0 0,
-            0 0 0 0,
-            0px 0px 0 0px inset;
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0px 0px 0 0px inset;
   }
 }
 @-webkit-keyframes rippleOn {
@@ -4163,9 +4154,6 @@ body .jumbotron-material-blue-grey,
 .togglebutton label input[type=checkbox][disabled]:checked:first-of-type + .toggle:after {
   background-color: #BDBDBD;
 }
-.togglebutton label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
-  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 149, 135, 0.1);
-}
 .togglebutton label input[type=checkbox]:first-of-type ~ .toggle:active:after,
 .togglebutton label input[type=checkbox][disabled]:first-of-type ~ .toggle:active:after {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
@@ -4343,6 +4331,91 @@ body .jumbotron-material-blue-grey,
 .togglebutton-material-blue-grey label input[type=checkbox]:first-of-type:checked + .toggle:after {
   background-color: #607d8b;
 }
+.togglebutton label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after,
+.togglebutton-default label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 149, 135, 0.1);
+}
+.togglebutton-black label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
+}
+.togglebutton-white label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 255, 255, 0.1);
+}
+.togglebutton-inverse label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(63, 81, 181, 0.1);
+}
+.togglebutton-primary label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 149, 135, 0.1);
+}
+.togglebutton-success label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(15, 157, 88, 0.1);
+}
+.togglebutton-info label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(3, 169, 244, 0.1);
+}
+.togglebutton-warning label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 87, 34, 0.1);
+}
+.togglebutton-danger label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(244, 67, 54, 0.1);
+}
+.togglebutton-material-red label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(244, 67, 54, 0.1);
+}
+.togglebutton-material-pink label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(233, 30, 99, 0.1);
+}
+.togglebutton-material-purple label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(156, 39, 176, 0.1);
+}
+.togglebutton-material-deep-purple label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(103, 58, 183, 0.1);
+}
+.togglebutton-material-indigo label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(63, 81, 181, 0.1);
+}
+.togglebutton-material-blue label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(33, 150, 243, 0.1);
+}
+.togglebutton-material-light-blue label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(3, 169, 244, 0.1);
+}
+.togglebutton-material-cyan label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 188, 212, 0.1);
+}
+.togglebutton-material-teal label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 150, 136, 0.1);
+}
+.togglebutton-material-green label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(76, 175, 80, 0.1);
+}
+.togglebutton-material-light-green label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(139, 195, 74, 0.1);
+}
+.togglebutton-material-lime label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(205, 220, 57, 0.1);
+}
+.togglebutton-material-yellow label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 235, 59, 0.1);
+}
+.togglebutton-material-amber label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 193, 7, 0.1);
+}
+.togglebutton-material-orange label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 152, 0, 0.1);
+}
+.togglebutton-material-deep-orange label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 87, 34, 0.1);
+}
+.togglebutton-material-brown label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(121, 85, 72, 0.1);
+}
+.togglebutton-material-grey label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(158, 158, 158, 0.1);
+}
+.togglebutton-material-blue-grey label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(96, 125, 139, 0.1);
+}
 .form-horizontal .radio {
   margin-bottom: 10px;
 }
@@ -5246,6 +5319,10 @@ legend {
   margin-top: 5px;
   margin-bottom: -5px;
 }
+.list-group .list-group-item .row-picture label .checkbox-material,
+.list-group .list-group-item .row-action-primary label .checkbox-material {
+  left: -10px;
+}
 .list-group .list-group-item .row-content {
   display: inline-block;
   width: calc(100% - 92px);
@@ -6994,7 +7071,7 @@ icon-material-blue-grey {
   border-radius: 2px;
   color: rgba(0, 0, 0, 0.84);
   background: #ffffff;
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 .card .card-height-indicator {
   margin-top: 100%;
@@ -7043,7 +7120,7 @@ icon-material-blue-grey {
   left: -15px;
 }
 .modal-content {
-  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.22), 0 19px 60px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
   border-radius: 2px;
   border: none;
 }
@@ -7176,7 +7253,7 @@ icon-material-blue-grey {
 .panel {
   border-radius: 2px;
   border: 0;
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
 }
 .panel > .panel-heading,
 .panel-default > .panel-heading {
@@ -7327,7 +7404,7 @@ hr.on-light {
   color: rgba(255, 255, 255, 0.84);
   font-size: 14px;
   border-radius: 2px;
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
   height: 0;
   transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s;
   transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s;

dist/js/material.js

@@ -48,7 +48,7 @@
       $((selector) ? selector : this.options.checkboxElements)
       .filter(":notmdproc")
       .data("mdproc", true)
-      .after("<span class=ripple></span><span class=check></span>");
+      .after("<span class=checkbox-material><span class=check></span></span>");
     },
     "togglebutton": function(selector) {
       // Add fake-checkbox to material checkboxes

dist/js/material.min.js

@@ -1,2 +1,2 @@
-!function(a){function b(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which&&9!=a.which:!1}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{input:!0,ripples:!0,checkbox:!0,togglebutton:!0,radio:!0,arrive:!0,autofill:!1,withRipples:[".btn:not(.btn-link)",".card-image",".navbar a:not(.withoutripple)",".dropdown-menu a",".nav-tabs a:not(.withoutripple)",".withripple"].join(","),inputElements:"input.form-control, textarea.form-control, select.form-control",checkboxElements:".checkbox > label > input[type=checkbox]",togglebuttonElements:".togglebutton > label > input[type=checkbox]",radioElements:".radio > label > input[type=radio]"},checkbox:function(b){a(b?b:this.options.checkboxElements).filter(":notmdproc").data("mdproc",!0).after("<span class=ripple></span><span class=check></span>")},togglebutton:function(b){a(b?b:this.options.togglebuttonElements).filter(":notmdproc").data("mdproc",!0).after("<span class=toggle></span>")},radio:function(b){a(b?b:this.options.radioElements).filter(":notmdproc").data("mdproc",!0).after("<span class=circle></span><span class=check></span>")},input:function(c){a(c?c:this.options.inputElements).filter(":notmdproc").data("mdproc",!0).each(function(){var b=a(this);if(a(this).attr("data-hint")||b.hasClass("floating-label")){if(b.wrap("<div class=form-control-wrapper></div>"),b.after("<span class=material-input></span>"),b.hasClass("floating-label")){var c=b.attr("placeholder");b.attr("placeholder",null).removeClass("floating-label"),b.after("<div class=floating-label>"+c+"</div>")}if(b.attr("data-hint")&&b.after("<div class=hint>"+b.attr("data-hint")+"</div>"),(null===b.val()||"undefined"==b.val()||""===b.val())&&b.addClass("empty"),b.parent().next().is("[type=file]")){b.parent().addClass("fileinput");var d=b.parent().next().detach();b.after(d)}}}),a(document).on("change",".checkbox input[type=checkbox]",function(){a(this).blur()}).on("keydown paste",".form-control",function(c){b(c)&&a(this).removeClass("empty")}).on("keyup change",".form-control",function(){var b=a(this);""===b.val()&&"undefined"!=typeof b[0].checkValidity&&b[0].checkValidity()?b.addClass("empty"):b.removeClass("empty")}).on("focus",".form-control-wrapper.fileinput",function(){a(this).find("input").addClass("focus")}).on("blur",".form-control-wrapper.fileinput",function(){a(this).find("input").removeClass("focus")}).on("change",".form-control-wrapper.fileinput [type=file]",function(){var b="";a.each(a(this)[0].files,function(a,c){b+=c.name+", "}),b=b.substring(0,b.length-2),b?a(this).prev().removeClass("empty"):a(this).prev().addClass("empty"),a(this).prev().val(b)})},ripples:function(b){a(b?b:this.options.withRipples).ripples()},autofill:function(){var b=setInterval(function(){a("input[type!=checkbox]").each(function(){a(this).val()&&a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100);setTimeout(function(){clearInterval(b)},1e4);var c;a(document).on("focus","input",function(){var b=a(this).parents("form").find("input").not("[type=file]");c=setInterval(function(){b.each(function(){a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100)}).on("blur","input",function(){clearInterval(c)})},init:function(){a.fn.ripples&&this.options.ripples&&this.ripples(),this.options.input&&this.input(),this.options.checkbox&&this.checkbox(),this.options.togglebutton&&this.togglebutton(),this.options.radio&&this.radio(),this.options.autofill&&this.autofill(),document.arrive&&this.options.arrive&&(a.fn.ripples&&this.options.ripples&&a(document).arrive(this.options.withRipples,function(){a.material.ripples(a(this))}),this.options.input&&a(document).arrive(this.options.inputElements,function(){a.material.input(a(this))}),this.options.checkbox&&a(document).arrive(this.options.checkboxElements,function(){a.material.checkbox(a(this))}),this.options.radio&&a(document).arrive(this.options.radioElements,function(){a.material.radio(a(this))}),this.options.togglebutton&&a(document).arrive(this.options.togglebuttonElements,function(){a.material.togglebutton(a(this))}))}}}(jQuery);
-//# sourceMappingURL=material.min.js.map
+!function(a){function b(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which&&9!=a.which:!1}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{input:!0,ripples:!0,checkbox:!0,togglebutton:!0,radio:!0,arrive:!0,autofill:!1,withRipples:[".btn:not(.btn-link)",".card-image",".navbar a:not(.withoutripple)",".dropdown-menu a",".nav-tabs a:not(.withoutripple)",".withripple"].join(","),inputElements:"input.form-control, textarea.form-control, select.form-control",checkboxElements:".checkbox > label > input[type=checkbox]",togglebuttonElements:".togglebutton > label > input[type=checkbox]",radioElements:".radio > label > input[type=radio]"},checkbox:function(b){a(b?b:this.options.checkboxElements).filter(":notmdproc").data("mdproc",!0).after("<span class=checkbox-material><span class=check></span></span>")},togglebutton:function(b){a(b?b:this.options.togglebuttonElements).filter(":notmdproc").data("mdproc",!0).after("<span class=toggle></span>")},radio:function(b){a(b?b:this.options.radioElements).filter(":notmdproc").data("mdproc",!0).after("<span class=circle></span><span class=check></span>")},input:function(c){a(c?c:this.options.inputElements).filter(":notmdproc").data("mdproc",!0).each(function(){var b=a(this);if(a(this).attr("data-hint")||b.hasClass("floating-label")){if(b.wrap("<div class=form-control-wrapper></div>"),b.after("<span class=material-input></span>"),b.hasClass("floating-label")){var c=b.attr("placeholder");b.attr("placeholder",null).removeClass("floating-label"),b.after("<div class=floating-label>"+c+"</div>")}if(b.attr("data-hint")&&b.after("<div class=hint>"+b.attr("data-hint")+"</div>"),(null===b.val()||"undefined"==b.val()||""===b.val())&&b.addClass("empty"),b.parent().next().is("[type=file]")){b.parent().addClass("fileinput");var d=b.parent().next().detach();b.after(d)}}}),a(document).on("change",".checkbox input[type=checkbox]",function(){a(this).blur()}).on("keydown paste",".form-control",function(c){b(c)&&a(this).removeClass("empty")}).on("keyup change",".form-control",function(){var b=a(this);""===b.val()&&"undefined"!=typeof b[0].checkValidity&&b[0].checkValidity()?b.addClass("empty"):b.removeClass("empty")}).on("focus",".form-control-wrapper.fileinput",function(){a(this).find("input").addClass("focus")}).on("blur",".form-control-wrapper.fileinput",function(){a(this).find("input").removeClass("focus")}).on("change",".form-control-wrapper.fileinput [type=file]",function(){var b="";a.each(a(this)[0].files,function(a,c){b+=c.name+", "}),b=b.substring(0,b.length-2),b?a(this).prev().removeClass("empty"):a(this).prev().addClass("empty"),a(this).prev().val(b)})},ripples:function(b){a(b?b:this.options.withRipples).ripples()},autofill:function(){var b=setInterval(function(){a("input[type!=checkbox]").each(function(){a(this).val()&&a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100);setTimeout(function(){clearInterval(b)},1e4);var c;a(document).on("focus","input",function(){var b=a(this).parents("form").find("input").not("[type=file]");c=setInterval(function(){b.each(function(){a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100)}).on("blur","input",function(){clearInterval(c)})},init:function(){a.fn.ripples&&this.options.ripples&&this.ripples(),this.options.input&&this.input(),this.options.checkbox&&this.checkbox(),this.options.togglebutton&&this.togglebutton(),this.options.radio&&this.radio(),this.options.autofill&&this.autofill(),document.arrive&&this.options.arrive&&(a.fn.ripples&&this.options.ripples&&a(document).arrive(this.options.withRipples,function(){a.material.ripples(a(this))}),this.options.input&&a(document).arrive(this.options.inputElements,function(){a.material.input(a(this))}),this.options.checkbox&&a(document).arrive(this.options.checkboxElements,function(){a.material.checkbox(a(this))}),this.options.radio&&a(document).arrive(this.options.radioElements,function(){a.material.radio(a(this))}),this.options.togglebutton&&a(document).arrive(this.options.togglebuttonElements,function(){a.material.togglebutton(a(this))}))}}}(jQuery);
+//# sourceMappingURL=material.min.js.map

dist/js/material.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"material.min.js","sources":["material.js"],"names":["$","_isChar","evt","which","ctrlKey","metaKey","altKey","expr","notmdproc","obj","data","material","options","input","ripples","checkbox","togglebutton","radio","arrive","autofill","withRipples","join","inputElements","checkboxElements","togglebuttonElements","radioElements","selector","this","filter","after","each","$this","attr","hasClass","wrap","placeholder","removeClass","val","addClass","parent","next","is","$input","detach","document","on","blur","e","checkValidity","find","value","files","i","file","name","substring","length","prev","loading","setInterval","trigger","setTimeout","clearInterval","focused","$inputs","parents","not","init","fn","jQuery"],"mappings":"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"}
+{"version":3,"file":"material.min.js","sources":["material.js"],"names":["$","_isChar","evt","which","ctrlKey","metaKey","altKey","expr","notmdproc","obj","data","material","options","input","ripples","checkbox","togglebutton","radio","arrive","autofill","withRipples","join","inputElements","checkboxElements","togglebuttonElements","radioElements","selector","this","filter","after","each","$this","attr","hasClass","wrap","placeholder","removeClass","val","addClass","parent","next","is","$input","detach","document","on","blur","e","checkValidity","find","value","files","i","file","name","substring","length","prev","loading","setInterval","trigger","setTimeout","clearInterval","focused","$inputs","parents","not","init","fn","jQuery"],"mappings":"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"}

index.html

@@ -144,6 +144,7 @@
         <nav class="col-xs-3 menu">
           <ul>
             <li class="active withripple" data-target="#about">Material Design for Bootstrap</li>
+            <li class="withripple" data-target="#getting-started">Getting Started</li>
             <li><a href="http://fezvrasta.github.com/bootstrap-material-design/bootstrap-elements.html" target="_blank">Bootstrap elements <i class="mdi-action-open-in-new"></i></a></li>
             <li class="withripple" data-target="#material-colors">Material Colors</li>
             <li class="withripple" data-target="#checkbox">Checkbox</li>
@@ -233,6 +234,87 @@
               <pre><code>bower install bootstrap-material-design</code></pre>
 
 
+            </div>
+            <div class="well page" id="getting-started">
+              <h1 class="header">Getting Started</h1>
+              <h3>Download</h3>
+              <hr>
+              <h4>Install with NPM - Coming Soon</h4>
+              <p>You can also install and manage Material Bootstrap using NPM</p>
+              <pre><code>npm install</code></pre>
+              <h4>Install with Bower</h4>
+              <p>You can also install and manage Material Bootstrap using Bower</p>
+              <pre><code>bower install bootstrap-material-design</code></pre>
+              <h4>Install with Meteor</h4>
+              <p>You can also install and manage Material Bootstrap using Meteor</p>
+              <pre><code>meteor add fezvrasta:bootstrap-material-design</code></pre>
+              <br />
+              <h3>What's included</h3>
+              <hr>
+              <p>Material Bootstrap is downloadable in a two forms. Material.css only supports the primary shades of the material color palette and Material-fullpalette.css supports every shade of the material color palette</p>
+              <div class="panel panel-info">
+                <div class="panel-heading">
+                  <h3 class="panel-title">Required Frameworks</h3>
+                </div>
+                <div class="panel-body">
+                  <div class="list-group">
+                    <div class="list-group-item">
+                      <div class="row-action-primary">
+                        <i class="mdi-action-settings"></i>
+                      </div>
+                      <div class="row-content">
+                        <h4 class="list-group-item-heading">Bootstrap v3.0+</h4>
+                        <p class="list-group-item-text">This theme extends, styles, and modifies Bootstrap's elements and styles. Without Bootstrap this project will not display correctly. To install Bootstrap please go to <a href="http://getbootstrap.com/getting-started/" alt="Bootstrap Docs">Get Bootstrap</a></p>
+                      </div>
+                    </div>
+                    <div class="list-group-separator"></div>
+                    <div class="list-group-item">
+                      <div class="row-action-primary">
+                        <i class="mdi-action-settings"></i>
+                      </div>
+                      <div class="row-content">
+                        <h4 class="list-group-item-heading">jQuery 1.9.1+</h4>
+                        <p class="list-group-item-text">All JavaScript plugins require jQuery to be included.</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Material Bootstrap. You'll see something like this:</p>
+                <!-- This code must be aligned this way to render correctly -->
+                <pre><code class="language-bash" data-lang="bash">Material/
+├── css/
+│   ├── material.css
+│   ├── material.css.map
+│   ├── material.min.css
+│   ├── material.min.css.map
+│   ├── material-wfont.css
+│   ├── material-wfont.css.map
+│   ├── material-wfont.min.css
+│   ├── material-wfont.min.css.map
+│   ├── ripples
+│   ├── ripples.css.map
+│   ├── ripples.min.css
+│   ├── ripples.min.css.map
+├── js/
+│   ├── material.js
+│   ├── material.min.js
+│   ├── material.min.js.map
+│   ├── ripples.js
+│   ├── ripples.min.js
+│   ├── ripples.min.js.map
+└── fonts/
+    ├── Material-Design-Icons.eot
+    ├── Material-Design-Icons.svg
+    ├── Material-Design-Icons.ttf
+    ├── Material-Design-Icons.woff
+    └── ADD REMAINING GOOGLE FONT FILES HERE
+                </code>
+              </pre>
+              <p>Just copy the compiled CSS and JS files and the font files from the .zip and add them to your site.</p>
+              <br />
+              <p>Once copied you need to initialize the material javascript by adding the following javascript to your site,</p>
+              <pre><code>$.material.init()</code></pre>
             </div>
             <div class="well page" id="checkbox">
               <h1 class="header">Checkbox</h1>
@@ -329,6 +411,7 @@
                 }
                 #checkbox .sample2 .checkbox {
                   float: right;
+                  margin: 0;
                 }
               </style>
             </div>

less/_buttons.less

@@ -10,12 +10,12 @@
   color: @darkbg-text;
 
   &:hover:not(.btn-link):not(.btn-flat):not(.btn-fab) {
-    .shadow-z-2-hover();
+    .shadow-z-1();
   }
   &:active:not(.btn-link):not(.btn-flat):not(.btn-fab) {
-    .shadow-z-3();
+    .shadow-z-1-hover();
   }
-  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: background-color 0.2s ease, box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   outline: none !important;
 
 
@@ -65,14 +65,11 @@
     &, &:hover, &:active {
       .variations(~"", background-color, transparent);
     }
-    & {
-      .shadow-z-3();
-    }
-    &:hover {
-      .shadow-z-4();
+    &, &:hover {
+      .shadow-z-1();
     }
     &:active {
-      .shadow-z-5();
+      .shadow-z-1-hover();
     }
     &, .ripple-wrapper {
       border-radius: 100%;
@@ -133,6 +130,6 @@
   .shadow-z-1();
   transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   &:active:not(.btn-link) {
-    .shadow-z-3();
+    .shadow-z-1-hover();
   }
 }

less/_checkboxes.less

@@ -1,255 +1,237 @@
 .form-horizontal .checkbox {
-    padding-top: 20px;
+  padding-top: 20px;
 }
 .checkbox {
-    label {
-        padding-left: 10px;
-        cursor: pointer;
-        position: relative;
-        span {
-            display: block;
-            position: absolute;
-            left: 0px;
-            transition-duration: 0.2s;
-        }
-        .ripple {
-            display: block;
-            position: absolute;
-            content: "";
-            background-color: rgba(0,0,0,.84);
-            left: -8px;
-            top: -11px;
-            height: 50px;
-            width: 50px;
-            border-radius: 100%;
-            z-index: 1;
-            opacity: 0;
-            margin: 0;
-        }
+  transform: translateZ(0); // Force 3d rendering
+  label {
+    cursor: pointer;
+    padding-left: 0; // Reset for Bootstrap rule
+  }
 
-        input[type=checkbox]:not(:checked) ~ .ripple {
-            animation: rippleOff 500ms;
-        }
-        input[type=checkbox]:checked ~ .ripple {
-            animation: rippleOn 500ms;
-        }
+  // Hide native checkbox
+  input[type=checkbox] {
+    opacity: 0;
+    position: absolute;
+    margin: 0;
+    z-index: -1;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    left: 0;
+    pointer-events: none;
+  }
 
-        .check {
-            display: inline-block;
-            width: 20px;
-            height: 20px;
-            border: 2px solid;
-            border-radius: 2px;
-            overflow: hidden;
-            position: relative;
-            top: 5px;
-            left: -3px;
-            margin-right: 11px;
-        }
-        .check:after {
-            display: block;
-            position: absolute;
-            content: "";
-            background-color: @lightbg-text;
-            left: -5px;
-            top: -15px;
-            height: 50px;
-            width: 50px;
-            border-radius: 100%;
-            z-index: 1;
-            opacity: 0;
-            margin: 0;
-        }
-        .check:before {
-            position: absolute;
-            content: "";
-            transform: rotate(45deg);
-            display: block;
-            margin-top: -4px;
-            margin-left: 6px;
-            width: 0;
-            height: 0;
-            box-shadow:
-                0 0 0 0,
-                0 0 0 0,
-                0 0 0 0,
-                0 0 0 0,
-                0 0 0 0,
-                0 0 0 0,
-                0px 0px 0 0px inset;
-            animation: checkbox-off 0.3s linear forwards;
-        }
+  .checkbox-material {
+    vertical-align: middle;
+    position: relative;
+    top: 3px;
+    &:before {
+      display: block;
+      position: absolute;
+      left: 0;
+      content: "";
+      background-color: rgba(0,0,0,.84);
+      height: @checkbox-size;
+      width: @checkbox-size;
+      border-radius: 100%;
+      z-index: 1;
+      opacity: 0;
+      margin: 0;
+      transform: scale(2.3);
     }
 
-
-    // Hide native checkbox
-    input[type=checkbox] { opacity: 0; }
-
-
-    input[type=checkbox]:focus ~ .check:after {
-        opacity: 0.2;
+    .check {
+      position: relative;
+      display: inline-block;
+      width: @checkbox-size;
+      height: @checkbox-size;
+      border: 2px solid;
+      border-radius: 2px;
+      overflow: hidden;
+      z-index: 1;
     }
+    .check:before {
+      position: absolute;
+      content: "";
+      transform: rotate(45deg);
+      display: block;
+      margin-top: -4px;
+      margin-left: 6px;
+      width: 0;
+      height: 0;
+      box-shadow:
+        0 0 0 0,
+        0 0 0 0,
+        0 0 0 0,
+        0 0 0 0,
+        0 0 0 0,
+        0 0 0 0,
+        0 0 0 0 inset;
+      animation: checkbox-off @checkbox-animation-check forwards;
+    }
+  }
 
-    input[type=checkbox]:checked ~ .check {
-    }
-    input[type=checkbox]:checked ~ .check:before {
-        box-shadow:
-            0 0 0 10px,
-            10px -10px 0 10px,
-            32px 0px 0 20px,
-            0px 32px 0 20px,
-            -5px 5px 0 10px,
-            20px -12px 0 11px;
-        animation: checkbox-on 0.3s linear forwards;
-    }
+  input[type=checkbox]:focus + .checkbox-material .check:after {
+    opacity: 0.2;
+  }
+  input[type=checkbox]:checked + .checkbox-material .check:before {
+    box-shadow:
+      0 0 0 10px,
+      10px -10px 0 10px,
+      32px 0px 0 20px,
+      0px 32px 0 20px,
+      -5px 5px 0 10px,
+      20px -12px 0 11px;
+    animation: checkbox-on @checkbox-animation-check forwards;
+  }
 
-    // Ripple effect on click
-    input[type=checkbox]:not(:checked) ~ .check:after {
-        animation: rippleOff 500ms linear forwards;
-    }
-    input[type=checkbox]:checked ~ .check:after {
-        animation: rippleOn 500ms linear forwards;
-    }
+  input[type=checkbox]:not(:checked) + .checkbox-material:before {
+    animation: rippleOff @checkbox-animation-ripple;
+  }
+  input[type=checkbox]:checked + .checkbox-material:before {
+    animation: rippleOn @checkbox-animation-ripple;
+  }
 
-    // Make animate quickly when not hover
-    &:not(:hover) input[type=checkbox] ~ .check {
-        &:before, &:after {
-            animation-duration: 1ms;
-        }
-    }
+  // Ripple effect on click
+  input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
+    animation: rippleOff @checkbox-animation-ripple forwards;
+  }
+  input[type=checkbox]:checked + .checkbox-material .check:after {
+    animation: rippleOn @checkbox-animation-ripple forwards;
+  }
 
-    // Style for disabled inputs
-    input[type=checkbox][disabled]:not(:checked) ~ .check:before,
-    input[type=checkbox][disabled] ~ .circle {
-        opacity: 0.5;
-    }
-    input[type=checkbox][disabled] ~ .check:after {
-        background-color: @lightbg-text;
-        transform: rotate(-45deg);
-    }
+  // Style for disabled inputs
+  input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
+  input[type=checkbox][disabled] + .circle {
+    opacity: 0.5;
+  }
+  input[type=checkbox][disabled] + .checkbox-material .check:after {
+    background-color: @lightbg-text;
+    transform: rotate(-45deg);
+  }
 
-    .variations(~" input[type=checkbox]:checked ~ .check:after", background-color, @success);
-    .variations(~" input[type=checkbox]:checked ~ .check:before", color, #4caf50);
-    .variations(~" input[type=checkbox]:checked ~ .check", color, #4caf50);
+  .variations(~" input[type=checkbox]:checked + .checkbox-material .check:after", background-color, @success);
+  .variations(~" input[type=checkbox]:checked + .checkbox-material .check:before", color, #4caf50);
+  .variations(~" input[type=checkbox]:checked + .checkbox-material .check", color, #4caf50);
 }
 
 
 @keyframes checkbox-on {
-    0% {
-        box-shadow:
-            0 0 0 10px,
-            10px -10px 0 10px,
-            32px 0px 0 20px,
-            0px 32px 0 20px,
-            -5px 5px 0 10px,
-            15px 2px 0 11px;
-    }
-    50% {
-        box-shadow:
-            0 0 0 10px,
-            10px -10px 0 10px,
-            32px 0px 0 20px,
-            0px 32px 0 20px,
-            -5px 5px 0 10px,
-            20px 2px 0 11px;
-    }
-    100% {
-        box-shadow:
-            0 0 0 10px,
-            10px -10px 0 10px,
-            32px 0px 0 20px,
-            0px 32px 0 20px,
-            -5px 5px 0 10px,
-            20px -12px 0 11px;
-    }
+  0% {
+    box-shadow:
+      0 0 0 10px,
+      10px -10px 0 10px,
+      32px 0px 0 20px,
+      0px 32px 0 20px,
+      -5px 5px 0 10px,
+      15px 2px 0 11px;
+  }
+  50% {
+    box-shadow:
+      0 0 0 10px,
+      10px -10px 0 10px,
+      32px 0px 0 20px,
+      0px 32px 0 20px,
+      -5px 5px 0 10px,
+      20px 2px 0 11px;
+  }
+  100% {
+    box-shadow:
+      0 0 0 10px,
+      10px -10px 0 10px,
+      32px 0px 0 20px,
+      0px 32px 0 20px,
+      -5px 5px 0 10px,
+      20px -12px 0 11px;
+  }
 }
 @keyframes checkbox-off {
-    0% {
-        box-shadow:
-            0 0 0 10px,
-            10px -10px 0 10px,
-            32px 0px 0 20px,
-            0px 32px 0 20px,
-            -5px 5px 0 10px,
-            20px -12px 0 11px,
-            0 0 0 0 inset;
-    }
+  0% {
+    box-shadow:
+      0 0 0 10px,
+      10px -10px 0 10px,
+      32px 0px 0 20px,
+      0px 32px 0 20px,
+      -5px 5px 0 10px,
+      20px -12px 0 11px,
+      0 0 0 0 inset;
+  }
 
-    25% {
-        box-shadow:
-            0 0 0 10px,
-            10px -10px 0 10px,
-            32px 0px 0 20px,
-            0px 32px 0 20px,
-            -5px 5px 0 10px,
-            20px -12px 0 11px,
-            0 0 0 0 inset;
-    }
-    50% {
-        transform: rotate(45deg);
-        margin-top: -4px;
-        margin-left: 6px;
-        width: 0px;
-        height: 0px;
-        box-shadow:
-            0 0 0 10px,
-            10px -10px 0 10px,
-            32px 0px 0 20px,
-            0px 32px 0 20px,
-            -5px 5px 0 10px,
-            15px 2px 0 11px,
-            0 0 0 0 inset;
-    }
-    51% {
-        transform: rotate(0deg);
-        margin-top: -2px;
-        margin-left: -2px;
-        width: 20px;
-        height: 20px;
-        box-shadow:
-            0 0 0 0,
-            0 0 0 0,
-            0 0 0 0,
-            0 0 0 0,
-            0 0 0 0,
-            0 0 0 0,
-            0px 0px 0 10px inset;
-    }
-    100% {
-        transform: rotate(0deg);
-        margin-top: -2px;
-        margin-left: -2px;
-        width: 20px;
-        height: 20px;
-        box-shadow:
-            0 0 0 0,
-            0 0 0 0,
-            0 0 0 0,
-            0 0 0 0,
-            0 0 0 0,
-            0 0 0 0,
-            0px 0px 0 0px inset;
-    }
+  25% {
+    box-shadow:
+      0 0 0 10px,
+      10px -10px 0 10px,
+      32px 0px 0 20px,
+      0px 32px 0 20px,
+      -5px 5px 0 10px,
+      20px -12px 0 11px,
+      0 0 0 0 inset;
+  }
+  50% {
+    transform: rotate(45deg);
+    margin-top: -4px;
+    margin-left: 6px;
+    width: 0px;
+    height: 0px;
+    box-shadow:
+      0 0 0 10px,
+      10px -10px 0 10px,
+      32px 0px 0 20px,
+      0px 32px 0 20px,
+      -5px 5px 0 10px,
+      15px 2px 0 11px,
+      0 0 0 0 inset;
+  }
+  51% {
+    transform: rotate(0deg);
+    margin-top: -2px;
+    margin-left: -2px;
+    width: 20px;
+    height: 20px;
+    box-shadow:
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0px 0px 0 10px inset;
+  }
+  100% {
+    transform: rotate(0deg);
+    margin-top: -2px;
+    margin-left: -2px;
+    width: 20px;
+    height: 20px;
+    box-shadow:
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0 0 0 0,
+      0px 0px 0 0px inset;
+  }
 }
 @keyframes rippleOn {
-    0% {
-        opacity: 0;
-    }
-    50% {
-        opacity: 0.2;
-    }
-    100% {
-        opacity: 0;
-    }
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
 }
 @keyframes rippleOff {
-    0% {
-        opacity: 0;
-    }
-    50% {
-        opacity: 0.2;
-    }
-    100% {
-        opacity: 0;
-    }
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
 }

less/_lists.less

@@ -1,99 +1,102 @@
 .list-group {
+  border-radius: 0;
+  .list-group-item {
+    background-color: transparent;
+    overflow: hidden;
+    border: 0;
     border-radius: 0;
-    .list-group-item {
-        background-color: transparent;
-        overflow: hidden;
-        border: 0;
-        border-radius: 0;
-        padding: 0 16px;
-        &.baseline {
-            border-bottom: 1px solid #cecece;
-            &:last-child {
-                border-bottom: none;
-            }
-        }
-        .row-picture, .row-action-primary {
-            float: left;
-            display: inline-block;
-            padding-right: 16px;
-            img, i, label {
-                display: block;
-                width: 56px;
-                height: 56px;
-            }
-            img {
-                background: rgba(0,0,0,0.1);
-                padding: 1px;
-                &.circle {
-                    border-radius: 100%;
-                }
-            }
-            i {
-                background: rgba(0,0,0,0.25);
-                border-radius: 100%;
-                text-align: center;
-                line-height: 56px;
-                font-size: 20px;
-                color: white;
-            }
-            label {
-                margin-left: 7px;
-                margin-right: -7px;
-                margin-top: 5px;
-                margin-bottom: -5px;
-            }
-        }
-        .row-content {
-            display: inline-block;
-            width: ~"calc(100% - 92px)";
-            min-height: 66px;
-            .action-secondary {
-                position: absolute;
-                right: 16px;
-                top: 16px;
-                i {
-                    font-size: 20px;
-                    color: rgba(0,0,0,0.25);
-                    cursor: pointer;
-                }
-            }
-            .action-secondary  ~ * {
-                max-width: ~"calc(100% - 30px)";
-            }
-            .least-content {
-                position: absolute;
-                right: 16px;
-                top: 0px;
-                color: rgba(0,0,0,0.54);
-                font-size: 14px;
-            }
-        }
-        .list-group-item-heading {
-            color: rgba(0, 0, 0, 0.77);
-            font-size: 20px;
-            line-height: 29px;
-        }
+    padding: 0 16px;
+    &.baseline {
+      border-bottom: 1px solid #cecece;
+      &:last-child {
+        border-bottom: none;
+      }
     }
-    .list-group-item.active {
-        &:hover, &:focus {
-            background: rgba(0,0,0,.15);
-            outline: 10px solid rgba(0,0,0,.15);
+    .row-picture, .row-action-primary {
+      float: left;
+      display: inline-block;
+      padding-right: 16px;
+      img, i, label {
+        display: block;
+        width: 56px;
+        height: 56px;
+      }
+      img {
+        background: rgba(0,0,0,0.1);
+        padding: 1px;
+        &.circle {
+          border-radius: 100%;
         }
-        .list-group-item-heading, .list-group-item-text {
-            color: @lightbg-text;
+      }
+      i {
+        background: rgba(0,0,0,0.25);
+        border-radius: 100%;
+        text-align: center;
+        line-height: 56px;
+        font-size: 20px;
+        color: white;
+      }
+      label {
+        margin-left: 7px;
+        margin-right: -7px;
+        margin-top: 5px;
+        margin-bottom: -5px;
+        .checkbox-material {
+          left: -10px;
         }
+      }
+    }
+    .row-content {
+      display: inline-block;
+      width: ~"calc(100% - 92px)";
+      min-height: 66px;
+      .action-secondary {
+        position: absolute;
+        right: 16px;
+        top: 16px;
+        i {
+          font-size: 20px;
+          color: rgba(0,0,0,0.25);
+          cursor: pointer;
+        }
+      }
+      .action-secondary  ~ * {
+        max-width: ~"calc(100% - 30px)";
+      }
+      .least-content {
+        position: absolute;
+        right: 16px;
+        top: 0px;
+        color: rgba(0,0,0,0.54);
+        font-size: 14px;
+      }
+    }
+    .list-group-item-heading {
+      color: rgba(0, 0, 0, 0.77);
+      font-size: 20px;
+      line-height: 29px;
+    }
+  }
+  .list-group-item.active {
+    &:hover, &:focus {
+      background: rgba(0,0,0,.15);
+      outline: 10px solid rgba(0,0,0,.15);
+    }
+    .list-group-item-heading, .list-group-item-text {
+      color: @lightbg-text;
+    }
 
+  }
+  .list-group-separator {
+    clear: both;
+    overflow: hidden;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    &:before {
+      content: "";
+      width: ~"calc(100% - 90px)";
+      border-bottom: 1px solid rgba(0,0,0,0.1);
+      float: right;
     }
-    .list-group-separator {
-        clear: both;
-        overflow: hidden;
-        margin-top: 10px;
-        margin-bottom: 10px;
-        &:before {
-            content: "";
-            width: ~"calc(100% - 90px)";
-            border-bottom: 1px solid rgba(0,0,0,0.1);
-            float: right;
-        }
-    }
+  }
 }

less/_shadows.less

@@ -1,22 +1,35 @@
 .shadow-z-1 {
-    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 1px 6px 0 rgba(0, 0, 0, 0.12),
+    0 1px  6px 0 rgba(0, 0, 0, 0.12);
+}
+
+.shadow-z-1-hover {
+  box-shadow:
+    0 5px 11px 0 rgba(0, 0, 0, 0.18),
+    0 4px 15px 0 rgba(0, 0, 0, 0.15);
 }
 
 .shadow-z-2 {
-    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
-}
-.shadow-z-2-hover {
-    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
+  box-shadow:
+    0 8px 17px 0 rgba(0, 0, 0, 0.2),
+    0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
 .shadow-z-3 {
-    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
+  box-shadow:
+    0 12px 15px 0 rgba(0, 0, 0, 0.24),
+    0 17px 50px 0 rgba(0, 0, 0, 0.19);
 }
 
 .shadow-z-4 {
-    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22), 0 14px 45px rgba(0, 0, 0, 0.25);
+  box-shadow:
+    0 16px 28px 0 rgba(0, 0, 0, 0.22),
+    0 25px 55px 0 rgba(0, 0, 0, 0.21);
 }
 
 .shadow-z-5 {
-    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.22), 0 19px 60px rgba(0, 0, 0, 0.3);
+  box-shadow:
+    0 27px 24px 0 rgba(0, 0, 0, 0.2),
+    0 40px 77px 0 rgba(0, 0, 0, 0.22);
 }

less/_togglebutton.less

@@ -44,10 +44,6 @@
     input[type=checkbox][disabled]:checked:first-of-type + .toggle:after{
       background-color: #BDBDBD;
     }
-    // Ripple on
-    input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
-      box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba(0, 149, 135, 0.1);
-    }
     // Ripple off and disabled
     input[type=checkbox]:first-of-type ~ .toggle:active:after,
     input[type=checkbox][disabled]:first-of-type ~ .toggle:active:after {
@@ -64,4 +60,8 @@
   });
   // Handle on
   .variations(~" label input[type=checkbox]:first-of-type:checked + .toggle:after", background-color, @primary);
+  // Ripple on
+  .generic-variations(~" label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after", @primary, {
+    box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px fade(@material-color, 10%);
+  });
 }

less/_variables.less

@@ -86,3 +86,8 @@
 
 @text-disabled: #a8a8a8;
 @background-disabled: #eaeaea;
+
+// Checkboxes
+@checkbox-size: 20px;
+@checkbox-animation-ripple: 500ms;
+@checkbox-animation-check: 0.3s;

meteor/package.js

@@ -23,7 +23,7 @@ Package.onUse(function (api) {
     'dist/fonts/Material-Design-Icons.svg',  // SVG fallback for iOS < 5 - http://caniuse.com/#feat=svg-fonts, http://stackoverflow.com/a/11002874/126903
     'dist/fonts/Material-Design-Icons.ttf',  // Android Browers 4.1, 4.3 - http://caniuse.com/#feat=ttf
     'dist/fonts/Material-Design-Icons.woff', // Supported by all modern browsers
-    'dist/css/material-wfont.css',           // includes @font-face rules to load the Roboto font
+    'dist/css/material.css',                 // includes only the primary color variations
     'dist/css/ripples.css',
     'dist/js/material.js',
     'dist/js/ripples.js',

package.js

@@ -1,21 +1,21 @@
 // package metadata file for Meteor.js
 'use strict';
 
-var packageName = 'fezvrasta:bootstrap-material-design';  // https://atmospherejs.com/fezvrasta/bootstrap-material-design
+var packageName = 'fezvrasta:bootstrap-material-design-noglyph';  // https://atmospherejs.com/fezvrasta/bootstrap-material-design-noglyph
 var where = 'client';  // where to install: 'client' or 'server'. For both, pass nothing.
 
 var packageJson = JSON.parse(Npm.require("fs").readFileSync('package.json'));
 
 Package.describe({
   name: packageName,
-  summary: 'FezVrasta\'s Bootstrap theme implementing Google\'s Material (Paper) Design',
+  summary: 'FezVrasta\'s Bootstrap Google Material Design theme. Material icons instead of Bootstrap glyphicons.',
   version: packageJson.version,
   git: 'https://github.com/fezvrasta/bootstrap-material-design.git'
 });
 
 Package.onUse(function (api) {
   api.versionsFrom(['METEOR@0.9.0', 'METEOR@1.0']);
-  api.use('twbs:bootstrap@3.3.1');
+  api.use('twbs:bootstrap-noglyph@3.3.1');
   api.use('jquery');
   api.addFiles([
     // we bundle all font files, but the client will request only one of them via the CSS @font-face rule
@@ -35,5 +35,5 @@ Package.onTest(function (api) {
   api.use(packageName, where);
   api.use(['tinytest', 'http'], where);
 
-  api.addFiles('meteor/test.js', where);
+  api.addFiles('meteor/test.js', where);  // same test because we don't test the glyphicons in particular (that's the job of twbs:bootstrap)
 });

package.json

@@ -26,6 +26,10 @@
     "framework"
   ],
   "homepage": "https://github.com/FezVrasta/bootstrap-material-design",
+  "dependencies": {
+    "bootstrap": ">=3.0",
+    "jquery": ">=1.9.1"
+  },
   "devDependencies": {
     "bootstrap": ">=3.0",
     "grunt": "^0.4.5",

scripts/material.js

@@ -48,7 +48,7 @@
       $((selector) ? selector : this.options.checkboxElements)
       .filter(":notmdproc")
       .data("mdproc", true)
-      .after("<span class=ripple></span><span class=check></span>");
+      .after("<span class=checkbox-material><span class=check></span></span>");
     },
     "togglebutton": function(selector) {
       // Add fake-checkbox to material checkboxes

scripts/ripples.js

@@ -51,7 +51,7 @@
        * Verify if the user is just touching on a device and return if so
        */
       if(self.isTouch() && event.type === "mousedown") {
-        return false;
+        return;
       }