Merge pull request #243 from emeliese/fix/focus-state-rework

fix: change box-shadow style for focus state
seb-oss · Nov 27, 2020 · d1ee073 · d1ee073
2 parents fc26277 + 6e67786
commit d1ee073
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/src/_mixins.scss b/src/_mixins.scss
@@ -61,8 +61,8 @@
 /// Add focus outline to element
 ///
 /// @access public
-@mixin vanilla-focus-outline() {
-  box-shadow: 0 0 0 3px rgba($vanilla-color-component-selected, 0.2);
+@mixin vanilla-focus-outline($shadow-color: $vanilla-color-blue, $opacity: 1) {
+  box-shadow: 0 0 4px 1px rgba($shadow-color, $opacity);
   transition: box-shadow 250ms;
 }
 

diff --git a/src/components/buttons/_button-mixins.scss b/src/components/buttons/_button-mixins.scss
@@ -176,6 +176,10 @@ $_ghost-button_disabled-opacity: 0.5;
   color: $vanilla-color-white;
   background-color: transparent;
 
+  &:focus {
+    @include vanilla-focus-outline($vanilla-color-white, 0.9);
+  }
+
   &:focus,
   &:hover,
   &:active {
@@ -199,6 +203,10 @@ $_ghost-button_disabled-opacity: 0.5;
   color: $vanilla-color-grey2;
   background-color: transparent;
 
+  &:focus {
+    @include vanilla-focus-outline($vanilla-color-grey700);
+  }
+
   &:focus,
   &:hover,
   &:active {
@@ -230,6 +238,10 @@ $_ghost-button_disabled-opacity: 0.5;
   background-color: transparent;
   border-color: transparent;
 
+  &:focus {
+    @include vanilla-focus-outline($vanilla-color-red);
+  }
+
   &:focus,
   &:hover,
   &:active {
@@ -253,6 +265,10 @@ $_ghost-button_disabled-opacity: 0.5;
   background-color: $vanilla-color-darkred1;
   border-color: $vanilla-color-darkred1;
 
+  &:focus {
+    @include vanilla-focus-outline($vanilla-color-red);
+  }
+
   &:focus,
   &:hover,
   &:active {