From fc841b0cebc1a96e995cb9bd2d13c994b7a24268 Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Fri, 21 Dec 2018 22:55:05 +0100
Subject: [PATCH] #27135: themed link focus state & selector improvement
 (#27136)

---
 scss/_badge.scss        | 1 +
 scss/_variables.scss    | 3 +++
 scss/mixins/_badge.scss | 6 ++++++
 3 files changed, 10 insertions(+)

diff --git a/scss/_badge.scss b/scss/_badge.scss
index bdbe4b9cc8..c727ba5a2b 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);
 
   @at-root a#{&} {
     @include hover-focus {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 275a8ede9c..add1c1bfed 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -892,6 +892,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 cf99b3537a..64b29cb579 100644
--- a/scss/mixins/_badge.scss
+++ b/scss/mixins/_badge.scss
@@ -7,5 +7,11 @@
       color: color-yiq($bg);
       background-color: darken($bg, 10%);
     }
+
+    &:focus,
+    &.focus {
+      outline: 0;
+      box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5);
+    }
   }
 }