scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: animation on inputs

Browse Source
This commit is contained in:
Christel Westerberg
2024-07-10 09:13:45 +02:00
parent 15b9523611
commit 19bfdf67f3
3 changed files with 14 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
components/TempDesignSystem/Form/Input/input.module.css
View File

@@ -6,18 +6,11 @@
border-width: 1px;
border-radius: var(--Corner-radius-Medium);
display: grid;
gap: var(--Spacing-x-half);
grid-template-rows: auto auto;
height: 60px;
padding: var(--Spacing-x1) var(--Spacing-x2);
transition: border-color 200ms ease;
}
.container:has(.input:not(:focus):placeholder-shown) {
gap: 0;
grid-template-rows: 1fr;
}
.container:has(.input:active, .input:focus) {
border-color: var(--Scandic-Blue-90);
}
@@ -45,11 +38,15 @@
.input:not(:active, :focus):placeholder-shown {
height: 0px;
transition: height 150ms ease;
}
.input:focus,
.input:focus:placeholder-shown {
.input:focus:placeholder-shown,
.input:active,
.input:active:placeholder-shown {
height: 18px;
transition: height 150ms ease;
outline: none;
}