From 7f5defb0b9d181672a163c41f252524a45c20ffc Mon Sep 17 00:00:00 2001 From: Bruno Oliveira Notario Date: Fri, 4 Dec 2020 17:38:27 -0300 Subject: [PATCH] Added outline float label --- README.md | 20 +++- demo.html | 62 +++++++++- floating-labels.css | 267 +++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 342 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 678b15c..189d454 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,12 @@ # floating-labels Floating Labels for Bootstrap -![Sample text input](https://i.imgur.com/zGK4SkX.png) +![Sample text input](https://i.imgur.com/JxO24vv.png) ## How to use First Include the stylesheet in your html. If you prefers, use this CDN: https://cdn.jsdelivr.net/gh/exacti/floating-labels@latest/floating-labels.min.css + ```html ``` @@ -13,7 +14,7 @@ Just put the input or textarea element inside a parent (div or span) with `.form The input and label must have the same id linked with for in label to work properly. Input must have the `placeholder` defined. -For in border style (like outlined material design), add the `.in-border` class. +For in border style (like outlined material design), add the `.in-border` class. For fully outline style with transparency, use the `outline` class. If you use `outline` class, the label tag must be inside a span tag. The diference beteween in-border and outline is the background. In-border have a white background and outline is transparent with only border. #### Code samples @@ -31,7 +32,9 @@ For in border style (like outlined material design), add the `.in-border` class. ``` -Like outlined material design (In Border): +Like outlined material design + +In-border: ```html
@@ -39,7 +42,18 @@ Like outlined material design (In Border):
``` +Outline: +```html +
+ + +
+``` + ### For intl-tel-input + +You can put the flag's container on the right using `iti-right` class. + Make the label after input with JavaScript code, like this sample made with jQuery: ```JavaScript $('.intl-tel-input ~ label').insertAfter('.intl-tel-input input.form-control'); diff --git a/demo.html b/demo.html index cbfdf1b..36166d3 100644 --- a/demo.html +++ b/demo.html @@ -111,6 +111,36 @@ + +
+

Float Outline

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

Intl-tel-input

@@ -144,9 +174,39 @@ + +
+
+
+

Float Outline

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

Right Float Outline

+ +
+
+ + +
+
+
+ +
+
@@ -200,7 +260,7 @@ $('.intl-tel-input, .iti').find('input.form-control').each(function(index, element) { - let label = $(element).parent().find('~ label'); + let label = $(element).parent().find('~ label, ~ .labe'); $(element).after(label); //console.log(label); }); diff --git a/floating-labels.css b/floating-labels.css index 42ce218..ff528f9 100644 --- a/floating-labels.css +++ b/floating-labels.css @@ -13,6 +13,12 @@ --label-z-index: 5; --input-background-color: #ffffff; --top-position-in-border: 5px; + --outline-border-color: #80bdff; + --top-position-outline: -8px; + --normal-border-color: #ced4da; + --outline-border-size: .125rem; + --outline-animation-duration: .3s; + --outline-transition-type: linear; } .form-label-group { position: relative; @@ -26,7 +32,7 @@ .form-label-group input, .form-label-group textarea, .form-label-group label, -.form-label-group:not(.in-border) select { +.form-label-group:not(.in-border).form-label-group:not(.outline) select { padding: var(--input-padding-y) var(--input-padding-x); } @@ -83,7 +89,7 @@ padding-bottom: calc(var(--input-padding-y) / 3); } -.form-label-group:not(.in-border) select { +.form-label-group:not(.in-border).form-label-group:not(.outline) select { padding-bottom: 0; } @@ -144,6 +150,11 @@ height: auto; } +.form-label-group.in-border input:not(:placeholder-shown) ~ label::after, .form-label-group.in-border input:focus ~ label::after, .form-label-group.in-border textarea:not(:placeholder-shown) ~ label::after, .form-label-group.in-border textarea:focus ~ label::after, .form-label-group.in-border select ~ label::after { + visibility: visible; + transition: all .2s ease; +} + .form-label-group.in-border label::after{ content: " "; display: block; @@ -154,6 +165,7 @@ left: .7em; right: .7em; z-index: -1; + visibility: hidden; } .form-label-group.in-border input, @@ -191,7 +203,7 @@ } .form-label-group.iti-right .intl-tel-input label, .form-label-group.iti-right .iti label { - margin-left: auto; + margin-left: 0; } .form-label-group.iti-right .iti__country-list { @@ -200,4 +212,253 @@ .form-label-group .iti__country-list { z-index: calc(var(--label-z-index) + 2) !important; +} + + + +/* Outline */ + +.form-label-group.outline span { + position: absolute; + top: 0; + left: 0; + display: flex; + width: 100%; + margin-bottom: 0; /* Override default `