MaDgIK
/
openaire-theme
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
css/structure/input.css
View File

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