normalized placeholder size variants

index.html

@@ -385,36 +385,69 @@
               <h2>Input - floating labels
                 <small>form-group sizing</small>
               </h2>
-              <div class="form-group form-group-sm has-error">
+              <div class="form-group form-group-sm">
-                <label for="i4" class="control-label floating-label">Floating label form-group-sm has-error</label>
+                <label for="i4" class="control-label floating-label">Email address form-group-sm</label>
-                <input type="email" class="form-control input-sm" id="i4">
+                <input type="email" class="form-control" id="i4">
-                <span class="help-block hint">Please enter a valid email address <code>span.help-block.hint</code></span>
+                <span class="help-block hint">Please enter a valid email address</span>
+              </div>
+
+              <div class="form-group">
+                <label for="i5i" class="control-label floating-label">Email address default size</label>
+                <input type="email" class="form-control" id="i5i">
+                <span class="help-block hint">Please enter a valid email address</span>
               </div>
 
               <div class="form-group form-group-lg">
-                <label for="i6" class="control-label floating-label">Floating label form-group-lg</label>
+                <label for="i6" class="control-label floating-label">Email address form-group-lg</label>
                 <input type="email" class="form-control" id="i6">
-                <span class="help-block hint">Please enter a valid email address <code>span.help-block.hint</code></span>
+                <span class="help-block hint">Please enter a valid email address</span>
               </div>
 
               <h2>Input - static labels
                 <small>form-group sizing</small>
               </h2>
 
-              <div class="form-group form-group-sm has-error">
+              <div class="form-group form-group-sm">
-                <label for="i1" class="control-label">Static label form-group-sm has-error</label>
+                <label for="si4" class="control-label">Email address form-group-sm</label>
-                <input type="email" class="form-control" id="i1" placeholder="Placeholder text">
+                <input type="email" class="form-control" id="si4" placeholder="Placeholder">
+                <span class="help-block hint">Please enter a valid email address</span>
+              </div>
 
-                <p class="help-block hint">This is a hint as a <code>p.help-block.hint</code></p>
+              <div class="form-group">
+                <label for="si5i" class="control-label">Email address default size</label>
+                <input type="email" class="form-control" id="si5i" placeholder="Placeholder">
+                <span class="help-block hint">Please enter a valid email address</span>
               </div>
 
               <div class="form-group form-group-lg">
-                <label for="i3" class="control-label">Static label form-group-lg</label>
+                <label for="si6" class="control-label">Email address form-group-lg</label>
-                <input type="email" class="form-control" id="i3" placeholder="Placeholder text">
+                <input type="email" class="form-control" id="si6" placeholder="Placeholder">
-
+                <span class="help-block hint">Please enter a valid email address</span>
-                <p class="help-block hint">This is a hint as a <code>p.help-block.hint</code></p>
               </div>
 
+
+              <h2>Input -
+                <small>floating label feedback variants</small>
+              </h2>
+              <div class="form-group has-success">
+                <label for="f1" class="control-label floating-label">Email address has-success</label>
+                <input type="email" class="form-control" id="f1">
+                <span class="help-block hint">Please enter a valid email address</span>
+              </div>
+
+              <div class="form-group has-warning">
+                <label for="f2" class="control-label floating-label">Email address has-warning</label>
+                <input type="email" class="form-control" id="f2">
+                <span class="help-block hint">Please enter a valid email address</span>
+              </div>
+
+              <div class="form-group has-error">
+                <label for="f3" class="control-label floating-label">Email address has-error</label>
+                <input type="email" class="form-control" id="f3">
+                <span class="help-block hint">Please enter a valid email address</span>
+              </div>
+
+
               <h2>Input - Legacy</h2>
               <!-- Exercise backwards compatibility without form-group -->
               <input type="text" class="form-control floating-label" placeholder="Legacy floating label as placeholder attribute" data-hint="This is a hint using a legacy <code>data-hint</code> attribute on the input">

less/_inputs.less

@@ -75,31 +75,82 @@
 .form-group {
   position: relative;
 
+  // -----
   // Labels
+  //
+  // Reference http://www.google.com/design/spec/components/text-fields.html
+  // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
+
+  @label-as-placeholder-top: -1 * @md-input-padding-base-vertical;
   label.control-label { // static label
 
     // same label properties as form-group placeholder.  could be shared with a ruleset but makes sass conversion painful
     color: @input-placeholder-color;
     font-size: @floating-label-size-ratio * @md-input-font-size-base; // same as focused size of floating
     font-weight: normal;
-
     margin: 16px 0 0 0; // std and lg
+
+    &.floating-label {
+      font-size: @md-input-font-size-base; // as placeholder
+      position: absolute;
+      pointer-events: none;
+      left: 0px;
+      top: @label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
+      transition: 0.3s ease all;
+    }
   }
   .variations(~" label.control-label", color, @input-placeholder-color);  // default label color variations
   .variations(~".is-focused label.control-label", color, @input-default); // focused label color variations
 
+  &.is-focused {
+    label.control-label{
+      &.floating-label{
+        font-size: @md-input-label-font-size-base; // 12px
+      }
+    }
+  }
+
+  // sizing of focused/open/labels
+  &.is-focused,
+  &:not(.is-empty) {
+    label.control-label{
+      &.floating-label {
+        top: @label-as-placeholder-top - (@md-input-label-font-size-base + @md-input-padding-base-vertical); // FIXME this needs to be calculated and moved up to .is-focused !!!
+        font-size: @md-input-label-font-size-base;
+      }
+    }
+  }
+
   // sm
   &.form-group-sm {
+    .form-control {
+      .material-placeholder({
+        font-size: @md-input-font-size-small;
+      });
+    }
+
     label.control-label { // static label
-      font-size: @floating-label-size-ratio * @md-input-font-size-small; // same as focused size of floating
+      font-size: @floating-label-size-ratio * @md-input-font-size-small; // static
-      margin: 12px 0 0 0; // sm only
+      //margin: 12px 0 0 0; // sm only
+      &.floating-label {
+        font-size: @md-input-font-size-small; // as placeholder
+      }
     }
   }
 
   // lg
   &.form-group-lg {
+    .form-control {
+      .material-placeholder({
+        font-size: @md-input-font-size-large;
+      });
+    }
+
     label.control-label { // static label
       font-size: @floating-label-size-ratio * @md-input-font-size-large; // same as focused size of floating
+      &.floating-label {
+        font-size: @md-input-font-size-large; // as placeholder (never larger than size-base)
+      }
     }
   }
 
@@ -162,33 +213,6 @@ select.form-control {
   }
 }
 
-// Reference http://www.google.com/design/spec/components/text-fields.html
-// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
-
-label.control-label.floating-label {
-  @label-as-placeholder-top: -1 * @md-input-padding-base-vertical;
-
-  font-size: @md-input-font-size-base; // Input sizes
-  position: absolute;
-  pointer-events: none;
-  left: 0px;
-  top: @label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
-  transition: 0.3s ease all;
-
-  .form-group.is-focused & {
-    label.control-label {
-      font-size: @md-input-label-font-size-base; // 12px
-    }
-  }
-
-  // sizing
-  .form-group.is-focused &,
-  .form-group:not(.is-empty) & {
-    top: @label-as-placeholder-top - (@md-input-label-font-size-base + @md-input-padding-base-vertical); // FIXME this needs to be calculated and moved up to .is-focused !!!
-    font-size: @md-input-label-font-size-base;
-  }
-}
-
 .input-group {
   .form-group {
     .form-control {

test.html

@@ -31,9 +31,31 @@
 
 <div class="container-fluid">
 
-  <h2>Input - Legacy</h2>
+  <h2>Input - static labels
-  <!-- Exercise backwards compatibility without form-group -->
+    <small>form-group sizing</small>
-  <input type="text" class="form-control floating-label" placeholder="Legacy floating label as placeholder attribute" data-hint="This is a hint using a legacy data-hint attribute on the input">
+  </h2>
+
+  <div class="form-group form-group-sm">
+    <label for="i1" class="control-label">Static label</label>
+    <input type="email" class="form-control" id="i1" placeholder="Placeholder text">
+
+    <p class="help-block hint">This is a hint</p>
+  </div>
+
+  <div class="form-group">
+    <label for="i2" class="control-label">Static label</label>
+    <input type="email" class="form-control" id="i2" placeholder="Placeholder text">
+
+    <p class="help-block hint">This is a hint</p>
+  </div>
+  
+  <div class="form-group form-group-lg">
+    <label for="i3" class="control-label">Static label</label>
+    <input type="email" class="form-control" id="i3" placeholder="Placeholder text">
+
+    <p class="help-block hint">This is a hint</p>
+  </div>
+  
   
 </div>