create a variable for the focus box-shadow, use it in the button base class

also be sure to apply it for the active state when shadows are enabled

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 5d289223653ce0ae4c02c038e5bcd1049edec638..e36ff0f1f6645f1bf8c8bf88a4c81dfb59e4dbb2 100644 (file)
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -23,7 +23,7 @@
   &:focus,
   &.focus {
     outline: 0;
-    box-shadow: 0 0 0 2px rgba($brand-primary, .25);
+    box-shadow: $btn-focus-box-shadow;
   }
 
   // Disabled comes first so active can properly restyle
@@ -37,7 +37,7 @@
   &:active,
   &.active {
     background-image: none;
-    @include box-shadow($btn-active-box-shadow);
+    @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
   }
 }
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
index e7069f805370dd31aca632d80307142642499f6c..e6cbf63bf513184f1a3620b32abf064d67a61ba0 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -367,6 +367,7 @@ $btn-padding-y:                  .5rem !default;
 $btn-line-height:                1.25 !default;
 $btn-font-weight:                $font-weight-normal !default;
 $btn-box-shadow:                 inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default;
+$btn-focus-box-shadow:           0 0 0 2px rgba($brand-primary, .25) !default;
 $btn-active-box-shadow:          inset 0 3px 5px rgba($black,.125) !default;
 
 $btn-primary-color:              $white !default;