Merge pull request #211 from vdvibhu20/backgrounds

Backgrounds

Author: witty123

examples/public/images/fingerprint.svg

@@ -8,7 +8,7 @@ INPUT TEXT
 <input type="text" class="input-text" placeholder="Enter Username">
 
 <h3>Input with Icon</h3>
-<input type="text" class="input-text icon" placeholder="Enter Username">
+<input type="text" class="input-text icon fingerprint-bg" placeholder="Enter Username">
 
 <h3>Input with Overlay Button</h3>
 <div class="input-btn">

examples/public/images/lines.svg

@@ -7,12 +7,12 @@
 
         <form action="">
             <div class="input-btn">
-                <input type="text" class="input-text icon" placeholder="Enter Username">
+                <input type="text" class="input-text icon user-bg" placeholder="Enter Username">
                 <button class="grey">Forgot?</button>
             </div>
 
             <div class="input-btn">
-                <input type="text" class="input-text icon" placeholder="Enter Password">
+                <input type="text" class="input-text icon fingerprint-bg" placeholder="Enter Password">
                 <button class="grey">Forgot?</button>
             </div>
 

examples/public/images/mail.svg

@@ -6,20 +6,20 @@
         </div>
 
         <form action="">
-            <input type="text" class="input-text icon" placeholder="Username">
+            <input type="text" class="input-text icon user-bg" placeholder="Username">
 
             <div class="row no-gutters">
                 <div class="col-sm-12 col-md-6 first-name">
-                    <input type="text" class="input-text icon" placeholder="First Name">
+                    <input type="text" class="input-text icon lines-bg" placeholder="First Name">
                 </div>
                 <div class="col-sm-12 col-md-6 last-name">
-                    <input type="text" class="input-text icon" placeholder="Last Name">
+                    <input type="text" class="input-text icon lines-bg" placeholder="Last Name">
                 </div>
             </div>
 
-            <input type="text" class="input-text icon" placeholder="Email Address">
+            <input type="text" class="input-text icon mail-bg" placeholder="Email Address">
 
-            <input type="text" class="input-text icon" placeholder="Password">
+            <input type="text" class="input-text icon fingerprint-bg" placeholder="Password">
 
             <div class="row footer">
                 <div class="button-solid">

examples/public/images/user.svg

@@ -31,4 +31,5 @@
 @import "elements/elements.form-input";
 @import "elements/elements.pagination";
 @import "elements/element.arrangement";
-@import "elements/element.border-card";
+@import "elements/element.border-card";
+@import "elements/elements.background";

examples/views/form-input.hbs

@@ -0,0 +1,6 @@
+@each $type in
+  (fingerprint), (user), (mail), (lines){
+    .#{$type}-bg{
+      background-image: url("/images/#{$type}.svg");
+    }
+}

examples/views/login.hbs

@@ -1,7 +1,10 @@
 .input-text{
   &.icon{
-    background: $nav-border url("/images/fingerprint.png") no-repeat 30px center;
     background-size: 35px;
     padding-left: 95px;
+    background-color: $nav-border;
+    background-repeat: no-repeat;
+    background-position-x: 30px;
+    background-position-y: center;
   }
 }