Combining custom theme pseudo classes and element states

Ignition
,
1

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

2

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);
}
3

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
4

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

2 Likes
5

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:

6

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.

7

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

1 Like
8

Hello Janis_Voss,
Would like to ask you to give me some advice.
I just start to learn the CSS stylesheet and wanted to clarify, where to find the list of how should be named the components for the CSS?
For example, if we want all labels to be with the same style, we use: .ia_labelComponent {.
The same for buttons, ia_button--primary {. But what about the other components, icons, images, and so on? And what if I want use the specific CSS style only for one label, not for all, what should be placed instead of this script: .ia_labelComponent {?

Would be very grateful for your help!

9

The best way to find what classes to use is to use the inspector in the browser togheter with the inspect element.

(for chrome this is ctrl+shift +i followed by ctrl+shift+c)
this will allow you find the elemnts easier by hovering/clicking.
it still might require you to dig a little further through the elements in the inspector (right side of the screen)

image
image1461×816 86 KB

in perspective you can add classes, this will get a suffic "psc-" so will be "psc-CLASSNAME"
you can use this to narrow down to a specifc elemnts by adding the css slsector for this class infront with a dot followed by the class ".psc-CLASSNAME .ia_labelComponent" (sometimes with or sometimes without space depending on what you want to select)
you could also use domId, but probably not as usefull in perspective.

you can look up mayn of my posts for other tips and tricks, i have answered many css related questions

1 Like