Created by: ArturKwiatkowski
A more nested version of labels component.
When you have an unordered list, single list-item or element which you want to convert magically into a labels through your LESS mastersheet you can do:
<section>
<ul>
<li>Default</li>
<li>Success</li>
<li>Warning</li>
<li>Danger</li>
<li>Info</li>
</ul>
</section>
section {
ul {
.list-unstyled; // make this list clean
li {
.label; // 1. execute .label props eg. define that this element is styled like via .label class
&:nth-child(2) {
.label > .label-success; // 2. execute proper style type eg. like i would use class name .label-success on this elem.
}
&:nth-child(3) {
.label > .label-warning;
}
&:nth-child(4) {
.label > .label-danger;
}
&:last-child{
.label > .label-info;
}
}
}
}
Labels are cool but having an option to style a clean unordered list through LESS mastersheet which imports bootstrap is even more cool. In above example you can see how simple it is to transform a list-item into a specific label type.
And what if you have anchors inside those list-items which should behave and look as we would attach a specific label class to them?
<section>
<ul>
<li><a href="#">Default</a></li>
<li><a href="#">Success</a></li>
<li><a href="#">Warning</a></li>
<li><a href="#">Danger</a></li>
<li><a href="#">Info</a></li>
</ul>
</section>
Style them like that:
section {
ul {
.list-unstyled; // make this list clean
li {
display: inline-block; // tweak the list items to behave as inline-block
a {
.label; // 1. execute .label props, define that this element is styled like via class .label
.label > .a; // 2. because we're styling "a" elements we need to execute hover and focus on them... somehow :)
}
//adjusting specific list item "a" elements
&:nth-child(2) {
a {
.label > .label-success > .a; // 3. define that this element is treated like [href] element
}
}
&:nth-child(3) {
a {
.label > .label-warning > .a;
}
}
&:nth-child(4) {
a {
.label > .label-danger > .a;
}
}
&:last-child{
a {
.label > .label-info > .a;
}
}
}
}
}
The second example is more difficult. Since we dont want overproduction of CSS code in our first example we need a special mixin (for second example) which will style "a" element particulary as a [href] link. This mixin is a local one and if used will produce additional css for [href].
.label-danger() {
background-color: @label-danger-bg;
.a() {
&[href] {
background-color: darken(@label-danger-bg, 10%);
}
}
}
So basically if you use extra .a() then you'll get additional css for [href]. Withouth this mixin when styling list-item element we could end up with something like this:
section ul li:nth-child(2)[href] {}
which makes no sense since it's not an anchor element.
The LESS stylesheet differs a lot from the original one but in the end it produces the same compiled CSS code (beside display: inline on .label). It also gives an option for folks who are crazy about their semantics (or too lazy to mess with the HTML class attributes :)) to style their HTML elements to look and behave as bootstrap labels.
I think the docs should describe this whole LESS-side-styling case but I would like to extend it after finishing off other components - if someone else could do that for us in the mean time it would be OK.
Enjoy! PS. Im very curious what do you think about this one.
Tested on: Firefox 20.0.1, Chrome 26.0.1410.64 m, Internet Explorer 10.0.9200.16521
edit: i've replaced parametric .is() mixin with local non-parametric .a() mixin because there was really no point in passing any parameter.