Merge pull request #7809 from twitter/bs3_adding_btn_default

BS3: Require .btn-default for all standard buttons

docs/assets/css/bootstrap.css

@@ -1844,7 +1844,7 @@ select:focus:invalid:focus {
   white-space: nowrap;
   vertical-align: middle;
   cursor: pointer;
-  border: 1px solid #a7a9aa;
+  border: 1px solid transparent;
   border-radius: 4px;
 }
 
@@ -1879,72 +1879,38 @@ fieldset[disabled] .btn {
           box-shadow: none;
 }
 
-.btn-large {
-  padding: 11px 14px;
-  font-size: 17.5px;
-  border-radius: 6px;
-}
-
-.btn-small {
-  padding: 2px 10px;
-  font-size: 11.9px;
-  border-radius: 3px;
-}
-
-.btn-mini {
-  padding: 0 6px;
-  font-size: 10.5px;
-  border-radius: 3px;
-}
-
-.btn-block {
-  display: block;
-  width: 100%;
-  padding-right: 0;
-  padding-left: 0;
-}
-
-.btn-block + .btn-block {
-  margin-top: 5px;
-}
-
-input[type="submit"].btn-block,
-input[type="reset"].btn-block,
-input[type="button"].btn-block {
-  width: 100%;
-}
-
-.btn {
+.btn-default {
   color: #ffffff;
   background-color: #a7a9aa;
   border-color: #a7a9aa;
 }
 
-.btn:hover,
-.btn:focus,
-.btn:active,
-.btn.active {
+.btn-default:hover,
+.btn-default:focus,
+.btn-default:active,
+.btn-default.active {
   background-color: #9a9c9d;
   border-color: #8d9091;
 }
 
-.btn.disabled:hover,
-.btn[disabled]:hover,
-fieldset[disabled] .btn:hover,
-.btn.disabled:focus,
-.btn[disabled]:focus,
-fieldset[disabled] .btn:focus,
-.btn.disabled:active,
-.btn[disabled]:active,
-fieldset[disabled] .btn:active,
-.btn.disabled.active,
-.btn[disabled].active,
-fieldset[disabled] .btn.active {
+.btn-default.disabled:hover,
+.btn-default[disabled]:hover,
+fieldset[disabled] .btn-default:hover,
+.btn-default.disabled:focus,
+.btn-default[disabled]:focus,
+fieldset[disabled] .btn-default:focus,
+.btn-default.disabled:active,
+.btn-default[disabled]:active,
+fieldset[disabled] .btn-default:active,
+.btn-default.disabled.active,
+.btn-default[disabled].active,
+fieldset[disabled] .btn-default.active {
   background-color: #a7a9aa;
   border-color: #a7a9aa;
 }
 
 .btn-primary {
+  color: #ffffff;
   background-color: #428bca;
   border-color: #428bca;
 }
@@ -1974,6 +1940,7 @@ fieldset[disabled] .btn-primary.active {
 }
 
 .btn-warning {
+  color: #ffffff;
   background-color: #f0ad4e;
   border-color: #f0ad4e;
 }
@@ -2003,6 +1970,7 @@ fieldset[disabled] .btn-warning.active {
 }
 
 .btn-danger {
+  color: #ffffff;
   background-color: #d9534f;
   border-color: #d9534f;
 }
@@ -2032,6 +2000,7 @@ fieldset[disabled] .btn-danger.active {
 }
 
 .btn-success {
+  color: #ffffff;
   background-color: #5cb85c;
   border-color: #5cb85c;
 }
@@ -2061,6 +2030,7 @@ fieldset[disabled] .btn-success.active {
 }
 
 .btn-info {
+  color: #ffffff;
   background-color: #5bc0de;
   border-color: #5bc0de;
 }
@@ -2128,6 +2098,41 @@ fieldset[disabled] .btn-link:focus {
   text-decoration: none;
 }
 
+.btn-large {
+  padding: 11px 14px;
+  font-size: 17.5px;
+  border-radius: 6px;
+}
+
+.btn-small {
+  padding: 2px 10px;
+  font-size: 11.9px;
+  border-radius: 3px;
+}
+
+.btn-mini {
+  padding: 0 6px;
+  font-size: 10.5px;
+  border-radius: 3px;
+}
+
+.btn-block {
+  display: block;
+  width: 100%;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.btn-block + .btn-block {
+  margin-top: 5px;
+}
+
+input[type="submit"].btn-block,
+input[type="reset"].btn-block,
+input[type="button"].btn-block {
+  width: 100%;
+}
+
 .fade {
   opacity: 0;
   -webkit-transition: opacity 0.15s linear;

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

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%;
+  }
+}

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;
 

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;