Merge pull request #114 from npvn/button

Improve button styles

dist/css/material-wfont.css

@@ -1902,15 +1902,17 @@ body .jumbotron-material-lightgrey,
           transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   outline: none !important;
 }
-.btn:hover {
+.btn:hover:not(.btn-link):not(.btn-flat) {
-  color: rgba(255, 255, 255, 0.84);
-}
-.btn:hover:not(.btn-link) {
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28);
 }
-.btn:active:not(.btn-link) {
+.btn:active:not(.btn-link):not(.btn-flat) {
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
 }
+.btn:disabled:not(.btn-link):not(.btn-flat) {
+  color: #a8a8a8 !important;
+  background-color: #eaeaea !important;
+  box-shadow: none;
+}
 .btn:not(.btn-link),
 .btn-default:not(.btn-link) {
   background-color: transparent;
@@ -1981,6 +1983,156 @@ body .jumbotron-material-lightgrey,
 .btn-material-lightgrey:not(.btn-link) {
   background-color: #ececec;
 }
+.btn.btn-flat {
+  background: none;
+  box-shadow: none;
+  font-weight: 500;
+}
+.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);
+          transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.btn.btn-raised:active:not(.btn-link) {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+.btn.btn-fab {
+  margin: 0;
+  padding: 15px;
+  font-size: 26px;
+  width: 56px;
+  height: 56px;
+}
+.btn.btn-fab,
+.btn.btn-fab:hover {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+.btn.btn-fab,
+.btn.btn-fab:hover,
+.btn.btn-fab-default,
+.btn.btn-fab:hover-default {
+  background-color: transparent;
+}
+.btn.btn-fab-primary,
+.btn.btn-fab:hover-primary {
+  background-color: #4285f4;
+}
+.btn.btn-fab-success,
+.btn.btn-fab:hover-success {
+  background-color: #0f9d58;
+}
+.btn.btn-fab-info,
+.btn.btn-fab:hover-info {
+  background-color: #03a9f4;
+}
+.btn.btn-fab-warning,
+.btn.btn-fab:hover-warning {
+  background-color: #ff5722;
+}
+.btn.btn-fab-danger,
+.btn.btn-fab:hover-danger {
+  background-color: #f44336;
+}
+.btn.btn-fab-material-red,
+.btn.btn-fab:hover-material-red {
+  background-color: #f44336;
+}
+.btn.btn-fab-material-pink,
+.btn.btn-fab:hover-material-pink {
+  background-color: #e91e63;
+}
+.btn.btn-fab-material-purple,
+.btn.btn-fab:hover-material-purple {
+  background-color: #9c27b0;
+}
+.btn.btn-fab-material-deeppurple,
+.btn.btn-fab:hover-material-deeppurple {
+  background-color: #673ab7;
+}
+.btn.btn-fab-material-indigo,
+.btn.btn-fab:hover-material-indigo {
+  background-color: #3f51b5;
+}
+.btn.btn-fab-material-lightblue,
+.btn.btn-fab:hover-material-lightblue {
+  background-color: #03a9f4;
+}
+.btn.btn-fab-material-cyan,
+.btn.btn-fab:hover-material-cyan {
+  background-color: #00bcd4;
+}
+.btn.btn-fab-material-teal,
+.btn.btn-fab:hover-material-teal {
+  background-color: #009688;
+}
+.btn.btn-fab-material-lightgreen,
+.btn.btn-fab:hover-material-lightgreen {
+  background-color: #8bc34a;
+}
+.btn.btn-fab-material-lime,
+.btn.btn-fab:hover-material-lime {
+  background-color: #cddc39;
+}
+.btn.btn-fab-material-lightyellow,
+.btn.btn-fab:hover-material-lightyellow {
+  background-color: #ffeb3b;
+}
+.btn.btn-fab-material-orange,
+.btn.btn-fab:hover-material-orange {
+  background-color: #ff9800;
+}
+.btn.btn-fab-material-deeporange,
+.btn.btn-fab:hover-material-deeporange {
+  background-color: #ff5722;
+}
+.btn.btn-fab-material-grey,
+.btn.btn-fab:hover-material-grey {
+  background-color: #9e9e9e;
+}
+.btn.btn-fab-material-bluegrey,
+.btn.btn-fab:hover-material-bluegrey {
+  background-color: #607d8b;
+}
+.btn.btn-fab-material-brown,
+.btn.btn-fab:hover-material-brown {
+  background-color: #795548;
+}
+.btn.btn-fab-material-lightgrey,
+.btn.btn-fab:hover-material-lightgrey {
+  background-color: #ececec;
+}
+.btn.btn-fab,
+.btn.btn-fab .ripple-wrapper {
+  border-radius: 100%;
+}
+.btn.btn-fab.btn-fab-mini {
+  width: 40px;
+  height: 40px;
+  padding: 13px;
+  font-size: 15px;
+}
+.btn.btn-fab i {
+  position: relative;
+  top: -5px;
+}
 .btn-link,
 .btn:not([class^="btn btn-"]),
 .btn-default {
@@ -1995,14 +2147,6 @@ body .jumbotron-material-lightgrey,
 .btn-default:hover {
   background-color: rgba(255, 255, 255, 0.5);
 }
-.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);
-          transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.btn-raised:active:not(.btn-link) {
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-}
 .open > .dropdown-toggle.btn,
 .open > .dropdown-toggle.btn-default {
   background-color: transparent;
@@ -2073,12 +2217,6 @@ body .jumbotron-material-lightgrey,
 .open > .dropdown-toggle.btn-material-lightgrey {
   background-color: #ececec;
 }
-.btn-flat {
-  box-shadow: none !important;
-}
-.btn-flat.btn-default:hover {
-  background: none;
-}
 .btn-group,
 .btn-group-vertical {
   position: relative;
@@ -2122,121 +2260,6 @@ body .jumbotron-material-lightgrey,
 .btn-group-flat {
   box-shadow: none !important;
 }
-.btn-fab {
-  margin: 0;
-  padding: 15px;
-  font-size: 26px;
-  width: 56px;
-  height: 56px;
-}
-.btn-fab,
-.btn-fab:hover {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-}
-.btn-fab,
-.btn-fab:hover,
-.btn-fab-default,
-.btn-fab:hover-default {
-  background-color: transparent;
-}
-.btn-fab-primary,
-.btn-fab:hover-primary {
-  background-color: #4285f4;
-}
-.btn-fab-success,
-.btn-fab:hover-success {
-  background-color: #0f9d58;
-}
-.btn-fab-info,
-.btn-fab:hover-info {
-  background-color: #03a9f4;
-}
-.btn-fab-warning,
-.btn-fab:hover-warning {
-  background-color: #ff5722;
-}
-.btn-fab-danger,
-.btn-fab:hover-danger {
-  background-color: #f44336;
-}
-.btn-fab-material-red,
-.btn-fab:hover-material-red {
-  background-color: #f44336;
-}
-.btn-fab-material-pink,
-.btn-fab:hover-material-pink {
-  background-color: #e91e63;
-}
-.btn-fab-material-purple,
-.btn-fab:hover-material-purple {
-  background-color: #9c27b0;
-}
-.btn-fab-material-deeppurple,
-.btn-fab:hover-material-deeppurple {
-  background-color: #673ab7;
-}
-.btn-fab-material-indigo,
-.btn-fab:hover-material-indigo {
-  background-color: #3f51b5;
-}
-.btn-fab-material-lightblue,
-.btn-fab:hover-material-lightblue {
-  background-color: #03a9f4;
-}
-.btn-fab-material-cyan,
-.btn-fab:hover-material-cyan {
-  background-color: #00bcd4;
-}
-.btn-fab-material-teal,
-.btn-fab:hover-material-teal {
-  background-color: #009688;
-}
-.btn-fab-material-lightgreen,
-.btn-fab:hover-material-lightgreen {
-  background-color: #8bc34a;
-}
-.btn-fab-material-lime,
-.btn-fab:hover-material-lime {
-  background-color: #cddc39;
-}
-.btn-fab-material-lightyellow,
-.btn-fab:hover-material-lightyellow {
-  background-color: #ffeb3b;
-}
-.btn-fab-material-orange,
-.btn-fab:hover-material-orange {
-  background-color: #ff9800;
-}
-.btn-fab-material-deeporange,
-.btn-fab:hover-material-deeporange {
-  background-color: #ff5722;
-}
-.btn-fab-material-grey,
-.btn-fab:hover-material-grey {
-  background-color: #9e9e9e;
-}
-.btn-fab-material-bluegrey,
-.btn-fab:hover-material-bluegrey {
-  background-color: #607d8b;
-}
-.btn-fab-material-brown,
-.btn-fab:hover-material-brown {
-  background-color: #795548;
-}
-.btn-fab-material-lightgrey,
-.btn-fab:hover-material-lightgrey {
-  background-color: #ececec;
-}
-.btn-fab,
-.btn-fab .ripple-wrapper {
-  border-radius: 100%;
-}
-.btn-fab.btn-mini {
-  width: 40px;
-  height: 40px;
-  padding: 13px;
-  font-size: 15px;
-}
 .form-horizontal .checkbox {
   padding-top: 20px;
 }

dist/css/material.css

@@ -1901,15 +1901,17 @@ body .jumbotron-material-lightgrey,
           transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   outline: none !important;
 }
-.btn:hover {
+.btn:hover:not(.btn-link):not(.btn-flat) {
-  color: rgba(255, 255, 255, 0.84);
-}
-.btn:hover:not(.btn-link) {
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28);
 }
-.btn:active:not(.btn-link) {
+.btn:active:not(.btn-link):not(.btn-flat) {
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
 }
+.btn:disabled:not(.btn-link):not(.btn-flat) {
+  color: #a8a8a8 !important;
+  background-color: #eaeaea !important;
+  box-shadow: none;
+}
 .btn:not(.btn-link),
 .btn-default:not(.btn-link) {
   background-color: transparent;
@@ -1980,6 +1982,156 @@ body .jumbotron-material-lightgrey,
 .btn-material-lightgrey:not(.btn-link) {
   background-color: #ececec;
 }
+.btn.btn-flat {
+  background: none;
+  box-shadow: none;
+  font-weight: 500;
+}
+.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);
+          transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.btn.btn-raised:active:not(.btn-link) {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+.btn.btn-fab {
+  margin: 0;
+  padding: 15px;
+  font-size: 26px;
+  width: 56px;
+  height: 56px;
+}
+.btn.btn-fab,
+.btn.btn-fab:hover {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+.btn.btn-fab,
+.btn.btn-fab:hover,
+.btn.btn-fab-default,
+.btn.btn-fab:hover-default {
+  background-color: transparent;
+}
+.btn.btn-fab-primary,
+.btn.btn-fab:hover-primary {
+  background-color: #4285f4;
+}
+.btn.btn-fab-success,
+.btn.btn-fab:hover-success {
+  background-color: #0f9d58;
+}
+.btn.btn-fab-info,
+.btn.btn-fab:hover-info {
+  background-color: #03a9f4;
+}
+.btn.btn-fab-warning,
+.btn.btn-fab:hover-warning {
+  background-color: #ff5722;
+}
+.btn.btn-fab-danger,
+.btn.btn-fab:hover-danger {
+  background-color: #f44336;
+}
+.btn.btn-fab-material-red,
+.btn.btn-fab:hover-material-red {
+  background-color: #f44336;
+}
+.btn.btn-fab-material-pink,
+.btn.btn-fab:hover-material-pink {
+  background-color: #e91e63;
+}
+.btn.btn-fab-material-purple,
+.btn.btn-fab:hover-material-purple {
+  background-color: #9c27b0;
+}
+.btn.btn-fab-material-deeppurple,
+.btn.btn-fab:hover-material-deeppurple {
+  background-color: #673ab7;
+}
+.btn.btn-fab-material-indigo,
+.btn.btn-fab:hover-material-indigo {
+  background-color: #3f51b5;
+}
+.btn.btn-fab-material-lightblue,
+.btn.btn-fab:hover-material-lightblue {
+  background-color: #03a9f4;
+}
+.btn.btn-fab-material-cyan,
+.btn.btn-fab:hover-material-cyan {
+  background-color: #00bcd4;
+}
+.btn.btn-fab-material-teal,
+.btn.btn-fab:hover-material-teal {
+  background-color: #009688;
+}
+.btn.btn-fab-material-lightgreen,
+.btn.btn-fab:hover-material-lightgreen {
+  background-color: #8bc34a;
+}
+.btn.btn-fab-material-lime,
+.btn.btn-fab:hover-material-lime {
+  background-color: #cddc39;
+}
+.btn.btn-fab-material-lightyellow,
+.btn.btn-fab:hover-material-lightyellow {
+  background-color: #ffeb3b;
+}
+.btn.btn-fab-material-orange,
+.btn.btn-fab:hover-material-orange {
+  background-color: #ff9800;
+}
+.btn.btn-fab-material-deeporange,
+.btn.btn-fab:hover-material-deeporange {
+  background-color: #ff5722;
+}
+.btn.btn-fab-material-grey,
+.btn.btn-fab:hover-material-grey {
+  background-color: #9e9e9e;
+}
+.btn.btn-fab-material-bluegrey,
+.btn.btn-fab:hover-material-bluegrey {
+  background-color: #607d8b;
+}
+.btn.btn-fab-material-brown,
+.btn.btn-fab:hover-material-brown {
+  background-color: #795548;
+}
+.btn.btn-fab-material-lightgrey,
+.btn.btn-fab:hover-material-lightgrey {
+  background-color: #ececec;
+}
+.btn.btn-fab,
+.btn.btn-fab .ripple-wrapper {
+  border-radius: 100%;
+}
+.btn.btn-fab.btn-fab-mini {
+  width: 40px;
+  height: 40px;
+  padding: 13px;
+  font-size: 15px;
+}
+.btn.btn-fab i {
+  position: relative;
+  top: -5px;
+}
 .btn-link,
 .btn:not([class^="btn btn-"]),
 .btn-default {
@@ -1994,14 +2146,6 @@ body .jumbotron-material-lightgrey,
 .btn-default:hover {
   background-color: rgba(255, 255, 255, 0.5);
 }
-.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);
-          transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.btn-raised:active:not(.btn-link) {
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-}
 .open > .dropdown-toggle.btn,
 .open > .dropdown-toggle.btn-default {
   background-color: transparent;
@@ -2072,12 +2216,6 @@ body .jumbotron-material-lightgrey,
 .open > .dropdown-toggle.btn-material-lightgrey {
   background-color: #ececec;
 }
-.btn-flat {
-  box-shadow: none !important;
-}
-.btn-flat.btn-default:hover {
-  background: none;
-}
 .btn-group,
 .btn-group-vertical {
   position: relative;
@@ -2121,121 +2259,6 @@ body .jumbotron-material-lightgrey,
 .btn-group-flat {
   box-shadow: none !important;
 }
-.btn-fab {
-  margin: 0;
-  padding: 15px;
-  font-size: 26px;
-  width: 56px;
-  height: 56px;
-}
-.btn-fab,
-.btn-fab:hover {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-}
-.btn-fab,
-.btn-fab:hover,
-.btn-fab-default,
-.btn-fab:hover-default {
-  background-color: transparent;
-}
-.btn-fab-primary,
-.btn-fab:hover-primary {
-  background-color: #4285f4;
-}
-.btn-fab-success,
-.btn-fab:hover-success {
-  background-color: #0f9d58;
-}
-.btn-fab-info,
-.btn-fab:hover-info {
-  background-color: #03a9f4;
-}
-.btn-fab-warning,
-.btn-fab:hover-warning {
-  background-color: #ff5722;
-}
-.btn-fab-danger,
-.btn-fab:hover-danger {
-  background-color: #f44336;
-}
-.btn-fab-material-red,
-.btn-fab:hover-material-red {
-  background-color: #f44336;
-}
-.btn-fab-material-pink,
-.btn-fab:hover-material-pink {
-  background-color: #e91e63;
-}
-.btn-fab-material-purple,
-.btn-fab:hover-material-purple {
-  background-color: #9c27b0;
-}
-.btn-fab-material-deeppurple,
-.btn-fab:hover-material-deeppurple {
-  background-color: #673ab7;
-}
-.btn-fab-material-indigo,
-.btn-fab:hover-material-indigo {
-  background-color: #3f51b5;
-}
-.btn-fab-material-lightblue,
-.btn-fab:hover-material-lightblue {
-  background-color: #03a9f4;
-}
-.btn-fab-material-cyan,
-.btn-fab:hover-material-cyan {
-  background-color: #00bcd4;
-}
-.btn-fab-material-teal,
-.btn-fab:hover-material-teal {
-  background-color: #009688;
-}
-.btn-fab-material-lightgreen,
-.btn-fab:hover-material-lightgreen {
-  background-color: #8bc34a;
-}
-.btn-fab-material-lime,
-.btn-fab:hover-material-lime {
-  background-color: #cddc39;
-}
-.btn-fab-material-lightyellow,
-.btn-fab:hover-material-lightyellow {
-  background-color: #ffeb3b;
-}
-.btn-fab-material-orange,
-.btn-fab:hover-material-orange {
-  background-color: #ff9800;
-}
-.btn-fab-material-deeporange,
-.btn-fab:hover-material-deeporange {
-  background-color: #ff5722;
-}
-.btn-fab-material-grey,
-.btn-fab:hover-material-grey {
-  background-color: #9e9e9e;
-}
-.btn-fab-material-bluegrey,
-.btn-fab:hover-material-bluegrey {
-  background-color: #607d8b;
-}
-.btn-fab-material-brown,
-.btn-fab:hover-material-brown {
-  background-color: #795548;
-}
-.btn-fab-material-lightgrey,
-.btn-fab:hover-material-lightgrey {
-  background-color: #ececec;
-}
-.btn-fab,
-.btn-fab .ripple-wrapper {
-  border-radius: 100%;
-}
-.btn-fab.btn-mini {
-  width: 40px;
-  height: 40px;
-  padding: 13px;
-  font-size: 15px;
-}
 .form-horizontal .checkbox {
   padding-top: 20px;
 }

less/_buttons.import.less

@@ -1,40 +1,87 @@
 // main: material.less
 
-.btn-shadow() {
-    .shadow-z-2();
-    transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-    &:active:not(.btn-link) {
-        .shadow-z-3();
-    }
-}
-
 .btn {
     position: relative;
     padding: 8px 30px;
     border: 0;
     margin: 10px 1px;
-
     cursor: pointer;
     border-radius: 2px;
     text-transform: uppercase;
     text-decoration: none;
     color: @darkbg-text;
 
-    &:hover {
+    &:hover:not(.btn-link):not(.btn-flat) {
-        color: @darkbg-text;
-    }
-    &:hover:not(.btn-link) {
         .shadow-z-2-hover();
     }    
-    transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    &:active:not(.btn-link):not(.btn-flat) {
-    &:active:not(.btn-link) {
         .shadow-z-3();
     }
+    &:disabled:not(.btn-link):not(.btn-flat) {
+        color: @text-disabled !important;
+        background-color: @background-disabled !important;
+        box-shadow: none;
+    }
+    
+    transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     outline: none !important;
 
     .variations(~":not(.btn-link)", background-color, @btn-default);
         
+    &.btn-flat {
+        background: none;
+        box-shadow: none;
+        font-weight: 500;
+        &: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 {
+        .btn-shadow();
+    }
+    
+    &.btn-fab {
+        margin: 0;
+        padding: 15px;
+        font-size: 26px;
+        width: 56px;
+        height: 56px;
+        &, &:hover {
+            .shadow-z-1();
+            .variations(~"", background-color, transparent);
+        }
+        &, .ripple-wrapper {
+            border-radius: 100%;
+        }
+        &.btn-fab-mini {
+            width: 40px;
+            height: 40px;
+            padding: 13px;
+            font-size: 15px;
+        }
+        i {
+            position: relative;
+            top: -5px;
+        }
+    }
 }
+
 // This is needed to style buttons which has not a variation suffix (they must stiled as btn-default)
 .btn-link, .btn:not([class^="btn btn-"]), .btn-default {
     color: @lightbg-text;
@@ -47,21 +94,9 @@
         background-color: rgba(255,255,255,0.5);
     }
 }
-
-.btn-raised {
-    .btn-shadow();
-}
-
 .open > .dropdown-toggle.btn {
     .variations(~"", background-color, @btn-default);
 }
-.btn-flat {
-    box-shadow: none !important;
-    &.btn-default:hover {
-        background: none;
-    }
-}
-
 .btn-group, .btn-group-vertical {
     position: relative;
     border-radius: 2px;
@@ -84,25 +119,10 @@
     box-shadow: none !important;
 }
 
-// Floating Action Button (FAB)
+.btn-shadow() {
-
+    .shadow-z-2();
-.btn-fab {
+    transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-    margin: 0;
+    &:active:not(.btn-link) {
-    padding: 15px;
+        .shadow-z-3();
-    font-size: 26px;
-    width: 56px;
-    height: 56px;
-    &, &:hover {
-        .shadow-z-1();
-        .variations(~"", background-color, transparent);
-    }
-    &, .ripple-wrapper {
-        border-radius: 100%;
-    }
-    &.btn-mini {
-        width: 40px;
-        height: 40px;
-        padding: 13px;
-        font-size: 15px;
     }
 }

less/_variables.import.less

@@ -100,3 +100,5 @@
 @progress-warning: @warning;
 @progress-danger: @danger;
 
+@text-disabled: #a8a8a8;
+@background-disabled: #eaeaea;

template/material/css/material-wfont.css

@@ -1902,15 +1902,17 @@ body .jumbotron-material-lightgrey,
           transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   outline: none !important;
 }
-.btn:hover {
+.btn:hover:not(.btn-link):not(.btn-flat) {
-  color: rgba(255, 255, 255, 0.84);
-}
-.btn:hover:not(.btn-link) {
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28);
 }
-.btn:active:not(.btn-link) {
+.btn:active:not(.btn-link):not(.btn-flat) {
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
 }
+.btn:disabled:not(.btn-link):not(.btn-flat) {
+  color: #a8a8a8 !important;
+  background-color: #eaeaea !important;
+  box-shadow: none;
+}
 .btn:not(.btn-link),
 .btn-default:not(.btn-link) {
   background-color: transparent;
@@ -1981,6 +1983,156 @@ body .jumbotron-material-lightgrey,
 .btn-material-lightgrey:not(.btn-link) {
   background-color: #ececec;
 }
+.btn.btn-flat {
+  background: none;
+  box-shadow: none;
+  font-weight: 500;
+}
+.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);
+          transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.btn.btn-raised:active:not(.btn-link) {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+.btn.btn-fab {
+  margin: 0;
+  padding: 15px;
+  font-size: 26px;
+  width: 56px;
+  height: 56px;
+}
+.btn.btn-fab,
+.btn.btn-fab:hover {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+.btn.btn-fab,
+.btn.btn-fab:hover,
+.btn.btn-fab-default,
+.btn.btn-fab:hover-default {
+  background-color: transparent;
+}
+.btn.btn-fab-primary,
+.btn.btn-fab:hover-primary {
+  background-color: #4285f4;
+}
+.btn.btn-fab-success,
+.btn.btn-fab:hover-success {
+  background-color: #0f9d58;
+}
+.btn.btn-fab-info,
+.btn.btn-fab:hover-info {
+  background-color: #03a9f4;
+}
+.btn.btn-fab-warning,
+.btn.btn-fab:hover-warning {
+  background-color: #ff5722;
+}
+.btn.btn-fab-danger,
+.btn.btn-fab:hover-danger {
+  background-color: #f44336;
+}
+.btn.btn-fab-material-red,
+.btn.btn-fab:hover-material-red {
+  background-color: #f44336;
+}
+.btn.btn-fab-material-pink,
+.btn.btn-fab:hover-material-pink {
+  background-color: #e91e63;
+}
+.btn.btn-fab-material-purple,
+.btn.btn-fab:hover-material-purple {
+  background-color: #9c27b0;
+}
+.btn.btn-fab-material-deeppurple,
+.btn.btn-fab:hover-material-deeppurple {
+  background-color: #673ab7;
+}
+.btn.btn-fab-material-indigo,
+.btn.btn-fab:hover-material-indigo {
+  background-color: #3f51b5;
+}
+.btn.btn-fab-material-lightblue,
+.btn.btn-fab:hover-material-lightblue {
+  background-color: #03a9f4;
+}
+.btn.btn-fab-material-cyan,
+.btn.btn-fab:hover-material-cyan {
+  background-color: #00bcd4;
+}
+.btn.btn-fab-material-teal,
+.btn.btn-fab:hover-material-teal {
+  background-color: #009688;
+}
+.btn.btn-fab-material-lightgreen,
+.btn.btn-fab:hover-material-lightgreen {
+  background-color: #8bc34a;
+}
+.btn.btn-fab-material-lime,
+.btn.btn-fab:hover-material-lime {
+  background-color: #cddc39;
+}
+.btn.btn-fab-material-lightyellow,
+.btn.btn-fab:hover-material-lightyellow {
+  background-color: #ffeb3b;
+}
+.btn.btn-fab-material-orange,
+.btn.btn-fab:hover-material-orange {
+  background-color: #ff9800;
+}
+.btn.btn-fab-material-deeporange,
+.btn.btn-fab:hover-material-deeporange {
+  background-color: #ff5722;
+}
+.btn.btn-fab-material-grey,
+.btn.btn-fab:hover-material-grey {
+  background-color: #9e9e9e;
+}
+.btn.btn-fab-material-bluegrey,
+.btn.btn-fab:hover-material-bluegrey {
+  background-color: #607d8b;
+}
+.btn.btn-fab-material-brown,
+.btn.btn-fab:hover-material-brown {
+  background-color: #795548;
+}
+.btn.btn-fab-material-lightgrey,
+.btn.btn-fab:hover-material-lightgrey {
+  background-color: #ececec;
+}
+.btn.btn-fab,
+.btn.btn-fab .ripple-wrapper {
+  border-radius: 100%;
+}
+.btn.btn-fab.btn-fab-mini {
+  width: 40px;
+  height: 40px;
+  padding: 13px;
+  font-size: 15px;
+}
+.btn.btn-fab i {
+  position: relative;
+  top: -5px;
+}
 .btn-link,
 .btn:not([class^="btn btn-"]),
 .btn-default {
@@ -1995,14 +2147,6 @@ body .jumbotron-material-lightgrey,
 .btn-default:hover {
   background-color: rgba(255, 255, 255, 0.5);
 }
-.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);
-          transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.btn-raised:active:not(.btn-link) {
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-}
 .open > .dropdown-toggle.btn,
 .open > .dropdown-toggle.btn-default {
   background-color: transparent;
@@ -2073,12 +2217,6 @@ body .jumbotron-material-lightgrey,
 .open > .dropdown-toggle.btn-material-lightgrey {
   background-color: #ececec;
 }
-.btn-flat {
-  box-shadow: none !important;
-}
-.btn-flat.btn-default:hover {
-  background: none;
-}
 .btn-group,
 .btn-group-vertical {
   position: relative;
@@ -2122,121 +2260,6 @@ body .jumbotron-material-lightgrey,
 .btn-group-flat {
   box-shadow: none !important;
 }
-.btn-fab {
-  margin: 0;
-  padding: 15px;
-  font-size: 26px;
-  width: 56px;
-  height: 56px;
-}
-.btn-fab,
-.btn-fab:hover {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-}
-.btn-fab,
-.btn-fab:hover,
-.btn-fab-default,
-.btn-fab:hover-default {
-  background-color: transparent;
-}
-.btn-fab-primary,
-.btn-fab:hover-primary {
-  background-color: #4285f4;
-}
-.btn-fab-success,
-.btn-fab:hover-success {
-  background-color: #0f9d58;
-}
-.btn-fab-info,
-.btn-fab:hover-info {
-  background-color: #03a9f4;
-}
-.btn-fab-warning,
-.btn-fab:hover-warning {
-  background-color: #ff5722;
-}
-.btn-fab-danger,
-.btn-fab:hover-danger {
-  background-color: #f44336;
-}
-.btn-fab-material-red,
-.btn-fab:hover-material-red {
-  background-color: #f44336;
-}
-.btn-fab-material-pink,
-.btn-fab:hover-material-pink {
-  background-color: #e91e63;
-}
-.btn-fab-material-purple,
-.btn-fab:hover-material-purple {
-  background-color: #9c27b0;
-}
-.btn-fab-material-deeppurple,
-.btn-fab:hover-material-deeppurple {
-  background-color: #673ab7;
-}
-.btn-fab-material-indigo,
-.btn-fab:hover-material-indigo {
-  background-color: #3f51b5;
-}
-.btn-fab-material-lightblue,
-.btn-fab:hover-material-lightblue {
-  background-color: #03a9f4;
-}
-.btn-fab-material-cyan,
-.btn-fab:hover-material-cyan {
-  background-color: #00bcd4;
-}
-.btn-fab-material-teal,
-.btn-fab:hover-material-teal {
-  background-color: #009688;
-}
-.btn-fab-material-lightgreen,
-.btn-fab:hover-material-lightgreen {
-  background-color: #8bc34a;
-}
-.btn-fab-material-lime,
-.btn-fab:hover-material-lime {
-  background-color: #cddc39;
-}
-.btn-fab-material-lightyellow,
-.btn-fab:hover-material-lightyellow {
-  background-color: #ffeb3b;
-}
-.btn-fab-material-orange,
-.btn-fab:hover-material-orange {
-  background-color: #ff9800;
-}
-.btn-fab-material-deeporange,
-.btn-fab:hover-material-deeporange {
-  background-color: #ff5722;
-}
-.btn-fab-material-grey,
-.btn-fab:hover-material-grey {
-  background-color: #9e9e9e;
-}
-.btn-fab-material-bluegrey,
-.btn-fab:hover-material-bluegrey {
-  background-color: #607d8b;
-}
-.btn-fab-material-brown,
-.btn-fab:hover-material-brown {
-  background-color: #795548;
-}
-.btn-fab-material-lightgrey,
-.btn-fab:hover-material-lightgrey {
-  background-color: #ececec;
-}
-.btn-fab,
-.btn-fab .ripple-wrapper {
-  border-radius: 100%;
-}
-.btn-fab.btn-mini {
-  width: 40px;
-  height: 40px;
-  padding: 13px;
-  font-size: 15px;
-}
 .form-horizontal .checkbox {
   padding-top: 20px;
 }

template/material/css/material.css

@@ -1901,15 +1901,17 @@ body .jumbotron-material-lightgrey,
           transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   outline: none !important;
 }
-.btn:hover {
+.btn:hover:not(.btn-link):not(.btn-flat) {
-  color: rgba(255, 255, 255, 0.84);
-}
-.btn:hover:not(.btn-link) {
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28);
 }
-.btn:active:not(.btn-link) {
+.btn:active:not(.btn-link):not(.btn-flat) {
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
 }
+.btn:disabled:not(.btn-link):not(.btn-flat) {
+  color: #a8a8a8 !important;
+  background-color: #eaeaea !important;
+  box-shadow: none;
+}
 .btn:not(.btn-link),
 .btn-default:not(.btn-link) {
   background-color: transparent;
@@ -1980,6 +1982,156 @@ body .jumbotron-material-lightgrey,
 .btn-material-lightgrey:not(.btn-link) {
   background-color: #ececec;
 }
+.btn.btn-flat {
+  background: none;
+  box-shadow: none;
+  font-weight: 500;
+}
+.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);
+          transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.btn.btn-raised:active:not(.btn-link) {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+.btn.btn-fab {
+  margin: 0;
+  padding: 15px;
+  font-size: 26px;
+  width: 56px;
+  height: 56px;
+}
+.btn.btn-fab,
+.btn.btn-fab:hover {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+.btn.btn-fab,
+.btn.btn-fab:hover,
+.btn.btn-fab-default,
+.btn.btn-fab:hover-default {
+  background-color: transparent;
+}
+.btn.btn-fab-primary,
+.btn.btn-fab:hover-primary {
+  background-color: #4285f4;
+}
+.btn.btn-fab-success,
+.btn.btn-fab:hover-success {
+  background-color: #0f9d58;
+}
+.btn.btn-fab-info,
+.btn.btn-fab:hover-info {
+  background-color: #03a9f4;
+}
+.btn.btn-fab-warning,
+.btn.btn-fab:hover-warning {
+  background-color: #ff5722;
+}
+.btn.btn-fab-danger,
+.btn.btn-fab:hover-danger {
+  background-color: #f44336;
+}
+.btn.btn-fab-material-red,
+.btn.btn-fab:hover-material-red {
+  background-color: #f44336;
+}
+.btn.btn-fab-material-pink,
+.btn.btn-fab:hover-material-pink {
+  background-color: #e91e63;
+}
+.btn.btn-fab-material-purple,
+.btn.btn-fab:hover-material-purple {
+  background-color: #9c27b0;
+}
+.btn.btn-fab-material-deeppurple,
+.btn.btn-fab:hover-material-deeppurple {
+  background-color: #673ab7;
+}
+.btn.btn-fab-material-indigo,
+.btn.btn-fab:hover-material-indigo {
+  background-color: #3f51b5;
+}
+.btn.btn-fab-material-lightblue,
+.btn.btn-fab:hover-material-lightblue {
+  background-color: #03a9f4;
+}
+.btn.btn-fab-material-cyan,
+.btn.btn-fab:hover-material-cyan {
+  background-color: #00bcd4;
+}
+.btn.btn-fab-material-teal,
+.btn.btn-fab:hover-material-teal {
+  background-color: #009688;
+}
+.btn.btn-fab-material-lightgreen,
+.btn.btn-fab:hover-material-lightgreen {
+  background-color: #8bc34a;
+}
+.btn.btn-fab-material-lime,
+.btn.btn-fab:hover-material-lime {
+  background-color: #cddc39;
+}
+.btn.btn-fab-material-lightyellow,
+.btn.btn-fab:hover-material-lightyellow {
+  background-color: #ffeb3b;
+}
+.btn.btn-fab-material-orange,
+.btn.btn-fab:hover-material-orange {
+  background-color: #ff9800;
+}
+.btn.btn-fab-material-deeporange,
+.btn.btn-fab:hover-material-deeporange {
+  background-color: #ff5722;
+}
+.btn.btn-fab-material-grey,
+.btn.btn-fab:hover-material-grey {
+  background-color: #9e9e9e;
+}
+.btn.btn-fab-material-bluegrey,
+.btn.btn-fab:hover-material-bluegrey {
+  background-color: #607d8b;
+}
+.btn.btn-fab-material-brown,
+.btn.btn-fab:hover-material-brown {
+  background-color: #795548;
+}
+.btn.btn-fab-material-lightgrey,
+.btn.btn-fab:hover-material-lightgrey {
+  background-color: #ececec;
+}
+.btn.btn-fab,
+.btn.btn-fab .ripple-wrapper {
+  border-radius: 100%;
+}
+.btn.btn-fab.btn-fab-mini {
+  width: 40px;
+  height: 40px;
+  padding: 13px;
+  font-size: 15px;
+}
+.btn.btn-fab i {
+  position: relative;
+  top: -5px;
+}
 .btn-link,
 .btn:not([class^="btn btn-"]),
 .btn-default {
@@ -1994,14 +2146,6 @@ body .jumbotron-material-lightgrey,
 .btn-default:hover {
   background-color: rgba(255, 255, 255, 0.5);
 }
-.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);
-          transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.btn-raised:active:not(.btn-link) {
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-}
 .open > .dropdown-toggle.btn,
 .open > .dropdown-toggle.btn-default {
   background-color: transparent;
@@ -2072,12 +2216,6 @@ body .jumbotron-material-lightgrey,
 .open > .dropdown-toggle.btn-material-lightgrey {
   background-color: #ececec;
 }
-.btn-flat {
-  box-shadow: none !important;
-}
-.btn-flat.btn-default:hover {
-  background: none;
-}
 .btn-group,
 .btn-group-vertical {
   position: relative;
@@ -2121,121 +2259,6 @@ body .jumbotron-material-lightgrey,
 .btn-group-flat {
   box-shadow: none !important;
 }
-.btn-fab {
-  margin: 0;
-  padding: 15px;
-  font-size: 26px;
-  width: 56px;
-  height: 56px;
-}
-.btn-fab,
-.btn-fab:hover {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-}
-.btn-fab,
-.btn-fab:hover,
-.btn-fab-default,
-.btn-fab:hover-default {
-  background-color: transparent;
-}
-.btn-fab-primary,
-.btn-fab:hover-primary {
-  background-color: #4285f4;
-}
-.btn-fab-success,
-.btn-fab:hover-success {
-  background-color: #0f9d58;
-}
-.btn-fab-info,
-.btn-fab:hover-info {
-  background-color: #03a9f4;
-}
-.btn-fab-warning,
-.btn-fab:hover-warning {
-  background-color: #ff5722;
-}
-.btn-fab-danger,
-.btn-fab:hover-danger {
-  background-color: #f44336;
-}
-.btn-fab-material-red,
-.btn-fab:hover-material-red {
-  background-color: #f44336;
-}
-.btn-fab-material-pink,
-.btn-fab:hover-material-pink {
-  background-color: #e91e63;
-}
-.btn-fab-material-purple,
-.btn-fab:hover-material-purple {
-  background-color: #9c27b0;
-}
-.btn-fab-material-deeppurple,
-.btn-fab:hover-material-deeppurple {
-  background-color: #673ab7;
-}
-.btn-fab-material-indigo,
-.btn-fab:hover-material-indigo {
-  background-color: #3f51b5;
-}
-.btn-fab-material-lightblue,
-.btn-fab:hover-material-lightblue {
-  background-color: #03a9f4;
-}
-.btn-fab-material-cyan,
-.btn-fab:hover-material-cyan {
-  background-color: #00bcd4;
-}
-.btn-fab-material-teal,
-.btn-fab:hover-material-teal {
-  background-color: #009688;
-}
-.btn-fab-material-lightgreen,
-.btn-fab:hover-material-lightgreen {
-  background-color: #8bc34a;
-}
-.btn-fab-material-lime,
-.btn-fab:hover-material-lime {
-  background-color: #cddc39;
-}
-.btn-fab-material-lightyellow,
-.btn-fab:hover-material-lightyellow {
-  background-color: #ffeb3b;
-}
-.btn-fab-material-orange,
-.btn-fab:hover-material-orange {
-  background-color: #ff9800;
-}
-.btn-fab-material-deeporange,
-.btn-fab:hover-material-deeporange {
-  background-color: #ff5722;
-}
-.btn-fab-material-grey,
-.btn-fab:hover-material-grey {
-  background-color: #9e9e9e;
-}
-.btn-fab-material-bluegrey,
-.btn-fab:hover-material-bluegrey {
-  background-color: #607d8b;
-}
-.btn-fab-material-brown,
-.btn-fab:hover-material-brown {
-  background-color: #795548;
-}
-.btn-fab-material-lightgrey,
-.btn-fab:hover-material-lightgrey {
-  background-color: #ececec;
-}
-.btn-fab,
-.btn-fab .ripple-wrapper {
-  border-radius: 100%;
-}
-.btn-fab.btn-mini {
-  width: 40px;
-  height: 40px;
-  padding: 13px;
-  font-size: 15px;
-}
 .form-horizontal .checkbox {
   padding-top: 20px;
 }