ui.button.css -- several rules are in px, s/b em?

Hi Steven,

Thanks for commenting. We love flexible units and try to use them on everything we can in UI.

However, our icon sprite is a fixed-size image, so we need to use pixels for any positioning, dimensions, and background-position of elements that make use of the icons.

For example, we typically size a ui-icon span at 16px x 16px. If we used ems (1.6em x 1.6em) for this, any inherited font-size larger than 10px would cause other icons in the sprite to be revealed, and any smaller font size would begin to crop the icon out of view.

The negative margins you mentioned above offset the 16px x 16px span perfectly based on half its width or height. Changing the margin value to ems would cause the icon span to offset more or less than it should, depending on the font size.

These aren't values that we want to be flexible based on font-size. They're fixed to match the image dimensions.

For the same reasons, we have to use pixels to point to icon positions in the sprite, when using background-position. Ems wouldn't work there either because the position would change depending on font-size, when really, we are always trying to find an icon at an absolute pixel location in the sprite.

A larger icon sprite would require a full new set of

All that said, the last style you show above could safely use ems, but it's not really related to the ones before it. Using ems there would just add flexibly adjusted space to the right of the button set, which may or may not be desirable depending on the interface.

Anyway, do you agree/disagree with my comments?

I'd propose marking this ticket closed and possibly changing that button set margin to .7em if you think it helps.

Thanks

-Scott