update new focus and shadow properties to use vars

4 files changed, 17 insertions, 13 deletions

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 36728696d..16d879cd8 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -22,7 +22,7 @@
   &:focus,
   &.focus {
     outline: 0;
-    box-shadow: $input-btn-focus-box-shadow;
+    box-shadow: $btn-focus-box-shadow;
   }
 
   // Disabled comes first so active can properly restyle
@@ -35,7 +35,7 @@
   &:not([disabled]):not(.disabled):active,
   &:not([disabled]):not(.disabled).active {
     background-image: none;
-    @include box-shadow($input-btn-focus-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 9697fd861..6b79cc687 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -353,6 +353,8 @@ $btn-border-width:            $input-btn-border-width !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-width:             $input-btn-focus-width !default;
+$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
 $btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
 
 $btn-link-disabled-color:     $gray-600 !default;
@@ -396,6 +398,8 @@ $input-border-radius-sm:                $border-radius-sm !default;
 $input-focus-bg:                        $input-bg !default;
 $input-focus-border-color:              lighten(theme-color("primary"), 25%) !default;
 $input-focus-color:                     $input-color !default;
+$input-focus-width:                     $input-btn-focus-width !default;
+$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
 
 $input-placeholder-color:               $gray-600 !default;
 
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 9e0626139..a99d71de1 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -19,9 +19,9 @@
   &.focus {
     // Avoid using mixin so we can pass custom focus shadow properly
     @if $enable-shadows {
-      box-shadow: $btn-box-shadow, 0 0 0 $input-btn-focus-width rgba($border, .5);
+      box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
     } @else {
-      box-shadow: 0 0 0 $input-btn-focus-width rgba($border, .5);
+      box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
     }
   }
 
@@ -44,9 +44,9 @@
 
     // Avoid using mixin so we can pass custom focus shadow properly
     @if $enable-shadows {
-      box-shadow: $btn-active-box-shadow, 0 0 0 $input-btn-focus-width rgba($border, .5);
+      box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
     } @else {
-      box-shadow: 0 0 0 $input-btn-focus-width rgba($border, .5);
+      box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
     }
   }
 }
@@ -65,7 +65,7 @@
 
   &:focus,
   &.focus {
-    box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .5);
+    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
   }
 
   &.disabled,
@@ -81,7 +81,7 @@
     background-color: $color;
     border-color: $color;
     // Avoid using mixin so we can pass custom focus shadow properly
-    box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .5);
+    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
   }
 }
 
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 564222ad0..5d822a440 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -18,9 +18,9 @@
     outline: none;
     // Avoid using mixin so we can pass custom focus shadow properly
     @if $enable-shadows {
-      box-shadow: $input-box-shadow, $input-btn-focus-box-shadow;
+      box-shadow: $input-box-shadow, $input-focus-box-shadow;
     } @else {
-      box-shadow: $input-btn-focus-box-shadow;
+      box-shadow: $input-focus-box-shadow;
     }
   }
 }
@@ -57,7 +57,7 @@
       border-color: $color;
 
       &:focus {
-        box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .25);
+        box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
       }
 
       ~ .#{$state}-feedback,
@@ -90,7 +90,7 @@
       }
       &:focus {
         ~ .custom-control-indicator {
-          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width rgba($color, .25);
+          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
         }
       }
     }
@@ -107,7 +107,7 @@
       }
       &:focus {
         ~ .custom-file-control {
-          box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .25);
+          box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
         }
       }
     }