Resolve #28: Add pure-CSS Float Label demo

comparisons/forms/float_labels/caniuse.txt

@@ -0,0 +1,4 @@
+Placeholder Attribute: http://caniuse.com/#feat=input-placeholder
+Placeholder Shown: http://caniuse.com/#feat=css-placeholder-shown
+Not Selector: http://caniuse.com/#feat=css-sel2
+Adjacent Sibling Selector: http://caniuse.com/#feat=css-sel2

comparisons/forms/float_labels/codepen.html

@@ -0,0 +1 @@
+<p data-height="400" data-theme-id="light" data-slug-hash="JRLaKw" data-default-tab="result" data-user="tonystar" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/tonystar/pen/JRLaKw/">Float Label CSS-only</a> by Anton Staroverov (<a href="http://codepen.io/tonystar">@tonystar</a>) on <a href="http://codepen.io">CodePen</a>.</p>

comparisons/forms/float_labels/html.html

@@ -0,0 +1,20 @@
+<fieldset>
+  <legend>Sign up</legend>
+
+  <div class="has-float-label">
+    <input id="first" type="text" placeholder="First Last"/>
+    <label for="first">Name</label>
+  </div>
+
+  <div class="has-float-label">
+    <input id="email" type="email" placeholder="[email protected]"/>
+    <label for="email">Email</label>
+  </div>
+
+  <div class="has-float-label">
+    <input id="password" type="password" placeholder="••••••••"/>
+    <label for="password">Password</label>
+  </div>
+
+  <button>Sign up</button>
+</fieldset>

comparisons/forms/float_labels/resources.txt

@@ -0,0 +1,3 @@
+Micro-Library by Anton Staroverov: https://github.com/tonystar/float-label-css
+Plugin for Bootstrap: https://github.com/tonystar/bootstrap-float-label
+Float Label Pattern: http://mds.is/float-label-pattern/

comparisons/forms/float_labels/scss.scss

@@ -0,0 +1,40 @@
+.has-float-label {
+  position: relative;
+
+  // Minimize label and move on top:
+  label {
+    position: absolute;
+    left: 0;
+    top: 0;
+    cursor: text;
+    font-size: 75%;
+    opacity: 1;
+    transition: all .2s;
+  }
+
+  input {
+    padding-top: 1em;
+
+    &::-webkit-input-placeholder {
+      opacity: 1;
+      transition: all .2s;
+    }
+
+    // Replace placeholder by sibling label
+    // when no data and not in focus:
+    &:placeholder-shown:not(:focus) {
+      // Non-supporting browsers don't see the code
+      // below. But everything is ok since the label
+      // is minimized by default. MAGIC!
+
+      &::-webkit-input-placeholder {
+        opacity: 0;
+      }
+      + label {
+          top: .25em;
+          font-size: 150%;
+          opacity: .5;
+      }
+    }
+  }
+}