knownasilya/ember-toggle

Override toggle colors for specific buttons

Redsandro opened this issue · 4 comments

Redsandro commented

I'm curious if there's a better way than overriding the color values using custom css selectors and supplying a custom class name?

This is basically what I'm doing now:

.x-toggle-flip-warn {
	.x-toggle-flip {
		&::before {
			background-color: #ffff00 !important;
		}
		&::after {
			background-color: #aaaaaa !important;
		}
	}
}
knownasilya commented

That looks correct, although I'd try to avoid the !importants. Is there any way that we could make it easier for you?

Redsandro commented

If no one requested something like this before, I wouldn't spend time on it.

However I'm using color codes to toggle filters for certain labels, where on is the color of the label and off is grey. And it's nice. If you want to make this easier for others (and me), I would suggest something similar to onLabel and offLabel. E.g. onClass/offClass and/or onStyle/offStyle.

This way, one doesn't have to figure out the proper selector and keep an eye for future changes to the DOM/selector names.

knownasilya commented

I like the idea of onClass and offClass, I'll keep this open for next time I'm working on improvements here. Thanks!

  • 👍2
Redsandro commented

Great! I'll stay subscribed. If the time comes, I can update my css selectors.