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;
border-radius: 15px;
}
.input-div:hover:after {
.input-div:hover:after,
.input-div:has(input.form-control:focus):after {
width: 100%;
transition: .4s;
overflow: hidden;
}
.input-div > .form-control, .input-div > .form-control:focus {
.input-div > .form-control, .input-div > .form-control:hover{
border: none;
border-color: inherit;
-webkit-box-shadow: none;
@@ -103,12 +104,15 @@
-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 > .input-div-icon {
.input-div:hover > .input-div-icon,
.input-div:has(input.form-control:focus) > .input-div-icon {
color: #D8291C;
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;
transition: .3s;
}

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

@@ -81,7 +81,8 @@
background-color: #f44336;
border-radius: 15px;
}
.input-div:hover:after {
.input-div:hover:after,
.input-div:has(input.form-control:focus):after {
width: 100%;
transition: .4s;
overflow: hidden;
@@ -106,12 +107,15 @@
-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 > .input-div-icon {
.input-div:hover > .input-div-icon,
.input-div:has(input.form-control:focus) > .input-div-icon {
color: #D8291C;
transition: .3s;
}
.input-div:hover > .form-control::placeholder {
.input-div:hover > .form-control::placeholder,
.input-div:focus > .form-control::placeholder{
font-weight: 500;
transition: .3s;
}