How can I create a class for a Switch with different colours for on and off

Dashboard
1

I have created a class to have a red button for some switches when they are on, different to my general dashboard theme. It works, but the problem is, its red but stays red when off.
Somehow I need to define the off state for the same class I believe ?

This is in my template:

.red-on-off * .md-thumb:before {
background-color: Red !important;
}

In my screenshot, Kitchen TRV is what I want the switch to look like when on. Study TRV shows what I want it to look like when off. Gym TRV is what is happening with my created class .red-on-off

TRV onoff

This is the switch

TRV onoff 2
TRV onoff 2503×726 10.1 KB

2

I don't think the :before pseudo element is the correct thing to colorize. Try this:

<style>
    /* state ON */
    .red-on-off md-switch.md-checked .md-thumb {
        background-color: red !important;
    }
    /* state OFF */
    .red-on-off md-switch .md-thumb {
        background-color: yellow !important;
    }    
</style>
3

I got the :before from me inspecting the page in chrome. It did work but looked odd... I also didnt know you can add another argument, so thats interesting.
Its all working fine

4

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.