From 92965480b9bf964a8da3ac61e4100eb5459a2be2 Mon Sep 17 00:00:00 2001
From: Anton Staroverov <by@tonystar.me>
Date: Sat, 15 Oct 2016 19:55:43 +0300
Subject: [PATCH] Resolve #28: Add pure-CSS Float Label demo

Also resolves tonystar/float-label-css#1
---
 comparisons/forms/float_labels/caniuse.txt   |  4 ++
 comparisons/forms/float_labels/codepen.html  |  1 +
 comparisons/forms/float_labels/html.html     | 20 ++++++++++
 comparisons/forms/float_labels/resources.txt |  3 ++
 comparisons/forms/float_labels/scss.scss     | 40 ++++++++++++++++++++
 5 files changed, 68 insertions(+)
 create mode 100644 comparisons/forms/float_labels/caniuse.txt
 create mode 100644 comparisons/forms/float_labels/codepen.html
 create mode 100644 comparisons/forms/float_labels/html.html
 create mode 100644 comparisons/forms/float_labels/resources.txt
 create mode 100644 comparisons/forms/float_labels/scss.scss

diff --git a/comparisons/forms/float_labels/caniuse.txt b/comparisons/forms/float_labels/caniuse.txt
new file mode 100644
index 0000000..30011e6
--- /dev/null
+++ b/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
diff --git a/comparisons/forms/float_labels/codepen.html b/comparisons/forms/float_labels/codepen.html
new file mode 100644
index 0000000..e140772
--- /dev/null
+++ b/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>
diff --git a/comparisons/forms/float_labels/html.html b/comparisons/forms/float_labels/html.html
new file mode 100644
index 0000000..81beb90
--- /dev/null
+++ b/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@example.com"/>
+    <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>
diff --git a/comparisons/forms/float_labels/resources.txt b/comparisons/forms/float_labels/resources.txt
new file mode 100644
index 0000000..d499c8b
--- /dev/null
+++ b/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/
diff --git a/comparisons/forms/float_labels/scss.scss b/comparisons/forms/float_labels/scss.scss
new file mode 100644
index 0000000..61ffabe
--- /dev/null
+++ b/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;
+      }
+    }
+  }
+}