diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 6b904d6e85ace53e2ca92c01dd59222680b8616e..633543fd99324ade079756e603d42f031edb75e7 100644
--- a/docs/assets/css/bootstrap.css
+++ b/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;
diff --git a/docs/docs.html b/docs/docs.html
index f3370dfbdf18a0848c7e2a8ad0c6f161f25bd38e..344a710cc7d3e43ef5ca054038ed7c2085f3fdc4 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -2007,7 +2007,7 @@ For example, <code><section></code> should be wrapped as inline.
</div>
<h2 id="buttons-options">Button options</h2>
- <p>Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code><a></code> and <code><button></code> elements for the best rendering.</p>
+ <p>Use any of the available button classes to quickly create a styled button.</p>
<div class="bs-docs-example">
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
@@ -2040,56 +2040,55 @@ For example, <code><section></code> should be wrapped as inline.
<button type="button" class="btn btn-link">Link</button>
{% endhighlight %}
-
<h2 id="buttons-sizes">Button sizes</h2>
<p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for additional sizes.</p>
<div class="bs-docs-example">
<p>
- <button type="button" class="btn btn-large btn-primary">Large button</button>
- <button type="button" class="btn btn-large">Large button</button>
+ <button type="button" class="btn btn-primary btn-large">Large button</button>
+ <button type="button" class="btn btn-default btn-large">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
- <button type="button" class="btn">Default button</button>
+ <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
- <button type="button" class="btn btn-small btn-primary">Small button</button>
- <button type="button" class="btn btn-small">Small button</button>
+ <button type="button" class="btn btn-primary btn-small">Small button</button>
+ <button type="button" class="btn btn-default btn-small">Small button</button>
</p>
<p>
- <button type="button" class="btn btn-mini btn-primary">Mini button</button>
- <button type="button" class="btn btn-mini">Mini button</button>
+ <button type="button" class="btn btn-primary btn-mini">Mini button</button>
+ <button type="button" class="btn btn-default btn-mini">Mini button</button>
</p>
</div>
{% highlight html %}
<p>
- <button type="button" class="btn btn-large btn-primary">Large button</button>
- <button type="button" class="btn btn-large">Large button</button>
+ <button type="button" class="btn btn-primary btn-large">Large button</button>
+ <button type="button" class="btn btn-default btn-large">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
- <button type="button" class="btn">Default button</button>
+ <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
- <button type="button" class="btn btn-small btn-primary">Small button</button>
- <button type="button" class="btn btn-small">Small button</button>
+ <button type="button" class="btn btn-primary btn-small">Small button</button>
+ <button type="button" class="btn btn-default btn-small">Small button</button>
</p>
<p>
- <button type="button" class="btn btn-mini btn-primary">Mini button</button>
- <button type="button" class="btn btn-mini">Mini button</button>
+ <button type="button" class="btn btn-primary btn-mini">Mini button</button>
+ <button type="button" class="btn btn-default btn-mini">Mini button</button>
</p>
{% endhighlight %}
<p>Create block level buttons—those that span the full width of a parent— by adding <code>.btn-block</code>.</p>
<div class="bs-docs-example">
<div class="well" style="max-width: 400px; margin: 0 auto 10px;">
- <button type="button" class="btn btn-large btn-block btn-primary">Block level button</button>
- <button type="button" class="btn btn-large btn-block">Block level button</button>
+ <button type="button" class="btn btn-primary btn-large btn-block">Block level button</button>
+ <button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
</div>
</div>
{% highlight html %}
-<button type="button" class="btn btn-large btn-block btn-primary">Block level button</button>
-<button type="button" class="btn btn-large btn-block">Block level button</button>
+<button type="button" class="btn btn-primary btn-large btn-block">Block level button</button>
+<button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
{% endhighlight %}
@@ -2099,12 +2098,12 @@ For example, <code><section></code> should be wrapped as inline.
<h3>Button element</h3>
<p>Add the <code>disabled</code> attribute to <code><button></code> buttons.</p>
<p class="bs-docs-example">
- <button type="button" class="btn btn-large btn-primary" disabled="disabled">Primary button</button>
- <button type="button" class="btn btn-large" disabled="disabled">Button</button>
+ <button type="button" class="btn btn-primary btn-large" disabled="disabled">Primary button</button>
+ <button type="button" class="btn btn-default btn-large" disabled="disabled">Button</button>
</p>
{% highlight html %}
<button type="button" class="btn btn-large btn-primary" disabled="disabled">Primary button</button>
-<button type="button" class="btn btn-large" disabled="disabled">Button</button>
+<button type="button" class="btn btn-default btn-large" disabled="disabled">Button</button>
{% endhighlight %}
<div class="bs-docs-sidenote">
@@ -2115,12 +2114,12 @@ For example, <code><section></code> should be wrapped as inline.
<h3>Anchor element</h3>
<p>Add the <code>.disabled</code> class to <code><a></code> buttons.</p>
<p class="bs-docs-example">
- <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
- <a href="#" class="btn btn-large disabled">Link</a>
+ <a href="#" class="btn btn-primary btn-large disabled">Primary link</a>
+ <a href="#" class="btn btn-default btn-large disabled">Link</a>
</p>
{% highlight html %}
-<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
-<a href="#" class="btn btn-large disabled">Link</a>
+<a href="#" class="btn btn-primary btn-large disabled">Primary link</a>
+<a href="#" class="btn btn-default btn-large disabled">Link</a>
{% endhighlight %}
<p>
We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.
@@ -2131,19 +2130,19 @@ For example, <code><section></code> should be wrapped as inline.
</div>
- <h2 id="buttons-tags">One class, multiple tags</h2>
- <p>Use the <code>.btn</code> class on an <code><a></code>, <code><button></code>, or <code><input></code> element.</p>
+ <h2 id="buttons-tags">Using multiple tags</h2>
+ <p>Use the button classes on an <code><a></code>, <code><button></code>, or <code><input></code> element.</p>
<form class="bs-docs-example">
- <a class="btn" href="">Link</a>
- <button class="btn" type="submit">Button</button>
- <input class="btn" type="button" value="Input">
- <input class="btn" type="submit" value="Submit">
+ <a class="btn btn-default" href="#">Link</a>
+ <button class="btn btn-default" type="submit">Button</button>
+ <input class="btn btn-default" type="button" value="Input">
+ <input class="btn btn-default" type="submit" value="Submit">
</form>
{% highlight html %}
-<a class="btn" href="">Link</a>
-<button class="btn" type="submit">Button</button>
-<input class="btn" type="button" value="Input">
-<input class="btn" type="submit" value="Submit">
+<a class="btn btn-default" href="#">Link</a>
+<button class="btn btn-default" type="submit">Button</button>
+<input class="btn btn-default" type="button" value="Input">
+<input class="btn btn-default" type="submit" value="Submit">
{% endhighlight %}
<div class="bs-docs-sidenote">
@@ -2559,20 +2558,20 @@ For example, <code><section></code> should be wrapped as inline.
<div class="bs-docs-example">
<div class="btn-toolbar">
<div class="btn-group">
- <a class="btn" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
- <a class="btn" href="#"><span class="glyphicon glyphicon-align-center"></span></a>
- <a class="btn" href="#"><span class="glyphicon glyphicon-align-right"></span></a>
- <a class="btn" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
+ <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
+ <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-center"></span></a>
+ <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-right"></span></a>
+ <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
</div>
</div>
</div><!-- /bs-docs-example -->
{% highlight html %}
<div class="btn-toolbar">
<div class="btn-group">
- <a class="btn" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
- <a class="btn" href="#"><span class="glyphicon glyphicon-align-center"></span></a>
- <a class="btn" href="#"><span class="glyphicon glyphicon-align-right"></span></a>
- <a class="btn" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
+ <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
+ <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-center"></span></a>
+ <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-right"></span></a>
+ <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
</div>
</div>
{% endhighlight %}
@@ -2598,8 +2597,8 @@ For example, <code><section></code> should be wrapped as inline.
</div><!-- /bs-docs-example -->
{% highlight html %}
<div class="btn-group">
- <a class="btn btn-primary" href="#"><span class="glyphicon glyphicon-user"></span> User</a>
- <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+ <a class="btn btn-default btn-primary" href="#"><span class="glyphicon glyphicon-user"></span> User</a>
+ <a class="btn btn-default btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Edit</a></li>
<li><a href="#"><span class="glyphicon glyphicon-trash"></span> Delete</a></li>
@@ -2612,18 +2611,18 @@ For example, <code><section></code> should be wrapped as inline.
<h5>Large button</h5>
<div class="bs-docs-example">
- <a class="btn btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
+ <a class="btn btn-default btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
</div><!-- /bs-docs-example -->
{% highlight html %}
-<a class="btn btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
+<a class="btn btn-default btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
{% endhighlight %}
<h5>Small button</h5>
<div class="bs-docs-example">
- <a class="btn btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
+ <a class="btn btn-default btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
</div><!-- /bs-docs-example -->
{% highlight html %}
-<a class="btn btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
+<a class="btn btn-default btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
{% endhighlight %}
@@ -2838,16 +2837,16 @@ For example, <code><section></code> should be wrapped as inline.
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
<div class="bs-docs-example">
<div class="btn-group" style="margin: 9px 0 5px;">
- <button type="button" class="btn">Left</button>
- <button type="button" class="btn">Middle</button>
- <button type="button" class="btn">Right</button>
+ <button type="button" class="btn btn-default">Left</button>
+ <button type="button" class="btn btn-default">Middle</button>
+ <button type="button" class="btn btn-default">Right</button>
</div>
</div>
{% highlight html %}
<div class="btn-group">
- <button type="button" class="btn">Left</button>
- <button type="button" class="btn">Middle</button>
- <button type="button" class="btn">Right</button>
+ <button type="button" class="btn btn-default">Left</button>
+ <button type="button" class="btn btn-default">Middle</button>
+ <button type="button" class="btn btn-default">Right</button>
</div>
{% endhighlight %}
@@ -2856,18 +2855,18 @@ For example, <code><section></code> should be wrapped as inline.
<div class="bs-docs-example">
<div class="btn-toolbar" style="margin: 0;">
<div class="btn-group">
- <button type="button" class="btn">1</button>
- <button type="button" class="btn">2</button>
- <button type="button" class="btn">3</button>
- <button type="button" class="btn">4</button>
+ <button type="button" class="btn btn-default">1</button>
+ <button type="button" class="btn btn-default">2</button>
+ <button type="button" class="btn btn-default">3</button>
+ <button type="button" class="btn btn-default">4</button>
</div>
<div class="btn-group">
- <button type="button" class="btn">5</button>
- <button type="button" class="btn">6</button>
- <button type="button" class="btn">7</button>
+ <button type="button" class="btn btn-default">5</button>
+ <button type="button" class="btn btn-default">6</button>
+ <button type="button" class="btn btn-default">7</button>
</div>
<div class="btn-group">
- <button type="button" class="btn">8</button>
+ <button type="button" class="btn btn-default">8</button>
</div>
</div>
</div>
@@ -2883,12 +2882,12 @@ For example, <code><section></code> should be wrapped as inline.
<p>Place buttons groups within button groups when you want dropdown menus mixed with a series of buttons.</p>
<div class="bs-docs-example">
<div class="btn-group">
- <button type="button" class="btn">1</button>
- <button type="button" class="btn">2</button>
- <button type="button" class="btn">3</button>
+ <button type="button" class="btn btn-default">1</button>
+ <button type="button" class="btn btn-default">2</button>
+ <button type="button" class="btn btn-default">3</button>
<div class="btn-group">
- <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
+ <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
@@ -2905,10 +2904,10 @@ For example, <code><section></code> should be wrapped as inline.
<p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
<div class="bs-docs-example">
<div class="btn-group btn-group-vertical">
- <button type="button" class="btn"><i class="glyphicon glyphicon-align-left"></i></button>
- <button type="button" class="btn"><i class="glyphicon glyphicon-align-center"></i></button>
- <button type="button" class="btn"><i class="glyphicon glyphicon-align-right"></i></button>
- <button type="button" class="btn"><i class="glyphicon glyphicon-align-justify"></i></button>
+ <button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-left"></i></button>
+ <button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-center"></i></button>
+ <button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-right"></i></button>
+ <button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-justify"></i></button>
</div>
</div>
{% highlight html %}
@@ -2921,9 +2920,9 @@ For example, <code><section></code> should be wrapped as inline.
<p>Make a group of buttons stretch at the same size to span the entire width of its parent. <strong>This only works with <code><a></code> elements</strong> as the <code><button></code> doesn't pick up these styles.</p>
<div class="bs-docs-example">
<div class="btn-group btn-group-justified">
- <a href="#" class="btn">Left</a>
- <a href="#" class="btn">Right</a>
- <a href="#" class="btn">Middle</a>
+ <a href="#" class="btn btn-default">Left</a>
+ <a href="#" class="btn btn-default">Right</a>
+ <a href="#" class="btn btn-default">Middle</a>
</div>
</div>
{% highlight html %}
@@ -2954,7 +2953,7 @@ For example, <code><section></code> should be wrapped as inline.
<div class="bs-docs-example">
<div class="btn-toolbar" style="margin-bottom: 10px;">
<div class="btn-group">
- <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+ <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -3008,7 +3007,7 @@ For example, <code><section></code> should be wrapped as inline.
{% highlight html %}
<!-- Single button -->
<div class="btn-group">
- <button class="btn dropdown-toggle" data-toggle="dropdown">
+ <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
@@ -3026,8 +3025,8 @@ For example, <code><section></code> should be wrapped as inline.
<div class="bs-docs-example">
<div class="btn-toolbar" style="margin: 0;">
<div class="btn-group">
- <button class="btn">Action</button>
- <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+ <button class="btn btn-default">Action</button>
+ <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -3085,8 +3084,8 @@ For example, <code><section></code> should be wrapped as inline.
{% highlight html %}
<!-- Split button -->
<div class="btn-group">
- <button class="btn">Action</button>
- <button class="btn dropdown-toggle" data-toggle="dropdown">
+ <button class="btn btn-default">Action</button>
+ <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
@@ -3104,7 +3103,7 @@ For example, <code><section></code> should be wrapped as inline.
<div class="bs-docs-example">
<div class="btn-toolbar" style="margin: 0;">
<div class="btn-group">
- <button class="btn btn-large dropdown-toggle" type="button" data-toggle="dropdown">
+ <button class="btn btn-default btn-large dropdown-toggle" type="button" data-toggle="dropdown">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
@@ -3116,7 +3115,7 @@ For example, <code><section></code> should be wrapped as inline.
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
- <button class="btn btn-small dropdown-toggle" type="button" data-toggle="dropdown">
+ <button class="btn btn-default btn-small dropdown-toggle" type="button" data-toggle="dropdown">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
@@ -3128,7 +3127,7 @@ For example, <code><section></code> should be wrapped as inline.
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
- <button class="btn btn-mini dropdown-toggle" type="button" data-toggle="dropdown">
+ <button class="btn btn-default btn-mini dropdown-toggle" type="button" data-toggle="dropdown">
Mini button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
@@ -3144,7 +3143,7 @@ For example, <code><section></code> should be wrapped as inline.
{% highlight html %}
<!-- Large button group -->
<div class="btn-group">
- <button class="btn btn-large dropdown-toggle" type="button" data-toggle="dropdown">
+ <button class="btn btn-default btn-large dropdown-toggle" type="button" data-toggle="dropdown">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
@@ -3154,7 +3153,7 @@ For example, <code><section></code> should be wrapped as inline.
<!-- Small button group -->
<div class="btn-group">
- <button class="btn btn-small dropdown-toggle" type="button" data-toggle="dropdown">
+ <button class="btn btn-default btn-small dropdown-toggle" type="button" data-toggle="dropdown">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
@@ -3164,7 +3163,7 @@ For example, <code><section></code> should be wrapped as inline.
<!-- Mini button group -->
<div class="btn-group">
- <button class="btn btn-mini dropdown-toggle" type="button" data-toggle="dropdown">
+ <button class="btn btn-default btn-mini dropdown-toggle" type="button" data-toggle="dropdown">
Mini button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
@@ -3178,8 +3177,8 @@ For example, <code><section></code> should be wrapped as inline.
<div class="bs-docs-example">
<div class="btn-toolbar">
<div class="btn-group dropup">
- <button class="btn">Dropup</button>
- <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+ <button class="btn btn-default">Dropup</button>
+ <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -3189,8 +3188,8 @@ For example, <code><section></code> should be wrapped as inline.
</ul>
</div><!-- /btn-group -->
<div class="btn-group dropup">
- <button class="btn primary">Right dropup</button>
- <button class="btn primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+ <button class="btn btn-primary">Right dropup</button>
+ <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -3203,8 +3202,8 @@ For example, <code><section></code> should be wrapped as inline.
</div><!-- /example -->
{% highlight html %}
<div class="btn-group dropup">
- <button class="btn">Dropup</button>
- <button class="btn dropdown-toggle" data-toggle="dropdown">
+ <button class="btn btn-default">Dropup</button>
+ <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
diff --git a/less/button-groups.less b/less/button-groups.less
index 3a72d90bfcfb9534a48ec0a327d6f9066b4cf682..6f9a52acd8850b1f7153b8c6e24dd70761613b8e 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 b65e3fdc7ef5a8ae15060319774d9a378d6b5fc0..128971a4c2217d36a33f562cdc37e4ac04def870 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 2323d1203192f0e55f573bace2c011a1269244ac..48e2073c5824b5ee72703bb0d6d780ca5f45f2d6 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 f6f59605a274fb9ff8527eda2ab398de2285fd8e..fd69c243865cffe8e86399ab8e00814a9824911c 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;