kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Nuked local .a() mixins and simplified the nesting

Browse source
This commit is contained in:
Artur Kwiatkowski 2013-04-22 15:34:23 +02:00
parent b7dcefea83
commit 55bbb9ffd7
2 changed files with 35 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
docs/assets/css/bootstrap.css vendored
View file

@ -4795,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;
@ -4810,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;
} }
@ -4826,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;
} }

89
less/labels.less
View file

@ -2,9 +2,7 @@
// Labels // Labels
// -------------------------------------------------- // --------------------------------------------------
// LESS base .label {
.label() {
display: inline; display: inline;
padding: .25em .6em; padding: .25em .6em;
font-size: 75%; font-size: 75%;
@ -17,8 +15,8 @@
background-color: @gray-light; background-color: @gray-light;
border-radius: .25em; border-radius: .25em;
// Hover state, but only for links - as a mixin which will be accessible as LESS shorthand: .label > .a; // Nuke the hover effects for a.label and for label[href] - for anchors
.a() { &[href], a& {
&:hover, &:hover,
&:focus { &:focus {
color: #fff; color: #fff;
@ -26,73 +24,34 @@
cursor: pointer; cursor: pointer;
} }
} }
// Colors
// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
// If there is a need for [href] then use local mixin a() via ex: .label-danger > .a; to attach additional CSS for [href] attr
.label-danger() {
background-color: @label-danger-bg;
.a() {
&[href] {
background-color: darken(@label-danger-bg, 10%);
}
}
}
.label-warning() {
background-color: @label-warning-bg;
.a() {
&[href] {
background-color: darken(@label-warning-bg, 10%);
}
}
}
.label-success() {
background-color: @label-success-bg;
.a() {
&[href] {
background-color: darken(@label-success-bg, 10%);
}
}
}
.label-info() {
background-color: @label-info-bg;
.a() {
&[href] {
background-color: darken(@label-info-bg, 10%);
}
}
}
}
// populate mixins for CSS
.label {
.label();
}
a.label {
.label > .a;
} }
// Colors
// Varying the background-color - if the a has href, then deploy darker color
.label-danger { .label-danger {
.label > .label-danger; background-color: @label-danger-bg;
.label > .label-danger > .a; // will produce .label-danger[href] class for folks who like to use class in HTML &[href] {
} background-color: darken(@label-danger-bg, 10%);
}
.label-warning {
.label > .label-warning;
.label > .label-warning > .a;
} }
.label-success { .label-success {
.label > .label-success; background-color: @label-success-bg;
.label > .label-success > .a; &[href] {
background-color: darken(@label-success-bg, 10%);
}
}
.label-warning {
background-color: @label-warning-bg;
&[href] {
background-color: darken(@label-warning-bg, 10%);
}
} }
.label-info { .label-info {
.label > .label-info; background-color: @label-info-bg;
.label > .label-info > .a; &[href] {
background-color: darken(@label-info-bg, 10%);
}
} }