fixed #145

Gruntfile.js

@@ -18,12 +18,12 @@ module.exports = function(grunt) {
             }
         },
 
-        githooks: {
+        /*githooks: {
             all: {
                 // Will run the jshint and test:unit tasks at every commit
                 "pre-commit": "less autoprefixer cssmin uglify copy newer:jshint jasmine:scripts"
             }
-        }, 
+        }, */
 
         sass: {
             compilesass: {
@@ -177,7 +177,7 @@ module.exports = function(grunt) {
 
     });
 
-    grunt.registerTask("default", ["githooks", "less", "autoprefixer", "cssmin", "uglify", "copy"]);
+    grunt.registerTask("default", ["less", "autoprefixer", "cssmin", "uglify", "copy"]);
 
     grunt.registerTask("scss", ["sass", "autoprefixer", "cssmin", "uglify", "copy"]);
 

dist/css/material-wfont.css

@@ -2668,76 +2668,146 @@ body .jumbotron-material-lightgrey,
   background-color: #eaeaea !important;
   box-shadow: none;
 }
-.btn:not(.btn-link),
+.btn:not(.btn-link):not(.btn-flat),
-.btn-default:not(.btn-link) {
+.btn-default:not(.btn-link):not(.btn-flat) {
   background-color: transparent;
 }
-.btn-primary:not(.btn-link) {
+.btn-primary:not(.btn-link):not(.btn-flat) {
   background-color: #4285f4;
 }
-.btn-success:not(.btn-link) {
+.btn-success:not(.btn-link):not(.btn-flat) {
   background-color: #0f9d58;
 }
-.btn-info:not(.btn-link) {
+.btn-info:not(.btn-link):not(.btn-flat) {
   background-color: #03a9f4;
 }
-.btn-warning:not(.btn-link) {
+.btn-warning:not(.btn-link):not(.btn-flat) {
   background-color: #ff5722;
 }
-.btn-danger:not(.btn-link) {
+.btn-danger:not(.btn-link):not(.btn-flat) {
   background-color: #f44336;
 }
-.btn-material-red:not(.btn-link) {
+.btn-material-red:not(.btn-link):not(.btn-flat) {
   background-color: #f44336;
 }
-.btn-material-pink:not(.btn-link) {
+.btn-material-pink:not(.btn-link):not(.btn-flat) {
   background-color: #e91e63;
 }
-.btn-material-purple:not(.btn-link) {
+.btn-material-purple:not(.btn-link):not(.btn-flat) {
   background-color: #9c27b0;
 }
-.btn-material-deeppurple:not(.btn-link) {
+.btn-material-deeppurple:not(.btn-link):not(.btn-flat) {
   background-color: #673ab7;
 }
-.btn-material-indigo:not(.btn-link) {
+.btn-material-indigo:not(.btn-link):not(.btn-flat) {
   background-color: #3f51b5;
 }
-.btn-material-lightblue:not(.btn-link) {
+.btn-material-lightblue:not(.btn-link):not(.btn-flat) {
   background-color: #03a9f4;
 }
-.btn-material-cyan:not(.btn-link) {
+.btn-material-cyan:not(.btn-link):not(.btn-flat) {
   background-color: #00bcd4;
 }
-.btn-material-teal:not(.btn-link) {
+.btn-material-teal:not(.btn-link):not(.btn-flat) {
   background-color: #009688;
 }
-.btn-material-lightgreen:not(.btn-link) {
+.btn-material-lightgreen:not(.btn-link):not(.btn-flat) {
   background-color: #8bc34a;
 }
-.btn-material-lime:not(.btn-link) {
+.btn-material-lime:not(.btn-link):not(.btn-flat) {
   background-color: #cddc39;
 }
-.btn-material-lightyellow:not(.btn-link) {
+.btn-material-lightyellow:not(.btn-link):not(.btn-flat) {
   background-color: #ffeb3b;
 }
-.btn-material-orange:not(.btn-link) {
+.btn-material-orange:not(.btn-link):not(.btn-flat) {
   background-color: #ff9800;
 }
-.btn-material-deeporange:not(.btn-link) {
+.btn-material-deeporange:not(.btn-link):not(.btn-flat) {
   background-color: #ff5722;
 }
-.btn-material-grey:not(.btn-link) {
+.btn-material-grey:not(.btn-link):not(.btn-flat) {
   background-color: #9e9e9e;
 }
-.btn-material-bluegrey:not(.btn-link) {
+.btn-material-bluegrey:not(.btn-link):not(.btn-flat) {
   background-color: #607d8b;
 }
-.btn-material-brown:not(.btn-link) {
+.btn-material-brown:not(.btn-link):not(.btn-flat) {
   background-color: #795548;
 }
-.btn-material-lightgrey:not(.btn-link) {
+.btn-material-lightgrey:not(.btn-link):not(.btn-flat) {
   background-color: #ececec;
 }
+.btn.btn-flat:not(.btn-link),
+.btn-default.btn-flat:not(.btn-link) {
+  color: rgba(0, 0, 0, 0.84);
+}
+.btn-primary.btn-flat:not(.btn-link) {
+  color: #4285f4;
+}
+.btn-success.btn-flat:not(.btn-link) {
+  color: #0f9d58;
+}
+.btn-info.btn-flat:not(.btn-link) {
+  color: #03a9f4;
+}
+.btn-warning.btn-flat:not(.btn-link) {
+  color: #ff5722;
+}
+.btn-danger.btn-flat:not(.btn-link) {
+  color: #f44336;
+}
+.btn-material-red.btn-flat:not(.btn-link) {
+  color: #f44336;
+}
+.btn-material-pink.btn-flat:not(.btn-link) {
+  color: #e91e63;
+}
+.btn-material-purple.btn-flat:not(.btn-link) {
+  color: #9c27b0;
+}
+.btn-material-deeppurple.btn-flat:not(.btn-link) {
+  color: #673ab7;
+}
+.btn-material-indigo.btn-flat:not(.btn-link) {
+  color: #3f51b5;
+}
+.btn-material-lightblue.btn-flat:not(.btn-link) {
+  color: #03a9f4;
+}
+.btn-material-cyan.btn-flat:not(.btn-link) {
+  color: #00bcd4;
+}
+.btn-material-teal.btn-flat:not(.btn-link) {
+  color: #009688;
+}
+.btn-material-lightgreen.btn-flat:not(.btn-link) {
+  color: #8bc34a;
+}
+.btn-material-lime.btn-flat:not(.btn-link) {
+  color: #cddc39;
+}
+.btn-material-lightyellow.btn-flat:not(.btn-link) {
+  color: #ffeb3b;
+}
+.btn-material-orange.btn-flat:not(.btn-link) {
+  color: #ff9800;
+}
+.btn-material-deeporange.btn-flat:not(.btn-link) {
+  color: #ff5722;
+}
+.btn-material-grey.btn-flat:not(.btn-link) {
+  color: #9e9e9e;
+}
+.btn-material-bluegrey.btn-flat:not(.btn-link) {
+  color: #607d8b;
+}
+.btn-material-brown.btn-flat:not(.btn-link) {
+  color: #795548;
+}
+.btn-material-lightgrey.btn-flat:not(.btn-link) {
+  color: #ececec;
+}
 .btn.btn-flat {
   background: none;
   box-shadow: none;
@@ -2746,21 +2816,6 @@ body .jumbotron-material-lightgrey,
 .btn.btn-flat:disabled {
   color: #a8a8a8 !important;
 }
-.btn.btn-flat.btn-primary {
-  color: #4285f4;
-}
-.btn.btn-flat.btn-success {
-  color: #0f9d58;
-}
-.btn.btn-flat.btn-info {
-  color: #03a9f4;
-}
-.btn.btn-flat.btn-warning {
-  color: #ff5722;
-}
-.btn.btn-flat.btn-danger {
-  color: #f44336;
-}
 .btn.btn-raised {
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
   -webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
@@ -2900,8 +2955,10 @@ body .jumbotron-material-lightgrey,
 }
 .btn:not([class^="btn btn-"]):hover,
 .btn-default:hover,
+.btn-flat:not(.btn-link):hover,
 .btn:not([class^="btn btn-"]).active,
-.btn-default.active {
+.btn-default.active,
+.btn-flat:not(.btn-link).active {
   background-color: rgba(255, 255, 255, 0.5);
 }
 .open > .dropdown-toggle.btn,

dist/css/material.css

@@ -2661,76 +2661,146 @@ body .jumbotron-material-lightgrey,
   background-color: #eaeaea !important;
   box-shadow: none;
 }
-.btn:not(.btn-link),
+.btn:not(.btn-link):not(.btn-flat),
-.btn-default:not(.btn-link) {
+.btn-default:not(.btn-link):not(.btn-flat) {
   background-color: transparent;
 }
-.btn-primary:not(.btn-link) {
+.btn-primary:not(.btn-link):not(.btn-flat) {
   background-color: #4285f4;
 }
-.btn-success:not(.btn-link) {
+.btn-success:not(.btn-link):not(.btn-flat) {
   background-color: #0f9d58;
 }
-.btn-info:not(.btn-link) {
+.btn-info:not(.btn-link):not(.btn-flat) {
   background-color: #03a9f4;
 }
-.btn-warning:not(.btn-link) {
+.btn-warning:not(.btn-link):not(.btn-flat) {
   background-color: #ff5722;
 }
-.btn-danger:not(.btn-link) {
+.btn-danger:not(.btn-link):not(.btn-flat) {
   background-color: #f44336;
 }
-.btn-material-red:not(.btn-link) {
+.btn-material-red:not(.btn-link):not(.btn-flat) {
   background-color: #f44336;
 }
-.btn-material-pink:not(.btn-link) {
+.btn-material-pink:not(.btn-link):not(.btn-flat) {
   background-color: #e91e63;
 }
-.btn-material-purple:not(.btn-link) {
+.btn-material-purple:not(.btn-link):not(.btn-flat) {
   background-color: #9c27b0;
 }
-.btn-material-deeppurple:not(.btn-link) {
+.btn-material-deeppurple:not(.btn-link):not(.btn-flat) {
   background-color: #673ab7;
 }
-.btn-material-indigo:not(.btn-link) {
+.btn-material-indigo:not(.btn-link):not(.btn-flat) {
   background-color: #3f51b5;
 }
-.btn-material-lightblue:not(.btn-link) {
+.btn-material-lightblue:not(.btn-link):not(.btn-flat) {
   background-color: #03a9f4;
 }
-.btn-material-cyan:not(.btn-link) {
+.btn-material-cyan:not(.btn-link):not(.btn-flat) {
   background-color: #00bcd4;
 }
-.btn-material-teal:not(.btn-link) {
+.btn-material-teal:not(.btn-link):not(.btn-flat) {
   background-color: #009688;
 }
-.btn-material-lightgreen:not(.btn-link) {
+.btn-material-lightgreen:not(.btn-link):not(.btn-flat) {
   background-color: #8bc34a;
 }
-.btn-material-lime:not(.btn-link) {
+.btn-material-lime:not(.btn-link):not(.btn-flat) {
   background-color: #cddc39;
 }
-.btn-material-lightyellow:not(.btn-link) {
+.btn-material-lightyellow:not(.btn-link):not(.btn-flat) {
   background-color: #ffeb3b;
 }
-.btn-material-orange:not(.btn-link) {
+.btn-material-orange:not(.btn-link):not(.btn-flat) {
   background-color: #ff9800;
 }
-.btn-material-deeporange:not(.btn-link) {
+.btn-material-deeporange:not(.btn-link):not(.btn-flat) {
   background-color: #ff5722;
 }
-.btn-material-grey:not(.btn-link) {
+.btn-material-grey:not(.btn-link):not(.btn-flat) {
   background-color: #9e9e9e;
 }
-.btn-material-bluegrey:not(.btn-link) {
+.btn-material-bluegrey:not(.btn-link):not(.btn-flat) {
   background-color: #607d8b;
 }
-.btn-material-brown:not(.btn-link) {
+.btn-material-brown:not(.btn-link):not(.btn-flat) {
   background-color: #795548;
 }
-.btn-material-lightgrey:not(.btn-link) {
+.btn-material-lightgrey:not(.btn-link):not(.btn-flat) {
   background-color: #ececec;
 }
+.btn.btn-flat:not(.btn-link),
+.btn-default.btn-flat:not(.btn-link) {
+  color: rgba(0, 0, 0, 0.84);
+}
+.btn-primary.btn-flat:not(.btn-link) {
+  color: #4285f4;
+}
+.btn-success.btn-flat:not(.btn-link) {
+  color: #0f9d58;
+}
+.btn-info.btn-flat:not(.btn-link) {
+  color: #03a9f4;
+}
+.btn-warning.btn-flat:not(.btn-link) {
+  color: #ff5722;
+}
+.btn-danger.btn-flat:not(.btn-link) {
+  color: #f44336;
+}
+.btn-material-red.btn-flat:not(.btn-link) {
+  color: #f44336;
+}
+.btn-material-pink.btn-flat:not(.btn-link) {
+  color: #e91e63;
+}
+.btn-material-purple.btn-flat:not(.btn-link) {
+  color: #9c27b0;
+}
+.btn-material-deeppurple.btn-flat:not(.btn-link) {
+  color: #673ab7;
+}
+.btn-material-indigo.btn-flat:not(.btn-link) {
+  color: #3f51b5;
+}
+.btn-material-lightblue.btn-flat:not(.btn-link) {
+  color: #03a9f4;
+}
+.btn-material-cyan.btn-flat:not(.btn-link) {
+  color: #00bcd4;
+}
+.btn-material-teal.btn-flat:not(.btn-link) {
+  color: #009688;
+}
+.btn-material-lightgreen.btn-flat:not(.btn-link) {
+  color: #8bc34a;
+}
+.btn-material-lime.btn-flat:not(.btn-link) {
+  color: #cddc39;
+}
+.btn-material-lightyellow.btn-flat:not(.btn-link) {
+  color: #ffeb3b;
+}
+.btn-material-orange.btn-flat:not(.btn-link) {
+  color: #ff9800;
+}
+.btn-material-deeporange.btn-flat:not(.btn-link) {
+  color: #ff5722;
+}
+.btn-material-grey.btn-flat:not(.btn-link) {
+  color: #9e9e9e;
+}
+.btn-material-bluegrey.btn-flat:not(.btn-link) {
+  color: #607d8b;
+}
+.btn-material-brown.btn-flat:not(.btn-link) {
+  color: #795548;
+}
+.btn-material-lightgrey.btn-flat:not(.btn-link) {
+  color: #ececec;
+}
 .btn.btn-flat {
   background: none;
   box-shadow: none;
@@ -2739,21 +2809,6 @@ body .jumbotron-material-lightgrey,
 .btn.btn-flat:disabled {
   color: #a8a8a8 !important;
 }
-.btn.btn-flat.btn-primary {
-  color: #4285f4;
-}
-.btn.btn-flat.btn-success {
-  color: #0f9d58;
-}
-.btn.btn-flat.btn-info {
-  color: #03a9f4;
-}
-.btn.btn-flat.btn-warning {
-  color: #ff5722;
-}
-.btn.btn-flat.btn-danger {
-  color: #f44336;
-}
 .btn.btn-raised {
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
   -webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
@@ -2893,8 +2948,10 @@ body .jumbotron-material-lightgrey,
 }
 .btn:not([class^="btn btn-"]):hover,
 .btn-default:hover,
+.btn-flat:not(.btn-link):hover,
 .btn:not([class^="btn btn-"]).active,
-.btn-default.active {
+.btn-default.active,
+.btn-flat:not(.btn-link).active {
   background-color: rgba(255, 255, 255, 0.5);
 }
 .open > .dropdown-toggle.btn,

less/_buttons.less

@@ -26,7 +26,9 @@
     transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     outline: none !important;
 
-    .variations(~":not(.btn-link)", background-color, @btn-default);
+    .variations(~":not(.btn-link):not(.btn-flat)", background-color, @btn-default);
+
+    .variations(~".btn-flat:not(.btn-link)", color, @lightbg-text);
 
     &.btn-flat {
         background: none;
@@ -35,21 +37,6 @@
         &:disabled {
             color: @text-disabled !important;
         }
-        &.btn-primary {
-            color: @primary;
-        }
-        &.btn-success {
-            color: @success;
-        }
-        &.btn-info {
-            color: @info;
-        }
-        &.btn-warning {
-            color: @warning;
-        }
-        &.btn-danger {
-            color: @danger;
-        }
     }
 
     &.btn-raised {
@@ -82,14 +69,14 @@
     }
 }
 
-// This is needed to style buttons which has not a variation suffix (they must stiled as btn-default)
+// This is needed to style buttons which has not a variation suffix (they must be stiled as btn-default)
 .btn-link, .btn:not([class^="btn btn-"]), .btn-default {
     color: @lightbg-text;
     &:hover {
         color: @lightbg-text;
     }
 }
-.btn:not([class^="btn btn-"]), .btn-default {
+.btn:not([class^="btn btn-"]), .btn-default, .btn-flat:not(.btn-link) {
     &:hover, &.active {
         background-color: rgba(255,255,255,0.5);
     }

template/material/css/material-wfont.css

@@ -2668,76 +2668,146 @@ body .jumbotron-material-lightgrey,
   background-color: #eaeaea !important;
   box-shadow: none;
 }
-.btn:not(.btn-link),
+.btn:not(.btn-link):not(.btn-flat),
-.btn-default:not(.btn-link) {
+.btn-default:not(.btn-link):not(.btn-flat) {
   background-color: transparent;
 }
-.btn-primary:not(.btn-link) {
+.btn-primary:not(.btn-link):not(.btn-flat) {
   background-color: #4285f4;
 }
-.btn-success:not(.btn-link) {
+.btn-success:not(.btn-link):not(.btn-flat) {
   background-color: #0f9d58;
 }
-.btn-info:not(.btn-link) {
+.btn-info:not(.btn-link):not(.btn-flat) {
   background-color: #03a9f4;
 }
-.btn-warning:not(.btn-link) {
+.btn-warning:not(.btn-link):not(.btn-flat) {
   background-color: #ff5722;
 }
-.btn-danger:not(.btn-link) {
+.btn-danger:not(.btn-link):not(.btn-flat) {
   background-color: #f44336;
 }
-.btn-material-red:not(.btn-link) {
+.btn-material-red:not(.btn-link):not(.btn-flat) {
   background-color: #f44336;
 }
-.btn-material-pink:not(.btn-link) {
+.btn-material-pink:not(.btn-link):not(.btn-flat) {
   background-color: #e91e63;
 }
-.btn-material-purple:not(.btn-link) {
+.btn-material-purple:not(.btn-link):not(.btn-flat) {
   background-color: #9c27b0;
 }
-.btn-material-deeppurple:not(.btn-link) {
+.btn-material-deeppurple:not(.btn-link):not(.btn-flat) {
   background-color: #673ab7;
 }
-.btn-material-indigo:not(.btn-link) {
+.btn-material-indigo:not(.btn-link):not(.btn-flat) {
   background-color: #3f51b5;
 }
-.btn-material-lightblue:not(.btn-link) {
+.btn-material-lightblue:not(.btn-link):not(.btn-flat) {
   background-color: #03a9f4;
 }
-.btn-material-cyan:not(.btn-link) {
+.btn-material-cyan:not(.btn-link):not(.btn-flat) {
   background-color: #00bcd4;
 }
-.btn-material-teal:not(.btn-link) {
+.btn-material-teal:not(.btn-link):not(.btn-flat) {
   background-color: #009688;
 }
-.btn-material-lightgreen:not(.btn-link) {
+.btn-material-lightgreen:not(.btn-link):not(.btn-flat) {
   background-color: #8bc34a;
 }
-.btn-material-lime:not(.btn-link) {
+.btn-material-lime:not(.btn-link):not(.btn-flat) {
   background-color: #cddc39;
 }
-.btn-material-lightyellow:not(.btn-link) {
+.btn-material-lightyellow:not(.btn-link):not(.btn-flat) {
   background-color: #ffeb3b;
 }
-.btn-material-orange:not(.btn-link) {
+.btn-material-orange:not(.btn-link):not(.btn-flat) {
   background-color: #ff9800;
 }
-.btn-material-deeporange:not(.btn-link) {
+.btn-material-deeporange:not(.btn-link):not(.btn-flat) {
   background-color: #ff5722;
 }
-.btn-material-grey:not(.btn-link) {
+.btn-material-grey:not(.btn-link):not(.btn-flat) {
   background-color: #9e9e9e;
 }
-.btn-material-bluegrey:not(.btn-link) {
+.btn-material-bluegrey:not(.btn-link):not(.btn-flat) {
   background-color: #607d8b;
 }
-.btn-material-brown:not(.btn-link) {
+.btn-material-brown:not(.btn-link):not(.btn-flat) {
   background-color: #795548;
 }
-.btn-material-lightgrey:not(.btn-link) {
+.btn-material-lightgrey:not(.btn-link):not(.btn-flat) {
   background-color: #ececec;
 }
+.btn.btn-flat:not(.btn-link),
+.btn-default.btn-flat:not(.btn-link) {
+  color: rgba(0, 0, 0, 0.84);
+}
+.btn-primary.btn-flat:not(.btn-link) {
+  color: #4285f4;
+}
+.btn-success.btn-flat:not(.btn-link) {
+  color: #0f9d58;
+}
+.btn-info.btn-flat:not(.btn-link) {
+  color: #03a9f4;
+}
+.btn-warning.btn-flat:not(.btn-link) {
+  color: #ff5722;
+}
+.btn-danger.btn-flat:not(.btn-link) {
+  color: #f44336;
+}
+.btn-material-red.btn-flat:not(.btn-link) {
+  color: #f44336;
+}
+.btn-material-pink.btn-flat:not(.btn-link) {
+  color: #e91e63;
+}
+.btn-material-purple.btn-flat:not(.btn-link) {
+  color: #9c27b0;
+}
+.btn-material-deeppurple.btn-flat:not(.btn-link) {
+  color: #673ab7;
+}
+.btn-material-indigo.btn-flat:not(.btn-link) {
+  color: #3f51b5;
+}
+.btn-material-lightblue.btn-flat:not(.btn-link) {
+  color: #03a9f4;
+}
+.btn-material-cyan.btn-flat:not(.btn-link) {
+  color: #00bcd4;
+}
+.btn-material-teal.btn-flat:not(.btn-link) {
+  color: #009688;
+}
+.btn-material-lightgreen.btn-flat:not(.btn-link) {
+  color: #8bc34a;
+}
+.btn-material-lime.btn-flat:not(.btn-link) {
+  color: #cddc39;
+}
+.btn-material-lightyellow.btn-flat:not(.btn-link) {
+  color: #ffeb3b;
+}
+.btn-material-orange.btn-flat:not(.btn-link) {
+  color: #ff9800;
+}
+.btn-material-deeporange.btn-flat:not(.btn-link) {
+  color: #ff5722;
+}
+.btn-material-grey.btn-flat:not(.btn-link) {
+  color: #9e9e9e;
+}
+.btn-material-bluegrey.btn-flat:not(.btn-link) {
+  color: #607d8b;
+}
+.btn-material-brown.btn-flat:not(.btn-link) {
+  color: #795548;
+}
+.btn-material-lightgrey.btn-flat:not(.btn-link) {
+  color: #ececec;
+}
 .btn.btn-flat {
   background: none;
   box-shadow: none;
@@ -2746,21 +2816,6 @@ body .jumbotron-material-lightgrey,
 .btn.btn-flat:disabled {
   color: #a8a8a8 !important;
 }
-.btn.btn-flat.btn-primary {
-  color: #4285f4;
-}
-.btn.btn-flat.btn-success {
-  color: #0f9d58;
-}
-.btn.btn-flat.btn-info {
-  color: #03a9f4;
-}
-.btn.btn-flat.btn-warning {
-  color: #ff5722;
-}
-.btn.btn-flat.btn-danger {
-  color: #f44336;
-}
 .btn.btn-raised {
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
   -webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
@@ -2900,8 +2955,10 @@ body .jumbotron-material-lightgrey,
 }
 .btn:not([class^="btn btn-"]):hover,
 .btn-default:hover,
+.btn-flat:not(.btn-link):hover,
 .btn:not([class^="btn btn-"]).active,
-.btn-default.active {
+.btn-default.active,
+.btn-flat:not(.btn-link).active {
   background-color: rgba(255, 255, 255, 0.5);
 }
 .open > .dropdown-toggle.btn,

template/material/css/material.css

@@ -2661,76 +2661,146 @@ body .jumbotron-material-lightgrey,
   background-color: #eaeaea !important;
   box-shadow: none;
 }
-.btn:not(.btn-link),
+.btn:not(.btn-link):not(.btn-flat),
-.btn-default:not(.btn-link) {
+.btn-default:not(.btn-link):not(.btn-flat) {
   background-color: transparent;
 }
-.btn-primary:not(.btn-link) {
+.btn-primary:not(.btn-link):not(.btn-flat) {
   background-color: #4285f4;
 }
-.btn-success:not(.btn-link) {
+.btn-success:not(.btn-link):not(.btn-flat) {
   background-color: #0f9d58;
 }
-.btn-info:not(.btn-link) {
+.btn-info:not(.btn-link):not(.btn-flat) {
   background-color: #03a9f4;
 }
-.btn-warning:not(.btn-link) {
+.btn-warning:not(.btn-link):not(.btn-flat) {
   background-color: #ff5722;
 }
-.btn-danger:not(.btn-link) {
+.btn-danger:not(.btn-link):not(.btn-flat) {
   background-color: #f44336;
 }
-.btn-material-red:not(.btn-link) {
+.btn-material-red:not(.btn-link):not(.btn-flat) {
   background-color: #f44336;
 }
-.btn-material-pink:not(.btn-link) {
+.btn-material-pink:not(.btn-link):not(.btn-flat) {
   background-color: #e91e63;
 }
-.btn-material-purple:not(.btn-link) {
+.btn-material-purple:not(.btn-link):not(.btn-flat) {
   background-color: #9c27b0;
 }
-.btn-material-deeppurple:not(.btn-link) {
+.btn-material-deeppurple:not(.btn-link):not(.btn-flat) {
   background-color: #673ab7;
 }
-.btn-material-indigo:not(.btn-link) {
+.btn-material-indigo:not(.btn-link):not(.btn-flat) {
   background-color: #3f51b5;
 }
-.btn-material-lightblue:not(.btn-link) {
+.btn-material-lightblue:not(.btn-link):not(.btn-flat) {
   background-color: #03a9f4;
 }
-.btn-material-cyan:not(.btn-link) {
+.btn-material-cyan:not(.btn-link):not(.btn-flat) {
   background-color: #00bcd4;
 }
-.btn-material-teal:not(.btn-link) {
+.btn-material-teal:not(.btn-link):not(.btn-flat) {
   background-color: #009688;
 }
-.btn-material-lightgreen:not(.btn-link) {
+.btn-material-lightgreen:not(.btn-link):not(.btn-flat) {
   background-color: #8bc34a;
 }
-.btn-material-lime:not(.btn-link) {
+.btn-material-lime:not(.btn-link):not(.btn-flat) {
   background-color: #cddc39;
 }
-.btn-material-lightyellow:not(.btn-link) {
+.btn-material-lightyellow:not(.btn-link):not(.btn-flat) {
   background-color: #ffeb3b;
 }
-.btn-material-orange:not(.btn-link) {
+.btn-material-orange:not(.btn-link):not(.btn-flat) {
   background-color: #ff9800;
 }
-.btn-material-deeporange:not(.btn-link) {
+.btn-material-deeporange:not(.btn-link):not(.btn-flat) {
   background-color: #ff5722;
 }
-.btn-material-grey:not(.btn-link) {
+.btn-material-grey:not(.btn-link):not(.btn-flat) {
   background-color: #9e9e9e;
 }
-.btn-material-bluegrey:not(.btn-link) {
+.btn-material-bluegrey:not(.btn-link):not(.btn-flat) {
   background-color: #607d8b;
 }
-.btn-material-brown:not(.btn-link) {
+.btn-material-brown:not(.btn-link):not(.btn-flat) {
   background-color: #795548;
 }
-.btn-material-lightgrey:not(.btn-link) {
+.btn-material-lightgrey:not(.btn-link):not(.btn-flat) {
   background-color: #ececec;
 }
+.btn.btn-flat:not(.btn-link),
+.btn-default.btn-flat:not(.btn-link) {
+  color: rgba(0, 0, 0, 0.84);
+}
+.btn-primary.btn-flat:not(.btn-link) {
+  color: #4285f4;
+}
+.btn-success.btn-flat:not(.btn-link) {
+  color: #0f9d58;
+}
+.btn-info.btn-flat:not(.btn-link) {
+  color: #03a9f4;
+}
+.btn-warning.btn-flat:not(.btn-link) {
+  color: #ff5722;
+}
+.btn-danger.btn-flat:not(.btn-link) {
+  color: #f44336;
+}
+.btn-material-red.btn-flat:not(.btn-link) {
+  color: #f44336;
+}
+.btn-material-pink.btn-flat:not(.btn-link) {
+  color: #e91e63;
+}
+.btn-material-purple.btn-flat:not(.btn-link) {
+  color: #9c27b0;
+}
+.btn-material-deeppurple.btn-flat:not(.btn-link) {
+  color: #673ab7;
+}
+.btn-material-indigo.btn-flat:not(.btn-link) {
+  color: #3f51b5;
+}
+.btn-material-lightblue.btn-flat:not(.btn-link) {
+  color: #03a9f4;
+}
+.btn-material-cyan.btn-flat:not(.btn-link) {
+  color: #00bcd4;
+}
+.btn-material-teal.btn-flat:not(.btn-link) {
+  color: #009688;
+}
+.btn-material-lightgreen.btn-flat:not(.btn-link) {
+  color: #8bc34a;
+}
+.btn-material-lime.btn-flat:not(.btn-link) {
+  color: #cddc39;
+}
+.btn-material-lightyellow.btn-flat:not(.btn-link) {
+  color: #ffeb3b;
+}
+.btn-material-orange.btn-flat:not(.btn-link) {
+  color: #ff9800;
+}
+.btn-material-deeporange.btn-flat:not(.btn-link) {
+  color: #ff5722;
+}
+.btn-material-grey.btn-flat:not(.btn-link) {
+  color: #9e9e9e;
+}
+.btn-material-bluegrey.btn-flat:not(.btn-link) {
+  color: #607d8b;
+}
+.btn-material-brown.btn-flat:not(.btn-link) {
+  color: #795548;
+}
+.btn-material-lightgrey.btn-flat:not(.btn-link) {
+  color: #ececec;
+}
 .btn.btn-flat {
   background: none;
   box-shadow: none;
@@ -2739,21 +2809,6 @@ body .jumbotron-material-lightgrey,
 .btn.btn-flat:disabled {
   color: #a8a8a8 !important;
 }
-.btn.btn-flat.btn-primary {
-  color: #4285f4;
-}
-.btn.btn-flat.btn-success {
-  color: #0f9d58;
-}
-.btn.btn-flat.btn-info {
-  color: #03a9f4;
-}
-.btn.btn-flat.btn-warning {
-  color: #ff5722;
-}
-.btn.btn-flat.btn-danger {
-  color: #f44336;
-}
 .btn.btn-raised {
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
   -webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
@@ -2893,8 +2948,10 @@ body .jumbotron-material-lightgrey,
 }
 .btn:not([class^="btn btn-"]):hover,
 .btn-default:hover,
+.btn-flat:not(.btn-link):hover,
 .btn:not([class^="btn btn-"]).active,
-.btn-default.active {
+.btn-default.active,
+.btn-flat:not(.btn-link).active {
   background-color: rgba(255, 255, 255, 0.5);
 }
 .open > .dropdown-toggle.btn,

template/material/js/material.js

@@ -21,7 +21,14 @@
 
     $.material =  {
         "options": {
-            "withRipples": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .dropdown-menu a, .nav-tabs a:not(.withoutripple), .withripple",
+            "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]",
             "radioElements": ".radio > label > input[type=radio]"