old-portfolio/frontend-hideyoshi.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Better Animations in the Auth Popus

Browse Source
This commit is contained in:
Vitor Hideyoshi
2023-08-01 20:05:04 -03:00
parent 3cca992db3
commit c60215d7d2
2 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/header/header-popup/login/login.component.css
View File

@@ -78,13 +78,14 @@
background-color: #f44336; background-color: #f44336;
border-radius: 15px; border-radius: 15px;
} }
.input-div:hover:after { .input-div:hover:after,
.input-div:has(input.form-control:focus):after {
width: 100%; width: 100%;
transition: .4s; transition: .4s;
overflow: hidden; overflow: hidden;
} }
.input-div > .form-control, .input-div > .form-control:focus { .input-div > .form-control, .input-div > .form-control:hover{
border: none; border: none;
border-color: inherit; border-color: inherit;
-webkit-box-shadow: none; -webkit-box-shadow: none;
@@ -103,12 +104,15 @@
-webkit-box-shadow: 0 0 0px 1000px #ffffff inset; -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
} }
.input-div:has(input.form-control:focus) > .form-control::placeholder,
.input-div:hover > .form-control::placeholder, .input-div:hover > .form-control::placeholder,
.input-div:hover > .input-div-icon { .input-div:hover > .input-div-icon,
.input-div:has(input.form-control:focus) > .input-div-icon {
color: #D8291C; color: #D8291C;
transition: .3s; transition: .3s;
} }
.input-div:hover > .form-control::placeholder { .input-div:hover > .form-control::placeholder,
.input-div:has(input.form-control:focus) > .form-control::placeholder {
font-weight: 500; font-weight: 500;
transition: .3s; transition: .3s;
} }

14
src/app/header/header-popup/signup/signup.component.css
View File

@@ -81,7 +81,8 @@
background-color: #f44336; background-color: #f44336;
border-radius: 15px; border-radius: 15px;
} }
.input-div:hover:after { .input-div:hover:after,
.input-div:has(input.form-control:focus):after {
width: 100%; width: 100%;
transition: .4s; transition: .4s;
overflow: hidden; overflow: hidden;
@@ -106,12 +107,15 @@
-webkit-box-shadow: 0 0 0px 1000px #ffffff inset; -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
} }
.input-div:has(input.form-control:focus) > .form-control::placeholder,
.input-div:hover > .form-control::placeholder, .input-div:hover > .form-control::placeholder,
.input-div:hover > .input-div-icon { .input-div:hover > .input-div-icon,
.input-div:has(input.form-control:focus) > .input-div-icon {
color: #D8291C; color: #D8291C;
transition: .3s; transition: .3s;
} }
.input-div:hover > .form-control::placeholder { .input-div:hover > .form-control::placeholder,
.input-div:focus > .form-control::placeholder{
font-weight: 500; font-weight: 500;
transition: .3s; transition: .3s;
} }
@@ -121,7 +125,7 @@
.authentication-container { .authentication-container {
min-width: 630px; min-width: 630px;
} }
.auth-body { .auth-body {
all: unset; all: unset;
justify-content: space-around; justify-content: space-around;
@@ -148,4 +152,4 @@
height: 100%; height: 100%;
} }
} }