feat(components): added mixin for focus outline style

seb-oss · Mar 8, 2019 · 69add01 · 69add01
1 parent 5eb2715
commit 69add01
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/src/_mixins.scss b/src/_mixins.scss
@@ -52,3 +52,11 @@
   transform: rotate(#{$rotation + "deg"});
   transition: transform 250ms;
 }
+
+/// Add focus outline to element
+///
+/// @access public
+@mixin vanilla-focus-outline() {
+  box-shadow: 0px 0px 0px 3px rgba($vanilla-color-component-selected, 0.2);
+  transition: box-shadow 250ms;
+}
diff --git a/src/components/buttons/_button-mixins.scss b/src/components/buttons/_button-mixins.scss
@@ -8,6 +8,7 @@
 @import "../../functions";
 @import "../../utilities";
 @import "../../icons";
+@import "../../mixins";
 
 /// The left and right padding in buttons
 $vanilla-button-padding: vanilla-px-to-em(16) !default;
@@ -57,6 +58,7 @@ $_button_disabled-color-light: $vanilla-color-component-disabled-light;
     background-color: $_button_color-bg-focus;
     border-color: $_button_color-bg-focus;
     text-decoration: none;
+    @include vanilla-focus-outline();
   }
   &:active {
     background-color: $_button_color-bg-pressed;

diff --git a/src/components/inputs/_input-mixins.scss b/src/components/inputs/_input-mixins.scss
@@ -39,6 +39,7 @@
   }
   &:focus {
     border-color: $vanilla-color-component-selected;
+    @include vanilla-focus-outline();
   }
   &:active {
     border-color: $_border-color-normal;
@@ -200,7 +201,7 @@
   }
   input:focus + label:before {
     border-color: $vanilla-color-component-selected;
-    box-shadow: 0 0 0 vanilla-px-to-em(3px) rgba($vanilla-color-component-selected, 0.2);
+    @include vanilla-focus-outline();
   }
 
   input[disabled] {
@@ -378,7 +379,7 @@
   input:focus + label,
   input:focus + &__label,
   &__label--focus {
-    box-shadow: 0px 0px 0px 3px rgba($vanilla-color-component-selected, 0.2);
+    @include vanilla-focus-outline();
   }
 
   &--expanded,
@@ -433,7 +434,7 @@
 
   input:focus + label,
   .-focus &__label {
-    box-shadow: 0px 0px 0px 3px rgba($vanilla-color-component-selected, 0.2);
+    @include vanilla-focus-outline();
   }
 
   input:disabled + label,