From 1112b969294f0bbd6ee937725cbd365613b23ace Mon Sep 17 00:00:00 2001
From: Kevin Ross <kevin.ross@alienfast.com>
Date: Wed, 11 Nov 2015 09:29:35 -0600
Subject: [PATCH] shimmed the floating-label as placeholder to have a perfect
 match to the static label

---
 index.html           | 19 +++++++++++++++++++
 less/_inputs.less    | 26 +++++++++++++++++++++-----
 less/_variables.less | 10 ++++++----
 3 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index ae3d683f..af7689f7 100644
--- a/index.html
+++ b/index.html
@@ -425,6 +425,25 @@
                 <span class="help-block hint">Please enter a valid email address</span>
               </div>
 
+              <h2>Input - no labels
+                <small>form-group sizing</small>
+              </h2>
+
+              <div class="form-group form-group-sm">
+                <input type="email" class="form-control" placeholder="Placeholder form-group-sm">
+                <span class="help-block hint">Please enter a valid email address</span>
+              </div>
+
+              <div class="form-group">
+                <input type="email" class="form-control" placeholder="Placeholder">
+                <span class="help-block hint">Please enter a valid email address</span>
+              </div>
+
+              <div class="form-group form-group-lg">
+                <input type="email" class="form-control" placeholder="Placeholder form-group-lg">
+                <span class="help-block hint">Please enter a valid email address</span>
+              </div>
+
 
               <h2>Input -
                 <small>floating label feedback variants</small>
diff --git a/less/_inputs.less b/less/_inputs.less
index fa0974d1..fe5090ff 100644
--- a/less/_inputs.less
+++ b/less/_inputs.less
@@ -66,27 +66,42 @@
   }
 }
 
-.form-group-size-variant(@placeholder-font-size, @vertical-padding){
-  @label-as-placeholder-top: -1 * @vertical-padding;
+.form-group-size-variant(@placeholder-font-size, @vertical-padding, @line-height, @label-as-placeholder-shim){
   @static-font-size: ceil((@floating-label-size-ratio * @placeholder-font-size));
+  @static-line-height: (@floating-label-size-ratio * @line-height);
+
+  @label-as-placeholder-top: -1 * (@vertical-padding + @label-as-placeholder-shim);
+  //@label-as-placeholder-top: -1 * (@line-height * @static-font-size); way too much on anything but sm
+
   @hint-font-size: ceil((@hint-size-ratio * @placeholder-font-size));
+  @hint-line-height: (@hint-size-ratio * @line-height);
 
   .form-control {
     .material-placeholder({
       font-size: @placeholder-font-size;
     });
+    margin-bottom: @vertical-padding;
+
+    //border: 1px solid;
   }
 
   .hint {
+    margin-top: 0px; // allow the input margin to set-off the top of the hint
     font-size: @hint-font-size;
+
+    //border: 1px solid;
   }
 
   label.control-label { // static label
     font-size: @static-font-size; // static (smaller of the two)
+    line-height: @static-line-height;
     &.floating-label {
       top: @label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
       font-size: @placeholder-font-size; // as placeholder (full size)
+      line-height: @line-height;
     }
+
+    //border: 1px solid;
   }
 
   // sizing of focused/open/labels
@@ -95,6 +110,7 @@
     label.control-label.floating-label {
       top: @label-as-placeholder-top - (@placeholder-font-size + @vertical-padding);
       font-size: @static-font-size;
+      line-height: @static-line-height;
     }
   }
 }
@@ -135,16 +151,16 @@
   .variations(~".is-focused label.control-label", color, @input-default); // focused label color variations
 
   // default floating size/location
-  .form-group-size-variant(@md-input-font-size-base, @md-input-padding-base-vertical);
+  .form-group-size-variant(@md-input-font-size-base, @md-input-padding-base-vertical, @md-input-line-height-base, @md-label-as-placeholder-shim-base);
 
   // sm floating size/location
   &.form-group-sm {
-    .form-group-size-variant(@md-input-font-size-small, @md-input-padding-small-vertical);
+    .form-group-size-variant(@md-input-font-size-small, @md-input-padding-small-vertical, @md-input-line-height-small, @md-label-as-placeholder-shim-small);
   }
 
   // lg floating size/location
   &.form-group-lg {
-    .form-group-size-variant(@md-input-font-size-large, @md-input-padding-large-vertical);
+    .form-group-size-variant(@md-input-font-size-large, @md-input-padding-large-vertical, @md-input-line-height-large, @md-label-as-placeholder-shim-large);
   }
 
   // Hints
diff --git a/less/_variables.less b/less/_variables.less
index 8af8827d..462e0864 100644
--- a/less/_variables.less
+++ b/less/_variables.less
@@ -101,23 +101,25 @@
 @md-input-line-height-base:        1.428571429; // 20/14
 //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
 @md-input-line-height-computed:    floor((@md-input-font-size-base * @md-input-line-height-base)); // ~20px
+@md-input-line-height-large:         1.3333333; // extra decimals for Win 8.1 Chrome
+@md-input-line-height-small:         1.5;
 
 //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
 @md-input-padding-base-vertical:     8px; // was 6.
 @md-input-padding-base-horizontal:   0px; // was 12.
+@md-label-as-placeholder-shim-base:  0px; // manual adjustment of label top when positioned as placeholder
 
 @md-input-padding-large-vertical:    10px; // 10
-@md-input-padding-large-horizontal:  0px; // 16
+@md-input-padding-large-horizontal:  0px;  // 16
+@md-label-as-placeholder-shim-large: -4px; // manual adjustment of label top when positioned as placeholder
 
 @md-input-padding-small-vertical:    4px; // 5
 @md-input-padding-small-horizontal:  0px; // 10
+@md-label-as-placeholder-shim-small: 8px; // manual adjustment of label top when positioned as placeholder
 
 @md-input-padding-xs-vertical:       2px; // 1
 @md-input-padding-xs-horizontal:     0px; // 5
 
-@md-input-line-height-large:         1.3333333; // extra decimals for Win 8.1 Chrome
-@md-input-line-height-small:         1.5;
-
 @md-input-border-radius-base:        4px;
 @md-input-border-radius-large:       6px;
 @md-input-border-radius-small:       3px;