Add variables for controlling button active/hover darken amount

fixes twbs#19353
kevinkucharczyk · Mar 5, 2016 · 3693fb3 · 3693fb3
1 parent 01be344
commit 3693fb3
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -263,6 +263,11 @@ $btn-font-weight:                normal !default;
 $btn-box-shadow:                 inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075) !default;
 $btn-active-box-shadow:          inset 0 3px 5px rgba(0,0,0,.125) !default;
 
+$btn-active-bg-darken:           10%;
+$btn-active-border-darken:       12%;
+$btn-active-hover-bg-darken:     17%;
+$btn-active-hover-border-darken: 25%;
+
 $btn-primary-color:              #fff !default;
 $btn-primary-bg:                 $brand-primary !default;
 $btn-primary-border:             $btn-primary-bg !default;

diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
@@ -4,8 +4,8 @@
 // and disabled options for all buttons
 
 @mixin button-variant($color, $background, $border) {
-  $active-background: darken($background, 10%);
-  $active-border: darken($border, 12%);
+  $active-background: darken($background, $btn-active-bg-darken);
+  $active-border: darken($border, $btn-active-border-darken);
 
   color: $color;
   background-color: $background;
@@ -39,8 +39,8 @@
     &:focus,
     &.focus {
       color: $color;
-      background-color: darken($background, 17%);
-          border-color: darken($border, 25%);
+      background-color: darken($background, $btn-active-hover-bg-darken);
+          border-color: darken($border, $btn-active-hover-border-darken);
     }
   }
 
@@ -88,8 +88,8 @@
     &:focus,
     &.focus {
       color: #fff;
-      background-color: darken($color, 17%);
-          border-color: darken($color, 25%);
+      background-color: darken($color, $btn-active-hover-bg-darken);
+          border-color: darken($color, $btn-active-hover-border-darken);
     }
   }