layout: Improve form style

eliandoran · Jul 12, 2024 · 9f03151 · 9f03151
1 parent 31c4b33
commit 9f03151
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/src/lib/components/input-field.svelte b/src/lib/components/input-field.svelte
@@ -21,15 +21,20 @@
     .wrapper {
         margin-bottom: 0.75em;
         display: block;
+        transition: color 250ms ease-in-out;
     }
 
     .label {
-        margin: 0;      
+    margin: 0;      
         font-size: 0.9rem;
     }
 
     label > span,
     div > span {
         display: block;
     }
+
+    .wrapper:focus-within {
+        color: var(--highlight-color);
+    }
 </style>
diff --git 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;