Flex: Button style messing up FlexChrome

Question

My air app is using the FlexChrome instead of the system chrome. The problem is I also have a .CSS for skinning that sets the skins for the Button class. This is also changing the 3 buttons (minimize, maximize, close) in the flex chrome which is undesired. Is there a way to make it not effect the Flex chrome buttons?

Also the css file is in a central location and I use it for many apps so I would like not to have to change the css file but change something in my app only so I do not effect other projects. If that is doable.

Thanks!

Answer 1

One solution would be to give your custom Button style a name and then give your buttons that styleName. Perhaps not an optimum solution because you will have to do so with every button (though cascading from your primary containers would also work.)

Another solution is to set the skins for the buttons via the maximizeButtonSkin, minimizeButtonSkin, and restoreButtonSkin styles. Perhaps even just setting them to their respective defaults would work:

/**
 *  Skin for maximize button when using Flex chrome.
 *
 *  @default mx.skins.halo.WindowMaximizeButtonSkin
 */
[Style(name="maximizeButtonSkin", type="Class", inherit="no",states="up, over, down, disabled")]

/**
 *  Skin for minimize button when using Flex chrome.
 *
 *  @default mx.skins.halo.WindowMinimizeButtonSkin
 */
[Style(name="minimizeButtonSkin", type="Class", inherit="no",states="up, over, down, disabled")]

/**
 *  Skin for restore button when using Flex chrome.
 *  This style is ignored for Mac OS X.
 *
 *  @default mx.skins.halo.WindowRestoreButtonSkin
 */
[Style(name="restoreButtonSkin", type="Class", inherit="no",states="up, over, down, disabled")]