diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index a78ab929ac..47396530a4 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -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;
diff --git a/docs/components.html b/docs/components.html
index 6710e8338e..b88e54b88c 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1342,13 +1342,49 @@
Counters
+ Basic usage
+ Counters are used to indicator unread or new items. Add a <span class="counter"> to links, Bootstrap navs, and more.
-
<a href="#">Inbox</a> <span class="counter">42</span>
+
+ Built-in styles are included for placing counters in active states in pill and list navigations.
+
+
+<ul class="nav nav-list">
+ <li class="active">
+ <a href="#">Home</a>
+ </li>
+ <li><a href="#">...</a></li>
+ <li><a href="#">...</a></li>
+</ul>
+
+
Easily collapsible
For easy implementation, counters will simply collapse (via CSS's :empty selector) when no content exists within.
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 4b1b005bd1..bbaae5f1a0 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -1271,13 +1271,49 @@
Counters
+ Basic usage
+ Counters are used to indicator unread or new items. Add a <span class="counter"> to links, Bootstrap navs, and more.
-
<a href="#">Inbox</a> <span class="counter">42</span>
+
+ Built-in styles are included for placing counters in active states in pill and list navigations.
+
+
+<ul class="nav nav-list">
+ <li class="active">
+ <a href="#">Home</a>
+ </li>
+ <li><a href="#">...</a></li>
+ <li><a href="#">...</a></li>
+</ul>
+
+
Easily collapsible
For easy implementation, counters will simply collapse (via CSS's :empty selector) when no content exists within.
diff --git a/less/counters.less b/less/counters.less
index 6f9cc00fc5..fc45fa2a66 100644
--- a/less/counters.less
+++ b/less/counters.less
@@ -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;
+}
diff --git a/less/type.less b/less/type.less
index 563cee42e7..29062be48e 100644
--- a/less/type.less
+++ b/less/type.less
@@ -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 {