diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/assets/css/bootstrap.css | 23 | ||||
| -rw-r--r-- | docs/components.html | 38 | ||||
| -rw-r--r-- | docs/templates/pages/components.mustache | 38 |
3 files changed, 90 insertions, 9 deletions
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index a78ab929a..47396530a 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 6710e8338..b88e54b88 100644 --- a/docs/components.html +++ b/docs/components.html @@ -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><span class="counter"></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"> <a href="#">Inbox</a> <span class="counter">42</span> </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"> +<ul class="nav nav-list"> + <li class="active"> + <a href="#">Home</a> + </li> + <li><a href="#">...</a></li> + <li><a href="#">...</a></li> +</ul> +</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> diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 4b1b005bd..bbaae5f1a 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -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><span class="counter"></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"> <a href="#">Inbox</a> <span class="counter">42</span> </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"> +<ul class="nav nav-list"> + <li class="active"> + <a href="#">Home</a> + </li> + <li><a href="#">...</a></li> + <li><a href="#">...</a></li> +</ul> +</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> |