Fix buttons :focus state styles (#27890)

* Fix buttons :focus state styles

Buttons :hover and :focus state shares styles.
Buttons :focus text color on 'a.btn' is now consistent with others '.btn'.

* `:focus` styles should be in sync with `.focus`.

So shared styles with hover were copy to focus definition. Rather then using
`hover-focus` mixin which do not contain `.focus`.

diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index eee903f83ce5b56fa645152f23810953c92a62e7..874f552d0ced3bb9eb4c303fdfd703eb9289e188 100644 (file)
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -17,6 +17,9 @@
 
   &:focus,
   &.focus {
+    color: color-yiq($hover-background);
+    @include gradient-bg($hover-background);
+    border-color: $hover-border;
     // Avoid using mixin so we can pass custom focus shadow properly
     @if $enable-shadows {
       box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);