From ea14ace6b8337eb6791c4f2d4dbe8f87de13a37d Mon Sep 17 00:00:00 2001 From: Bruno Oliveira Notario Date: Mon, 30 Nov 2020 00:12:06 -0300 Subject: [PATCH] New in-border class effect --- demo.html | 117 ++++++++++++++++++++++++++++++++++++++++++++ floating-labels.css | 78 +++++++++++++++++++++++++++-- 2 files changed, 192 insertions(+), 3 deletions(-) create mode 100644 demo.html diff --git a/demo.html b/demo.html new file mode 100644 index 0000000..8a99ac6 --- /dev/null +++ b/demo.html @@ -0,0 +1,117 @@ + + + Hello, world! + + + + + + + + + + +
+ +

Bootstrap floating labels demo

+ +
+
+

Normal

+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+

Float

+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ +
+

Float In-Border

+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ + + + + + +
+ + + + + \ No newline at end of file diff --git a/floating-labels.css b/floating-labels.css index 2c130b1..7811443 100644 --- a/floating-labels.css +++ b/floating-labels.css @@ -2,8 +2,10 @@ --input-padding-x: .75rem; --input-padding-y: .7rem; --placeholder-color: #6c757d; - --top-position: 4px; + --top-position: 2px; --label-z-index: 5; + --input-background-color: #ffffff; + --top-position-in-border: -4px; } .form-label-group { position: relative; @@ -11,6 +13,7 @@ } .form-label-group label { margin: 0; + pointer-events: none; } .form-label-group input, @@ -83,13 +86,22 @@ transform: translateY(-50%) scale(.7); visibility: visible; } - +.form-label-group input.form-control-lg:not(:placeholder-shown) ~ label, .form-label-group input.form-control-lg:focus ~ label{ + top: calc(2px + var(--top-position)); +} +.form-label-group input.form-control-sm:not(:placeholder-shown) ~ label, .form-label-group input.form-control-sm:focus ~ label{ + top: calc(2px - var(--top-position)); +} .form-label-group input:focus::placeholder, .form-label-group textarea:focus::placeholder { visibility: hidden; - color: transparent; + color: rgba(255, 255, 255, 0); transition-delay: 0s; + opacity: 0; + text-shadow: none; } + + .form-label-group input::placeholder, .form-label-group textarea::placeholder { transition-delay: .2s; color: var(--placeholder-color); @@ -103,3 +115,63 @@ visibility: visible; color: var(--placeholder-color); } + + +/* In Border */ + +.form-label-group.in-border label { + width: auto; + /* left: .6rem; */ +} + +.form-label-group.in-border input:focus, .form-label-group.in-border textarea:focus, .form-label-group.in-border select:focus { + + box-shadow: none; +} + +.form-label-group.in-border input:not(:placeholder-shown) ~ label, .form-label-group.in-border input:focus ~ label, .form-label-group.in-border textarea:not(:placeholder-shown) ~ label, .form-label-group.in-border textarea:focus ~ label, .form-label-group.in-border select ~ label { + left: .6em; + top: var(--top-position-in-border); + height: auto; +} + +.form-label-group.in-border label::after{ + content: " "; + display: block; + position: absolute; + background: var(--input-background-color); + height: 4px; + top: 50%; + left: .2em; + right: .2em; + z-index: -1; +} + +.form-label-group.in-border input, +.form-label-group.in-border label, +.form-label-group.in-border select { + + padding: 0 var(--input-padding-x); + +} + + +.form-label-group.in-border textarea, +.form-label-group.in-border textarea ~ label { + padding: var(--input-padding-y) var(--input-padding-x); +} + +.form-label-group.in-border textarea:not(:placeholder-shown) ~ label,.form-label-group.in-border textarea:focus ~ label { + /* padding: calc(-1 * var(--input-padding-y)) var(--input-padding-x); */ + /* margin: var(--input-padding-y) var(--input-padding-x); */ + top: calc(1.85 * var(--top-position-in-border)); + +} + +.form-label-group.in-border input, +.form-label-group.in-border textarea, +.form-label-group.in-border label, +.form-label-group.in-border select { + transition: all .2s linear, border-color .5s ease-in-out,box-shadow .5s ease-in-out; +} +