sharpetronics/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-11-04 00:03:15 -05:00
Code Issues Projects Releases Wiki Activity

Tighten up badges docs; less bottom margin on h3

Browse Source
This commit is contained in:
Mark Otto 2013-01-19 18:53:41 -08:00
parent c21c3f101b
commit d30f47efb2
5 changed files with 108 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
docs/assets/css/bootstrap.css vendored
View File

@ -425,13 +425,13 @@ h6 small {
}
h1,
h2,
h3 {
h2 {
margin-top: 20px;
margin-bottom: 10px;
line-height: 40px;
}
h3,
h4,
h5,
h6 {
@ -4006,15 +4006,14 @@ a.thumbnail:hover {
.counter {
display: inline-block;
min-width: 10px;
padding: 2px 7px;
font-size: 11.844px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
line-height: 14px;
line-height: 1;
color: #fff;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
white-space: nowrap;
vertical-align: baseline;
vertical-align: middle;
background-color: #999999;
border-radius: 10px;
}
@ -4038,6 +4037,16 @@ a.counter:hover {
top: 0;
}
.nav-list > .active > a > .counter,
.nav-pills > .active > a > .counter {
color: #428bca;
background-color: #fff;
}
.nav-pills > li > a > .counter {
margin-left: 3px;
}
@-webkit-keyframes progress-bar-stripes {
from {
background-position: 40px 0;

38
docs/components.html
View File

@ -1342,13 +1342,49 @@
<h1>Counters</h1>
</div>
<h3>Basic usage</h3>
<p>Counters are used to indicator unread or new items. Add a <code>&lt;span class="counter"&gt;</code> to links, Bootstrap navs, and more.</p>
<div class="bs-docs-example">
<a href="#">Inbox</a> <span class="counter">42</span>
</div>
<pre class="prettyprint linenums">
&lt;a href="#"&gt;Inbox&lt;/a&gt; &lt;span class="counter"&gt;42&lt;/span&gt;
</pre>
<p>Built-in styles are included for placing counters in active states in pill and list navigations.</p>
<div class="bs-docs-example">
<ul class="nav nav-pills">
<li class="active"><a href="#">Home <span class="counter">42</span></a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages <span class="counter">3</span></a></li>
</ul>
<br>
<ul class="nav nav-list" style="max-width: 260px;">
<li class="active">
<a href="#">
<span class="counter pull-right">42</span>
Home
</a>
</li>
<li><a href="#">Profile</a></li>
<li>
<a href="#">
<span class="counter pull-right">3</span>
Messages
</a>
</li>
</ul>
</div>
<pre class="prettyprint linenums">
&lt;ul class="nav nav-list"&gt;
&lt;li class="active"&gt;
&lt;a href="#"&gt;Home&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
<h3>Easily collapsible</h3>
<p>For easy implementation, counters will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>

38
docs/templates/pages/components.mustache vendored
View File

@ -1271,13 +1271,49 @@
<h1>Counters</h1>
</div>
<h3>Basic usage</h3>
<p>Counters are used to indicator unread or new items. Add a <code>&lt;span class="counter"&gt;</code> to links, Bootstrap navs, and more.</p>
<div class="bs-docs-example">
<a href="#">Inbox</a> <span class="counter">42</span>
</div>
<pre class="prettyprint linenums">
&lt;a href="#"&gt;Inbox&lt;/a&gt; &lt;span class="counter"&gt;42&lt;/span&gt;
</pre>
<p>Built-in styles are included for placing counters in active states in pill and list navigations.</p>
<div class="bs-docs-example">
<ul class="nav nav-pills">
<li class="active"><a href="#">Home <span class="counter">42</span></a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages <span class="counter">3</span></a></li>
</ul>
<br>
<ul class="nav nav-list" style="max-width: 260px;">
<li class="active">
<a href="#">
<span class="counter pull-right">42</span>
Home
</a>
</li>
<li><a href="#">Profile</a></li>
<li>
<a href="#">
<span class="counter pull-right">3</span>
Messages
</a>
</li>
</ul>
</div>
<pre class="prettyprint linenums">
&lt;ul class="nav nav-list"&gt;
&lt;li class="active"&gt;
&lt;a href="#"&gt;Home&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
<h3>Easily collapsible</h3>
<p>For easy implementation, counters will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>

23
less/counters.less
View File

@ -6,18 +6,17 @@
// Base classes
.counter {
display: inline-block;
padding: 2px 7px;
font-size: @font-size-base * .846;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
line-height: 14px; // ensure proper line-height if floated
color: #fff;
vertical-align: baseline;
line-height: 1;
vertical-align: middle;
white-space: nowrap;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
text-align: center;
background-color: @grayLight;
border-radius: 10px;
min-width: 10px;
text-align: center;
// Empty labels/badges collapse
&:empty {
@ -46,3 +45,13 @@ a.counter {
top: 0;
}
}
// Account for counters in navs
.nav-list > .active > a > .counter,
.nav-pills > .active > a > .counter {
color: @link-color;
background-color: #fff;
}
.nav-pills > li > a > .counter {
margin-left: 3px;
}

4
less/type.less
View File

@ -65,12 +65,12 @@ h1, h2, h3, h4, h5, h6 {
}
h1,
h2,
h3 {
h2 {
margin-top: @line-height-base;
margin-bottom: @line-height-base / 2;
line-height: @line-height-base * 2;
}
h3,
h4,
h5,
h6 {