mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-16 18:44:01 +02:00
Code Issues Releases Wiki Activity

more nested labels component

Browse Source
This commit is contained in:
Artur Kwiatkowski
2013-04-19 21:31:55 +02:00
parent 61ea1ae909
commit 39bb8146f8
2 changed files with 77 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4784,6 +4784,7 @@ a.thumbnail:focus {
} }
.label { .label {
display: inline;
padding: .25em .6em; padding: .25em .6em;
font-size: 75%; font-size: 75%;
font-weight: 500; font-weight: 500;

100
less/labels.less
View File

@@ -2,9 +2,10 @@
// Labels // Labels
// -------------------------------------------------- // --------------------------------------------------
// LESS base
// Base classes .label() {
.label { display: inline;
padding: .25em .6em; padding: .25em .6em;
font-size: 75%; font-size: 75%;
font-weight: 500; font-weight: 500;
@@ -15,32 +16,83 @@
text-align: center; text-align: center;
background-color: @grayLight; background-color: @grayLight;
border-radius: .25em; border-radius: .25em;
}
// Hover state, but only for links //hover state, but only for links - as a mixin which will be accessible as LESS shorthand: .label > .a;
a.label { .a() {
&:hover, &:hover,
&:focus { &:focus {
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
}
}
// Colors
// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
// Constructed as parametric mixin so it wont overproduce [href] by default - only for elements that will have arg link passed to local .is mixin
.label-danger() {
background-color: @label-danger-bg;
.is(@arg) when (@arg = link) {
&[href] {
background-color: darken(@label-danger-bg, 10%);
}
}
}
.label-warning() {
background-color: @label-warning-bg;
.is(@arg) when (@arg = link) {
&[href] {
background-color: darken(@label-warning-bg, 10%);
}
}
}
.label-success() {
background-color: @label-success-bg;
.is(@arg) when (@arg = link) {
&[href] {
background-color: darken(@label-success-bg, 10%);
}
}
}
.label-info() {
background-color: @label-info-bg;
.is(@arg) when (@arg = link) {
&[href] {
background-color: darken(@label-info-bg, 10%);
}
}
} }
} }
// Colors // populate mixins for CSS
// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
.label { .label {
// Danger (red) .label();
&-danger { background-color: @label-danger-bg; }
&-danger[href] { background-color: darken(@label-danger-bg, 10%); }
// Warnings (orange)
&-warning { background-color: @label-warning-bg; }
&-warning[href] { background-color: darken(@label-warning-bg, 10%); }
// Success (green)
&-success { background-color: @label-success-bg; }
&-success[href] { background-color: darken(@label-success-bg, 10%); }
// Info (turquoise)
&-info { background-color: @label-info-bg; }
&-info[href] { background-color: darken(@label-info-bg, 10%); }
} }
a.label {
.label > .a;
}
.label-danger {
.label > .label-danger;
.label > .label-danger > .is(link); // will produce .label-danger[href] class for folks who like to use class in HTML
}
.label-warning {
.label > .label-warning;
.label > .label-warning > .is(link);
}
.label-success {
.label > .label-success;
.label > .label-success > .is(link);
}
.label-info {
.label > .label-info;
.label > .label-info > .is(link);
}