From 19bfdf67f36f5e37047c280d13e63857e85716a6 Mon Sep 17 00:00:00 2001
From: Christel Westerberg <christel.westerberg@scandichotels.com>
Date: Wed, 10 Jul 2024 09:13:45 +0200
Subject: [PATCH] fix: animation on inputs

---
 .../TempDesignSystem/Form/Input/input.module.css    | 13 +++++--------
 .../TempDesignSystem/Form/Label/label.module.css    | 10 +++++++---
 .../Form/NewPassword/newPassword.module.css         |  9 ++-------
 3 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/components/TempDesignSystem/Form/Input/input.module.css b/components/TempDesignSystem/Form/Input/input.module.css
index 01521d8d7..dd4fb6209 100644
--- a/components/TempDesignSystem/Form/Input/input.module.css
+++ b/components/TempDesignSystem/Form/Input/input.module.css
@@ -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;
 }
 
diff --git a/components/TempDesignSystem/Form/Label/label.module.css b/components/TempDesignSystem/Form/Label/label.module.css
index 5373daab7..385ea3938 100644
--- a/components/TempDesignSystem/Form/Label/label.module.css
+++ b/components/TempDesignSystem/Form/Label/label.module.css
@@ -3,7 +3,7 @@
   font-family: "fira sans";
   font-weight: 400;
   letter-spacing: 0.03px;
-  line-height: 120%;
+  line-height: 19px;
   text-align: left;
 }
 
@@ -15,20 +15,24 @@ span.small {
 span.regular {
   font-size: 16px;
   order: 1;
-  transition: font-size 200ms ease 100ms;
 }
 
 input:focus ~ .label,
 input:not(:placeholder-shown) ~ .label {
   display: block;
   font-size: 12px;
+  transition: font-size 100ms ease;
 }
 
 input:placeholder-shown ~ .label {
-  align-self: center;
   grid-row: 1/-1;
 }
 
+input:placeholder-shown:focus ~ .label,
+input:placeholder-shown:active ~ .label {
+  margin-bottom: var(--Spacing-x-half);
+}
+
 input:disabled ~ .label {
   color: var(--Main-Grey-40);
 }
diff --git a/components/TempDesignSystem/Form/NewPassword/newPassword.module.css b/components/TempDesignSystem/Form/NewPassword/newPassword.module.css
index f9b2855ca..01b182003 100644
--- a/components/TempDesignSystem/Form/NewPassword/newPassword.module.css
+++ b/components/TempDesignSystem/Form/NewPassword/newPassword.module.css
@@ -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,13 @@
 
 .input:not(:active, :focus):placeholder-shown {
   height: 0px;
+  transition: height 150ms ease;
 }
 
 .input:focus,
 .input:focus:placeholder-shown {
   height: 18px;
+  transition: height 150ms ease;
   outline: none;
 }