Use form related line-heights of 1 instead of default 1.5 so that we can more easily space out inputs to match spec. 1.5 made our input-padding-y seem to be unrelated to the spec, which was too confusing.

docs/material-design/test.md

@@ -7,7 +7,12 @@ group: material-design
 {% example html %}
 <form>
   <fieldset class="form-group">
-    <label for="exampleInputEmail1" class="mdb-label-floating">Email address</label>
+    <label for="exampleInputEmail1" class="mdb-label-static">Input Label text</label>
+    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Input text">
+    <span class="mdb-help">We'll never share your email with anyone else.</span>
+  </fieldset>
+  <fieldset class="form-group">
+    <label for="exampleInputEmail1" class="mdb-label-floating">Input text</label>
     <input type="email" class="form-control" id="exampleInputEmail1">
     <span class="mdb-help">We'll never share your email with anyone else.</span>
   </fieldset>

scss/_forms.scss

@@ -93,13 +93,10 @@
   position: relative;
 
   // -----
-  // Labels with form-group signalled state
+  // Labels
   //
   // Reference http://www.google.com/design/spec/components/text-fields.html
   // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
-  //&.mdb-label-static,
-  //&.mdb-label-placeholder,
-  //&.mdb-label-floating {
   label[class^='mdb-label'],
   label[class*=' mdb-label'] {
     position: absolute;
@@ -117,16 +114,16 @@
   }
 
   // default floating size/location with an mdb-form-group
-  @include mdb-form-size-variant($font-size-base, $mdb-label-top-margin-base, $input-padding-y, $line-height, $mdb-label-as-placeholder-shim-base, "mdb-form-group default");
+  @include mdb-form-size-variant($font-size-base, $mdb-label-top-margin-base, $input-padding-y, $mdb-form-line-height, $mdb-label-as-placeholder-shim-base, "mdb-form-group default");
 
   // sm floating size/location
   //&.mdb-form-group-sm {
-  //  @include mdb-form-size-variant($font-size-sm, $mdb-label-top-margin-sm, $mdb-input-padding-y-sm, $line-height-sm, $mdb-label-as-placeholder-shim-sm, "mdb-form-group sm");
+  //  @include mdb-form-size-variant($font-size-sm, $mdb-label-top-margin-sm, $mdb-input-padding-y-sm, $mdb-form-line-height-sm, $mdb-label-as-placeholder-shim-sm, "mdb-form-group sm");
   //}
   //
   //// lg floating size/location
   //&.mdb-form-group-lg {
-  //  @include mdb-form-size-variant($font-size-lg, $mdb-label-top-margin-lg, $mdb-input-padding-y-lg, $line-height-lg, $mdb-label-as-placeholder-shim-lg, "mdb-form-group lg");
+  //  @include mdb-form-size-variant($font-size-lg, $mdb-label-top-margin-lg, $mdb-input-padding-y-lg, $mdb-form-line-height-sm, $mdb-label-as-placeholder-shim-lg, "mdb-form-group lg");
   //}
 }
 

scss/_variables.scss

@@ -55,12 +55,17 @@ $mdb-help-size-ratio: 75 / 100 !default;
 // FIXME: with #733 customization of bootstrap, consider how these could be based on the original bs customized variables
 //
 ////## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+
+$mdb-form-line-height: 1 !default; // set as 1x font-size so that paddings are easier calculated to match the spec.
+
 $mdb-label-as-placeholder-shim-base: 0 !default; // manual adjustment of label top when positioned as placeholder
 $mdb-label-top-margin-base: 1rem !default;
 //
+$mdb-form-line-height-lg:  1 !default; // set as 1x font-size so that paddings are easier calculated to match the spec.
 $mdb-label-as-placeholder-shim-lg: 0 !default; // -4px // manual adjustment of label top when positioned as placeholder
 $mdb-label-top-margin-lg: 1rem !default; // 16px
 //
+$mdb-form-line-height-sm:  1 !default; // set as 1x font-size so that paddings are easier calculated to match the spec.
 $mdb-label-as-placeholder-shim-sm: 0 !default; // 8px // manual adjustment of label top when positioned as placeholder
 $mdb-label-top-margin-sm: .75rem !default; // 12px
 

scss/mixins/_forms.scss

@@ -49,23 +49,20 @@
 
 
 // must be broken out for reuse - webkit selector breaks firefox
-@mixin mdb-label-static($label-top, $static-font-size, $static-line-height) {
+@mixin mdb-label-static($label-top, $static-font-size) {
   top: $label-top;
   left: 0;
-  // must repeat because the selector above is more specific than the general label sizing
+  // must repeat because the previous (more generic) selectors
-  //font-size: $static-font-size;
+  font-size: $static-font-size;
-  //line-height: $static-line-height;
 }
 
-@mixin mdb-form-size-variant($font-size, $label-top-margin, $vertical-padding, $line-height, $label-as-placeholder-shim, $form-group-context: null) {
+@mixin mdb-form-size-variant($font-size, $label-top-margin, $variant-padding-y, $variant-line-height, $label-as-placeholder-shim, $form-group-context: null) {
   $static-font-size: ($mdb-mdb-label-static-size-ratio * $font-size);
-  $static-line-height: ($mdb-mdb-label-static-size-ratio * $line-height);
 
-  $label-as-placeholder-top: ($vertical-padding + $label-as-placeholder-shim);  // -1 *
+  $label-as-placeholder-top: ($variant-padding-y + $label-as-placeholder-shim);  // -1 *
-  $label-top: $label-as-placeholder-top - ($font-size + $vertical-padding);
+  $label-top: $label-as-placeholder-top - ($font-size + $variant-padding-y);
 
   $help-font-size: ($mdb-help-size-ratio * $font-size);
-  $help-line-height: ($mdb-help-size-ratio * $line-height);
 
   @debug "font-size: #{$font-size} static-font-size: #{$static-font-size} help-font-size: #{$help-font-size} form-group-context: #{$form-group-context} ";
 
@@ -75,9 +72,17 @@
   //Padding below input text (including divider): 16dp
   //Padding below text divider: 8dp
 
+  // Set all line-heights preferably to 1 so that we can space out everything manually without additional added space
+  //  from the default line-height of 1.5
+  .form-control,
+  label,
+  .mdb-help,
+  input::placeholder {
+    line-height: $variant-line-height;
+  }
 
     // this may be inside or outside a form-group, may be .mdb-form-group.mdb-form-group-sm or .mdb-form-group.mdb-form-group-lg
-  //@include label-size-variant($font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-font-size);
+  //@include label-size-variant($font-size, $vertical-padding, $variant-line-height, $static-font-size, $static-line-height, $help-font-size);
   .form-control {
     //
     //  // margin-bottom must be specified to give help-block vertical space.
@@ -87,7 +92,7 @@
 
   input::placeholder {
     font-size: $font-size;
-    line-height: $line-height;
+    //line-height: $variant-line-height;
   }
 
   // generic labels used anywhere in the form
@@ -95,24 +100,21 @@
   .radio label,
   label {
     font-size: $font-size;
-    line-height: $line-height;
   }
 
   // smaller focused or static size
   //label[class^='mdb-label'],
   //label[class*=' mdb-label'] {
   //  //font-size: $static-font-size;
-  //  //line-height: $static-line-height;
   //  //margin: 16px 0 0 0; // std and lg
   //}
 
   // floating/placeholder default
   .mdb-label-floating,
   .mdb-label-placeholder {
-    @debug "top: #{$label-as-placeholder-top}";
+    //@debug "top: #{$label-as-placeholder-top}";
     top: $label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
     //font-size: $placeholder-font-size;
-    //line-height: $line-height;
   }
 
   // floating focused/filled will look like static
@@ -121,13 +123,13 @@
   &.is-filled,
   .is-filled {
     .mdb-label-floating {
-      @include mdb-label-static($label-top, $static-font-size, $static-line-height);
+      @include mdb-label-static($label-top, $static-font-size);
     }
   }
 
   // static
   .mdb-label-static {
-    @include mdb-label-static($label-top, $static-font-size, $static-line-height);
+    @include mdb-label-static($label-top, $static-font-size);
   }
   // #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731
   //input:-webkit-autofill ~ .mdb-label-floating {  FIXME: confirm that the autofill js generation of change event makes this unnecessary

scss/variables/bootstrap/_forms.scss

@@ -21,7 +21,7 @@ $input-color-placeholder:        $mdb-label-color !default; // #999 !default;
 
 
 $input-padding-x:                0 !default; // .75rem !default;
-$input-padding-y:                .4375rem !default; // $mdb-input-padding-y: 7px // .375rem !default;
+$input-padding-y:                .4375rem !default; // spec 8px // .375rem !default;
 
 $input-padding-x-sm:             0 !default; // .75rem !default;
 $input-padding-y-sm:             .1875 !default; // 3px //.275rem !default;