diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/assets/css/bootstrap.css | 40 | ||||
| -rw-r--r-- | docs/components.html | 75 | ||||
| -rw-r--r-- | docs/templates/pages/components.mustache | 71 |
3 files changed, 33 insertions, 153 deletions
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 1c7bf11bb..a78ab929a 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -4003,60 +4003,38 @@ a.thumbnail:hover { list-style: none; } -.badge { +.counter { display: inline-block; - padding: 2px 4px; + min-width: 10px; + padding: 2px 7px; font-size: 11.844px; font-weight: bold; line-height: 14px; color: #fff; + text-align: center; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); white-space: nowrap; vertical-align: baseline; background-color: #999999; - border-radius: 3px; + border-radius: 10px; } -.badge:empty { +.counter:empty { display: none; } -a.badge:hover { +a.counter:hover { color: #fff; text-decoration: none; cursor: pointer; } -.badge-danger { - background-color: #b94a48; -} - -.badge-danger[href] { - background-color: #953b39; -} - -.badge-warning { - background-color: #f89406; -} - -.badge-warning[href] { - background-color: #c67605; -} - -.badge-success { - background-color: #468847; -} - -.badge-success[href] { - background-color: #356635; -} - -.btn .badge { +.btn .counter { position: relative; top: -1px; } -.btn-mini .badge { +.btn-mini .counter { top: 0; } diff --git a/docs/components.html b/docs/components.html index 1c98fdd46..6710e8338 100644 --- a/docs/components.html +++ b/docs/components.html @@ -93,7 +93,7 @@ <li><a href="#navbar"><i class="glyphicon-chevron-right"></i> Navbar</a></li> <li><a href="#breadcrumbs"><i class="glyphicon-chevron-right"></i> Breadcrumbs</a></li> <li><a href="#pagination"><i class="glyphicon-chevron-right"></i> Pagination</a></li> - <li><a href="#badges"><i class="glyphicon-chevron-right"></i> Badges</a></li> + <li><a href="#counters"><i class="glyphicon-chevron-right"></i> Counters</a></li> <li><a href="#typography"><i class="glyphicon-chevron-right"></i> Typography</a></li> <li><a href="#thumbnails"><i class="glyphicon-chevron-right"></i> Thumbnails</a></li> <li><a href="#alerts"><i class="glyphicon-chevron-right"></i> Alerts</a></li> @@ -1335,71 +1335,22 @@ - <!-- Badges + <!-- Counters ================================================== --> - <section id="badges"> + <section id="counters"> <div class="page-header"> - <h1>Badges</h1> - </div> - - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th>Name</th> - <th>Example</th> - <th>Markup</th> - </tr> - </thead> - <tbody> - <tr> - <td> - Default - </td> - <td> - <span class="badge">1</span> - </td> - <td> - <code><span class="badge">1</span></code> - </td> - </tr> - <tr> - <td> - Success - </td> - <td> - <span class="badge badge-success">2</span> - </td> - <td> - <code><span class="badge badge-success">2</span></code> - </td> - </tr> - <tr> - <td> - Warning - </td> - <td> - <span class="badge badge-warning">4</span> - </td> - <td> - <code><span class="badge badge-warning">4</span></code> - </td> - </tr> - <tr> - <td> - Danger - </td> - <td> - <span class="badge badge-danger">6</span> - </td> - <td> - <code><span class="badge badge-danger">6</span></code> - </td> - </tr> - </tbody> - </table> + <h1>Counters</h1> + </div> + + <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> <h3>Easily collapsible</h3> - <p>For easy implementation, badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p> + <p>For easy implementation, counters will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p> </section> diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index f78132a44..4b1b005bd 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -22,7 +22,7 @@ <li><a href="#navbar"><i class="glyphicon-chevron-right"></i> Navbar</a></li> <li><a href="#breadcrumbs"><i class="glyphicon-chevron-right"></i> Breadcrumbs</a></li> <li><a href="#pagination"><i class="glyphicon-chevron-right"></i> Pagination</a></li> - <li><a href="#badges"><i class="glyphicon-chevron-right"></i> Badges</a></li> + <li><a href="#counters"><i class="glyphicon-chevron-right"></i> Counters</a></li> <li><a href="#typography"><i class="glyphicon-chevron-right"></i> Typography</a></li> <li><a href="#thumbnails"><i class="glyphicon-chevron-right"></i> Thumbnails</a></li> <li><a href="#alerts"><i class="glyphicon-chevron-right"></i> Alerts</a></li> @@ -1264,71 +1264,22 @@ - <!-- Badges + <!-- Counters ================================================== --> - <section id="badges"> + <section id="counters"> <div class="page-header"> - <h1>Badges</h1> + <h1>Counters</h1> </div> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th>Name</th> - <th>Example</th> - <th>Markup</th> - </tr> - </thead> - <tbody> - <tr> - <td> - Default - </td> - <td> - <span class="badge">1</span> - </td> - <td> - <code><span class="badge">1</span></code> - </td> - </tr> - <tr> - <td> - Success - </td> - <td> - <span class="badge badge-success">2</span> - </td> - <td> - <code><span class="badge badge-success">2</span></code> - </td> - </tr> - <tr> - <td> - Warning - </td> - <td> - <span class="badge badge-warning">4</span> - </td> - <td> - <code><span class="badge badge-warning">4</span></code> - </td> - </tr> - <tr> - <td> - Danger - </td> - <td> - <span class="badge badge-danger">6</span> - </td> - <td> - <code><span class="badge badge-danger">6</span></code> - </td> - </tr> - </tbody> - </table> + <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> <h3>Easily collapsible</h3> - <p>For easy implementation, badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p> + <p>For easy implementation, counters will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p> </section> |