Skip to content

Commit d30f47e

Browse files
mdomdo
committed
Tighten up badges docs; less bottom margin on h3
1 parent c21c3f1 commit d30f47e

File tree

5 files changed

+108
-18
lines changed

5 files changed

+108
-18
lines changed

‎docs/assets/css/bootstrap.css

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -425,13 +425,13 @@ h6 small {
425425
}
426426

427427
h1,
428-
h2,
429-
h3 {
428+
h2 {
430429
margin-top: 20px;
431430
margin-bottom: 10px;
432431
line-height: 40px;
433432
}
434433

434+
h3,
435435
h4,
436436
h5,
437437
h6 {
@@ -4006,15 +4006,14 @@ a.thumbnail:hover {
40064006
.counter {
40074007
display: inline-block;
40084008
min-width: 10px;
4009-
padding: 2px 7px;
4010-
font-size: 11.844px;
4009+
padding: 3px 7px;
4010+
font-size: 12px;
40114011
font-weight: bold;
4012-
line-height: 14px;
4012+
line-height: 1;
40134013
color: #fff;
40144014
text-align: center;
4015-
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
40164015
white-space: nowrap;
4017-
vertical-align: baseline;
4016+
vertical-align: middle;
40184017
background-color: #999999;
40194018
border-radius: 10px;
40204019
}
@@ -4038,6 +4037,16 @@ a.counter:hover {
40384037
top: 0;
40394038
}
40404039

4040+
.nav-list > .active > a > .counter,
4041+
.nav-pills > .active > a > .counter {
4042+
color: #428bca;
4043+
background-color: #fff;
4044+
}
4045+
4046+
.nav-pills > li > a > .counter {
4047+
margin-left: 3px;
4048+
}
4049+
40414050
@-webkit-keyframes progress-bar-stripes {
40424051
from {
40434052
background-position: 40px 0;

‎docs/components.html

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1342,13 +1342,49 @@ <h3>Optional disabled state</h3>
13421342
<h1>Counters</h1>
13431343
</div>
13441344

1345+
<h3>Basic usage</h3>
1346+
<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>
13451347
<div class="bs-docs-example">
13461348
<a href="#">Inbox</a> <span class="counter">42</span>
13471349
</div>
1348-
13491350
<pre class="prettyprint linenums">
13501351
&lt;a href="#"&gt;Inbox&lt;/a&gt; &lt;span class="counter"&gt;42&lt;/span&gt;
13511352
</pre>
1353+
1354+
<p>Built-in styles are included for placing counters in active states in pill and list navigations.</p>
1355+
<div class="bs-docs-example">
1356+
<ul class="nav nav-pills">
1357+
<li class="active"><a href="#">Home <span class="counter">42</span></a></li>
1358+
<li><a href="#">Profile</a></li>
1359+
<li><a href="#">Messages <span class="counter">3</span></a></li>
1360+
</ul>
1361+
<br>
1362+
<ul class="nav nav-list" style="max-width: 260px;">
1363+
<li class="active">
1364+
<a href="#">
1365+
<span class="counter pull-right">42</span>
1366+
Home
1367+
</a>
1368+
</li>
1369+
<li><a href="#">Profile</a></li>
1370+
<li>
1371+
<a href="#">
1372+
<span class="counter pull-right">3</span>
1373+
Messages
1374+
</a>
1375+
</li>
1376+
</ul>
1377+
</div>
1378+
<pre class="prettyprint linenums">
1379+
&lt;ul class="nav nav-list"&gt;
1380+
&lt;li class="active"&gt;
1381+
&lt;a href="#"&gt;Home&lt;/a&gt;
1382+
&lt;/li&gt;
1383+
&lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
1384+
&lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
1385+
&lt;/ul&gt;
1386+
</pre>
1387+
13521388
<h3>Easily collapsible</h3>
13531389
<p>For easy implementation, counters will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
13541390

‎docs/templates/pages/components.mustache

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1271,13 +1271,49 @@
12711271
<h1>Counters</h1>
12721272
</div>
12731273

1274+
<h3>Basic usage</h3>
1275+
<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>
12741276
<div class="bs-docs-example">
12751277
<a href="#">Inbox</a> <span class="counter">42</span>
12761278
</div>
1277-
12781279
<pre class="prettyprint linenums">
12791280
&lt;a href="#"&gt;Inbox&lt;/a&gt; &lt;span class="counter"&gt;42&lt;/span&gt;
12801281
</pre>
1282+
1283+
<p>Built-in styles are included for placing counters in active states in pill and list navigations.</p>
1284+
<div class="bs-docs-example">
1285+
<ul class="nav nav-pills">
1286+
<li class="active"><a href="#">Home <span class="counter">42</span></a></li>
1287+
<li><a href="#">Profile</a></li>
1288+
<li><a href="#">Messages <span class="counter">3</span></a></li>
1289+
</ul>
1290+
<br>
1291+
<ul class="nav nav-list" style="max-width: 260px;">
1292+
<li class="active">
1293+
<a href="#">
1294+
<span class="counter pull-right">42</span>
1295+
Home
1296+
</a>
1297+
</li>
1298+
<li><a href="#">Profile</a></li>
1299+
<li>
1300+
<a href="#">
1301+
<span class="counter pull-right">3</span>
1302+
Messages
1303+
</a>
1304+
</li>
1305+
</ul>
1306+
</div>
1307+
<pre class="prettyprint linenums">
1308+
&lt;ul class="nav nav-list"&gt;
1309+
&lt;li class="active"&gt;
1310+
&lt;a href="#"&gt;Home&lt;/a&gt;
1311+
&lt;/li&gt;
1312+
&lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
1313+
&lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
1314+
&lt;/ul&gt;
1315+
</pre>
1316+
12811317
<h3>Easily collapsible</h3>
12821318
<p>For easy implementation, counters will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
12831319

‎less/counters.less

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,17 @@
66
// Base classes
77
.counter {
88
display: inline-block;
9-
padding: 2px 7px;
10-
font-size: @font-size-base * .846;
9+
min-width: 10px;
10+
padding: 3px 7px;
11+
font-size: 12px;
1112
font-weight: bold;
12-
line-height: 14px; // ensure proper line-height if floated
1313
color: #fff;
14-
vertical-align: baseline;
14+
line-height: 1;
15+
vertical-align: middle;
1516
white-space: nowrap;
16-
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
17+
text-align: center;
1718
background-color: @grayLight;
1819
border-radius: 10px;
19-
min-width: 10px;
20-
text-align: center;
2120

2221
// Empty labels/badges collapse
2322
&:empty {
@@ -46,3 +45,13 @@ a.counter {
4645
top: 0;
4746
}
4847
}
48+
49+
// Account for counters in navs
50+
.nav-list > .active > a > .counter,
51+
.nav-pills > .active > a > .counter {
52+
color: @link-color;
53+
background-color: #fff;
54+
}
55+
.nav-pills > li > a > .counter {
56+
margin-left: 3px;
57+
}

‎less/type.less

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,12 +65,12 @@ h1, h2, h3, h4, h5, h6 {
6565
}
6666

6767
h1,
68-
h2,
69-
h3 {
68+
h2 {
7069
margin-top: @line-height-base;
7170
margin-bottom: @line-height-base / 2;
7271
line-height: @line-height-base * 2;
7372
}
73+
h3,
7474
h4,
7575
h5,
7676
h6 {

0 commit comments

Comments
 (0)