#27135: themed link focus state & selector improvement (#27136)

diff --git a/scss/_badge.scss b/scss/_badge.scss
index bdbe4b9cc8277572ceb35df7438f915feb66bc1d..c727ba5a2bc08760148a832064c8f094172405c4 100644 (file)
--- 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 275a8ede9cc47c8ee6013cc7195a5c653942631d..add1c1bfedc306721b7d82b4536892dbc871246e 100644 (file)
--- 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 cf99b3537a48278a8c6a621816004f16f94f27c7..64b29cb579138e814cfcab45c6bf3e73e0090e68 100644 (file)
--- 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);
+    }
   }
 }