From b449e6b65e957905ebe17ddb1fe0390cdce380f0 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Tue, 27 Dec 2016 14:45:57 -0800
Subject: [PATCH] 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
---
 scss/_buttons.scss   | 4 ++--
 scss/_variables.scss | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 5d28922365..e36ff0f1f6 100644
--- 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 e7069f8053..e6cbf63bf5 100644
--- 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;