Input css: Fix visibillity hidden behavior. Fix opacity and alignment of placeholder.

This commit is contained in:
Konstantinos Triantafyllou 2022-04-04 17:21:29 +03:00
parent 2f93f24ef9
commit e95be93cca
1 changed files with 7 additions and 1 deletions

View File

@ -35,6 +35,10 @@
}
/** Input Wrapper */
[style*="visibility: hidden"] .input-wrapper {
opacity: 0;
}
.input-wrapper {
border: var(--input-border);
border-radius: var(--input-border-radius);
@ -114,6 +118,7 @@
.input-box .input::placeholder, .input-box .input.placeholder {
color: var(--input-placeholder-color);
opacity: 1;
}
.input-wrapper.hint > .input-box .input::placeholder {
@ -121,7 +126,7 @@
}
.input-wrapper.danger > .input-box .input::placeholder,
.input-wrapper.danger > .input-box .input.placeholder {
.input-wrapper.danger > .input-box .placeholder {
color: var(--input-danger-color);
}
@ -135,6 +140,7 @@
font-size: var(--input-font-size);
line-height: 24px;
top: calc(var(--input-padding-vertical) + 15px);
left: var(--input-padding-horizontal);
transform: translateY(-50%);
transition: all 0.5s ease 0s;
}