[BUG-3225] Transform CSS properties not working on components in coordinate containers

Hi,
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.

s

Have you tried deleting the position.rotate property?

Yes but it didn’t work.

Huh… It looks like the position.rotate property gets recreated after deleting it.

It works if you disable this transform from the developer tools.

Adding !important in your theme file should work to override that

.psc-hvac-button {
	cursor: pointer;
	filter: drop-shadow(1px 1px 2px black);
	transform: scale(1) rotate(20deg) !important;
	transition: 1s;
}

.psc-hvac-button:hover {
	transform: scale(1) rotate(180deg) !important;
	filter: drop-shadow(1px 1px 5px black);
}
1 Like

What if you tried to set position.rotate to unset?

Doesn’t work
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.

2 Likes