fix(buttons): indicate focus state of outline button just with border…

…-color Closes: #295
akveo · Mar 22, 2018 · e68a1ea · e68a1ea
1 parent 7676095
commit e68a1ea
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 11 deletions.
diff --git 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
@@ -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,15 +140,15 @@
 
 @mixin btn-active($active) {
   &:active,
-  &.active {
+  &.active,
+  &:active:focus {
     color: nb-theme(btn-outline-hover-fg);
     background-color: $active;
     border-color: transparent;
     box-shadow: none;
   }
 }
 
-
 // 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
@@ -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%));
 }