Fix that thing with disabled buttons changing color on hover

1 files changed, 20 insertions, 39 deletions

diff --git a/less/buttons.less b/less/buttons.less
index f825bd429..0e23f1730 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -109,7 +109,18 @@ input[type="button"] {
   }
 }
 
-
+// Mixin for darkening only enabled buttons for link states
+.darken-button-states (@background, @border) {
+  &:not([disabled]):not(.disabled),
+  fieldset:not([disabled]) & {
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: darken(@background, 5%);
+          border-color: darken(@border, 10%);
+    }
+  }
+}
 
 // Alternate buttons
 // --------------------------------------------------
@@ -117,67 +128,37 @@ input[type="button"] {
 .btn {
   color: #fff;
   background-color: @btn-background;
-  border-color: @btn-border;
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: darken(@btn-background, 5%);
-        border-color: darken(@btn-border, 10%);
-  }
+      border-color: @btn-border;
+  .darken-button-states(@btn-background, @btn-border)
 }
 .btn-primary {
   background-color: @btn-background-primary;
       border-color: @btn-border-primary;
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: darken(@btn-background-primary, 5%);
-        border-color: darken(@btn-border-primary, 10%);
-  }
+  .darken-button-states(@btn-background-primary, @btn-border-primary)
 }
-// Warning appears are orange
+// Warning appears as orange
 .btn-warning {
   background-color: @btn-background-warning;
       border-color: @btn-border-warning;
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: darken(@btn-background-warning, 5%);
-        border-color: darken(@btn-border-warning, 10%);
-  }
+  .darken-button-states(@btn-background-warning, @btn-border-warning)
 }
 // Danger and error appear as red
 .btn-danger {
   background-color: @btn-background-danger;
       border-color: @btn-border-danger;
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: darken(@btn-background-danger, 5%);
-        border-color: darken(@btn-border-danger, 10%);
-  }
+  .darken-button-states(@btn-background-danger, @btn-border-danger)
 }
 // Success appears as green
 .btn-success {
   background-color: @btn-background-success;
       border-color: @btn-border-success;
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: darken(@btn-background-success, 5%);
-        border-color: darken(@btn-border-success, 10%);
-  }
+  .darken-button-states(@btn-background-success, @btn-border-success)
 }
 // Info appears as blue-green
 .btn-info {
   background-color: @btn-background-info;
       border-color: @btn-border-info;
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: darken(@btn-background-info, 5%);
-        border-color: darken(@btn-border-info, 10%);
-  }
+  .darken-button-states(@btn-background-info, @btn-border-info)
 }