From 9f03151afbcab063c7fe06cfcd9506fccc97f847 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 12 Jul 2024 22:34:57 +0300
Subject: [PATCH] layout: Improve form style

---
 src/lib/components/input-field.svelte | 7 ++++++-
 static/style.css                      | 6 ++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/input-field.svelte b/src/lib/components/input-field.svelte
index 2cca027..1cf86e5 100644
--- a/src/lib/components/input-field.svelte
+++ b/src/lib/components/input-field.svelte
@@ -21,10 +21,11 @@
     .wrapper {
         margin-bottom: 0.75em;
         display: block;
+        transition: color 250ms ease-in-out;
     }
 
     .label {
-        margin: 0;      
+    margin: 0;      
         font-size: 0.9rem;
     }
 
@@ -32,4 +33,8 @@
     div > span {
         display: block;
     }
+
+    .wrapper:focus-within {
+        color: var(--highlight-color);
+    }
 </style>
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index 68dbb6f..1c542a2 100644
--- a/static/style.css
+++ b/static/style.css
@@ -161,12 +161,18 @@ input {
     color: var(--text-color);
     border: 1px solid var(--border-color);
     box-sizing: border-box;
+    transition: border-color 250ms ease-in-out;
 }
 
 input:disabled {
     background-color: var(--header-background-color);
 }
 
+input:focus {
+    border-color: var(--highlight-color);
+    outline: 0;    
+}
+
 input[type="color"] {
     appearance: none;
     border-radius: 8px;