Checkbox - inverted checkbox have black test when checked

[etshy]

Bug Report

Steps to reproduce

1. Check a toggleCheckbox

Expected result

The label stay in white

Actual result

the label become black.

Testcase

https://jsfiddle.net/L27zd9mg/

Version

2.7.1

Edit : A little question at the same time, about Checkbox toggle : Is it possible to override the blue background color in the toggle ?

[lubber-de]

You have to use ui inverted checkbox toggle, then it works as expected
See https://jsfiddle.net/0zmvkd2a/

[lubber-de]

Overriding the blue color can be achieved by either changing @toggleOnLaneColor and @toggleOnFocusLaneColor in checkbox.variables and re-compile fomantic or as follows in your app

.ui.inverted.toggle.checkbox input:checked ~ .box:before,
.ui.inverted.toggle.checkbox input:checked ~ label:before,
.ui.inverted.toggle.checkbox input:focus:checked ~ .box:before,
.ui.inverted.toggle.checkbox input:focus:checked ~ label:before {
    background-color: #ff0000 !important;
}

See: https://jsfiddle.net/0zmvkd2a/1/

[etshy]

I didn't know the .inverted could be used with checkbox, thanks.

EDIT: I still thing it's weird to have to use inverted in the checkbox toggle when you don't need to use it with normal checkbox.
When the form has the inverted class, the checkbox toggle should behave like an inverted checkbox toggle, without having to add the class again, no ?

END EDIT

---

For the color change, it could be better if we can add the color classes to change it (+ a background class to not change the text color, maybe).
like .ui.toggle.checkbox[class*="red background"] input:checked~.box:before, .ui.toggle.checkbox[class*="red background"] input:checked~label:before for example.

It'll allow to change the color without having to compile (and will allow multiple background color at the same time)

[lubber-de]

No, the inverted Form does actually only change the field label colors. We already discussed making inverted Form elements more consistent and with unique inherited behavior, but this will be a heavy change, so this is gonna be something we consider in 3.0

Please create another feature request for the toggle color... I already had this in mind 😉

[lubber-de]

inverted form does indeed also change some input field colors, but radio/checkbox is a special/separate element, that's why it's necessary to add inverted to the toggle in your case

As said, we will focus on optimizing this aswell in a future release 🙂

[etshy]

Ok nice.

I'll create a feature request for toggle color then.