Fixes #6148: Icons in mini buttons properly aligned

This commit is contained in:
Mark Otto 2012-12-07 09:51:01 -08:00
parent cc6fda2262
commit be45a821bb
4 changed files with 19 additions and 20 deletions

View File

@ -3258,6 +3258,11 @@ button.close {
margin-top: 0; margin-top: 0;
} }
.btn-mini [class^="icon-"],
.btn-mini [class*=" icon-"] {
margin-top: -1px;
}
.btn-mini { .btn-mini {
padding: 0 6px; padding: 0 6px;
font-size: 10.5px; font-size: 10.5px;

View File

@ -2078,23 +2078,18 @@ For example, <code><section></code> should be wrapped as inlin
</div> </div>
</pre> </pre>
<h5>Large button</h5> <h5>Button sizes</h5>
<div class="bs-docs-example"> <div class="bs-docs-example">
<a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a> <a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>
<a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a>
<a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;a class="btn btn-large" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt; Star&lt;/a&gt; &lt;a class="btn btn-large" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt; Star&lt;/a&gt;
&lt;a class="btn btn-small" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt; Star&lt;/a&gt;
&lt;a class="btn btn-mini" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt; Star&lt;/a&gt;
</pre> </pre>
<h5>Small button</h5>
<div class="bs-docs-example">
<a class="btn btn-small" href="#"><i class="icon-star"></i></a>
</div>
<pre class="prettyprint linenums">
&lt;a class="btn btn-small" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt;&lt;/a&gt;
</pre>
<h4>Navigation</h4> <h4>Navigation</h4>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="well" style="padding: 8px 0; margin-bottom: 0;"> <div class="well" style="padding: 8px 0; margin-bottom: 0;">

View File

@ -2015,23 +2015,18 @@
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
<h5>{{_i}}Large button{{/i}}</h5> <h5>{{_i}}Button sizes{{/i}}</h5>
<div class="bs-docs-example"> <div class="bs-docs-example">
<a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a> <a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>
<a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a>
<a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>
</div>{{! /bs-docs-example }} </div>{{! /bs-docs-example }}
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;a class="btn btn-large" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt; Star&lt;/a&gt; &lt;a class="btn btn-large" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt; Star&lt;/a&gt;
&lt;a class="btn btn-small" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt; Star&lt;/a&gt;
&lt;a class="btn btn-mini" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt; Star&lt;/a&gt;
</pre> </pre>
<h5>{{_i}}Small button{{/i}}</h5>
<div class="bs-docs-example">
<a class="btn btn-small" href="#"><i class="icon-star"></i></a>
</div>{{! /bs-docs-example }}
<pre class="prettyprint linenums">
&lt;a class="btn btn-small" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt;&lt;/a&gt;
</pre>
<h4>{{_i}}Navigation{{/i}}</h4> <h4>{{_i}}Navigation{{/i}}</h4>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="well" style="padding: 8px 0; margin-bottom: 0;"> <div class="well" style="padding: 8px 0; margin-bottom: 0;">

View File

@ -86,6 +86,10 @@
.btn-small [class*=" icon-"] { .btn-small [class*=" icon-"] {
margin-top: 0; margin-top: 0;
} }
.btn-mini [class^="icon-"],
.btn-mini [class*=" icon-"] {
margin-top: -1px;
}
// Mini // Mini
.btn-mini { .btn-mini {