rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +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 {
display: inline;
padding: .25em .6em;
font-size: 75%;
font-weight: 500;
@ -4794,7 +4795,9 @@ a.thumbnail:focus {
border-radius: .25em;
}
.label[href]:hover,
a.label:hover,
.label[href]:focus,
a.label:focus {
color: #fff;
text-decoration: none;
@ -4809,14 +4812,6 @@ a.label:focus {
background-color: #c9302c;
}
.label-warning {
background-color: #f0ad4e;
}
.label-warning[href] {
background-color: #ec971f;
}
.label-success {
background-color: #5cb85c;
}
@ -4825,6 +4820,14 @@ a.label:focus {
background-color: #449d44;
}
.label-warning {
background-color: #f0ad4e;
}
.label-warning[href] {
background-color: #ec971f;
}
.label-info {
background-color: #5bc0de;
}

78
less/labels.less
View File

@ -2,45 +2,69 @@
// Labels
// --------------------------------------------------
// Base classes
.label {
display: inline;
padding: .25em .6em;
font-size: 75%;
font-weight: 500;
color: #fff;
line-height: 1;
vertical-align: middle;
white-space: nowrap;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: @gray-light;
border-radius: .25em;
}
// Hover state, but only for links
a.label {
&:hover,
&:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
// Add hover effects, but only for links
&[href] {
&:hover,
&:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
background-color: darken(@gray-light, 10%);
}
}
}
// 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-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%); }
// Contextual variations (linked labels get darker on :hover)
.label-danger {
background-color: @label-danger-bg;
&[href] {
&:hover,
&:focus {
background-color: darken(@label-danger-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%);
}
}
}