Merge pull request #2482 from SpareBank1/improve-input

fix(ffe-form): add 1px to border of input when it is in focus
SpareBank1 · Jan 27, 2025 · edcd3b3 · edcd3b3
2 parents b4a3dcb + ffc515f
commit edcd3b3
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/packages/ffe-form/less/input-field.less b/packages/ffe-form/less/input-field.less
@@ -8,7 +8,9 @@
     color: var(--ffe-v-input-color);
     border-radius: var(--ffe-g-border-radius);
     border: var(--ffe-g-border-width) solid var(--ffe-g-border-color);
-    transition: border-color var(--ffe-transition-duration) var(--ffe-ease);
+    transition:
+        border-color var(--ffe-transition-duration) var(--ffe-ease),
+        box-shadow var(--ffe-transition-duration) var(--ffe-ease);
     width: 100%;
     font-size: var(--ffe-fontsize-form-input);
 
@@ -31,6 +33,9 @@
         border: var(--ffe-g-border-width-focus) solid var(--ffe-g-primary-color);
         outline: none;
     }
+    &:hover {
+        box-shadow: 0 0 0 1px var(--ffe-g-primary-color);
+    }
 
     &--inline {
         display: inline-block;
@@ -64,7 +69,8 @@
         }
 
         &:focus {
-            border-bottom: var(--ffe-g-border-width-focus) solid var(--ffe-g-primary-color);
+            border-bottom: var(--ffe-g-border-width-focus) solid
+                var(--ffe-g-primary-color);
         }
 
         &[aria-invalid='true'] {