diff --git a/css-compiled/material.css b/css-compiled/material.css
index d2fd2bfa..a3c50cdb 100644
--- a/css-compiled/material.css
+++ b/css-compiled/material.css
@@ -1176,7 +1176,9 @@ h6,
 .form-control-wrapper .form-control,
 .form-control,
 .form-control-wrapper .form-control:focus,
-.form-control:focus {
+.form-control:focus,
+.form-control-wrapper .form-control.focus,
+.form-control.focus {
   height: 28px;
   padding: 0;
   float: none;
@@ -1189,21 +1191,25 @@ h6,
 .form-control-wrapper .form-control:disabled,
 .form-control:disabled,
 .form-control-wrapper .form-control:focus:disabled,
-.form-control:focus:disabled {
+.form-control:focus:disabled,
+.form-control-wrapper .form-control.focus:disabled,
+.form-control.focus:disabled {
   border-style: dashed;
 }
 select.form-control {
   height: 23px;
 }
 select[multiple].form-control,
-select[multiple].form-control:focus {
+select[multiple].form-control:focus,
+select[multiple].form-control.focus {
   height: 85px;
 }
 .form-control-wrapper {
   position: relative;
   /* active state */
 }
-.form-control-wrapper .form-control:focus {
+.form-control-wrapper .form-control:focus,
+.form-control-wrapper .form-control.focus {
   outline: none;
 }
 .form-control-wrapper .floating-label {
@@ -1221,14 +1227,18 @@ select[multiple].form-control:focus {
   font-size: 10px;
   opacity: 1;
 }
-.form-control-wrapper .form-control:focus:invalid ~ .floating-label {
+.form-control-wrapper .form-control:focus:invalid ~ .floating-label,
+.form-control-wrapper .form-control.focus:invalid ~ .floating-label {
   color: #f44336;
 }
-.form-control-wrapper .form-control:focus ~ .material-input:after {
+.form-control-wrapper .form-control:focus ~ .material-input:after,
+.form-control-wrapper .form-control.focus ~ .material-input:after {
   background-color: #5264ae;
 }
 .form-control-wrapper .form-control:focus:invalid ~ .material-input:before,
-.form-control-wrapper .form-control:focus:invalid ~ .material-input:after {
+.form-control-wrapper .form-control.focus:invalid ~ .material-input:before,
+.form-control-wrapper .form-control:focus:invalid ~ .material-input:after,
+.form-control-wrapper .form-control.focus:invalid ~ .material-input:after {
   background-color: #f44336;
 }
 .form-control-wrapper .form-control.empty ~ .floating-label {
@@ -1245,7 +1255,8 @@ select[multiple].form-control:focus {
   transform: scaleX(0);
   transition: transform 0s;
 }
-.form-control-wrapper .form-control:focus ~ .material-input:before {
+.form-control-wrapper .form-control:focus ~ .material-input:before,
+.form-control-wrapper .form-control.focus ~ .material-input:before {
   transform: scaleX(1);
   transition: transform 0.2s ease-out;
 }
@@ -1270,7 +1281,8 @@ select[multiple].form-control:focus {
 .form-control-wrapper textarea ~ .form-control-highlight {
   margin-top: -11px;
 }
-.form-control-wrapper .form-control:focus ~ .material-input:after {
+.form-control-wrapper .form-control:focus ~ .material-input:after,
+.form-control-wrapper .form-control.focus ~ .material-input:after {
   -webkit-animation: input-highlight 0.3s ease;
   animation: input-highlight 0.3s ease;
   -webkit-animation-fill-mode: forwards;
@@ -1284,7 +1296,8 @@ select[multiple].form-control:focus {
   display: none;
 }
 .form-group.has-warning .material-input:before,
-.form-group.has-warning input.form-control:focus ~ .material-input:after {
+.form-group.has-warning input.form-control:focus ~ .material-input:after,
+.form-group.has-warning input.form-control.focus ~ .material-input:after {
   background: #ff5722;
 }
 .form-group.has-warning .control-label,
@@ -1292,7 +1305,8 @@ select[multiple].form-control:focus {
   color: #ff5722;
 }
 .form-group.has-error .material-input:before,
-.form-group.has-error input.form-control:focus ~ .material-input:after {
+.form-group.has-error input.form-control:focus ~ .material-input:after,
+.form-group.has-error input.form-control.focus ~ .material-input:after {
   background: #f44336;
 }
 .form-group.has-error .control-label,
@@ -1300,7 +1314,8 @@ select[multiple].form-control:focus {
   color: #f44336;
 }
 .form-group.has-success .material-input:before,
-.form-group.has-success input.form-control:focus ~ .material-input:after {
+.form-group.has-success input.form-control:focus ~ .material-input:after,
+.form-group.has-success input.form-control.focus ~ .material-input:after {
   background: #0f9d58;
 }
 .form-group.has-success .control-label,
@@ -1308,7 +1323,8 @@ select[multiple].form-control:focus {
   color: #0f9d58;
 }
 .form-group.has-info .material-input:before,
-.form-group.has-info input.form-control:focus ~ .material-input:after {
+.form-group.has-info input.form-control:focus ~ .material-input:after,
+.form-group.has-info input.form-control.focus ~ .material-input:after {
   background: #03a9f4;
 }
 .form-group.has-info .control-label,
@@ -1455,6 +1471,76 @@ select[multiple].form-control:focus {
 .form-group-material-lightgrey input.form-control:focus ~ .material-input:after {
   background-color: #ececec;
 }
+.form-group input.form-control.focus ~ .material-input:after,
+.form-group-default input.form-control.focus ~ .material-input:after {
+  background-color: #3f51b5;
+}
+.form-group-primary input.form-control.focus ~ .material-input:after {
+  background-color: #4285f4;
+}
+.form-group-success input.form-control.focus ~ .material-input:after {
+  background-color: #0f9d58;
+}
+.form-group-info input.form-control.focus ~ .material-input:after {
+  background-color: #03a9f4;
+}
+.form-group-warning input.form-control.focus ~ .material-input:after {
+  background-color: #ff5722;
+}
+.form-group-danger input.form-control.focus ~ .material-input:after {
+  background-color: #f44336;
+}
+.form-group-material-red input.form-control.focus ~ .material-input:after {
+  background-color: #f44336;
+}
+.form-group-material-pink input.form-control.focus ~ .material-input:after {
+  background-color: #e91e63;
+}
+.form-group-material-purple input.form-control.focus ~ .material-input:after {
+  background-color: #9c27b0;
+}
+.form-group-material-deeppurple input.form-control.focus ~ .material-input:after {
+  background-color: #673ab7;
+}
+.form-group-material-indigo input.form-control.focus ~ .material-input:after {
+  background-color: #3f51b5;
+}
+.form-group-material-lightblue input.form-control.focus ~ .material-input:after {
+  background-color: #03a9f4;
+}
+.form-group-material-cyan input.form-control.focus ~ .material-input:after {
+  background-color: #00bcd4;
+}
+.form-group-material-teal input.form-control.focus ~ .material-input:after {
+  background-color: #009688;
+}
+.form-group-material-lightgreen input.form-control.focus ~ .material-input:after {
+  background-color: #8bc34a;
+}
+.form-group-material-lime input.form-control.focus ~ .material-input:after {
+  background-color: #cddc39;
+}
+.form-group-material-lightyellow input.form-control.focus ~ .material-input:after {
+  background-color: #ffeb3b;
+}
+.form-group-material-orange input.form-control.focus ~ .material-input:after {
+  background-color: #ff9800;
+}
+.form-group-material-deeporange input.form-control.focus ~ .material-input:after {
+  background-color: #ff5722;
+}
+.form-group-material-grey input.form-control.focus ~ .material-input:after {
+  background-color: #9e9e9e;
+}
+.form-group-material-bluegrey input.form-control.focus ~ .material-input:after {
+  background-color: #607d8b;
+}
+.form-group-material-brown input.form-control.focus ~ .material-input:after {
+  background-color: #795548;
+}
+.form-group-material-lightgrey input.form-control.focus ~ .material-input:after {
+  background-color: #ececec;
+}
 .form-group .control-label,
 .form-group-default .control-label {
   color: rgba(0, 0, 0, 0.84);
@@ -1615,7 +1701,8 @@ select.form-control {
   border-bottom: 1px solid #757575;
   border-radius: 0;
 }
-select.form-control:focus {
+select.form-control:focus,
+select.form-control.focus {
   box-shadow: none;
   border-color: #757575;
 }
diff --git a/less/inputs.less b/less/inputs.less
index 2e6b58bc..173421a5 100644
--- a/less/inputs.less
+++ b/less/inputs.less
@@ -1,7 +1,7 @@
 // main: material.less
 
 .form-control-wrapper .form-control, .form-control {
-    &, &:focus {
+    &, &:focus, &.focus {
         height: 28px;
         padding: 0;
         float: none;
@@ -19,7 +19,7 @@ select.form-control {
     height: 23px;
 }
 select[multiple].form-control {
-    &, &:focus {
+    &, &:focus, &.focus {
         height: 85px;
     }
 }
@@ -27,7 +27,7 @@ select[multiple].form-control {
 .form-control-wrapper {
     position: relative;
 
-    .form-control:focus {
+    .form-control:focus, .form-control.focus {
         outline: none;
     }
 
@@ -46,13 +46,13 @@ select[multiple].form-control {
         font-size: 10px;
         opacity: 1;
     }
-    .form-control:focus:invalid ~ .floating-label {
+    .form-control:focus:invalid ~ .floating-label, .form-control.focus:invalid ~ .floating-label {
         color: @input-danger;
     }
-    .form-control:focus ~ .material-input:after {
+    .form-control:focus ~ .material-input:after, .form-control.focus ~ .material-input:after {
         background-color: @input-default;
     }
-    .form-control:focus:invalid ~ .material-input {
+    .form-control:focus:invalid ~ .material-input, .form-control.focus:invalid ~ .material-input {
         &:before, &:after  {
             background-color: @input-danger;
         }
@@ -71,7 +71,7 @@ select[multiple].form-control {
         transform: scaleX(0);
         transition: transform 0s;
     }
-    .form-control:focus  ~ .material-input:before {
+    .form-control:focus  ~ .material-input:before, .form-control.focus  ~ .material-input:before {
         transform: scaleX(1);
         transition: transform 0.2s ease-out;
     }
@@ -96,7 +96,7 @@ select[multiple].form-control {
     }
 
     /* active state */
-    .form-control:focus ~ .material-input:after {
+    .form-control:focus ~ .material-input:after, .form-control.focus ~ .material-input:after {
         -webkit-animation: input-highlight 0.3s ease;
         animation: input-highlight 0.3s ease;
         -webkit-animation-fill-mode: forwards;
@@ -115,7 +115,7 @@ select[multiple].form-control {
 
 .form-group {
     &.has-warning {
-        .material-input:before, input.form-control:focus ~ .material-input:after {
+        .material-input:before, input.form-control:focus ~ .material-input:after, input.form-control.focus ~ .material-input:after {
             background: @input-warning;
         }
         .control-label, input.form-control:not(.empty) ~ .floating-label {
@@ -123,7 +123,7 @@ select[multiple].form-control {
         }
     }
     &.has-error {
-        .material-input:before, input.form-control:focus ~ .material-input:after {
+        .material-input:before, input.form-control:focus ~ .material-input:after, input.form-control.focus ~ .material-input:after {
             background: @input-danger;
         }
         .control-label, input.form-control:not(.empty) ~ .floating-label {
@@ -131,7 +131,7 @@ select[multiple].form-control {
         }
     }
     &.has-success {
-        .material-input:before, input.form-control:focus ~ .material-input:after {
+        .material-input:before, input.form-control:focus ~ .material-input:after, input.form-control.focus ~ .material-input:after {
             background: @input-success;
         }
         .control-label, input.form-control:not(.empty) ~ .floating-label {
@@ -139,7 +139,7 @@ select[multiple].form-control {
         }
     }
     &.has-info {
-        .material-input:before, input.form-control:focus ~ .material-input:after {
+        .material-input:before, input.form-control:focus ~ .material-input:after, input.form-control.focus ~ .material-input:after {
             background: @input-info;
         }
         .control-label, input.form-control:not(.empty) ~ .floating-label {
@@ -148,6 +148,7 @@ select[multiple].form-control {
     }
     .variations(~" .material-input:before", background-color, @indigo);
     .variations(~" input.form-control:focus ~ .material-input:after", background-color, @indigo);
+    .variations(~" input.form-control.focus ~ .material-input:after", background-color, @indigo);
     .variations(~" .control-label", color, @lightbg-text);
     .variations(~" input.form-control:not(.empty) ~ .floating-label", color, @indigo);
 
@@ -175,7 +176,7 @@ select.form-control {
     box-shadow: none;
     border-bottom: 1px solid #757575;
     border-radius: 0;
-    &:focus {
+    &:focus, &.focus {
         box-shadow: none;
         border-color: #757575;
     }
diff --git a/less/test.css b/less/test.css
new file mode 100644
index 00000000..03617ac4
--- /dev/null
+++ b/less/test.css
@@ -0,0 +1,10 @@
+/* Generated by less 1.7.0 */
+.btn-default {
+  color: #000000;
+}
+.btn-primary {
+  color: #4285f4;
+}
+.btn-success {
+  color: #0f9d58;
+}
diff --git a/less/test.less b/less/test.less
new file mode 100644
index 00000000..d2f9117e
--- /dev/null
+++ b/less/test.less
@@ -0,0 +1,39 @@
+@import "variables.less";
+
+.color(@default) {
+    &-default {
+        color: @default;
+    }
+    &-primary {
+        color: @primary;
+    }
+    &-success {
+        color: @success;
+    }
+    // etc
+}
+.btn {
+    .color(black);
+}
+
+.background(@default) {
+    &-default {
+        color: @default;
+    }
+    &-primary {
+        color: @primary;
+    }
+    &-success {
+        color: @success;
+    }
+}
+
+.variations(@extra, @property) {
+    &-default@{extra}  { &:extend(.@{property}-default); }
+    &-primary@{extra}  { &:extend(.@{property}-primary); }
+// etc
+}
+
+.label {
+    .variations(~"", btn);
+}