diff options
| -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 | ||||
| -rw-r--r-- | less/bootstrap.less | 2 | ||||
| -rw-r--r-- | less/counters.less (renamed from less/badges.less) | 28 |
5 files changed, 42 insertions, 174 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> diff --git a/less/bootstrap.less b/less/bootstrap.less index d40984230..0a4dd9ca5 100644 --- a/less/bootstrap.less +++ b/less/bootstrap.less @@ -49,7 +49,7 @@ @import "alerts.less"; @import "thumbnails.less"; @import "media.less"; -@import "badges.less"; +@import "counters.less"; @import "progress-bars.less"; @import "accordion.less"; @import "carousel.less"; diff --git a/less/badges.less b/less/counters.less index 5511bc81f..6f9cc00fc 100644 --- a/less/badges.less +++ b/less/counters.less @@ -4,9 +4,9 @@ // Base classes -.badge { +.counter { display: inline-block; - padding: 2px 4px; + padding: 2px 7px; font-size: @font-size-base * .846; font-weight: bold; line-height: 14px; // ensure proper line-height if floated @@ -15,7 +15,9 @@ white-space: nowrap; text-shadow: 0 -1px 0 rgba(0,0,0,.25); background-color: @grayLight; - border-radius: 3px; + border-radius: 10px; + min-width: 10px; + text-align: center; // Empty labels/badges collapse &:empty { @@ -24,7 +26,7 @@ } // Hover state, but only for links -a.badge { +a.counter { &:hover { color: #fff; text-decoration: none; @@ -32,29 +34,15 @@ a.badge { } } -// Colors -// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute) -.badge { - // Important (red) - &-danger { background-color: @state-error-text; } - &-danger[href] { background-color: darken(@state-error-text, 10%); } - // Warnings (orange) - &-warning { background-color: #f89406; } - &-warning[href] { background-color: darken(#f89406, 10%); } - // Success (green) - &-success { background-color: @state-success-text; } - &-success[href] { background-color: darken(@state-success-text, 10%); } -} - // Quick fix for labels/badges in buttons .btn { - .badge { + .counter { position: relative; top: -1px; } } .btn-mini { - .badge { + .counter { top: 0; } } |