I think it is best to describe this problem in action as shown below. I create two icons, one put in flex and one in XY coordinate container. Both assign the same class from the global perspective CSS file called HVAC-button.
The one in the flex work as it should be but the one in XY coordinate doesn’t work with hover transform property. It only accepts cursor and filter property.
Have you tried deleting the
Huh… It looks like the
position.rotate property gets recreated after deleting it.
It works if you disable this transform from the developer tools.
!important in your theme file should work to override that
filter: drop-shadow(1px 1px 2px black);
transform: scale(1) rotate(20deg) !important;
transform: scale(1) rotate(180deg) !important;
filter: drop-shadow(1px 1px 5px black);
What if you tried to set position.rotate to
In previous version I just bind rotation to null and it works but in 8.1 this change and we have to use ! important
It seems like we’re adding the
[data-component="ia.container.coord"] > *[data-component] class out of order here. The cascade should flow from default component styles → style classes → inline styles (component props). Here I’m seeing the default styles being added after style classes for the coordinate container. I’ll open a ticket for investigation and a fix.