See - http://semantic-ui.com
A snippet to generate an infinite amount of colored checkboxes for (less)
@colors: red, green, blue, violet, pink, black, white;
.ui.toggle.checkbox {
.-(@i: length(@colors)) when (@i > 0) {
@c: extract(@colors, @i);
&.@{c} {
input:checked~label {
color: @c;
&:before { background-color: @c; }
}
}
.-((@i - 1));
} .-;
}
Assign the color names to @colors and you are good to go.
Usage (html)
<div class="ui toggle pink checkbox">
<input type="checkbox" tabindex="0" class="hidden">
<label>Is this a rainbow?</label>
</div>
This overflow came in handy!