From e68a1ea16b57acdd39da60b8734faf947a2bbf28 Mon Sep 17 00:00:00 2001
From: mishkolesnikov <mishkolesnikov@gmail.com>
Date: Thu, 22 Mar 2018 19:37:54 +0300
Subject: [PATCH] fix(buttons): indicate focus state of outline button just
 with border-color

Closes: #295
---
 .../styles/global/bootstrap/_button-group.scss    |  4 ++--
 .../styles/global/bootstrap/_default-buttons.scss | 15 ++++++++++++---
 .../styles/global/bootstrap/_outline-buttons.scss | 12 ++++++------
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/framework/theme/styles/global/bootstrap/_button-group.scss b/src/framework/theme/styles/global/bootstrap/_button-group.scss
index fda818b27b..9f3c14091e 100644
--- a/src/framework/theme/styles/global/bootstrap/_button-group.scss
+++ b/src/framework/theme/styles/global/bootstrap/_button-group.scss
@@ -99,7 +99,7 @@
 
   .btn-toggle-group,
   .btn-divided-group {
-    .btn:not(.active) {
+    .btn {
       background-color: nb-theme(btn-group-bg);
       color: nb-theme(btn-group-fg);
     }
@@ -231,7 +231,7 @@
   }
 
   .btn-outline-divided-group {
-    .btn:not(.active) {
+    .btn {
       background-color: transparent;
     }
   }
diff --git a/src/framework/theme/styles/global/bootstrap/_default-buttons.scss b/src/framework/theme/styles/global/bootstrap/_default-buttons.scss
index 4191901c81..d03f63af73 100644
--- a/src/framework/theme/styles/global/bootstrap/_default-buttons.scss
+++ b/src/framework/theme/styles/global/bootstrap/_default-buttons.scss
@@ -110,6 +110,15 @@
   @return shade(nb-theme($bg), $percentage);
 }
 
+@mixin btn-outline-focus($focus) {
+  &:focus,
+  &.focus {
+    color: nb-theme(btn-outline-hover-fg);
+    border-color: $focus;
+    box-shadow: none;
+  }
+}
+
 @mixin btn-focus($focus) {
   &:focus,
   &.focus {
@@ -131,7 +140,8 @@
 
 @mixin btn-active($active) {
   &:active,
-  &.active {
+  &.active,
+  &:active:focus {
     color: nb-theme(btn-outline-hover-fg);
     background-color: $active;
     border-color: transparent;
@@ -139,7 +149,6 @@
   }
 }
 
-
 // Focus
 @mixin btn-primary-focus() {
   @include btn-focus(btn-focus-color(btn-primary-bg));
@@ -162,7 +171,7 @@
 }
 
 @mixin btn-secondary-focus() {
-  @include btn-focus(btn-focus-color(btn-secondary-border));
+  @include btn-outline-focus(btn-focus-color(btn-secondary-border, 20%));
 }
 
 
diff --git a/src/framework/theme/styles/global/bootstrap/_outline-buttons.scss b/src/framework/theme/styles/global/bootstrap/_outline-buttons.scss
index 2a990cd5ad..fc50d50948 100644
--- a/src/framework/theme/styles/global/bootstrap/_outline-buttons.scss
+++ b/src/framework/theme/styles/global/bootstrap/_outline-buttons.scss
@@ -131,27 +131,27 @@
 
 // Focus
 @mixin btn-outline-primary-focus() {
-  @include btn-primary-focus();
+  @include btn-outline-focus(btn-focus-color(btn-primary-bg, 20%));
 }
 
 @mixin btn-outline-warning-focus() {
-  @include btn-warning-focus();
+  @include btn-outline-focus(btn-focus-color(btn-warning-bg, 20%));
 }
 
 @mixin btn-outline-success-focus() {
-  @include btn-success-focus();
+  @include btn-outline-focus(btn-focus-color(btn-success-bg, 20%));
 }
 
 @mixin btn-outline-info-focus() {
-  @include btn-info-focus();
+  @include btn-outline-focus(btn-focus-color(btn-info-bg, 20%));
 }
 
 @mixin btn-outline-danger-focus() {
-  @include btn-danger-focus();
+  @include btn-outline-focus(btn-focus-color(btn-danger-bg, 20%));
 }
 
 @mixin btn-outline-secondary-focus() {
-  @include btn-secondary-focus();
+  @include btn-outline-focus(btn-focus-color(btn-secondary-border, 20%));
 }