From 09efd06dffab53884fb4f399d49deeb32a5bd930 Mon Sep 17 00:00:00 2001
From: Pierre de La Morinerie <kemenaran@gmail.com>
Date: Mon, 15 Jul 2019 17:55:22 +0200
Subject: [PATCH] forms: add a focus indicator to focused fields

---
 app/assets/stylesheets/new_design/forms.scss | 30 +++++++++++---------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/app/assets/stylesheets/new_design/forms.scss b/app/assets/stylesheets/new_design/forms.scss
index 00fc6984c..5cd2d9590 100644
--- a/app/assets/stylesheets/new_design/forms.scss
+++ b/app/assets/stylesheets/new_design/forms.scss
@@ -145,12 +145,27 @@
     border: solid 1px $border-grey;
     padding: $default-padding;
 
+    &.small {
+      padding: $default-padding / 2;
+    }
+
     &:disabled {
       background-color: $border-grey;
     }
 
-    &.small {
-      padding: $default-padding / 2;
+    &:focus {
+      border: 1px solid $blue;
+      box-shadow: 0px 0px 2px 1px $blue;
+    }
+
+    // Hide the browser default invalidity indicator until the field is touched
+    &:invalid:not(:focus) {
+      box-shadow: none;
+    }
+
+    &.touched:invalid {
+      border: 1px solid $dark-red;
+      box-shadow: 0px 0px 2px 1px $dark-red;
     }
   }
 
@@ -188,17 +203,6 @@
     max-width: 180px;
   }
 
-  input:invalid,
-  textarea:invalid {
-    box-shadow: none;
-  }
-
-  input.touched:invalid,
-  textarea.touched:invalid {
-    border: 1px solid $dark-red;
-    box-shadow: 0px 0px 5px $dark-red;
-  }
-
   select,
   .select2-selection {
     // hack found here: https://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript