Add padding to textfield to accomodate floating labels and errors

src/_variables.scss

@@ -286,6 +286,7 @@ $input-text-font-size: 16px;
 $input-text-width: 100%;
 $input-text-padding: 4px;
 $input-text-ripple-size: 32px;
+$input-text-vertical-spacing: 20px;
 
 $input-text-button-size: 32px;
 $input-text-floating-label-fontsize: 12px;

src/textfield/_textfield.scss

@@ -27,11 +27,12 @@
   box-sizing: border-box;
   width: 300px;
   margin: 0;
+  padding: $input-text-vertical-spacing 0;
 
   // Align buttons, if used.
   & .mdl-button {
     position: absolute;
-    bottom: 0;
+    bottom: $input-text-vertical-spacing;
   }
 }
 
@@ -64,7 +65,7 @@
   background: $input-text-font-size;
   text-align: left;
   color: inherit;
-
+  
   .mdl-textfield.is-focused & {
     outline: none;
   }
@@ -89,7 +90,7 @@
   right: 0;
   pointer-events: none;
   position: absolute;
-  top: $input-text-padding;
+  top: ($input-text-padding + $input-text-vertical-spacing);
   width: 100%;
   overflow: hidden;
   white-space: nowrap;
@@ -108,7 +109,7 @@
   .mdl-textfield--floating-label.is-dirty & {
     color: $input-text-highlight-color;
     font-size : $input-text-floating-label-fontsize;
-    top: -($input-text-floating-label-fontsize + $input-text-padding);
+    top: $input-text-vertical-spacing - ($input-text-floating-label-fontsize + $input-text-padding);
     visibility: visible;
   }
 
@@ -120,7 +121,7 @@
   // The after label is the colored underline for the TextField.
   &:after {
     background-color: $input-text-highlight-color;
-    bottom: 0;
+    bottom: $input-text-vertical-spacing;
     content: '';
     height: 2px;
     left: 45%;
@@ -176,5 +177,7 @@
     // Thus assume a sensible maximum, and animate to/from that value.
     max-width: 600px;
   }
-
+  .mdl-textfield__label:after {
+    bottom: 0;
+  }
 }

src/textfield/demo.html

@@ -32,17 +32,17 @@
         <label class="mdl-textfield__label" for="sample3">I'm Disabled</label>
       </div>
 
-      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-        <input class="mdl-textfield__input" type="text" id="sample4" />
-        <label class="mdl-textfield__label" for="sample4">Text Input</label>
-      </div>
-
       <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
         <input class="mdl-textfield__input" type="text" pattern="[0-9]*" id="sample5" />
         <label class="mdl-textfield__label" for="sample5">Numbers Only</label>
         <span class="mdl-textfield__error">Input is not a number!</span>
       </div>
 
+      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+        <input class="mdl-textfield__input" type="text" id="sample4" />
+        <label class="mdl-textfield__label" for="sample4">Text Input</label>
+      </div>
+
       <div class="mdl-textfield mdl-js-textfield">
         <textarea class="mdl-textfield__input" type="text" rows= "1" id="sample6" ></textarea>
         <label class="mdl-textfield__label" for="sample6">Type multiple lines here...</label>

src/textfield/demo.scss

@@ -23,5 +23,4 @@
 
 .demo-page--textfield .mdl-textfield {
   display: block;
-  margin: 30px 0;
 }