Merge branch 'master' into gh-pages

Conflicts:
	meteor/package.js

.gitignore

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

CHANGELOG.md

@@ -3,9 +3,18 @@
 ## v 0.3.0 dev
 
 - Implemented full color palette from Material Design specifications (thanks @korgan00)
-- Reformat of ripples.js (thanks @grvcoelho)
+- Reformat of `ripples.js` (thanks @grvcoelho)
-- Autofill option of Material.js is now set to false by default
+- Autofill option of `material.js` is now set to false by default
-
+- Deprecated `material-wfont.css`, now to include web fonts you should include roboto.css
+- Now `material.css` supports only the primary shades of the material color palette (lightweight! about 200KB)
+- `material-fullpalette.css` supports every shade of the material color palette (huge size! ~ 2MB)
+- Adjusted padding on dialog(modal) to be more inline with standards (thanks @GradyD)
+- Added jQuery 1.9.1 and Bootstrap 3.0 as dependencies (thanks @GradyD)
+- 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
 
 ## v 0.2.1
 

Gruntfile.js

@@ -22,17 +22,30 @@ module.exports = function(grunt) {
           "dist/css/material.css": "less/material.less",
         }
       },
-      materialwfont: {
+      materialfullpalette: {
         options: {
           paths: ["less"],
           sourceMap: true,
           sourceMapRootpath: "/",
-          sourceMapFilename: "dist/css/material-wfont.css.map",
+          sourceMapFilename: "dist/css/material-fullpalette.css.map",
-          sourceMapURL: "material-wfont.css.map",
+          sourceMapURL: "material-fullpalette.css.map",
           outputSourceFiles: true
         },
         files: {
-          "dist/css/material-wfont.css": "less/material-wfont.less",
+          "dist/css/material-fullpalette.css": "less/material-fullpalette.less",
+        }
+      },
+      roboto: {
+        options: {
+          paths: ["less"],
+          sourceMap: true,
+          sourceMapRootpath: "/",
+          sourceMapFilename: "dist/css/roboto.css.map",
+          sourceMapURL: "roboto.css.map",
+          outputSourceFiles: true
+        },
+        files: {
+          "dist/css/roboto.css": "less/roboto.less",
         }
       },
       ripples: {
@@ -63,10 +76,16 @@ module.exports = function(grunt) {
           "dist/css/material.min.css": "dist/css/material.min.css"
         }
       },
-      materialwfont: {
+      materialfullpalette: {
         files: {
-          "dist/css/material-wfont.css": "dist/css/material-wfont.css",
+          "dist/css/material-fullpalette.css": "dist/css/material-fullpalette.css",
-          "dist/css/material-wfont.min.css": "dist/css/material-wfont.min.css"
+          "dist/css/material-fullpalette.min.css": "dist/css/material-fullpalette.min.css"
+        }
+      },
+      roboto: {
+        files: {
+          "dist/css/roboto.css": "dist/css/roboto.css",
+          "dist/css/roboto.min.css": "dist/css/roboto.min.css"
         }
       },
       ripples: {
@@ -83,9 +102,13 @@ module.exports = function(grunt) {
         src: "dist/css/material.css",
         dest: "dist/css/material.min.css"
       },
-      materialwfont: {
+      materialfullpalette: {
-        src: "dist/css/material-wfont.css",
+        src: "dist/css/material-fullpalette.css",
-        dest: "dist/css/material-wfont.min.css"
+        dest: "dist/css/material-fullpalette.min.css"
+      },
+      roboto: {
+        src: "dist/css/roboto.css",
+        dest: "dist/css/roboto.min.css"
       },
       ripples: {
         src: "dist/css/ripples.css",
@@ -201,7 +224,7 @@ module.exports = function(grunt) {
         files: [
           "index.html",
           "dist/css/**/*.css",
-          "**/*.{png,jpg,jpeg,gif,webp,svg}"
+          "demo/**/*.{png,jpg,jpeg,gif,webp,svg}"
         ]
       }
     },
@@ -243,11 +266,14 @@ module.exports = function(grunt) {
   ]);
   grunt.registerTask("material:less", [
     "less:material",
-    "less:materialwfont",
+    "less:materialfullpalette",
+    "less:roboto",
     "csswring:material",
-    "csswring:materialwfont",
+    "csswring:materialfullpalette",
+    "csswring:roboto",
     "autoprefixer:material",
-    "autoprefixer:materialwfont"
+    "autoprefixer:materialfullpalette",
+    "autoprefixer:roboto"
   ]);
   grunt.registerTask("material:js", [
     "copy:material",

README.md

@@ -29,9 +29,9 @@ If you prefer, you can include this framework in your project using our official
 Navigate to the `dist/` folder in this repository, and you will see the `test.html` file, which has the CSS include statements, in the `head` section and the JS includes just before `body` section closes.
 You need to copy the `dist/` folder to the root of your project, ensuring that all the files in your project can access the files through the relative URL, supplied in the CSS and the JS includes.
 
-#### material-wfont.css or material.css?
+#### material-fullpalette.css or material.css?
 
-The only difference is that `material-wfont.css` has the Google web fonts included.
+The only difference is that `material-fullpalette.css` has the full colors palette available, the other one has just the primary colors.
 
 #### Use custom color as primary
 
@@ -91,6 +91,8 @@ These colors are taken from the Material Design color palette and are reported b
 
 ![palette](demo/imgs/palette.jpg)
 
+To take advantage of all the shades please use `material-fullpalette.css`, be aware of its huge size.
+
 ### Buttons
 
 Add `.btn-flat` to a button to make it flat, without shadows.

bootstrap-elements.html

@@ -5,8 +5,9 @@
         <meta charset="utf-8">
         <title>Bootstrap Material</title>
         <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
+        <link href="dist/css/roboto.min.css" rel="stylesheet">
+        <link href="dist/css/material-fullpalette.min.css" rel="stylesheet">
         <link href="dist/css/ripples.min.css" rel="stylesheet">
-        <link href="dist/css/material-wfont.min.css" rel="stylesheet">
         <link href="//fezvrasta.github.io/snackbarjs/dist/snackbar.min.css" rel="stylesheet">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <style>

dist/css/ripples.css

@@ -20,12 +20,17 @@
   margin-top: -10px;
   border-radius: 100%;
   background-color: rgba(0, 0, 0, 0.05);
+  -webkit-transform: scale(1);
+      -ms-transform: scale(1);
           transform: scale(1);
+  -webkit-transform-origin: 50%;
+      -ms-transform-origin: 50%;
           transform-origin: 50%;
   opacity: 0;
   pointer-events: none;
 }
 .ripple.ripple-on {
+  transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
   transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
   opacity: 0.1;
 }

dist/css/ripples.css.map

@@ -1 +1 @@
-{"version":3,"sources":["/less/ripples.less"],"names":[],"mappings":"AAAA;EACI,kBAAA;;AAEJ;EACI,kBAAA;EACA,MAAA;EACA,OAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,sBAAA;EACA,oBAAA;;AAEJ;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,mBAAA;EACA,qCAAA;EACA,WAAW,QAAX;EACA,qBAAA;EACA,UAAA;EACA,oBAAA;;AAEJ,OAAO;EACH,qDAAqD,iCAArD;EACA,YAAA;;AAEJ,OAAO;EACH,6CAAA;EACA,UAAA","sourcesContent":[".withripple {\n    position: relative;\n}\n.ripple-wrapper {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    border-radius: inherit;\n    pointer-events: none;\n}\n.ripple {\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    margin-left: -10px;\n    margin-top: -10px;\n    border-radius: 100%;\n    background-color: rgba(0,0,0,0.05);\n    transform: scale(1);\n    transform-origin: 50%;\n    opacity: 0;\n    pointer-events: none;\n}\n.ripple.ripple-on {\n    transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n    opacity: 0.1;\n}\n.ripple.ripple-out {\n    transition: opacity 0.1s linear 0s !important;\n    opacity: 0;\n}\n"]}
+{"version":3,"sources":["/less/ripples.less","ripples.css"],"names":[],"mappings":"AAAA;EACI,oBAAA;ECCH;ADCD;EACI,oBAAA;EACA,QAAA;EACA,SAAA;EACA,YAAA;EACA,aAAA;EACA,cAAA;EACA,kBAAA;EACA,wBAAA;EACA,sBAAA;ECCH;ADCD;EACI,oBAAA;EACA,aAAA;EACA,cAAA;EACA,oBAAA;EACA,mBAAA;EACA,qBAAA;EACA,uCAAA;EACA,6BAAA;MAAA,yBAAA;UAAA,qBAAA;EACA,+BAAA;MAAA,2BAAA;UAAA,uBAAA;EACA,YAAA;EACA,sBAAA;ECCH;ADCD;EACI,gGAAA;EAAA,wFAAA;EACA,cAAA;ECCH;ADCD;EACI,+CAAA;EACA,YAAA;ECCH","file":"ripples.css","sourcesContent":[".withripple {\n    position: relative;\n}\n.ripple-wrapper {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    border-radius: inherit;\n    pointer-events: none;\n}\n.ripple {\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    margin-left: -10px;\n    margin-top: -10px;\n    border-radius: 100%;\n    background-color: rgba(0,0,0,0.05);\n    transform: scale(1);\n    transform-origin: 50%;\n    opacity: 0;\n    pointer-events: none;\n}\n.ripple.ripple-on {\n    transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n    opacity: 0.1;\n}\n.ripple.ripple-out {\n    transition: opacity 0.1s linear 0s !important;\n    opacity: 0;\n}\n",".withripple {\n  position: relative;\n}\n.ripple-wrapper {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  border-radius: inherit;\n  pointer-events: none;\n}\n.ripple {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  margin-left: -10px;\n  margin-top: -10px;\n  border-radius: 100%;\n  background-color: rgba(0, 0, 0, 0.05);\n  transform: scale(1);\n  transform-origin: 50%;\n  opacity: 0;\n  pointer-events: none;\n}\n.ripple.ripple-on {\n  transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n  opacity: 0.1;\n}\n.ripple.ripple-out {\n  transition: opacity 0.1s linear 0s !important;\n  opacity: 0;\n}\n/*# sourceMappingURL=ripples.css.map */"]}

dist/css/roboto.css

@@ -0,0 +1,25 @@
+@font-face {
+  font-family: 'RobotoDraft';
+  font-style: normal;
+  font-weight: 400;
+  src: local('RobotoDraft'), local('RobotoDraft-Regular'), local('Roboto-Regular'), url(../fonts/RobotoDraftRegular.woff2) format('woff2'), url(../fonts/RobotoDraftRegular.woff) format('woff');
+}
+@font-face {
+  font-family: 'RobotoDraft';
+  font-style: normal;
+  font-weight: 500;
+  src: local('RobotoDraft Medium'), local('RobotoDraft-Medium'), local('Roboto-Medium'), url(../fonts/RobotoDraftMedium.woff2) format('woff2'), url(../fonts/RobotoDraftMedium.woff) format('woff');
+}
+@font-face {
+  font-family: 'RobotoDraft';
+  font-style: normal;
+  font-weight: 700;
+  src: local('RobotoDraft Bold'), local('RobotoDraft-Bold'), local('Roboto-Bold'), url(../fonts/RobotoDraftBold.woff2) format('woff2'), url(../fonts/RobotoDraftBold.woff) format('woff');
+}
+@font-face {
+  font-family: 'RobotoDraft';
+  font-style: italic;
+  font-weight: 400;
+  src: local('RobotoDraft Italic'), local('RobotoDraft-Italic'), local('Roboto-Italic'), url(../fonts/RobotoDraftItalic.woff2) format('woff2'), url(../fonts/RobotoDraftItalic.woff) format('woff');
+}
+/*# sourceMappingURL=roboto.css.map */

dist/css/roboto.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/less/roboto.less","roboto.css"],"names":[],"mappings":"AAAA;EACE,4BAAA;EACA,oBAAA;EACA,kBAAA;EAEA,gMAAA;ECAD;ADOD;EACE,4BAAA;EACA,oBAAA;EACA,kBAAA;EAEA,mMAAA;ECND;ADaD;EACE,4BAAA;EACA,oBAAA;EACA,kBAAA;EAEA,yLAAA;ECZD;ADmBD;EACE,4BAAA;EACA,oBAAA;EACA,kBAAA;EAEA,mMAAA;EClBD","file":"roboto.css","sourcesContent":["@font-face {\n  font-family: 'RobotoDraft';\n  font-style: normal;\n  font-weight: 400;\n  //src: local('RobotoDraft'), local('RobotoDraft-Regular'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/robotodraft/v1/0xES5Sl_v6oyT7dAKuoni4gp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/0xES5Sl_v6oyT7dAKuoni7rIa-7acMAeDBVuclsi6Gc.woff) format('woff');\n  src: local('RobotoDraft'),\n       local('RobotoDraft-Regular'),\n       local('Roboto-Regular'),\n       url(../fonts/RobotoDraftRegular.woff2) format('woff2'),\n       url(../fonts/RobotoDraftRegular.woff) format('woff');\n}\n\n@font-face {\n  font-family: 'RobotoDraft';\n  font-style: normal;\n  font-weight: 500;\n  //src: local('RobotoDraft Medium'), local('RobotoDraft-Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwXJuJo8UJJfpGKt7pXjBv4s.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwaTA90I55Xt7owhZwpPnMsc.woff) format('woff');\n  src: local('RobotoDraft Medium'),\n       local('RobotoDraft-Medium'),\n       local('Roboto-Medium'),\n       url(../fonts/RobotoDraftMedium.woff2) format('woff2'),\n       url(../fonts/RobotoDraftMedium.woff) format('woff');\n}\n\n@font-face {\n  font-family: 'RobotoDraft';\n  font-style: normal;\n  font-weight: 700;\n  //src: local('RobotoDraft Bold'), local('RobotoDraft-Bold'),  local('Roboto-Bold'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-Vwf79_ZuUxCigM2DespTnFaw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwRbnBKKEOwRKgsHDreGcocg.woff) format('woff');\n  src: local('RobotoDraft Bold'),\n       local('RobotoDraft-Bold'),\n       local('Roboto-Bold'),\n       url(../fonts/RobotoDraftBold.woff2) format('woff2'),\n       url(../fonts/RobotoDraftBold.woff) format('woff');\n}\n\n@font-face {\n  font-family: 'RobotoDraft';\n  font-style: italic;\n  font-weight: 400;\n  //src: local('RobotoDraft Italic'), local('RobotoDraft-Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/robotodraft/v1/er-TIW55l9KWsTS1x9bTfgeOulFbQKHxPa89BaxZzA0.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/er-TIW55l9KWsTS1x9bTfoo3ZslTYfJv0R05CazkwN8.woff) format('woff');\n  src: local('RobotoDraft Italic'),\n       local('RobotoDraft-Italic'),\n       local('Roboto-Italic'),\n       url(../fonts/RobotoDraftItalic.woff2) format('woff2'),\n       url(../fonts/RobotoDraftItalic.woff) format('woff');\n}\n","@font-face {\n  font-family: 'RobotoDraft';\n  font-style: normal;\n  font-weight: 400;\n  src: local('RobotoDraft'), local('RobotoDraft-Regular'), local('Roboto-Regular'), url(../fonts/RobotoDraftRegular.woff2) format('woff2'), url(../fonts/RobotoDraftRegular.woff) format('woff');\n}\n@font-face {\n  font-family: 'RobotoDraft';\n  font-style: normal;\n  font-weight: 500;\n  src: local('RobotoDraft Medium'), local('RobotoDraft-Medium'), local('Roboto-Medium'), url(../fonts/RobotoDraftMedium.woff2) format('woff2'), url(../fonts/RobotoDraftMedium.woff) format('woff');\n}\n@font-face {\n  font-family: 'RobotoDraft';\n  font-style: normal;\n  font-weight: 700;\n  src: local('RobotoDraft Bold'), local('RobotoDraft-Bold'), local('Roboto-Bold'), url(../fonts/RobotoDraftBold.woff2) format('woff2'), url(../fonts/RobotoDraftBold.woff) format('woff');\n}\n@font-face {\n  font-family: 'RobotoDraft';\n  font-style: italic;\n  font-weight: 400;\n  src: local('RobotoDraft Italic'), local('RobotoDraft-Italic'), local('Roboto-Italic'), url(../fonts/RobotoDraftItalic.woff2) format('woff2'), url(../fonts/RobotoDraftItalic.woff) format('woff');\n}\n/*# sourceMappingURL=roboto.css.map */"]}

dist/css/roboto.min.css

@@ -0,0 +1,2 @@
+@font-face{font-family:RobotoDraft;src:local('RobotoDraft'),local('RobotoDraft-Regular'),local('Roboto-Regular'),url(../fonts/RobotoDraftRegular.woff2) format('woff2'),url(../fonts/RobotoDraftRegular.woff) format('woff')}@font-face{font-family:RobotoDraft;font-weight:500;src:local('RobotoDraft Medium'),local('RobotoDraft-Medium'),local('Roboto-Medium'),url(../fonts/RobotoDraftMedium.woff2) format('woff2'),url(../fonts/RobotoDraftMedium.woff) format('woff')}@font-face{font-family:RobotoDraft;font-weight:700;src:local('RobotoDraft Bold'),local('RobotoDraft-Bold'),local('Roboto-Bold'),url(../fonts/RobotoDraftBold.woff2) format('woff2'),url(../fonts/RobotoDraftBold.woff) format('woff')}@font-face{font-family:RobotoDraft;font-style:italic;src:local('RobotoDraft Italic'),local('RobotoDraft-Italic'),local('Roboto-Italic'),url(../fonts/RobotoDraftItalic.woff2) format('woff2'),url(../fonts/RobotoDraftItalic.woff) format('woff')}
+/*# sourceMappingURL=roboto.min.css.map */

dist/css/roboto.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/less/roboto.less"],"names":[],"mappings":"AAAA,WACE,wBAIA,CAAA,yLAAA,CAAA,UAQA,wBAEA,CAAA,eAEA,CAAA,4LAAA,CAAA,UAQA,wBAEA,CAAA,eAEA,CAAA,kLAAA,CAAA,UAQA,wBACA,CAAA,iBAGA,CAAA,4LAAA,CAAA","file":"roboto.min.css","sourcesContent":["@font-face {\n  font-family: 'RobotoDraft';\n  font-style: normal;\n  font-weight: 400;\n  //src: local('RobotoDraft'), local('RobotoDraft-Regular'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/robotodraft/v1/0xES5Sl_v6oyT7dAKuoni4gp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/0xES5Sl_v6oyT7dAKuoni7rIa-7acMAeDBVuclsi6Gc.woff) format('woff');\n  src: local('RobotoDraft'),\n       local('RobotoDraft-Regular'),\n       local('Roboto-Regular'),\n       url(../fonts/RobotoDraftRegular.woff2) format('woff2'),\n       url(../fonts/RobotoDraftRegular.woff) format('woff');\n}\n\n@font-face {\n  font-family: 'RobotoDraft';\n  font-style: normal;\n  font-weight: 500;\n  //src: local('RobotoDraft Medium'), local('RobotoDraft-Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwXJuJo8UJJfpGKt7pXjBv4s.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwaTA90I55Xt7owhZwpPnMsc.woff) format('woff');\n  src: local('RobotoDraft Medium'),\n       local('RobotoDraft-Medium'),\n       local('Roboto-Medium'),\n       url(../fonts/RobotoDraftMedium.woff2) format('woff2'),\n       url(../fonts/RobotoDraftMedium.woff) format('woff');\n}\n\n@font-face {\n  font-family: 'RobotoDraft';\n  font-style: normal;\n  font-weight: 700;\n  //src: local('RobotoDraft Bold'), local('RobotoDraft-Bold'),  local('Roboto-Bold'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-Vwf79_ZuUxCigM2DespTnFaw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwRbnBKKEOwRKgsHDreGcocg.woff) format('woff');\n  src: local('RobotoDraft Bold'),\n       local('RobotoDraft-Bold'),\n       local('Roboto-Bold'),\n       url(../fonts/RobotoDraftBold.woff2) format('woff2'),\n       url(../fonts/RobotoDraftBold.woff) format('woff');\n}\n\n@font-face {\n  font-family: 'RobotoDraft';\n  font-style: italic;\n  font-weight: 400;\n  //src: local('RobotoDraft Italic'), local('RobotoDraft-Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/robotodraft/v1/er-TIW55l9KWsTS1x9bTfgeOulFbQKHxPa89BaxZzA0.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/er-TIW55l9KWsTS1x9bTfoo3ZslTYfJv0R05CazkwN8.woff) format('woff');\n  src: local('RobotoDraft Italic'),\n       local('RobotoDraft-Italic'),\n       local('Roboto-Italic'),\n       url(../fonts/RobotoDraftItalic.woff2) format('woff2'),\n       url(../fonts/RobotoDraftItalic.woff) format('woff');\n}\n"]}

dist/js/material.js

@@ -14,7 +14,7 @@
     if (typeof evt.which == "undefined") {
       return true;
     } else if (typeof evt.which == "number" && evt.which > 0) {
-      return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8;
+      return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8 && evt.which != 9;
     }
     return false;
   }
@@ -111,7 +111,7 @@
       })
       .on("keyup change", ".form-control", function() {
         var $this = $(this);
-        if($this.val() === "" && $this[0].checkValidity()) {
+        if ($this.val() === "" && (typeof $this[0].checkValidity != "undefined" && $this[0].checkValidity())) {
           $this.addClass("empty");
         } else {
           $this.removeClass("empty");

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:!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()&&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);
+!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

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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"}

dist/test.html

@@ -3,8 +3,10 @@
     <head>
 
         <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
-        <link href="css/ripples.min.css" rel="stylesheet">
+        <!-- Include roboto.css to use the Roboto web font, material.css to include the theme and ripples.css to style the ripple effect -->
-        <link href="css/material-wfont.min.css" rel="stylesheet">
+        <link href="dist/css/roboto.min.css" rel="stylesheet">
+        <link href="dist/css/material.min.css" rel="stylesheet">
+        <link href="dist/css/ripples.min.css" rel="stylesheet">
 
     </head>
 
@@ -38,6 +40,7 @@
         <script src="js/material.min.js"></script>
         <script>
             $(document).ready(function() {
+                // This command is used to initialize some elements and make them work properly
                 $.material.init();
             });
         </script>

index.html

@@ -11,7 +11,8 @@
     <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
 
     <!-- Material Design for Bootstrap -->
-    <link href="dist/css/material-wfont.min.css" rel="stylesheet">
+    <link href="dist/css/roboto.min.css" rel="stylesheet">
+    <link href="dist/css/material-fullpalette.min.css" rel="stylesheet">
     <link href="dist/css/ripples.min.css" rel="stylesheet">
 
     <!-- Dropdown.js -->
@@ -406,6 +407,20 @@
                 </label>
               </div>
 
+              <h1 class="header">Toggle Button Variations</h1>
+              <div class="togglebutton togglebutton-material-pink">
+                <label>
+                  Wi-Fi
+                  <input type="checkbox" checked>
+                </label>
+              </div>
+              <div class="togglebutton togglebutton-material-deep-orange">
+                <label>
+                  Bluetooth
+                  <input type="checkbox" checked>
+                </label>
+              </div>
+
               <style>
                 #toggle-button h2 {
                   font-size: 18.7199993133545px;
@@ -755,12 +770,11 @@
             </div>
             <div class="well page" id="material-colors">
               <h1 class="header">Material Color Samples</h1>
-              <p>This is the list of all the supported color variations. Each color can be applied to every element that supports variations.
+              <p>This is the list of all the supported color variations. Each color can be applied to every element that supports variations.</p>
-              </p>
+
-              <pre><code>.btn-material-{{color}}
+              <pre>.btn-material-{{color}}<br>.navbar-material-{{color}}<br>.well-material-{{color}}<br>etc...</pre>
-              .navbar-material-{{color}}
+
-              .well-material-{{color}}
+              <p><b>material.css</b> includes only the primary color shades (red, pink, purple, deep-purple, etc...), if you want the entire palette please use <b>material-fullpalette.css</b></p>
-              etc...</code></pre>
               <div class="sampleOthers">
                 <button class="btn btn-black btn-lg">Black</button>
                 <button class="btn btn-white btn-lg">White</button>
@@ -1186,11 +1200,14 @@
                   <option value="Sfogliatelle">Sfogliatelle</option>
                 </select>
 
+                <br>
 
                 <select class="form-control" disabled placeholder="Your favorite pastry">
                   <option value="disabled">Disabled</option>
                 </select>
               </div>
+              <br>
+              <p>Dropdowns provided by <a href="https://github.com/FezVrasta/dropdown.js" target="_blank">Dropdown.js</a></p>
 
             </div>
             <div class="well page" id="dialog">

less/_alerts.less

@@ -1,16 +1,23 @@
 .alert {
     border: 0px;
     border-radius: 0;
+
+    .generic-variations(~"", @darkbg-text, {
+        background-color: @material-color;
+        color: @text-color;
+
         a, .alert-link {
-        color: #FFFFFF;
+            color: @text-color;
         }
-    .variations(~"", background-color, #FFFFFF);
+    });
+
     &-info, &-danger, &-warning, &-success {
-        color: #FFFFFF;
+        color: @darkbg-text;
     }
+
     &-default {
         a, .alert-link {
-            color: #000000;
+            color: @lightbg-text;
         }
     }
 }

less/_buttons.less

@@ -10,18 +10,39 @@
   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;
 
+
   .variations(~".btn-flat:not(.btn-link)", color, @lightbg-text);
 
   .background-variations(~":not(.btn-link):not(.btn-flat)", @btn-default);
 
+  // BTN hover effect
+  .generic-variations(~":hover:not(.btn-link):not(.btn-flat)", @btn-default, {
+    background-color: contrast(@material-color, darken(@material-color, 4%), lighten(@material-color, 4%), @contrast-factor);
+  });
+  // BTN active effect
+  .generic-variations(~":active:not(.btn-link):not(.btn-flat)", @btn-default, {
+    background-color: contrast(@material-color, darken(@material-color, 6%), lighten(@material-color, 6%), @contrast-factor);
+  });
+  // BTN .active effect
+  .generic-variations(~".active:not(.btn-link):not(.btn-flat)", @btn-default, {
+    background-color: contrast(@material-color, darken(@material-color, 6%), lighten(@material-color, 6%), @contrast-factor);
+  });
+  // BTN flat hover effect
+  .generic-variations(~".btn-flat:hover:not(.btn-ink)", @btn-default, {
+    background-color: fade(@material-color, 20%);
+  });
+
+}
+
+.btn {
   &.btn-flat {
     background: none;
     box-shadow: none;
@@ -44,14 +65,11 @@
     &, &:hover, &:active {
       .variations(~"", background-color, transparent);
     }
-    & {
+    &, &:hover {
-      .shadow-z-3();
+      .shadow-z-1();
-    }
-    &:hover {
-      .shadow-z-4();
     }
     &:active {
-      .shadow-z-5();
+      .shadow-z-1-hover();
     }
     &, .ripple-wrapper {
       border-radius: 100%;
@@ -112,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/_dialogs.less

@@ -1,18 +1,32 @@
+//
+// Modals
+// Material Design element Dialogs
+// --------------------------------------------------
 .modal-content {
   .shadow-z-5();
   border-radius: 2px;
   border: none;
+  // Modal header
+  // Top section of the modal w/ title and dismiss
   .modal-header {
     border-bottom: none;
-    padding: 24px;
+    padding-top:    24px;
-    padding-bottom: 0;
+    padding-right:  24px;
+    padding-bottom: 0px;
+    padding-left:   24px;
   }
+  // Modal body
+  // Where all modal content resides (sibling of .modal-header and .modal-footer)
   .modal-body {
-    padding: 24px;
+    padding-top:    0px;
+    padding-right:  24px;
+    padding-bottom: 16px;
+    padding-left:   24px;
   }
+  // Footer (for actions)
   .modal-footer {
     border-top: none;
-    padding: 24px;
+    padding: 7px;
     button {
       margin: 0;
       padding-left: 16px;
@@ -33,7 +47,6 @@
     padding-top: 0;
   }
 }
-
 .modal-backdrop {
   background: rgba(0,0,0,0.3);
 }

less/_inputs.less

@@ -1,6 +1,6 @@
 fieldset[disabled] .form-control, .form-control-wrapper .form-control, .form-control {
   &, &:focus, &.focus {
-    &:not(textarea):not(select) {
+    &:not(textarea) {
       height: 28px;
     }
     padding: 0;
@@ -14,9 +14,7 @@ fieldset[disabled] .form-control, .form-control-wrapper .form-control, .form-con
     }
   }
 }
-select.form-control {
+
-  height: 23px;
-}
 select[multiple].form-control {
   &, &:focus, &.focus {
     height: 85px;
@@ -183,7 +181,6 @@ fieldset[disabled] .form-control:disabled, .form-control-wrapper .form-control:d
 select.form-control {
   border: 0;
   box-shadow: none;
-  border-bottom: 1px solid #757575;
   border-radius: 0;
   &:focus, &.focus {
     box-shadow: none;

less/_mixins-fullpalette.less

@@ -0,0 +1,158 @@
+// usage: .variations(~" .check", color, transparent);
+.variations(@extra, @property, @default) {
+  .generic-variations(@extra, @default, {
+      @{property}: @material-color;
+    });
+}
+
+.background-variations(@extra, @default) {
+  .generic-variations(@extra, @default, {
+      background-color: @material-color;
+      color: @text-color;
+      & when (@material-color = @btn-default) {
+        color: @lightbg-text;
+      }
+    });
+}
+
+.text-variations(@extra, @default) {
+  .generic-variations(@extra, @default, {
+      color: @material-color;
+    });
+}
+
+//
+// To use this mixin you should pass a function as final parameter to define
+// the style. In that definition you can use the following variables to define it.
+//
+// @material-color-name ---> "red", "green", "indigo" ...
+// @material-color-full-name ---> "red", "green-50", "indigo-400" ...
+// @material-color ---> #f44336, #e8f5e9, #5c6bc0 ...
+// @text-color ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ...
+//
+
+.generic-variations(@extra, @default, @func) {
+
+  @contrast-factor: 40%;
+
+  // bootstrap styles
+  &@{extra}, &-default@{extra} {
+    @material-color-name: "default";
+    @material-color-full-name: @material-color-name;
+    @material-color: @default;
+    @text-color: @darkbg-text;
+    @func();
+  }
+  &-black@{extra} {
+    @material-color-name: "black";
+    @material-color-full-name: @material-color-name;
+    @material-color: @black;
+    @text-color: @darkbg-text;
+    @func();
+  }
+  &-white@{extra} {
+    @material-color-name: "white";
+    @material-color-full-name: @material-color-name;
+    @material-color: @white;
+    @text-color: @lightbg-text;
+    @func();
+  }
+  &-inverse@{extra} {
+    @material-color-name: "inverse";
+    @material-color-full-name: @material-color-name;
+    @material-color: @inverse;
+    @text-color: contrast(@inverse, @lightbg-text, @darkbg-text, @contrast-factor);
+    @func();
+  }
+  &-primary@{extra} {
+    @material-color-name: "primary";
+    @material-color-full-name: @material-color-name;
+    @material-color: @primary;
+    @text-color: @darkbg-text;
+    @func();
+  }
+  &-success@{extra} {
+    @material-color-name: "success";
+    @material-color-full-name: @material-color-name;
+    @material-color: @success;
+    @text-color: @darkbg-text;
+    @func();
+  }
+  &-info@{extra} {
+    @material-color-name: "info";
+    @material-color-full-name: @material-color-name;
+    @material-color: @info;
+    @text-color: @darkbg-text;
+    @func();
+  }
+  &-warning@{extra} {
+    @material-color-name: "warning";
+    @material-color-full-name: @material-color-name;
+    @material-color: @warning;
+    @text-color: @darkbg-text;
+    @func();
+  }
+  &-danger@{extra} {
+    @material-color-name: "danger";
+    @material-color-full-name: @material-color-name;
+    @material-color: @danger;
+    @text-color: @darkbg-text;
+    @func();
+  }
+
+  // given a color build multiples dephs
+  .generic-variations-factory(@material-color-name) {
+
+    // given a color and its deph build css
+    .generic-variations-factory-deep(@material-color-number) {
+
+      &-material-@{material-color-name}@{material-color-number}@{extra} {
+        @material-color-full-name: "@{material-color-name}@{material-color-number}";
+        @material-color: @@material-color-full-name;
+        @text-color: contrast(@material-color, @lightbg-text, @darkbg-text, @contrast-factor);
+        @func();
+      }
+
+    }
+
+    .generic-variations-factory-deep(~"");
+    .generic-variations-factory-deep(~"-50");
+    .generic-variations-factory-deep(~"-100");
+    .generic-variations-factory-deep(~"-200");
+    .generic-variations-factory-deep(~"-300");
+    .generic-variations-factory-deep(~"-400");
+    .generic-variations-factory-deep(~"-500");
+    .generic-variations-factory-deep(~"-600");
+    .generic-variations-factory-deep(~"-700");
+    .generic-variations-factory-deep(~"-800");
+    .generic-variations-factory-deep(~"-900");
+    .generic-variations-factory-deep(~"-A100");
+    .generic-variations-factory-deep(~"-A200");
+    .generic-variations-factory-deep(~"-A400");
+    .generic-variations-factory-deep(~"-A700");
+  }
+
+  .generic-variations-factory(~"red");
+  .generic-variations-factory(~"pink");
+  .generic-variations-factory(~"purple");
+  .generic-variations-factory(~"deep-purple");
+  .generic-variations-factory(~"indigo");
+  .generic-variations-factory(~"blue");
+  .generic-variations-factory(~"light-blue");
+  .generic-variations-factory(~"cyan");
+  .generic-variations-factory(~"teal");
+  .generic-variations-factory(~"green");
+  .generic-variations-factory(~"light-green");
+  .generic-variations-factory(~"lime");
+  .generic-variations-factory(~"yellow");
+  .generic-variations-factory(~"amber");
+  .generic-variations-factory(~"orange");
+  .generic-variations-factory(~"deep-orange");
+  .generic-variations-factory(~"brown");
+  .generic-variations-factory(~"grey");
+  .generic-variations-factory(~"blue-grey");
+
+}
+
+
+@all-variations: ~"-default, -primary, -info, -success, -warning, -danger";

less/_mixins.less

@@ -21,16 +21,16 @@
     });
 }
 
-/**
+//
- *  To use this mixin u should pass a function as final parameter to define
+// To use this mixin you should pass a function as final parameter to define
- *  the style. In that definition u can use the following variables to define it.
+// the style. In that definition you can use the following variables to define it.
- *
+//
- *  @material-color-name ---> "red", "green", "indigo" ...
+// @material-color-name ---> "red", "green", "indigo" ...
- *  @material-color-full-name ---> "red", "green-50", "indigo-400" ...
+// @material-color-full-name ---> "red", "green-50", "indigo-400" ...
- *  @material-color ---> #f44336, #e8f5e9, #5c6bc0 ...
+// @material-color ---> #f44336, #e8f5e9, #5c6bc0 ...
- *  @text-color ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ...
+// @text-color ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ...
- *
+//
- */
+
 
 .generic-variations(@extra, @default, @func) {
 
@@ -117,20 +117,6 @@
     }
 
     .generic-variations-factory-deep(~"");
-    .generic-variations-factory-deep(~"-50");
-    .generic-variations-factory-deep(~"-100");
-    .generic-variations-factory-deep(~"-200");
-    .generic-variations-factory-deep(~"-300");
-    .generic-variations-factory-deep(~"-400");
-    .generic-variations-factory-deep(~"-500");
-    .generic-variations-factory-deep(~"-600");
-    .generic-variations-factory-deep(~"-700");
-    .generic-variations-factory-deep(~"-800");
-    .generic-variations-factory-deep(~"-900");
-    .generic-variations-factory-deep(~"-A100");
-    .generic-variations-factory-deep(~"-A200");
-    .generic-variations-factory-deep(~"-A400");
-    .generic-variations-factory-deep(~"-A700");
   }
 
   .generic-variations-factory(~"red");

less/_navbar.less

@@ -87,6 +87,12 @@
     }
 
     @media (max-width: 767px) {
+      .navbar-text {
+        color: inherit;
+        margin-top: 15px;
+        margin-bottom: 15px;
+      }
+
       // Dropdowns get custom display
       .open .dropdown-menu {
         > .dropdown-header {
@@ -167,6 +173,22 @@
     .navbar-form .form-control-wrapper input.form-control::placeholder, .navbar-form input.form-control::placeholder {
       color: @text-color;
     }
+    .dropdown-menu {
+      li > a {
+        &:hover,
+        &:focus {
+          color: @material-color;
+        }
+      }
+      .active > a {
+        &:hover,
+        &:focus {
+          color: @text-color;
+        }
+        background-color: @material-color;
+        color: @text-color;
+      }
+    }
   });
 
   &-inverse {

less/_radios.less

@@ -57,7 +57,12 @@
     opacity: 0.5;
   }
 
-    input[type=radio] { display: none; }
+  input[type=radio] {
+    opacity: 0;
+    height: 0;
+    width: 0;
+    overflow: hidden;
+  }
   input[type=radio]:checked ~ .check {
     transform: scale(0.55);
   }

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);
+  box-shadow:
-}
+    0 8px 17px 0 rgba(0, 0, 0, 0.2),
-.shadow-z-2-hover {
+    0 6px 20px 0 rgba(0, 0, 0, 0.19);
-    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px 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

@@ -1,6 +1,6 @@
 .togglebutton {
   vertical-align: middle;
-  &, * {
+  &, label, input, .toggle {
     user-select: none;
   }
   label {
@@ -12,14 +12,6 @@
       width: 0;
       height:0;
     }
-    // Switch bg on
-    input[type=checkbox]:first-of-type:checked + .toggle {
-      background-color: rgba(0, 149, 135, 0.5);
-      // Handle on
-      &:after {
-        background-color: #009587;
-      }
-    }
     // Switch bg off and disabled
     .toggle,
     input[type=checkbox][disabled]:first-of-type + .toggle {
@@ -52,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 {
@@ -65,4 +53,15 @@
       left: 15px;
     }
   }
+
+  // Switch bg on
+  .generic-variations(~" label input[type=checkbox]:first-of-type:checked + .toggle", @primary, {
+    background-color: fade(@material-color, 50%);
+  });
+  // 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, {
+    background-color: fade(@material-color, 10%);
+  });
 }

less/material-fullpalette.less

@@ -0,0 +1,2 @@
+@import "material.less";
+@import "_mixins-fullpalette.less";

less/material-wfont.less

@@ -1,28 +0,0 @@
-@font-face {
-  font-family: 'RobotoDraft';
-  font-style: normal;
-  font-weight: 400;
-  src: local('RobotoDraft'), local('RobotoDraft-Regular'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/robotodraft/v1/0xES5Sl_v6oyT7dAKuoni4gp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/0xES5Sl_v6oyT7dAKuoni7rIa-7acMAeDBVuclsi6Gc.woff) format('woff');
-}
-
-@font-face {
-  font-family: 'RobotoDraft';
-  font-style: normal;
-  font-weight: 500;
-  src: local('RobotoDraft Medium'), local('RobotoDraft-Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwXJuJo8UJJfpGKt7pXjBv4s.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwaTA90I55Xt7owhZwpPnMsc.woff) format('woff');
-}
-
-@font-face {
-  font-family: 'RobotoDraft';
-  font-style: normal;
-  font-weight: 700;
-  src: local('RobotoDraft Bold'), local('RobotoDraft-Bold'),  local('Roboto-Bold'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-Vwf79_ZuUxCigM2DespTnFaw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwRbnBKKEOwRKgsHDreGcocg.woff) format('woff');
-}
-
-@font-face {
-  font-family: 'RobotoDraft';
-  font-style: italic;
-  font-weight: 400;
-  src: local('RobotoDraft Italic'), local('RobotoDraft-Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/robotodraft/v1/er-TIW55l9KWsTS1x9bTfgeOulFbQKHxPa89BaxZzA0.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/er-TIW55l9KWsTS1x9bTfoo3ZslTYfJv0R05CazkwN8.woff) format('woff');
-}
-@import "material.less";

less/material.less

@@ -73,13 +73,6 @@ legend {
   .variations(~" li a:hover", color, @primary);
 }
 
-// Active state
-.dropdown-menu {
-  .variations(~" > .active > a", background-color, @primary);
-  .variations(~" > .active > a:hover", background-color, @primary);
-  .variations(~" > .active > a:focus", background-color, @primary);
-}
-
 // Alerts
 @import "_alerts.less";
 

less/roboto.less

@@ -0,0 +1,47 @@
+@font-face {
+  font-family: 'RobotoDraft';
+  font-style: normal;
+  font-weight: 400;
+  //src: local('RobotoDraft'), local('RobotoDraft-Regular'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/robotodraft/v1/0xES5Sl_v6oyT7dAKuoni4gp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/0xES5Sl_v6oyT7dAKuoni7rIa-7acMAeDBVuclsi6Gc.woff) format('woff');
+  src: local('RobotoDraft'),
+       local('RobotoDraft-Regular'),
+       local('Roboto-Regular'),
+       url(../fonts/RobotoDraftRegular.woff2) format('woff2'),
+       url(../fonts/RobotoDraftRegular.woff) format('woff');
+}
+
+@font-face {
+  font-family: 'RobotoDraft';
+  font-style: normal;
+  font-weight: 500;
+  //src: local('RobotoDraft Medium'), local('RobotoDraft-Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwXJuJo8UJJfpGKt7pXjBv4s.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwaTA90I55Xt7owhZwpPnMsc.woff) format('woff');
+  src: local('RobotoDraft Medium'),
+       local('RobotoDraft-Medium'),
+       local('Roboto-Medium'),
+       url(../fonts/RobotoDraftMedium.woff2) format('woff2'),
+       url(../fonts/RobotoDraftMedium.woff) format('woff');
+}
+
+@font-face {
+  font-family: 'RobotoDraft';
+  font-style: normal;
+  font-weight: 700;
+  //src: local('RobotoDraft Bold'), local('RobotoDraft-Bold'),  local('Roboto-Bold'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-Vwf79_ZuUxCigM2DespTnFaw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwRbnBKKEOwRKgsHDreGcocg.woff) format('woff');
+  src: local('RobotoDraft Bold'),
+       local('RobotoDraft-Bold'),
+       local('Roboto-Bold'),
+       url(../fonts/RobotoDraftBold.woff2) format('woff2'),
+       url(../fonts/RobotoDraftBold.woff) format('woff');
+}
+
+@font-face {
+  font-family: 'RobotoDraft';
+  font-style: italic;
+  font-weight: 400;
+  //src: local('RobotoDraft Italic'), local('RobotoDraft-Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/robotodraft/v1/er-TIW55l9KWsTS1x9bTfgeOulFbQKHxPa89BaxZzA0.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/er-TIW55l9KWsTS1x9bTfoo3ZslTYfJv0R05CazkwN8.woff) format('woff');
+  src: local('RobotoDraft Italic'),
+       local('RobotoDraft-Italic'),
+       local('Roboto-Italic'),
+       url(../fonts/RobotoDraftItalic.woff2) format('woff2'),
+       url(../fonts/RobotoDraftItalic.woff) format('woff');
+}

meteor/package.js

@@ -0,0 +1,39 @@
+// package metadata file for Meteor.js
+'use strict';
+
+var packageName = 'fezvrasta:bootstrap-material-design';  // https://atmospherejs.com/fezvrasta/bootstrap-material-design
+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',
+  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('jquery');
+  api.addFiles([
+    // we bundle all font files, but the client will request only one of them via the CSS @font-face rule
+    'dist/fonts/Material-Design-Icons.eot',  // IE8 or older
+    '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.css',                 // includes only the primary color variations
+    'dist/css/ripples.css',
+    'dist/js/material.js',
+    'dist/js/ripples.js',
+    'meteor/init.js'
+  ], where);
+});
+
+Package.onTest(function (api) {
+  api.use(packageName, where);
+  api.use(['tinytest', 'http'], where);
+
+  api.addFiles('meteor/test.js', where);
+});

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

@@ -15,8 +15,19 @@
   "bugs": {
     "url": "https://github.com/FezVrasta/bootstrap-material-design/issues"
   },
+  "keywords": [
+    "material",
+    "design",
+    "bootstrap",
+    "theme",
+    "google",
+    "android",
+    "browser",
+    "framework"
+  ],
   "homepage": "https://github.com/FezVrasta/bootstrap-material-design",
   "devDependencies": {
+    "bootstrap": ">=3.0",
     "grunt": "^0.4.5",
     "grunt-autoprefixer": "^1.0.1",
     "grunt-contrib-clean": "^0.6.0",
@@ -32,6 +43,7 @@
     "grunt-dependency-installer": "^0.2.0",
     "grunt-exec": "^0.4.6",
     "grunt-newer": "^0.7.0",
+    "jquery": ">=1.9.1",
     "jshint-stylish": "^1.0.0",
     "load-grunt-tasks": "^0.6.0",
     "spacejam": "^1.1.1"

sass/_inputs.scss

@@ -1,6 +1,6 @@
 fieldset[disabled] .form-control, .form-control-wrapper .form-control, .form-control {
     &, &:focus, &.focus {
-        &:not(textarea):not(select) {
+        &:not(textarea) {
             height: 28px;
         }
         padding: 0;
@@ -15,9 +15,7 @@ fieldset[disabled] .form-control, .form-control-wrapper .form-control, .form-con
         }
     }
 }
-select.form-control {
+
-    height: 23px;
-}
 select[multiple].form-control {
     &, &:focus, &.focus {
         height: 85px;
@@ -169,7 +167,6 @@ select[multiple].form-control {
 select.form-control {
     border: 0;
     box-shadow: none;
-    border-bottom: 1px solid #757575;
     border-radius: 0;
     &:focus, &.focus {
         box-shadow: none;