From 8a8057b819fb51a11d23d7b8caa7d341218e72a2 Mon Sep 17 00:00:00 2001
From: kj1352 <nikhilkj24@gmail.com>
Date: Tue, 2 Nov 2021 13:51:00 +0530
Subject: [PATCH] input holder change border color on focus

---
 src/app/login/login.component.html |  2 +-
 src/app/login/login.component.scss | 34 +++++++++++++++++-------------
 src/app/login/login.component.ts   | 14 ++++++------
 3 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index ccf5e04..4e9a849 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -7,7 +7,7 @@
         <h2> Login </h2>
 
         <div class="input-holder">
-            <label> Email </label>
+            <label> Email ID </label>
             <input type="email">
         </div>
 
diff --git a/src/app/login/login.component.scss b/src/app/login/login.component.scss
index 238b698..ba6fc7e 100644
--- a/src/app/login/login.component.scss
+++ b/src/app/login/login.component.scss
@@ -47,32 +47,36 @@
     }
 
     .input-holder {
-        background-color: white;
-        border: 1px solid var(--border-grey);
-        border-radius: 4rem;
-        overflow: hidden;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        height: 5rem;
-        padding: 0 2rem;
+        position: relative;
         margin: 2rem 0;
 
         input {
-            border: none;
-            flex-grow: 1;
-            height: 100%;
-            padding-left: 1rem;
+            background-color: white;
+            border: 1px solid var(--border-grey);
+            border-radius: 4rem;
+            overflow: hidden;
+            height: 5rem;
+            padding: 0 2rem 0 10rem;
+            width: 100%;
+            display: block;
             color: var(--dark-grey);
-            font-size: 1.8rem;
+            font-size: 1.5rem;
+            transition: border-color 0.3s;
+            
+            &:focus {
+                border-color: var(--dark-grey);
+            }
         }
 
         label {
             font-size: 1.5rem;
             color: var(--dark-grey);
-            opacity: 0.9;
+            opacity: 0.7;
             font-weight: 300;
             letter-spacing: 0.05rem;
+            position: absolute;
+            left: 2rem;
+            top: 1.5rem;
         }
     }
 
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index c74528f..b07b758 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -1,15 +1,15 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-login',
-  templateUrl: './login.component.html',
-  styleUrls: ['./login.component.scss']
+    selector: 'app-login',
+    templateUrl: './login.component.html',
+    styleUrls: ['./login.component.scss']
 })
 export class LoginComponent implements OnInit {
+    
+    constructor() { }
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
+    ngOnInit(): void {
+    }
 
 }