Added outline float label

exacti · Dec 4, 2020 · 7f5defb · 7f5defb
1 parent d869d54
commit 7f5defb
Show file tree

Hide file tree

Showing 3 changed files with 342 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -1,19 +1,20 @@
 # 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
 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/exacti/floating-labels@latest/floating-labels.min.css" media="screen">
 ```
 Just put the input or textarea element inside a parent (div or span) with `.form-label-group` class and add a label tag after this element.
 
 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,15 +32,28 @@ For in border style (like outlined material design), add the `.in-border` class.
 </div>
 ```
 
-Like outlined material design (In Border):
+Like outlined material design
+
+In-border:
 ```html
 <div class="form-label-group in-border">
     <input type="text" id="tt3" class="form-control form-control-lg" placeholder="Floating Label lg" />
     <label for="tt3">Floating Label lg</label>
 </div>
 ```
 
+Outline:
+```html
+<div class="form-label-group outline">
+    <input type="text" id="tt2" class="form-control" placeholder="Floating Label" />
+    <span><label for="tt2">Floating Label</label></span>
+</div>
+```
+
 ### 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
@@ -111,6 +111,36 @@ <h3 class="mt-5 mb-3">Float In-Border</h3>
 						  <label for="ttsel2" >Floating Label</label>
 					</div>
 				</div>
+
+				<div class="col-md">
+					<h3 class="mt-5 mb-3">Float Outline</h3>
+
+					<div class="form-label-group outline">
+						<input type="text" id="tt8" class="form-control shadow-none" placeholder="Floating Label" />
+						<span><label for="tt8">Floating Label</label></span>
+					</div>
+
+					<div class="form-label-group outline">
+						<input type="text" id="tt9" class="form-control form-control-lg shadow-none" placeholder="Floating Label lg" />
+						<span><label for="tt9" class="form-control-lg">Floating Label lg</label></span>
+					</div>
+
+					<div class="form-label-group outline">
+						<textarea id="tt7" class="form-control shadow-none" placeholder="Floating Label area" rows="4"></textarea>
+						<span><label for="tt7">Floating Label area</label></span>
+					</div>
+
+
+					<div class="form-label-group outline">
+						<select class="custom-select" id="ttsel2">
+							<option selected>Choose...</option>
+							<option value="1">One</option>
+							<option value="2">Two</option>
+							<option value="3">Three</option>
+						  </select>
+						  <span><label for="ttsel2" >Floating Label</label></span>
+					</div>
+				</div>
 			</div>
 
 			<h3 class="mt-5">Intl-tel-input</h3>
@@ -144,9 +174,39 @@ <h4 class="mb-3">Right Float In-Border</h4>
 						<label for="tel">Telefone</label>
 					</div>
 				</div>
+
 			</div>
 
+			<div class="row">
+				<div class="col-md">
+					<div class="card text-white bg-warning mx-auto mb-3" style="max-width: 18rem;">
+						<div class="card-header"><h4 class="m-0"> Float Outline</h4></div>
 
+						<div class="card-body">
+							<div class="form-label-group outline border-danger ">
+								<input name="tel[main]" type="tel" class="form-control border-white text-white" data-parsley-phone-validate id="tel4" placeholder="Telefone"  />
+								<span class="labe"><label for="tel4" class="text-white">Telefone</label></span>
+							</div>
+						</div>
+
+					</div>
+
+
+				</div>
+				<div class="col-md">
+					<div class="card text-white bg-dark mx-auto mb-3" style="max-width: 18rem;">
+						<div class="card-header"><h4 class="m-0">Right Float Outline</h4></div>
+
+						<div class="card-body">
+							<div class="form-label-group outline iti-right border-warning">
+								<input name="tel[main]" type="tel" class="form-control text-white" data-parsley-phone-validate id="tel4" placeholder="Telefone"  />
+								<span class="labe"><label for="tel4" class="text-white">Telefone</label></span>
+							</div>
+						</div>
+					</div>
+
+				</div>
+			</div>
 
 
 		</div>
@@ -200,7 +260,7 @@ <h4 class="mb-3">Right Float In-Border</h4>
 
 
 			$('.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);
 			});