fixed #504

dist/css/material-fullpalette.css

@@ -35463,13 +35463,10 @@ body .jumbotron-material-blue-grey-A700,
   }
 }
 fieldset[disabled] .form-control,
-.form-control-wrapper .form-control,
 .form-control,
 fieldset[disabled] .form-control:focus,
-.form-control-wrapper .form-control:focus,
 .form-control:focus,
 fieldset[disabled] .form-control.focus,
-.form-control-wrapper .form-control.focus,
 .form-control.focus {
   padding: 0;
   float: none;
@@ -35477,29 +35474,19 @@ fieldset[disabled] .form-control.focus,
   box-shadow: none;
   border-radius: 0;
 }
-fieldset[disabled] .form-control:not(textarea),
-.form-control-wrapper .form-control:not(textarea),
-.form-control:not(textarea),
-fieldset[disabled] .form-control:focus:not(textarea),
-.form-control-wrapper .form-control:focus:not(textarea),
-.form-control:focus:not(textarea),
-fieldset[disabled] .form-control.focus:not(textarea),
-.form-control-wrapper .form-control.focus:not(textarea),
-.form-control.focus:not(textarea) {
-  height: 28px;
-}
 fieldset[disabled] .form-control:disabled,
-.form-control-wrapper .form-control:disabled,
 .form-control:disabled,
 fieldset[disabled] .form-control:focus:disabled,
-.form-control-wrapper .form-control:focus:disabled,
 .form-control:focus:disabled,
 fieldset[disabled] .form-control.focus:disabled,
-.form-control-wrapper .form-control.focus:disabled,
 .form-control.focus:disabled {
   border-style: dashed;
   border-bottom: 1px solid #757575;
 }
+fieldset[disabled] .form-control:textarea,
+.form-control:textarea {
+  height: 40px;
+}
 select[multiple].form-control,
 select[multiple].form-control:focus,
 select[multiple].form-control.focus {
@@ -35554,7 +35541,6 @@ fieldset[disabled] .form-control.focus:disabled,
 }
 .form-control-wrapper .floating-label {
   color: #bdbdbd;
-  font-size: 14px;
   position: absolute;
   pointer-events: none;
   left: 0px;
@@ -35562,11 +35548,35 @@ fieldset[disabled] .form-control.focus:disabled,
   transition: 0.2s ease all;
   opacity: 0;
 }
+.form-control:focus ~ .form-control-wrapper .floating-label,
+.form-control:not(.empty) ~ .form-control-wrapper .floating-label {
+  opacity: 1;
+}
+.form-control-wrapper .floating-label {
+  font-size: 14px;
+}
 .form-control-wrapper .form-control:focus ~ .floating-label,
 .form-control-wrapper .form-control:not(.empty) ~ .floating-label {
-  top: -10px;
+  top: -9.8px;
-  font-size: 10px;
+  font-size: 9.8px;
-  opacity: 1;
+}
+.form-control-wrapper .input-sm + .floating-label {
+  font-size: 12px;
+  top: 7px;
+}
+.form-control-wrapper .form-control.input-sm:focus ~ .floating-label,
+.form-control-wrapper .form-control.input-sm:not(.empty) ~ .floating-label {
+  top: -8.4px;
+  font-size: 8.4px;
+}
+.form-control-wrapper .input-lg + .floating-label {
+  font-size: 18px;
+  top: 10px;
+}
+.form-control-wrapper .form-control.input-lg:focus ~ .floating-label,
+.form-control-wrapper .form-control.input-lg:not(.empty) ~ .floating-label {
+  top: -12.6px;
+  font-size: 12.6px;
 }
 .form-control-wrapper .form-control:focus ~ .floating-label {
   color: #009688;

dist/css/material.css

@@ -4852,13 +4852,10 @@ body .jumbotron-material-blue-grey,
   }
 }
 fieldset[disabled] .form-control,
-.form-control-wrapper .form-control,
 .form-control,
 fieldset[disabled] .form-control:focus,
-.form-control-wrapper .form-control:focus,
 .form-control:focus,
 fieldset[disabled] .form-control.focus,
-.form-control-wrapper .form-control.focus,
 .form-control.focus {
   padding: 0;
   float: none;
@@ -4866,29 +4863,19 @@ fieldset[disabled] .form-control.focus,
   box-shadow: none;
   border-radius: 0;
 }
-fieldset[disabled] .form-control:not(textarea),
-.form-control-wrapper .form-control:not(textarea),
-.form-control:not(textarea),
-fieldset[disabled] .form-control:focus:not(textarea),
-.form-control-wrapper .form-control:focus:not(textarea),
-.form-control:focus:not(textarea),
-fieldset[disabled] .form-control.focus:not(textarea),
-.form-control-wrapper .form-control.focus:not(textarea),
-.form-control.focus:not(textarea) {
-  height: 28px;
-}
 fieldset[disabled] .form-control:disabled,
-.form-control-wrapper .form-control:disabled,
 .form-control:disabled,
 fieldset[disabled] .form-control:focus:disabled,
-.form-control-wrapper .form-control:focus:disabled,
 .form-control:focus:disabled,
 fieldset[disabled] .form-control.focus:disabled,
-.form-control-wrapper .form-control.focus:disabled,
 .form-control.focus:disabled {
   border-style: dashed;
   border-bottom: 1px solid #757575;
 }
+fieldset[disabled] .form-control:textarea,
+.form-control:textarea {
+  height: 40px;
+}
 select[multiple].form-control,
 select[multiple].form-control:focus,
 select[multiple].form-control.focus {
@@ -4943,7 +4930,6 @@ fieldset[disabled] .form-control.focus:disabled,
 }
 .form-control-wrapper .floating-label {
   color: #bdbdbd;
-  font-size: 14px;
   position: absolute;
   pointer-events: none;
   left: 0px;
@@ -4951,11 +4937,35 @@ fieldset[disabled] .form-control.focus:disabled,
   transition: 0.2s ease all;
   opacity: 0;
 }
+.form-control:focus ~ .form-control-wrapper .floating-label,
+.form-control:not(.empty) ~ .form-control-wrapper .floating-label {
+  opacity: 1;
+}
+.form-control-wrapper .floating-label {
+  font-size: 14px;
+}
 .form-control-wrapper .form-control:focus ~ .floating-label,
 .form-control-wrapper .form-control:not(.empty) ~ .floating-label {
-  top: -10px;
+  top: -9.8px;
-  font-size: 10px;
+  font-size: 9.8px;
-  opacity: 1;
+}
+.form-control-wrapper .input-sm + .floating-label {
+  font-size: 12px;
+  top: 7px;
+}
+.form-control-wrapper .form-control.input-sm:focus ~ .floating-label,
+.form-control-wrapper .form-control.input-sm:not(.empty) ~ .floating-label {
+  top: -8.4px;
+  font-size: 8.4px;
+}
+.form-control-wrapper .input-lg + .floating-label {
+  font-size: 18px;
+  top: 10px;
+}
+.form-control-wrapper .form-control.input-lg:focus ~ .floating-label,
+.form-control-wrapper .form-control.input-lg:not(.empty) ~ .floating-label {
+  top: -12.6px;
+  font-size: 12.6px;
 }
 .form-control-wrapper .form-control:focus ~ .floating-label {
   color: #009688;

less/_inputs.less

@@ -1,8 +1,5 @@
-fieldset[disabled] .form-control, .form-control-wrapper .form-control, .form-control {
+fieldset[disabled] .form-control, .form-control {
   &, &:focus, &.focus {
-    &:not(textarea) {
-      height: 28px;
-    }
     padding: 0;
     float: none;
     border: 0;
@@ -15,6 +12,12 @@ fieldset[disabled] .form-control, .form-control-wrapper .form-control, .form-con
   }
 }
 
+fieldset[disabled] .form-control, .form-control {
+  &:textarea {
+    height: 40px;
+  }
+}
+
 select[multiple].form-control {
   &, &:focus, &.focus {
     height: 85px;
@@ -69,20 +72,48 @@ fieldset[disabled] .form-control.focus:disabled,
 
   .floating-label {
     color: @input-placeholder-color;
-    font-size: 14px;
     position: absolute;
     pointer-events: none;
     left: 0px;
     top: 5px;
     transition: 0.2s ease all;
     opacity: 0;
+    .form-control:focus ~ &,
+    .form-control:not(.empty) ~ & {
+      opacity: 1;
+    }
+  }
+
+  // Input sizes
+  .floating-label { // base
+    font-size: @font-size-base;
   }
   .form-control:focus ~ .floating-label,
   .form-control:not(.empty) ~ .floating-label {
-    top: -10px;
+    top: @floating-label-size-ratio * -@font-size-base;
-    font-size: 10px;
+    font-size: @floating-label-size-ratio * @font-size-base;
-    opacity: 1;
   }
+
+  .input-sm + .floating-label { // small
+    font-size: @font-size-small;
+    top: 7px;
+  }
+  .form-control.input-sm:focus ~ .floating-label,
+  .form-control.input-sm:not(.empty) ~.floating-label {
+    top: @floating-label-size-ratio * -@font-size-small;
+    font-size: @floating-label-size-ratio * @font-size-small;
+  }
+
+  .input-lg + .floating-label {
+    font-size: @font-size-large;
+    top: 10px;
+  }
+  .form-control.input-lg:focus ~ .floating-label,
+  .form-control.input-lg:not(.empty) ~ .floating-label {
+    top: @floating-label-size-ratio * -@font-size-large;
+    font-size: @floating-label-size-ratio * @font-size-large;
+  }
+
   .form-control:focus ~ .floating-label {
     color: @primary;
   }

less/_variables.less

@@ -67,6 +67,10 @@
 @progress-warning: @warning;
 @progress-danger: @danger;
 
+@font-size-base: 14px;
+@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
+@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
+
 // Global Material variables
 @material-border-radius: 2px;
 @input-underline-color: #D2D2D2;
@@ -90,3 +94,4 @@
 
 // Inputs
 @input-placeholder-color: #BDBDBD;
+@floating-label-size-ratio: 70 / 100;