Style Class Override Question

Ignition
,
1

Background

Hello, I have made a few style classes to display the state of an emergency stop button:
  • E-Stop-00-Base
    • - inactive state of button, dimmer colors, outset border (to mimic not being pressed)
  • E-Stop-01-A-Active
    • - active state pulsing animation
  • E-Stop-01-B-Active
    • - active state style items not allowed in animated style class, namely inset borders

My Problem

Style 01-A properly overrides style 00, but style 01-B does not. Documentation leads me to believe style classes later alphabetically (i.e. 01-A and 01-B) should always override earlier style classes. How come this does not appear to be the case?

My attempts to solve

  • I have changed unrelated elements (those not assigned in 00) of the 01-B style class to make sure it is in fact being applied to my label, and it is.
  • I have tried disabling 01-A to see if it is interfering with 01-B, but that did not appear to be the cases
  • I have tried overriding different style elements in 00 with 01-B to no success
2

What version are you using?
I’m seeing the following:
Screen Shot 2021-07-06 at 1.25.11 PM
With a style.css file which looks like this:

.psc-E-Stop-00-Base {
  text-decoration: underline;
}

.psc-E-Stop-01-A-Active {
  text-decoration: line-through;
}

.psc-E-Stop-01-B-Active {
  text-decoration: overline;
}
3

Idk how ignition handles it, but css isnt alphabetical, its about the order they are called in.
Tho ignition proabbly sorts by name so idk, check the external debugger (or browser inspector) like cmallonee shows.
And maybe show the style classes too and where you assign them to the component

4

I am using Ignition 8.0.17.

Here are the CSS styles as viewed in browser:
image

Here is what the button looks likes currently:
image

Here is what I think the button should look like:
image

5

The plot thickens. I was mucking about to try and get it to work, and I don’t know what I changed, but now it properly displays in ignition but not in a web browser.

Browser CSS: image

In browser (incorrect, no inset): image

In ignition (correct, inset): image

6

Update

@cmallonee @victordcq

I now have something that works both in browser and in ignition using four style classes instead of three. I’m not entirely sure why this solution worked when the others didn’t, but that’s just the way computers are sometimes, I suppose.

Ignition style classes:
image

Browser CSS classes (active instance):
image

Working in ignition:
image

Working in browser:
image

7

Hm every screenshot you have shown seems to be the correct css behavior.
Seems you just didnt aplly the right styles i guess.
In the last one there is no longer any overwritten style from the base style, you sure it behave correct now if its not active?
what is the css for ‘inactive’?

8

Here is the css for inactive:
image

Originally, I was using base as the inactive state with active states (supposed to be) overwriting. Now, in this solution, inactive has its own style, so there isn’t any overwriting, which seems to have solved the problem.