Revamp button mixins and pseudo states

* Remove .darken-button-states and .buttonBackground mixins (latter wasn't being used anyway)
* Create new .btn-pseudo-states mixin for setting button background and border colors for default and pseudo states

diff --git a/less/buttons.less b/less/buttons.less
index 143ab42fd2fbcbda4d966e5b64395f66947ffb54..a49b7676d06db1986692e8051d05066891ad54c6 100644 (file)
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -109,64 +109,32 @@ input[type="button"] {
   }
 }
 
-// Mixin for darkening only enabled buttons for link states
-.darken-button-states (@background, @border) {
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: darken(@background, 5%);
-        border-color: darken(@border, 10%);
-  }
-
-  &.disabled,
-  &[disabled],
-  fieldset[disabled] & {
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: @background;
-          border-color: @border
-    }
-  }
-}
 
 // Alternate buttons
 // --------------------------------------------------
 
 .btn {
   color: @btn-color;
-  background-color: @btn-background;
-      border-color: @btn-border;
-  .darken-button-states(@btn-background, @btn-border)
+  .btn-pseudo-states(@btn-background, @btn-border);
 }
 .btn-primary {
-  background-color: @btn-background-primary;
-      border-color: @btn-border-primary;
-  .darken-button-states(@btn-background-primary, @btn-border-primary)
+  .btn-pseudo-states(@btn-background-primary, @btn-border-primary);
 }
 // Warning appears as orange
 .btn-warning {
-  background-color: @btn-background-warning;
-      border-color: @btn-border-warning;
-  .darken-button-states(@btn-background-warning, @btn-border-warning)
+  .btn-pseudo-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;
-  .darken-button-states(@btn-background-danger, @btn-border-danger)
+  .btn-pseudo-states(@btn-background-danger, @btn-border-danger);
 }
 // Success appears as green
 .btn-success {
-  background-color: @btn-background-success;
-      border-color: @btn-border-success;
-  .darken-button-states(@btn-background-success, @btn-border-success)
+  .btn-pseudo-states(@btn-background-success, @btn-border-success);
 }
 // Info appears as blue-green
 .btn-info {
-  background-color: @btn-background-info;
-      border-color: @btn-border-info;
-  .darken-button-states(@btn-background-info, @btn-border-info)
+  .btn-pseudo-states(@btn-background-info, @btn-border-info);
 }
 
 

diff --git a/less/mixins.less b/less/mixins.less
index 71ca3dfefc4e498103d0648c23dbf047bdca0e2d..4b889f5cc3d6feaca1ec8b5b2c6efd525cf40cc9 100644 (file)
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -383,31 +383,33 @@
   border-bottom: 1px solid @bottom;
 }
 
-// Button backgrounds
-// ------------------
-.buttonBackground(@background-start, @background-end, @text-color: #fff, @text-shadow: 0 -1px 0 rgba(0,0,0,.25)) {
-  color: @text-color;
-  text-shadow: @text-shadow;
-  #gradient > .vertical(@background-start, @background-end);
-  border-color: darken(@background-end, 7.5%);
+// Button psuedo states
+// -------------------------
+// Easily pump out default styles, as well as :hover, :focus, :active,
+// and disabled options for all buttons
+.btn-pseudo-states(@background, @border) {
+  background-color: @background;
+  border-color: @border;
 
   &:hover,
-  &:active,
-  &.active {
-    color: @text-color;
-    background-color: @background-end;
-    background-position: 0 -15px;
+  &:focus,
+  &:active {
+    background-color: darken(@background, 5%);
+        border-color: darken(@border, 10%);
   }
-  &:active,
-  &.active,
-  &[disabled],
+
   &.disabled,
+  &[disabled],
   fieldset[disabled] & {
-    background-image: none;
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: @background;
+          border-color: @border
+    }
   }
 }
 
-
 // Navbar vertical align
 // -------------------------
 // Vertically center elements in the navbar.