Combining custom theme pseudo classes and element states

Hello,

We are creating a library (inheritable project), which should provide a standard look but also be as flexible as possible. Therefor we are creating our custom themes in the data/modules/… directory. So every IA component is following our style style guidelines.
Currently I am practicing on the button component and I am running in a problem. Because instead of changing the box-shadow while hovering we need to change the background color as so:

.ia_button--primary:enabled.ia_button--primary:enabled:hover,
.ia_button--secondary:enabled:hover {
    box-shadow: None; /*var(--boxShadow2);*/
    /*Added */
    background-color: var(--our-hover-background-color);
    border: 1px solid var(--our-hover-border-color);
}

Since this css code provides the basic style only, it must be possible to overwrite the properties in later projects. Using an Ignition style class is working as long as no pseudo classes are used. Currently I am trying to use Element States to change the background color from var(–our-hover-background-color) to var(–alarm-hover-background-color) while hovering. To make this work correctly I have to add the !important flag to the Element State colors. I guess it is necessary due to css rules. It seems like the more specific the definition the higher dominance (:enable:hover is more specific than :hover). This is a problem because of two reasons. First, we have to assign the !important flag to many properties. Second, a user cannot easily define and assign a new Ignition style in its own project anymore.

So my question is: Does someone know a better approach to this problem or am I missing something?

I hope my problem got clear.
I am sorry if this topic already exist. Since I couldn’t find something to this yet.

I would be very happy about any answers!
Regards

I just saw a mistake in the code sipped.

.ia_button--primary:enabled:hover,
.ia_button--secondary:enabled:hover {
    box-shadow: None; /*var(--boxShadow2);*/
    /*Added */
    background-color: var(--normal-hover-background-color);
    border: 1px solid var(--normal-enabled-border-color);
}

Well, I just found and tested a solution to this problem. If somebody runs in the same problem:

The presented code is a manipulated copy of the light theme button class. So the approach of Ignition is to combine the enable property to make sure the style doesn’t change when then button is disabled.
My workaround is to approach the problem from the other side. So in created a

.ia_button--secondary:disabled:hover{}

style. Now I am able to use the :hover pseudo classes without the :enabled pseudo class. So I am not running in the dominance problem i tried to explain.

1 Like

Good job finding a solution.

Its really a shame the theme.css files are not accesable in the designer,
This would make this a lot easier:

Due to some styles being assigned inline instead of classes sometimes its just required to use !important yeah…

What ive been doing a lot, and im not saying its perfecet either, but its just a lot easier to acces in the designer… Is “ccs injection”, you can inject css into the style classes using inverted brackets.
You’ll find a bunch of things when you look it up in the forum, as seems my methode has become quite known on here over the year xD So there must be some benefit to it eventho its not perfect :stuck_out_tongue:

Its a bit harder to understand or setup, but it might be easier for a second user to find the style and change something in it if its already predefined and named correctly…

Its also great for combinging classes, for more examples look up “.psc-” or something

1 Like

Thank you for your reply!

Yes, it would be way more practical.

Ahh, thank you. I will keep that solution in mind.

It would be a lot easier for me. Unfortunately this is not an option :frowning:

I tried that one too, but sooner or later I am running in the same issues. Because specific components may get specific colors. When I used the .ia_button–primary.psc-flat I am again more specific and can not assign ignition styles on it :frowning:

The point of creating styles with injected css in is so that its easy to override those styles in the designer, and not needed to create new styles to overrule them.

Ah okay, i will have a try. Thank you! :slight_smile:

1 Like