Skip to content

B
bootstrap
Commit c21c3f10 authored by Mark Otto's avatar Mark Otto
Browse files
Options

Merge branch '3.0.0-wip-badges-to-counters' of... 

Merge branch '3.0.0-wip-badges-to-counters' of https://github.com/vickash/bootstrap into vickash-3.0.0-wip-badges-to-counters
parents 64bc5dc9 67ec13a4
Show whitespace changes
Inline Side-by-side
Showing with 42 additions and 174 deletions
docs/assets/css/bootstrap.css
View file @ c21c3f10
......@@ -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;
}
......
docs/components.html
View file @ c21c3f10
......@@ -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>&lt;span class="badge"&gt;1&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>
</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">
&lt;a href="#"&gt;Inbox&lt;/a&gt; &lt;span class="counter"&gt;42&lt;/span&gt;
</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>
......
docs/templates/pages/components.mustache
View file @ c21c3f10
......@@ -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>
</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>&lt;span class="badge"&gt;1&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>
</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">
&lt;a href="#"&gt;Inbox&lt;/a&gt; &lt;span class="counter"&gt;42&lt;/span&gt;
</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>
......
less/bootstrap.less
View file @ c21c3f10
......@@ -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";
......
less/badges.less → less/counters.less
View file @ c21c3f10
......@@ -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;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment