From 17c219ede1ae2db44b2a72c1983c5116f191bb13 Mon Sep 17 00:00:00 2001
From: oliveira131 <47257731+oliveira131@users.noreply.github.com>
Date: Wed, 14 Aug 2019 22:19:36 -0300
Subject: [PATCH] Create floating-labels.css

---
 floating-labels.css | 66 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 floating-labels.css

diff --git a/floating-labels.css b/floating-labels.css
new file mode 100644
index 0000000..326d9e5
--- /dev/null
+++ b/floating-labels.css
@@ -0,0 +1,66 @@
+:root {
+    --input-padding-x: .75rem;
+    --input-padding-y: .7rem;
+}
+.form-label-group {
+    position: relative;
+    margin-bottom: 1rem;
+}
+.form-label-group label {
+    margin: 0;
+}
+
+.form-label-group input,
+.form-label-group textarea,
+.form-label-group label {
+    padding: var(--input-padding-y) var(--input-padding-x);
+}
+
+.form-label-group label {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    display: block;
+    width: 100%;
+    margin-bottom: 0; /* Override default `<label>` margin */
+    color: #6c757d;
+    border-radius: .25rem;
+    transition: all .2s ease-in-out;
+    transform-origin: 0 100%;
+    transform: translateY(-50%);
+}
+.form-label-group textarea ~ label {
+    top: 0px;
+    transform: translateY(0);
+}
+
+.form-label-group input::-webkit-input-placeholder {
+    color: transparent;
+}
+
+.form-label-group input:-ms-input-placeholder {
+    color: transparent;
+}
+
+.form-label-group input::-ms-input-placeholder {
+    color: transparent;
+}
+
+.form-label-group input::-moz-placeholder {
+    color: transparent;
+}
+
+.form-label-group input::placeholder, .form-label-group textarea::placeholder {
+    color: transparent;
+}
+
+.form-label-group input:not(:placeholder-shown), .form-label-group input:focus, .form-label-group textarea:not(:placeholder-shown), .form-label-group textarea:focus {
+    padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
+    padding-bottom: calc(var(--input-padding-y) / 3);
+}
+
+.form-label-group input:not(:placeholder-shown) ~ label, .form-label-group input:focus ~ label, .form-label-group textarea:not(:placeholder-shown) ~ label, .form-label-group textarea:focus ~ label {
+    font-size: 1em;
+    top:4px;
+    transform: translateY(-50%) scale(.7);
+}