trying to align behavior of static labels with the look of floating labels

dist/css/material-fullpalette.css

@@ -20628,21 +20628,25 @@ fieldset[disabled] .form-control {
 .form-control:invalid {
   background-image: linear-gradient(#f44336, #f44336), linear-gradient(#d2d2d2, #d2d2d2);
 }
+label,
 .floating-label {
   color: #bdbdbd;
+  font-size: 14px;
+  font-weight: normal;
+}
+.floating-label {
   position: absolute;
   pointer-events: none;
   left: 0px;
   top: 5px;
   transition: 0.3s ease all;
-  font-size: 14px;
 }
 .form-control:focus ~ .floating-label,
 .form-control:not(.empty) ~ .floating-label {
   top: -9.8px;
   font-size: 9.8px;
 }
-.input-sm + .floating-label {
+.form-control.input-sm ~ .floating-label {
   font-size: 12px;
   top: 7px;
 }
@@ -20651,7 +20655,7 @@ fieldset[disabled] .form-control {
   top: -8.4px;
   font-size: 8.4px;
 }
-.input-lg + .floating-label {
+.form-control.input-lg ~ .floating-label {
   font-size: 18px;
   top: 7px;
 }

dist/css/material.css

@@ -4934,21 +4934,25 @@ fieldset[disabled] .form-control {
 .form-control:invalid {
   background-image: linear-gradient(#f44336, #f44336), linear-gradient(#d2d2d2, #d2d2d2);
 }
+label,
 .floating-label {
   color: #bdbdbd;
+  font-size: 14px;
+  font-weight: normal;
+}
+.floating-label {
   position: absolute;
   pointer-events: none;
   left: 0px;
   top: 5px;
   transition: 0.3s ease all;
-  font-size: 14px;
 }
 .form-control:focus ~ .floating-label,
 .form-control:not(.empty) ~ .floating-label {
   top: -9.8px;
   font-size: 9.8px;
 }
-.input-sm + .floating-label {
+.form-control.input-sm ~ .floating-label {
   font-size: 12px;
   top: 7px;
 }
@@ -4957,7 +4961,7 @@ fieldset[disabled] .form-control {
   top: -8.4px;
   font-size: 8.4px;
 }
-.input-lg + .floating-label {
+.form-control.input-lg ~ .floating-label {
   font-size: 18px;
   top: 7px;
 }

index.html

@@ -490,20 +490,46 @@
           <h1 class="header">Input</h1>
 
           <div class="inputs">
-            <h2>Input</h2>
+            <h2>Input - static labels</h2>
 
             <div class="form-group">
-              <label for="i1" class="not-floating">Static label</label>
-              <input type="email" class="form-control" id="i1" placeholder="Placeholder text">
+              <label for="i1" class="not-floating input-sm">Static label input-sm</label>
+              <input type="email" class="form-control input-sm" id="i1" placeholder="Placeholder text">
               <p class="help-block hint">This is a hint as a <code>p.help-block.hint</code></p>
             </div>
 
             <div class="form-group">
-              <label for="i2" class="floating-label">Floating label</label>
-              <input type="email" class="form-control" id="i2">
+              <label for="i2" class="not-floating">Static label</label>
+              <input type="email" class="form-control" id="i2" placeholder="Placeholder text">
+              <p class="help-block hint">This is a hint as a <code>p.help-block.hint</code></p>
+            </div>
+
+            <div class="form-group">
+              <label for="i3" class="not-floating input-lg">Static label input-lg</label>
+              <input type="email" class="form-control input-lg" id="i3" placeholder="Placeholder text">
+              <p class="help-block hint">This is a hint as a <code>p.help-block.hint</code></p>
+            </div>
+
+            <h2>Input - floating labels</h2>
+            <div class="form-group">
+              <label for="i4" class="floating-label">Floating label input-sm</label>
+              <input type="email" class="form-control input-sm" id="i4">
+              <span class="help-block hint">This is a hint</span>
+            </div>
+
+            <div class="form-group">
+              <label for="i5" class="floating-label">Floating label</label>
+              <input type="email" class="form-control" id="i5">
               <span class="help-block hint">This is a hint as a <code>span.help-block.hint</code></span>
             </div>
 
+            <div class="form-group">
+              <label for="i6" class="floating-label">Floating label input-lg</label>
+              <input type="email" class="form-control input-lg" id="i6">
+              <span class="help-block hint">This is a hint</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

@@ -81,10 +81,11 @@
 // shared sizing
 .input-floating-label-size(@name, @size) {
 
-  .@{name} + & {
+  .form-control.@{name} ~ & {
     font-size: @size;
     top: 7px;
   }
+
   .form-control.@{name}:focus ~ &,
   .form-control.@{name}:not(.empty) ~ & {
     top: @floating-label-size-ratio * -@size;
@@ -92,14 +93,20 @@
   }
 }
 
+label,
 .floating-label {
+
   color: @input-placeholder-color;
+  font-size: @font-size-base; // Input sizes
+  font-weight: normal;
+}
+
+.floating-label {
   position: absolute;
   pointer-events: none;
   left: 0px;
   top: 5px;
   transition: 0.3s ease all;
-  font-size: @font-size-base; // Input sizes
 
   // sizing
   .form-control:focus ~ &,