From 4f20498ac2ee81f67302819d18862ee3e0baef19 Mon Sep 17 00:00:00 2001
From: James Vinter <vinterj@Jamess-MacBook-Pro.local>
Date: Thu, 7 Dec 2017 16:15:00 +0000
Subject: [PATCH] [WEBDEV-419][WEBDEV-424][WEBDEV-429] Form element styling
 updates

---
 src/stylesheets/elements/_form.scss | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/stylesheets/elements/_form.scss b/src/stylesheets/elements/_form.scss
index cedd8e0f..6d78f067 100644
--- a/src/stylesheets/elements/_form.scss
+++ b/src/stylesheets/elements/_form.scss
@@ -61,8 +61,9 @@ input {
   &[type="radio"]:not(:checked),
   &[type="checkbox"]:checked,
   &[type="checkbox"]:not(:checked) {
-    position: absolute;
-    left: -9999px;
+    width: 2px;
+    height: 2px;
+    opacity: 0;
   }
   &[type="radio"]:checked + label,
   &[type="radio"]:not(:checked) + label,
@@ -90,7 +91,7 @@ input {
       height: 38px;
     }
     border: 2px solid $grey-1;
-    background: transparent;
+    background: $white;
   }
   &[type="radio"]:checked + label:before,
   &[type="radio"]:not(:checked) + label:before {
@@ -143,7 +144,7 @@ input {
   }
   &[type="radio"]:focus + label::before,
   &[type="checkbox"]:focus + label::before {
-    box-shadow: 0 0 0 3px $caution;
+    box-shadow: 0 0 0 3px $grey-2;
   }
 }
 
@@ -167,14 +168,20 @@ select:focus,
 textarea:focus {
   position: relative;
   z-index: 10;
-  outline: 3px solid $caution;
   outline-offset: -3px;
 }
 
+input:focus,
+select:focus,
+textarea:focus {
+  outline: 3px solid $grey-2;
+}
+
+button:focus,
 button:-moz-focusring,
 [type="button"]:-moz-focusring,
 [type="submit"]:-moz-focusring {
-  outline: 3px solid $caution;
+  outline: 3px solid $mint;
   outline-offset: -3px;
 }