Figure 1. Animation demonstrating state layer implementation.
Scaling is a way to make the appearance of an element larger or smaller. It does not change its actual size. A 24x24 pixel square div with .scaleUp__wholestep applied will still be 24x24 pixels, but it will look like it's 1.618 times larger.
Usually only recommended to use in a pinch as a combo class for when you're trying to get icons to behave. You normally want them to scale up and down by changing their font size, but sometimes it doesn't listen, and it's helpful for MVP's to just cheat. Don't tell anyone I said that was okay.
.scaleUp__wholestep {
transform: scale(var(--wholestep));
}
.scaleUp__halfstep {
transform: scale(var(--halfstep));
}
.scaleUp__quarterstep {
transform: scale(var(--quarterstep));
}
.scaleDown__wholestep {
transform: scale(calc(1 / var(--wholestep)));
}
.scaleDown__halfstep {
transform: scale(calc(1 / var(--halfstep)));
}
.scaleDown__quarterstep {
transform: scale(calc(1 / var(--quarterstep)));
}