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

Merge pull request #7641 from Fowowski/3.0.0-wip

Browse Source 
more nested less rules - labels component
This commit is contained in:
Mark Otto 2013-04-25 14:51:41 -07:00
commit 1fc0d2c0f1
2 changed files with 62 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4782,6 +4782,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;
@ -4794,7 +4795,9 @@ a.thumbnail:focus {
border-radius: .25em; border-radius: .25em;
} }
.label[href]:hover,
a.label:hover, a.label:hover,
.label[href]:focus,
a.label:focus { a.label:focus {
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
@ -4809,14 +4812,6 @@ a.label:focus {
background-color: #c9302c; background-color: #c9302c;
} }
.label-warning {
background-color: #f0ad4e;
}
.label-warning[href] {
background-color: #ec971f;
}
.label-success { .label-success {
background-color: #5cb85c; background-color: #5cb85c;
} }
@ -4825,6 +4820,14 @@ a.label:focus {
background-color: #449d44; background-color: #449d44;
} }
.label-warning {
background-color: #f0ad4e;
}
.label-warning[href] {
background-color: #ec971f;
}
.label-info { .label-info {
background-color: #5bc0de; background-color: #5bc0de;
} }

68
less/labels.less
View File

@ -2,45 +2,69 @@
// Labels // Labels
// -------------------------------------------------- // --------------------------------------------------
// Base classes
.label { .label {
display: inline;
padding: .25em .6em; padding: .25em .6em;
font-size: 75%; font-size: 75%;
font-weight: 500; font-weight: 500;
color: #fff;
line-height: 1; line-height: 1;
vertical-align: middle; color: #fff;
white-space: nowrap;
text-align: center; text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: @gray-light; background-color: @gray-light;
border-radius: .25em; border-radius: .25em;
}
// Hover state, but only for links // Add hover effects, but only for links
a.label { &[href] {
&:hover, &:hover,
&:focus { &:focus {
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
background-color: darken(@gray-light, 10%);
}
} }
} }
// Colors // Colors
// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute) // Contextual variations (linked labels get darker on :hover)
.label { .label-danger {
// Danger (red) background-color: @label-danger-bg;
&-danger { background-color: @label-danger-bg; } &[href] {
&-danger[href] { background-color: darken(@label-danger-bg, 10%); } &:hover,
// Warnings (orange) &:focus {
&-warning { background-color: @label-warning-bg; } background-color: darken(@label-danger-bg, 10%);
&-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%); }
} }
.label-success {
background-color: @label-success-bg;
&[href] {
&:hover,
&:focus {
background-color: darken(@label-success-bg, 10%);
}
}
}
.label-warning {
background-color: @label-warning-bg;
&[href] {
&:hover,
&:focus {
background-color: darken(@label-warning-bg, 10%);
}
}
}
.label-info {
background-color: @label-info-bg;
&[href] {
&:hover,
&:focus {
background-color: darken(@label-info-bg, 10%);
}
}
}