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%));
 }