rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Change .badge to .counter, make appearance more OSX-ish, and remove colors

Browse Source
This commit is contained in:
Vickash Mahabir 2013-01-18 17:35:23 -04:00
parent f068cdeb63
commit 665de0455c
5 changed files with 32 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
docs/assets/css/bootstrap.css vendored
View File

@ -3991,60 +3991,38 @@ a.thumbnail:hover {
list-style: none; list-style: none;
} }
.badge { .counter {
display: inline-block; display: inline-block;
padding: 2px 4px; min-width: 10px;
padding: 2px 7px;
font-size: 11.844px; font-size: 11.844px;
font-weight: bold; font-weight: bold;
line-height: 14px; line-height: 14px;
color: #fff; color: #fff;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
white-space: nowrap; white-space: nowrap;
vertical-align: baseline; vertical-align: baseline;
background-color: #999999; background-color: #999999;
border-radius: 3px; border-radius: 10px;
} }
.badge:empty { .counter:empty {
display: none; display: none;
} }
a.badge:hover { a.counter:hover {
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
} }
.badge-danger { .btn .counter {
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 {
position: relative; position: relative;
top: -1px; top: -1px;
} }
.btn-mini .badge { .btn-mini .counter {
top: 0; top: 0;
} }

47
docs/components.html
View File

@ -91,7 +91,7 @@
<li><a href="#navbar"><i class="glyphicon-chevron-right"></i> Navbar</a></li> <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="#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="#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="#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="#thumbnails"><i class="glyphicon-chevron-right"></i> Thumbnails</a></li>
<li><a href="#alerts"><i class="glyphicon-chevron-right"></i> Alerts</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"> <div class="page-header">
<h1>Badges</h1> <h1>Counters</h1>
</div> </div>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
@ -1354,50 +1354,17 @@
Default Default
</td> </td>
<td> <td>
<span class="badge">1</span> <span class="counter">42</span>
</td> </td>
<td> <td>
<code>&lt;span class="badge"&gt;1&lt;/span&gt;</code> <code>&lt;span class="counter"&gt;42&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
Success
</td>
<td>
<span class="badge badge-success">2</span>
</td>
<td>
<code>&lt;span class="badge badge-success"&gt;2&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
Warning
</td>
<td>
<span class="badge badge-warning">4</span>
</td>
<td>
<code>&lt;span class="badge badge-warning"&gt;4&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
Danger
</td>
<td>
<span class="badge badge-danger">6</span>
</td>
<td>
<code>&lt;span class="badge badge-danger"&gt;6&lt;/span&gt;</code>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<h3>Easily collapsible</h3> <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> </section>

47
docs/templates/pages/components.mustache vendored
View File

@ -22,7 +22,7 @@
<li><a href="#navbar"><i class="glyphicon-chevron-right"></i> Navbar</a></li> <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="#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="#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="#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="#thumbnails"><i class="glyphicon-chevron-right"></i> Thumbnails</a></li>
<li><a href="#alerts"><i class="glyphicon-chevron-right"></i> Alerts</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"> <div class="page-header">
<h1>Badges</h1> <h1>Counters</h1>
</div> </div>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
@ -1285,50 +1285,17 @@
Default Default
</td> </td>
<td> <td>
<span class="badge">1</span> <span class="counter">42</span>
</td> </td>
<td> <td>
<code>&lt;span class="badge"&gt;1&lt;/span&gt;</code> <code>&lt;span class="counter"&gt;42&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
Success
</td>
<td>
<span class="badge badge-success">2</span>
</td>
<td>
<code>&lt;span class="badge badge-success"&gt;2&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
Warning
</td>
<td>
<span class="badge badge-warning">4</span>
</td>
<td>
<code>&lt;span class="badge badge-warning"&gt;4&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
Danger
</td>
<td>
<span class="badge badge-danger">6</span>
</td>
<td>
<code>&lt;span class="badge badge-danger"&gt;6&lt;/span&gt;</code>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<h3>Easily collapsible</h3> <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> </section>

2
less/bootstrap.less vendored
View File

@ -49,7 +49,7 @@
@import "alerts.less"; @import "alerts.less";
@import "thumbnails.less"; @import "thumbnails.less";
@import "media.less"; @import "media.less";
@import "badges.less"; @import "counters.less";
@import "progress-bars.less"; @import "progress-bars.less";
@import "accordion.less"; @import "accordion.less";
@import "carousel.less"; @import "carousel.less";

28
less/badges.less → less/counters.less
View File

@ -4,9 +4,9 @@
// Base classes // Base classes
.badge { .counter {
display: inline-block; display: inline-block;
padding: 2px 4px; padding: 2px 7px;
font-size: @font-size-base * .846; font-size: @font-size-base * .846;
font-weight: bold; font-weight: bold;
line-height: 14px; // ensure proper line-height if floated line-height: 14px; // ensure proper line-height if floated
@ -15,7 +15,9 @@
white-space: nowrap; white-space: nowrap;
text-shadow: 0 -1px 0 rgba(0,0,0,.25); text-shadow: 0 -1px 0 rgba(0,0,0,.25);
background-color: @grayLight; background-color: @grayLight;
border-radius: 3px; border-radius: 10px;
min-width: 10px;
text-align: center;
// Empty labels/badges collapse // Empty labels/badges collapse
&:empty { &:empty {
@ -24,7 +26,7 @@
} }
// Hover state, but only for links // Hover state, but only for links
a.badge { a.counter {
&:hover { &:hover {
color: #fff; color: #fff;
text-decoration: none; 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 // Quick fix for labels/badges in buttons
.btn { .btn {
.badge { .counter {
position: relative; position: relative;
top: -1px; top: -1px;
} }
} }
.btn-mini { .btn-mini {
.badge { .counter {
top: 0; top: 0;
} }
} }