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

10
components/TempDesignSystem/Form/Label/label.module.css
View File

@@ -3,7 +3,7 @@
font-family: "fira sans"; font-family: "fira sans";
font-weight: 400; font-weight: 400;
letter-spacing: 0.03px; letter-spacing: 0.03px;
line-height: 120%; line-height: 19px;
text-align: left; text-align: left;
} }
@@ -15,20 +15,24 @@ span.small {
span.regular { span.regular {
font-size: 16px; font-size: 16px;
order: 1; order: 1;
transition: font-size 200ms ease 100ms;
} }
input:focus ~ .label, input:focus ~ .label,
input:not(:placeholder-shown) ~ .label { input:not(:placeholder-shown) ~ .label {
display: block; display: block;
font-size: 12px; font-size: 12px;
transition: font-size 100ms ease;
} }
input:placeholder-shown ~ .label { input:placeholder-shown ~ .label {
align-self: center;
grid-row: 1/-1; grid-row: 1/-1;
} }
input:placeholder-shown:focus ~ .label,
input:placeholder-shown:active ~ .label {
margin-bottom: var(--Spacing-x-half);
}
input:disabled ~ .label { input:disabled ~ .label {
color: var(--Main-Grey-40); color: var(--Main-Grey-40);
} }

9
components/TempDesignSystem/Form/NewPassword/newPassword.module.css
View File

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