Merge pull request #7809 from twitter/bs3_adding_btn_default

BS3: Require .btn-default for all standard buttons

4 files changed, 66 insertions, 71 deletions

diff --git a/less/button-groups.less b/less/button-groups.less
index 3a72d90bf..6f9a52acd 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -4,10 +4,10 @@
 
 // Button carets
 .btn .caret {
-  border-top-color: @btn-color;
+  border-top-color: @btn-default-color;
 }
 .dropup .btn .caret {
-  border-bottom-color: @btn-color;
+  border-bottom-color: @btn-default-color;
 }
 
 // Make the div behave like a button
diff --git a/less/buttons.less b/less/buttons.less
index b65e3fdc7..128971a4c 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -17,7 +17,7 @@
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
-  border: 1px solid @btn-border;
+  border: 1px solid transparent;
   border-radius: @border-radius-base;
   white-space: nowrap;
 
@@ -50,91 +50,35 @@
 }
 
 
-// Button Sizes
-// -------------------------
-
-// Large
-.btn-large {
-  padding: @padding-large;
-  font-size: @font-size-large;
-  border-radius: @border-radius-large;
-}
-
-// Small
-.btn-small {
-  padding: @padding-small;
-  font-size: @font-size-small;
-  border-radius: @border-radius-small;
-}
-
-// Mini
-.btn-mini {
-  padding: @padding-mini;
-  font-size: @font-size-mini;
-  border-radius: @border-radius-small;
-}
-
-
-// Icons in buttons
-// -------------------------
-
-// TODO: figure this shit out
-
-// Block button
-// -------------------------
-
-.btn-block {
-  display: block;
-  width: 100%;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-// Vertically space out multiple block buttons
-.btn-block + .btn-block {
-  margin-top: 5px;
-}
-
-// Specificity overrides
-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
-  &.btn-block {
-    width: 100%;
-  }
-}
-
-
 // Alternate buttons
 // --------------------------------------------------
 
-.btn {
-  color: @btn-color;
-  .btn-pseudo-states(@btn-bg, @btn-border);
+.btn-default {
+  .btn-pseudo-states(@btn-default-color, @btn-default-bg, @btn-default-border);
 }
 .btn-primary {
-  .btn-pseudo-states(@btn-primary-bg, @btn-primary-border);
+  .btn-pseudo-states(@btn-primary-color, @btn-primary-bg, @btn-primary-border);
 }
 // Warning appears as orange
 .btn-warning {
-  .btn-pseudo-states(@btn-warning-bg, @btn-warning-border);
+  .btn-pseudo-states(@btn-warning-color, @btn-warning-bg, @btn-warning-border);
 }
 // Danger and error appear as red
 .btn-danger {
-  .btn-pseudo-states(@btn-danger-bg, @btn-danger-border);
+  .btn-pseudo-states(@btn-danger-color, @btn-danger-bg, @btn-danger-border);
 }
 // Success appears as green
 .btn-success {
-  .btn-pseudo-states(@btn-success-bg, @btn-success-border);
+  .btn-pseudo-states(@btn-success-color, @btn-success-bg, @btn-success-border);
 }
 // Info appears as blue-green
 .btn-info {
-  .btn-pseudo-states(@btn-info-bg, @btn-info-border);
+  .btn-pseudo-states(@btn-info-color, @btn-info-bg, @btn-info-border);
 }
 
 
 // Link buttons
-// --------------------------------------------------
+// -------------------------
 
 // Make a button look and behave like a link
 .btn-link,
@@ -173,3 +117,48 @@ fieldset[disabled] .btn-link {
     }
   }
 }
+
+
+// Button Sizes
+// --------------------------------------------------
+
+.btn-large {
+  padding: @padding-large;
+  font-size: @font-size-large;
+  border-radius: @border-radius-large;
+}
+.btn-small {
+  padding: @padding-small;
+  font-size: @font-size-small;
+  border-radius: @border-radius-small;
+}
+.btn-mini {
+  padding: @padding-mini;
+  font-size: @font-size-mini;
+  border-radius: @border-radius-small;
+}
+
+
+// Block button
+// --------------------------------------------------
+
+.btn-block {
+  display: block;
+  width: 100%;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+// Vertically space out multiple block buttons
+.btn-block + .btn-block {
+  margin-top: 5px;
+}
+
+// Specificity overrides
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  &.btn-block {
+    width: 100%;
+  }
+}
diff --git a/less/mixins.less b/less/mixins.less
index 2323d1203..48e2073c5 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -350,7 +350,8 @@
 // -------------------------
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
-.btn-pseudo-states(@background, @border) {
+.btn-pseudo-states(@color, @background, @border) {
+  color: @color;
   background-color: @background;
   border-color: @border;
 
diff --git a/less/variables.less b/less/variables.less
index f6f59605a..fd69c2438 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -84,22 +84,27 @@
 // Buttons
 // -------------------------
 
-@btn-color:                      #fff;
-@btn-bg:                         #a7a9aa;
-@btn-border:                     @btn-bg;
+@btn-default-color:              #fff;
+@btn-default-bg:                 #a7a9aa;
+@btn-default-border:             @btn-default-bg;
 
+@btn-primary-color:              @btn-default-color;
 @btn-primary-bg:                 @brand-primary;
 @btn-primary-border:             @btn-primary-bg;
 
+@btn-success-color:              @btn-default-color;
 @btn-success-bg:                 @brand-success;
 @btn-success-border:             @btn-success-bg;
 
+@btn-warning-color:              @btn-default-color;
 @btn-warning-bg:                 @brand-warning;
 @btn-warning-border:             @btn-warning-bg;
 
+@btn-danger-color:               @btn-default-color;
 @btn-danger-bg:                  @brand-danger;
 @btn-danger-border:              @btn-danger-bg;
 
+@btn-info-color:                 @btn-default-color;
 @btn-info-bg:                    @brand-info;
 @btn-info-border:                @btn-info-bg;