Skip to content

Commit c21c3f1

Browse files
mdomdo
committed
Merge branch '3.0.0-wip-badges-to-counters' of https://github.com/vickash/bootstrap into vickash-3.0.0-wip-badges-to-counters
2 parents 64bc5dc + 67ec13a commit c21c3f1

File tree

5 files changed

+42
-174
lines changed

5 files changed

+42
-174
lines changed

‎docs/assets/css/bootstrap.css

Lines changed: 9 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -4003,60 +4003,38 @@ a.thumbnail:hover {
40034003
list-style: none;
40044004
}
40054005

4006-
.badge {
4006+
.counter {
40074007
display: inline-block;
4008-
padding: 2px 4px;
4008+
min-width: 10px;
4009+
padding: 2px 7px;
40094010
font-size: 11.844px;
40104011
font-weight: bold;
40114012
line-height: 14px;
40124013
color: #fff;
4014+
text-align: center;
40134015
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
40144016
white-space: nowrap;
40154017
vertical-align: baseline;
40164018
background-color: #999999;
4017-
border-radius: 3px;
4019+
border-radius: 10px;
40184020
}
40194021

4020-
.badge:empty {
4022+
.counter:empty {
40214023
display: none;
40224024
}
40234025

4024-
a.badge:hover {
4026+
a.counter:hover {
40254027
color: #fff;
40264028
text-decoration: none;
40274029
cursor: pointer;
40284030
}
40294031

4030-
.badge-danger {
4031-
background-color: #b94a48;
4032-
}
4033-
4034-
.badge-danger[href] {
4035-
background-color: #953b39;
4036-
}
4037-
4038-
.badge-warning {
4039-
background-color: #f89406;
4040-
}
4041-
4042-
.badge-warning[href] {
4043-
background-color: #c67605;
4044-
}
4045-
4046-
.badge-success {
4047-
background-color: #468847;
4048-
}
4049-
4050-
.badge-success[href] {
4051-
background-color: #356635;
4052-
}
4053-
4054-
.btn .badge {
4032+
.btn .counter {
40554033
position: relative;
40564034
top: -1px;
40574035
}
40584036

4059-
.btn-mini .badge {
4037+
.btn-mini .counter {
40604038
top: 0;
40614039
}
40624040

‎docs/components.html

Lines changed: 13 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ <h1>Components</h1>
9393
<li><a href="#navbar"><i class="glyphicon-chevron-right"></i> Navbar</a></li>
9494
<li><a href="#breadcrumbs"><i class="glyphicon-chevron-right"></i> Breadcrumbs</a></li>
9595
<li><a href="#pagination"><i class="glyphicon-chevron-right"></i> Pagination</a></li>
96-
<li><a href="#badges"><i class="glyphicon-chevron-right"></i> Badges</a></li>
96+
<li><a href="#counters"><i class="glyphicon-chevron-right"></i> Counters</a></li>
9797
<li><a href="#typography"><i class="glyphicon-chevron-right"></i> Typography</a></li>
9898
<li><a href="#thumbnails"><i class="glyphicon-chevron-right"></i> Thumbnails</a></li>
9999
<li><a href="#alerts"><i class="glyphicon-chevron-right"></i> Alerts</a></li>
@@ -1335,71 +1335,22 @@ <h3>Optional disabled state</h3>
13351335

13361336

13371337

1338-
<!-- Badges
1338+
<!-- Counters
13391339
================================================== -->
1340-
<section id="badges">
1340+
<section id="counters">
13411341
<div class="page-header">
1342-
<h1>Badges</h1>
1343-
</div>
1344-
1345-
<table class="table table-bordered table-striped">
1346-
<thead>
1347-
<tr>
1348-
<th>Name</th>
1349-
<th>Example</th>
1350-
<th>Markup</th>
1351-
</tr>
1352-
</thead>
1353-
<tbody>
1354-
<tr>
1355-
<td>
1356-
Default
1357-
</td>
1358-
<td>
1359-
<span class="badge">1</span>
1360-
</td>
1361-
<td>
1362-
<code>&lt;span class="badge"&gt;1&lt;/span&gt;</code>
1363-
</td>
1364-
</tr>
1365-
<tr>
1366-
<td>
1367-
Success
1368-
</td>
1369-
<td>
1370-
<span class="badge badge-success">2</span>
1371-
</td>
1372-
<td>
1373-
<code>&lt;span class="badge badge-success"&gt;2&lt;/span&gt;</code>
1374-
</td>
1375-
</tr>
1376-
<tr>
1377-
<td>
1378-
Warning
1379-
</td>
1380-
<td>
1381-
<span class="badge badge-warning">4</span>
1382-
</td>
1383-
<td>
1384-
<code>&lt;span class="badge badge-warning"&gt;4&lt;/span&gt;</code>
1385-
</td>
1386-
</tr>
1387-
<tr>
1388-
<td>
1389-
Danger
1390-
</td>
1391-
<td>
1392-
<span class="badge badge-danger">6</span>
1393-
</td>
1394-
<td>
1395-
<code>&lt;span class="badge badge-danger"&gt;6&lt;/span&gt;</code>
1396-
</td>
1397-
</tr>
1398-
</tbody>
1399-
</table>
1342+
<h1>Counters</h1>
1343+
</div>
1344+
1345+
<div class="bs-docs-example">
1346+
<a href="#">Inbox</a> <span class="counter">42</span>
1347+
</div>
14001348

1349+
<pre class="prettyprint linenums">
1350+
&lt;a href="#"&gt;Inbox&lt;/a&gt; &lt;span class="counter"&gt;42&lt;/span&gt;
1351+
</pre>
14011352
<h3>Easily collapsible</h3>
1402-
<p>For easy implementation, badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
1353+
<p>For easy implementation, counters will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
14031354

14041355
</section>
14051356

‎docs/templates/pages/components.mustache

Lines changed: 11 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<li><a href="#navbar"><i class="glyphicon-chevron-right"></i> Navbar</a></li>
2323
<li><a href="#breadcrumbs"><i class="glyphicon-chevron-right"></i> Breadcrumbs</a></li>
2424
<li><a href="#pagination"><i class="glyphicon-chevron-right"></i> Pagination</a></li>
25-
<li><a href="#badges"><i class="glyphicon-chevron-right"></i> Badges</a></li>
25+
<li><a href="#counters"><i class="glyphicon-chevron-right"></i> Counters</a></li>
2626
<li><a href="#typography"><i class="glyphicon-chevron-right"></i> Typography</a></li>
2727
<li><a href="#thumbnails"><i class="glyphicon-chevron-right"></i> Thumbnails</a></li>
2828
<li><a href="#alerts"><i class="glyphicon-chevron-right"></i> Alerts</a></li>
@@ -1264,71 +1264,22 @@
12641264

12651265

12661266

1267-
<!-- Badges
1267+
<!-- Counters
12681268
================================================== -->
1269-
<section id="badges">
1269+
<section id="counters">
12701270
<div class="page-header">
1271-
<h1>Badges</h1>
1271+
<h1>Counters</h1>
12721272
</div>
12731273

1274-
<table class="table table-bordered table-striped">
1275-
<thead>
1276-
<tr>
1277-
<th>Name</th>
1278-
<th>Example</th>
1279-
<th>Markup</th>
1280-
</tr>
1281-
</thead>
1282-
<tbody>
1283-
<tr>
1284-
<td>
1285-
Default
1286-
</td>
1287-
<td>
1288-
<span class="badge">1</span>
1289-
</td>
1290-
<td>
1291-
<code>&lt;span class="badge"&gt;1&lt;/span&gt;</code>
1292-
</td>
1293-
</tr>
1294-
<tr>
1295-
<td>
1296-
Success
1297-
</td>
1298-
<td>
1299-
<span class="badge badge-success">2</span>
1300-
</td>
1301-
<td>
1302-
<code>&lt;span class="badge badge-success"&gt;2&lt;/span&gt;</code>
1303-
</td>
1304-
</tr>
1305-
<tr>
1306-
<td>
1307-
Warning
1308-
</td>
1309-
<td>
1310-
<span class="badge badge-warning">4</span>
1311-
</td>
1312-
<td>
1313-
<code>&lt;span class="badge badge-warning"&gt;4&lt;/span&gt;</code>
1314-
</td>
1315-
</tr>
1316-
<tr>
1317-
<td>
1318-
Danger
1319-
</td>
1320-
<td>
1321-
<span class="badge badge-danger">6</span>
1322-
</td>
1323-
<td>
1324-
<code>&lt;span class="badge badge-danger"&gt;6&lt;/span&gt;</code>
1325-
</td>
1326-
</tr>
1327-
</tbody>
1328-
</table>
1274+
<div class="bs-docs-example">
1275+
<a href="#">Inbox</a> <span class="counter">42</span>
1276+
</div>
13291277

1278+
<pre class="prettyprint linenums">
1279+
&lt;a href="#"&gt;Inbox&lt;/a&gt; &lt;span class="counter"&gt;42&lt;/span&gt;
1280+
</pre>
13301281
<h3>Easily collapsible</h3>
1331-
<p>For easy implementation, badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
1282+
<p>For easy implementation, counters will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
13321283

13331284
</section>
13341285

‎less/bootstrap.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
@import "alerts.less";
5050
@import "thumbnails.less";
5151
@import "media.less";
52-
@import "badges.less";
52+
@import "counters.less";
5353
@import "progress-bars.less";
5454
@import "accordion.less";
5555
@import "carousel.less";

‎less/badges.less renamed to ‎less/counters.less

Lines changed: 8 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44

55

66
// Base classes
7-
.badge {
7+
.counter {
88
display: inline-block;
9-
padding: 2px 4px;
9+
padding: 2px 7px;
1010
font-size: @font-size-base * .846;
1111
font-weight: bold;
1212
line-height: 14px; // ensure proper line-height if floated
@@ -15,7 +15,9 @@
1515
white-space: nowrap;
1616
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
1717
background-color: @grayLight;
18-
border-radius: 3px;
18+
border-radius: 10px;
19+
min-width: 10px;
20+
text-align: center;
1921

2022
// Empty labels/badges collapse
2123
&:empty {
@@ -24,37 +26,23 @@
2426
}
2527

2628
// Hover state, but only for links
27-
a.badge {
29+
a.counter {
2830
&:hover {
2931
color: #fff;
3032
text-decoration: none;
3133
cursor: pointer;
3234
}
3335
}
3436

35-
// Colors
36-
// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
37-
.badge {
38-
// Important (red)
39-
&-danger { background-color: @state-error-text; }
40-
&-danger[href] { background-color: darken(@state-error-text, 10%); }
41-
// Warnings (orange)
42-
&-warning { background-color: #f89406; }
43-
&-warning[href] { background-color: darken(#f89406, 10%); }
44-
// Success (green)
45-
&-success { background-color: @state-success-text; }
46-
&-success[href] { background-color: darken(@state-success-text, 10%); }
47-
}
48-
4937
// Quick fix for labels/badges in buttons
5038
.btn {
51-
.badge {
39+
.counter {
5240
position: relative;
5341
top: -1px;
5442
}
5543
}
5644
.btn-mini {
57-
.badge {
45+
.counter {
5846
top: 0;
5947
}
6048
}

0 commit comments

Comments
 (0)