redo outlines

- removes original outline removal (hah)
- replaces it with an explicit `outline: 0` on `.btn`
- instead of replicating `:hover` for `:focus`, uses custom and themed `box-shadow` for an "outline"
- not mapped to the `$enable-shadows` variable because accessibility

2 files changed, 5 insertions, 10 deletions

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 6b924a5c6..2167f22c6 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -17,17 +17,14 @@
   @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
   @include transition($btn-transition);
 
-  &:focus,
-  &.focus {
-    @include tab-focus();
-  }
-
   // Share hover and focus styles
   @include hover-focus {
     text-decoration: none;
   }
+  &:focus,
   &.focus {
-    text-decoration: none;
+    outline: 0;
+    box-shadow: 0 0 0 2px rgba($brand-primary, .25);
   }
 
   // Disabled comes first so active can properly restyle
@@ -41,7 +38,6 @@
   &:active,
   &.active {
     background-image: none;
-    outline: 0;
     @include box-shadow($btn-active-box-shadow);
   }
 }
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 8e0c4936b..51bf93937 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -23,6 +23,7 @@
     color: $color;
     background-color: $active-background;
     border-color: $active-border;
+    box-shadow: 0 0 0 2px rgba($border, .5);
   }
 
   // Disabled comes first so active can properly restyle
@@ -57,9 +58,7 @@
 
   &:focus,
   &.focus {
-    color: $color-hover;
-    background-color: $color;
-    border-color: $color;
+    box-shadow: 0 0 0 2px rgba($color, .5);
   }
 
   &.disabled,