fix(css): properly apply focus styles to all form elements 🍤

telus · Aug 8, 2017 · 07dcfd0 · 07dcfd0
1 parent 262b9dc
commit 07dcfd0
Showing 1 changed file with 22 additions and 5 deletions.
diff --git a/src/scss/elements/_forms.scss b/src/scss/elements/_forms.scss
@@ -36,16 +36,33 @@ select {
     border-color: $color-primary;
   }
 
-  &:focus {
-    border-color: transparent;
-    box-shadow: 0 0 4px 1px $color-shuttle-grey;
-  }
-
   @include from-breakpoint(medium) {
     letter-spacing: .5px;
   }
 }
 
+%input-focus-style {
+  border-color: transparent;
+  box-shadow: 0 0 4px 1px $color-shuttle-grey;
+}
+
+textarea:focus {
+  @extend %input-focus-style;
+}
+
+input[type='checkbox']:focus + span::before,
+input[type='radio']:focus + span::before {
+  @extend %input-focus-style;
+}
+
+input:not([type='radio']),
+input:not([type='checkbox'])
+select {
+  &:focus {
+    @extend %input-focus-style;
+  }
+}
+
 input,
 select {
   &:disabled {