I have a multistate button with custom selected and unselected styles applied to each button. These styles have been defined using the custom style GUI (Buttons/MultiState/Duty1/Selected
and Buttons/MultiState/UnSelected
).
When I disable this multi-state button I would like the buttons to gray-out. I tried adding this to the stylesheet.
.psc-Buttons/MultiState/Duty1/Selected:disabled{
background-color: var(--neutral-30);
border-color: var(--neutral-30);
}
.psc-Buttons/MultiState/UnSelected:disabled{
background-color: var(--neutral-30);
border-color: var(--neutral-30);
}
But that doesn't seem to do anything.
I also looked at the built-in CSS files to see how the buttons handle enabled/disabled and saw
.ia_button--primary--disabled {
background-color: var(--callToAction--disabled);
border: var(--border--disabled);
color: var(--neutral-30);
cursor: not-allowed;
}
So I tried
.psc-Buttons/MultiState/Duty1/Selected--disabled{
background-color: var(--neutral-30);
border-color: var(--neutral-30);
}
.psc-Buttons/MultiState/UnSelected--disabled{
background-color: var(--neutral-30);
border-color: var(--neutral-30);
}
And that did not work (I didn't really expect it to)
I can create bindings based on the enabled property of the multistate button to change the style for the buttons, but I don't really want to do that for every multi-state button that I use.
Any way to do this with the CSS stylesheet?