Add extra styles for focused/hovered active outline buttons

diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 861d353e27106e2dac9ddb4cc8f6f3366d99ed8d..5196ab65e19646aa4a054918b97543db096d127b 100644 (file)
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -64,19 +64,33 @@
   background-color: transparent;
   border-color: $color;
 
+  @include hover {
+    color: #fff;
+    background-color: $color;
+        border-color: $color;
+  }
+
   &:focus,
-  &.focus,
-  &:active,
-  &.active,
-  .open > &.dropdown-toggle {
+  &.focus {
     color: #fff;
     background-color: $color;
         border-color: $color;
   }
-  @include hover {
+
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
     color: #fff;
     background-color: $color;
         border-color: $color;
+
+    &:hover,
+    &:focus,
+    &.focus {
+      color: #fff;
+      background-color: darken($color, 17%);
+          border-color: darken($color, 25%);
+    }
   }
 
   &.disabled,