Skip to content

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

Bring back the label, make it scale somewhat with the font-size of the parent... 

Bring back the label, make it scale somewhat with the font-size of the parent using percentages and ems
parent f6ec2c5d
Show whitespace changes
Inline Side-by-side
Showing with 186 additions and 0 deletions
docs/assets/css/bootstrap.css
View file @ acdffe69
......@@ -4263,6 +4263,58 @@ a.thumbnail:focus {
list-style: none;
}
.label {
padding: .25em .6em;
font-size: 75%;
font-weight: 500;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: #999999;
border-radius: .25em;
}
a.label:hover,
a.label:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
}
.label-danger {
background-color: #d9534f;
}
.label-danger[href] {
background-color: #c9302c;
}
.label-warning {
background-color: #f0ad4e;
}
.label-warning[href] {
background-color: #ec971f;
}
.label-success {
background-color: #5cb85c;
}
.label-success[href] {
background-color: #449d44;
}
.label-info {
background-color: #5bc0de;
}
.label-info[href] {
background-color: #31b0d5;
}
.badge {
display: inline-block;
min-width: 10px;
......
docs/components.html
View file @ acdffe69
......@@ -28,6 +28,7 @@ title: Components
<li><a href="#navbar"><i class="glyphicon glyphicon-chevron-right"></i> Navbar</a></li>
<li><a href="#breadcrumbs"><i class="glyphicon glyphicon-chevron-right"></i> Breadcrumbs</a></li>
<li><a href="#pagination"><i class="glyphicon glyphicon-chevron-right"></i> Pagination</a></li>
<li><a href="#labels"><i class="glyphicon glyphicon-chevron-right"></i> Labels</a></li>
<li><a href="#badges"><i class="glyphicon glyphicon-chevron-right"></i> Badges</a></li>
<li><a href="#typography"><i class="glyphicon glyphicon-chevron-right"></i> Typography</a></li>
<li><a href="#thumbnails"><i class="glyphicon glyphicon-chevron-right"></i> Thumbnails</a></li>
......@@ -1274,6 +1275,84 @@ title: Components
<!-- Labels
================================================== -->
<section id="counters">
<div class="page-header">
<h1>Labels</h1>
</div>
<p class="lead"></p>
<h3>Example</h3>
<div class="bs-docs-example">
<h1>Example heading <span class="label">New</span></h1>
<h2>Example heading <span class="label">New</span></h2>
<h3>Example heading <span class="label">New</span></h3>
<h4>Example heading <span class="label">New</span></h4>
<h5>Example heading <span class="label">New</span></h5>
<h6>Example heading <span class="label">New</span></h6>
</div>
{% highlight html linenos %}
<h3>Example heading <span class="label">New</span></h3>
{% endhighlight %}
<h3>Available variations</h3>
<p>Add any of the below mentioned modifier classes to change the appearance of a label.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Labels</th>
<th>Markup</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="label">Default</span>
</td>
<td>
<code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-success">Success</span>
</td>
<td>
<code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-warning">Warning</span>
</td>
<td>
<code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-danger">Danger</span>
</td>
<td>
<code>&lt;span class="label label-danger"&gt;Danger&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-info">Info</span>
</td>
<td>
<code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>
</td>
</tr>
</tbody>
</table>
</section>
<!-- Badges
================================================== -->
<section id="badges">
......
less/bootstrap.less
View file @ acdffe69
......@@ -49,6 +49,7 @@
@import "alerts.less";
@import "thumbnails.less";
@import "media.less";
@import "labels.less";
@import "badges.less";
@import "progress-bars.less";
@import "accordion.less";
......
less/labels.less 0 → 100644
View file @ acdffe69
//
// Labels
// --------------------------------------------------
// Base classes
.label {
padding: .25em .6em;
font-size: 75%;
font-weight: 500;
color: #fff;
line-height: 1;
vertical-align: middle;
white-space: nowrap;
text-align: center;
background-color: @grayLight;
border-radius: .25em;
}
// Hover state, but only for links
a.label {
&:hover,
&:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
}
}
// Colors
// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
.label {
// Danger (red)
&-danger { background-color: @label-danger-background; }
&-danger[href] { background-color: darken(@label-danger-background, 10%); }
// Warnings (orange)
&-warning { background-color: @label-warning-background; }
&-warning[href] { background-color: darken(@label-warning-background, 10%); }
// Success (green)
&-success { background-color: @label-success-background; }
&-success[href] { background-color: darken(@label-success-background, 10%); }
// Info (turquoise)
&-info { background-color: @label-info-background; }
&-info[href] { background-color: darken(@label-info-background, 10%); }
}
less/variables.less
View file @ acdffe69
......@@ -271,6 +271,14 @@
@popover-arrow-outer-color: rgba(0,0,0,.25);
// Labels
// -------------------------
@label-success-background: @brand-success;
@label-info-background: @brand-info;
@label-warning-background: @brand-warning;
@label-danger-background: @brand-danger;
// Modals
// -------------------------
......
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