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 @@
Login
-
+
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 {
+ }
}