mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
Change .badge to .counter, make appearance more OSX-ish, and remove colors
This commit is contained in:
Vickash Mahabir
parent
f068cdeb63
commit
665de0455c
40
docs/assets/css/bootstrap.css
vendored
40
docs/assets/css/bootstrap.css
vendored
@ -3991,60 +3991,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;
|
||||
}
|
||||
|
||||
|
||||
@ -91,7 +91,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>
|
||||
@ -1333,11 +1333,11 @@
|
||||
|
||||
|
||||
|
||||
<!-- 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">
|
||||
@ -1354,50 +1354,17 @@
|
||||
Default
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge">1</span>
|
||||
<span class="counter">42</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>
|
||||
<code><span class="counter">42</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
47
docs/templates/pages/components.mustache
vendored
47
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,11 +1264,11 @@
|
||||
|
||||
|
||||
|
||||
<!-- 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">
|
||||
@ -1285,50 +1285,17 @@
|
||||
Default
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge">1</span>
|
||||
<span class="counter">42</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>
|
||||
<code><span class="counter">42</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<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…
Reference in New Issue
Block a user