From 7aa2a52069dbda20e395b5c84b7522b255eeffd3 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Mon, 26 Dec 2016 14:42:29 -0800
Subject: [PATCH] Redo button states

Trying to simplify our output here by revamping these selectors. We overcomplicated things by setting hover styles for nearly every state (disabled and active included), and we set them in the wrong order.

This commit does the following:

- Reorders states so disabled comes before active, thereby removing the need to set disabled-active styles.

- Removes all focus and hover styles from disabled states as those will naturally inherit from the default button state.

- Renamed `.open` to `.show` to fix dropdown toggle highlighting.

- Tweaked some indendation in the Sass.
---
 scss/_buttons.scss        | 26 ++++++-------
 scss/mixins/_buttons.scss | 78 +++++++++++++--------------------------
 2 files changed, 37 insertions(+), 67 deletions(-)

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 8ea2bb7649..6b924a5c6f 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -17,15 +17,12 @@
   @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
   @include transition($btn-transition);
 
-  &,
-  &:active,
-  &.active {
-    &:focus,
-    &.focus {
-      @include tab-focus();
-    }
+  &:focus,
+  &.focus {
+    @include tab-focus();
   }
 
+  // Share hover and focus styles
   @include hover-focus {
     text-decoration: none;
   }
@@ -33,19 +30,20 @@
     text-decoration: none;
   }
 
-  &:active,
-  &.active {
-    background-image: none;
-    outline: 0;
-    @include box-shadow($btn-active-box-shadow);
-  }
-
+  // Disabled comes first so active can properly restyle
   &.disabled,
   &:disabled {
     cursor: $cursor-disabled;
     opacity: .65;
     @include box-shadow(none);
   }
+
+  &:active,
+  &.active {
+    background-image: none;
+    outline: 0;
+    @include box-shadow($btn-active-box-shadow);
+  }
 }
 
 // Future-proof disabling of clicks on `<a>` elements
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 853a46bfc5..7a0a08a653 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -12,49 +12,34 @@
   border-color: $border;
   @include box-shadow($btn-box-shadow);
 
+  // Hover and focus styles are shared
   @include hover {
     color: $color;
     background-color: $active-background;
-        border-color: $active-border;
+    border-color: $active-border;
   }
-
   &:focus,
   &.focus {
     color: $color;
     background-color: $active-background;
-        border-color: $active-border;
+    border-color: $active-border;
+  }
+
+  // Disabled comes first so active can properly restyle
+  &.disabled,
+  &:disabled {
+    background-color: $background;
+    border-color: $border;
   }
 
   &:active,
   &.active,
-  .open > &.dropdown-toggle {
+  .show > &.dropdown-toggle {
     color: $color;
     background-color: $active-background;
-        border-color: $active-border;
-    // Remove the gradient for the pressed/active state
-    background-image: none;
+    border-color: $active-border;
+    background-image: none; // Remove the gradient for the pressed/active state
     @include box-shadow($btn-active-box-shadow);
-
-    &:hover,
-    &:focus,
-    &.focus {
-      color: $color;
-      background-color: darken($background, 17%);
-          border-color: darken($border, 25%);
-    }
-  }
-
-  &.disabled,
-  &:disabled {
-    &:focus,
-    &.focus {
-      background-color: $background;
-          border-color: $border;
-    }
-    @include hover {
-      background-color: $background;
-          border-color: $border;
-    }
   }
 }
 
@@ -67,41 +52,28 @@
   @include hover {
     color: $color-hover;
     background-color: $color;
-        border-color: $color;
+    border-color: $color;
   }
 
   &:focus,
   &.focus {
     color: $color-hover;
     background-color: $color;
-        border-color: $color;
-  }
-
-  &:active,
-  &.active,
-  .open > &.dropdown-toggle {
-    color: $color-hover;
-    background-color: $color;
-        border-color: $color;
-
-    &:hover,
-    &:focus,
-    &.focus {
-      color: $color-hover;
-      background-color: darken($color, 17%);
-          border-color: darken($color, 25%);
-    }
+    border-color: $color;
   }
 
   &.disabled,
   &:disabled {
-    &:focus,
-    &.focus {
-      border-color: lighten($color, 20%);
-    }
-    @include hover {
-      border-color: lighten($color, 20%);
-    }
+    color: $color;
+    background-color: transparent;
+  }
+
+  &:active,
+  &.active,
+  .show > &.dropdown-toggle {
+    color: $color-hover;
+    background-color: $color;
+    border-color: $color;
   }
 }