fix(css): use box shadow to represent :hover state on form elements

See #362
telus · Aug 8, 2017 · 262b9dc · 262b9dc
1 parent 8b61d81
commit 262b9dc
Showing 1 changed file with 3 additions and 2 deletions.
diff --git a/src/scss/elements/_forms.scss b/src/scss/elements/_forms.scss
@@ -21,7 +21,7 @@ select {
   outline: 0;
   padding: 11px;
   width: 100%;
-  transition: border-color .1s linear, background-color .1s linear;
+  transition: background-color .1s linear;
 
   .field & {
     margin-bottom: $form-field-bottom-spacing;
@@ -37,7 +37,8 @@ select {
   }
 
   &:focus {
-    border-color: $color-shark;
+    border-color: transparent;
+    box-shadow: 0 0 4px 1px $color-shuttle-grey;
   }
 
   @include from-breakpoint(medium) {