A snippet to generate an infinite amount of semantic ui colored checkboxes

README.md

Semantic UI multi colored checkboxes

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!

checkboxes.css

/* The less snippet will generates these rules */
.ui.toggle.checkbox.white input:checked ~ label {
  color: white;
}
.ui.toggle.checkbox.white input:checked ~ label:before {
  background-color: white;
}
.ui.toggle.checkbox.black input:checked ~ label {
  color: black;
}
.ui.toggle.checkbox.black input:checked ~ label:before {
  background-color: black;
}
.ui.toggle.checkbox.pink input:checked ~ label {
  color: pink;
}
.ui.toggle.checkbox.pink input:checked ~ label:before {
  background-color: pink;
}
.ui.toggle.checkbox.violet input:checked ~ label {
  color: violet;
}
.ui.toggle.checkbox.violet input:checked ~ label:before {
  background-color: violet;
}
.ui.toggle.checkbox.blue input:checked ~ label {
  color: blue;
}
.ui.toggle.checkbox.blue input:checked ~ label:before {
  background-color: blue;
}
.ui.toggle.checkbox.green input:checked ~ label {
  color: green;
}
.ui.toggle.checkbox.green input:checked ~ label:before {
  background-color: green;
}
.ui.toggle.checkbox.red input:checked ~ label {
  color: red;
}
.ui.toggle.checkbox.red input:checked ~ label:before {
  background-color: red;
}

checkboxes.html

<!-- use pink or your favorite color -->
<div class="ui toggle pink checkbox">
    <input type="checkbox" tabindex="0" class="hidden">
    <label>Is this a rainbow?</label>
</div>

checkboxes.less

// Assign the color names to @colors and you are good to go.
@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));
    } .-;
}