From 8fda1d19e003725a2597507c44454efd4f722af5 Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Sun, 26 Aug 2018 17:20:15 +0200
Subject: [PATCH] #27135: themed link focus state & selector improvement

---
 scss/_badge.scss        | 1 +
 scss/_variables.scss    | 3 +++
 scss/mixins/_badge.scss | 8 +++++++-
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/scss/_badge.scss b/scss/_badge.scss
index b87a1b00495a..55acdf889777 100644
--- a/scss/_badge.scss
+++ b/scss/_badge.scss
@@ -13,6 +13,7 @@
   white-space: nowrap;
   vertical-align: baseline;
   @include border-radius($badge-border-radius);
+  @include transition($badge-transition);
 
   // Empty badges collapse automatically
   &:empty {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 50a2e05f8ee7..0de68e3ac543 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -796,6 +796,9 @@ $badge-padding-y:                   .25em !default;
 $badge-padding-x:                   .4em !default;
 $badge-border-radius:               $border-radius !default;
 
+$badge-transition:                  $btn-transition !default;
+$badge-focus-width:                 $input-btn-focus-width !default;
+
 $badge-pill-padding-x:              .6em !default;
 // Use a higher than normal value to ensure completely rounded edges when
 // customizing padding or font-size on labels.
diff --git a/scss/mixins/_badge.scss b/scss/mixins/_badge.scss
index eeca0b40de92..49b582665210 100644
--- a/scss/mixins/_badge.scss
+++ b/scss/mixins/_badge.scss
@@ -2,11 +2,17 @@
   color: color-yiq($bg);
   background-color: $bg;
 
-  &[href] {
+  @at-root a#{&} {
     @include hover-focus {
       color: color-yiq($bg);
       text-decoration: none;
       background-color: darken($bg, 10%);
     }
+
+    &:focus,
+    &.focus {
+      outline: 0;
+      box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5);
+    }
   }
 }