From: Mark Otto <markdotto@gmail.com>
Date: Tue, 27 Dec 2016 06:12:18 +0000 (-0800)
Subject: redo outlines
X-Git-Tag: v4.0.0-alpha.6~129
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=62c4cb29fbd1d1b9fc788a428d15fc96ea9cd207;p=thirdparty%2Fbootstrap.git

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
---

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 6b924a5c6f..2167f22c6c 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 8e0c4936b7..51bf93937b 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,