mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-28 20:52:21 +01:00
Merge branch '3.0.0-wip-badges-to-counters' of https://github.com/vickash/bootstrap into vickash-3.0.0-wip-badges-to-counters
This commit is contained in:
Mark Otto
commit
c21c3f101b
40
docs/assets/css/bootstrap.css
vendored
40
docs/assets/css/bootstrap.css
vendored
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
<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>
|
||||
|
||||
|
||||
71
docs/templates/pages/components.mustache
vendored
71
docs/templates/pages/components.mustache
vendored
@ -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>
|
||||
|
||||
|
||||
2
less/bootstrap.less
vendored
2
less/bootstrap.less
vendored
@ -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";
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user