placeholder animation

This commit is contained in:
m.epshtein 2024-07-15 12:54:18 +03:00
parent a0acf68849
commit 1a55a6736f
2 changed files with 13 additions and 12 deletions

View file

@ -63,6 +63,7 @@ body.webbpm.ervu_lkrp_ul {
--indent-medium: 32px;
--indent-small: 24px;
--indent-mini: 16px;
--indent-extra-mini: 10px;
}
.webbpm.ervu_lkrp_ul a {
@ -267,7 +268,6 @@ body.webbpm.ervu_lkrp_ul {
}
}
.row {
position: relative;
margin-bottom: 0;
& + .row {
@ -276,6 +276,7 @@ body.webbpm.ervu_lkrp_ul {
}
input {
height: 56px;
padding-top: 20px;
padding-left: 16px;
border: 0;
border-radius: 8px;
@ -292,24 +293,23 @@ body.webbpm.ervu_lkrp_ul {
}
& + label {
position: absolute;
top: 2px;
left: 2px;
top: 16px;
left: 16px;
pointer-events: none;
transition: all 200ms;
}
&:focus + label,
&:not(:placeholder-shown) + label {
top: 4px;
font-size: var(--indent-extra-mini);
z-index: 20;
}
}
.login-btn-box {
margin-: 32px;
margin-top: 32px;
}
}
.input:focus + label,
.input:not(:placeholder-shown) + label{
top: -10px;
left: 10px;
font-size: 11px;
}
.webbpm.ervu_lkrp_ul .form-signin .row.registration > * + *,
.webbpm.ervu_lkrp_ul .form-signin .login-btn-box .password,
.webbpm.ervu_lkrp_ul .form-signin .login-btn-box .btn + .btn {

View file

@ -21,10 +21,11 @@
[type]="passwordType ? 'text' : 'password'"
name="password"
class="form-control field-password-view"
placeholder="Пароль" required
placeholder=" " required
[(ngModel)]="password"
maxlength="100"
>
<label>Пароль</label>
<div class="input-group-append">
<span class="input-group-text">
<i