diff options
| -rw-r--r-- | docs/assets/css/bootstrap.css | 52 | ||||
| -rw-r--r-- | docs/components.html | 79 | ||||
| -rw-r--r-- | less/bootstrap.less | 1 | ||||
| -rw-r--r-- | less/labels.less | 46 | ||||
| -rw-r--r-- | less/variables.less | 8 |
5 files changed, 186 insertions, 0 deletions
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index db65570fc..cb8482a9f 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -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; diff --git a/docs/components.html b/docs/components.html index 53b4a7e08..f1b45159b 100644 --- a/docs/components.html +++ b/docs/components.html @@ -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><span class="label">Default</span></code> + </td> + </tr> + <tr> + <td> + <span class="label label-success">Success</span> + </td> + <td> + <code><span class="label label-success">Success</span></code> + </td> + </tr> + <tr> + <td> + <span class="label label-warning">Warning</span> + </td> + <td> + <code><span class="label label-warning">Warning</span></code> + </td> + </tr> + <tr> + <td> + <span class="label label-danger">Danger</span> + </td> + <td> + <code><span class="label label-danger">Danger</span></code> + </td> + </tr> + <tr> + <td> + <span class="label label-info">Info</span> + </td> + <td> + <code><span class="label label-info">Info</span></code> + </td> + </tr> + </tbody> + </table> + + </section> + + + <!-- Badges ================================================== --> <section id="badges"> diff --git a/less/bootstrap.less b/less/bootstrap.less index d40984230..60d166368 100644 --- a/less/bootstrap.less +++ b/less/bootstrap.less @@ -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"; diff --git a/less/labels.less b/less/labels.less new file mode 100644 index 000000000..2592d0444 --- /dev/null +++ b/less/labels.less @@ -0,0 +1,46 @@ +// +// 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%); } +} + diff --git a/less/variables.less b/less/variables.less index 9eb84ddaa..2b6fa6e1b 100644 --- a/less/variables.less +++ b/less/variables.less @@ -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 // ------------------------- |