v8.1.0rc1
I’ve disabled a button (enabled=false) and i’ve set a style class to a custom style which has both disabled and hover element state styles. However when the button is not enabled, the hover animation still fires. How do I stop this?
Related: can I affect the colour of button icons using a style class?
Bump. @PGriffith @cmallonee ?
Found this, but not sure how/if I can apply it 
Also, I worked out with Travis how to change the button icon colour via a style. You need to set the icon colour property to unset. Then it will effectively bounce back up to a parent style definition. In the Style, define the Shape fill and bam.
That ones good to know, good find!
Style classes won’t directly support the hover:enabled pseudoclass; we’d have to add it.
As a workaround, I think you could create a class in a theme with the same name as our style classes (check browser dev tools, it’s something like psc-<name>) and apply it on your components the same way as a ‘real’ style class - that makes the migration process in the future cleaner.
This is my disabled button:
The CSS class I need to edit is: psc-Buttons/Body
I’ve tried opening up all CSS files in the Ignition directory in Notepad++ and searching for variations of this in all opened documents including just psc-Buttons, but can’t find any results
Where is the CSS for custom styles defined?
If I edit the CSS using the dev tools, I can confirm that it does work (inside the style.css file):
.psc-Buttons\/Body:hover:enabled { /* Added ':enabled' to the end */
animation-name: psc-Buttons\/Body-1-anim;
animation-delay: 0s;
animation-direction: normal;
animation-duration: 0.25s;
animation-fill-mode: both;
animation-iteration-count: 1;
animation-timing-function: ease;
}
You define your own CSS by either implementing your own theme, or customizing the ones provided. (I would implement your own)
But to test functionality first, I would find the light theme button.css file and add the style you mentioned to it first, make sure that implementing it in a theme even works to begin with.
(In a bit I’ll come back here and explain how to implement your own theme, inheriting from the included ones)
Thanks Keith, I’ve already implemented my own theme though which inherits from the light theme; I just defined a bunch of extra custom variables holding colours at the moment.
What Paul is talking about (I think) is the corresponding CSS that is produced by each Perspective Style. A style itself is not CSS per se, but rather represents a prettied CSS configuration which later is (somehow) interpreted as CSS.
E.g.
This is my style definition in the json file:
{
"base": {
"style": {
"backgroundColor": "#85B1D5",
"borderStyle": "none",
"boxShadow": "1px 1px 2px #5492C440",
"fill": "#1E3E57"
}
},
"variants": [
{
"pseudo": "disabled",
"style": {
"backgroundColor": "var(--neutral-50)",
"fill": "var(--neutral-30)"
}
},
{
"pseudo": "hover",
"animation": {
"duration": "0.25s",
"direction": "normal",
"iterationCount": "1",
"timingFunction": "ease",
"keyframes": {
"0%": {},
"100%": {
"backgroundColor": "#7AAAD1"
}
}
}
}
]
}
Whereas this is the corresponding CSS that is produced from that, as seen in the “style.css” in the dev tools when you view a Perspective view from the browser:
.psc-Buttons\/Body {
background-color: #85B1D5;
border-style: none;
box-shadow: 1px 1px 2px #5492C440;
fill: #1E3E57;
}
.psc-Buttons\/Body:disabled {
background-color: var(--neutral-50);
fill: var(--neutral-30);
}
@keyframes psc-Buttons\/Body-1-anim {
0% {
}
100% {
background-color: #7AAAD1;
}
}
.psc-Buttons\/Body:hover {
animation-name: psc-Buttons\/Body-1-anim;
animation-delay: 0s;
animation-direction: normal;
animation-duration: 0.25s;
animation-fill-mode: both;
animation-iteration-count: 1;
animation-timing-function: ease;
}
What I need to edit is the CSS, e.g. .psc-Buttons\/Body:hover and add :enabled to the end of the definition: .psc-Buttons\/Body:hover:enabled { so that the hover animation only applies when the button is enabled
At least, that’s what I assume @PGriffith is talking about
Yes I think the intent here is that by defining CSS styling for the following classes:
.psc-Buttons
.psc-Buttons\/Body:hover
.psc-Buttons\/Body:disabled
.psc-Buttons\/Body
in your custom theme, it should override the initial values built into perspective.
However, I think I am going to try to test this one out myself as well
Not perfect, BUT adding this to the css implemented in your theme will at least disable the hover action, only problem is it also strips the “Not allowed” cursor.
.psc-Buttons\/Body:disabled {
pointer-events: none;
}
Figured it may at least get you part of the way there
Style classes are dynamically inserted into a generated stylesheet on page load/update (you should be able to see it in browser dev tools when the session starts). @kgamble is correct - you'd have to implement this via a theme at present. By giving it the same naming structure as a 'real' style class, you can have it work fairly seamlessly from a designer standpoint - the only problem is future maintenance effort at the gateway level.
I'm going to file a ticket to add additional meta states, or maybe just allow dynamic input somehow - I don't think there's any real argument against adding them.
Do you know of the right CSS for us to correctly disable the hover, but not lose the “not-allowed” pointer? Or is “pointer-events” the right thing
Try the cursor CSS property: CSS cursor property