I’m currently working on skinning an Flex Application, and I ran in some strange CSS behavior. When you skin a datechooser component and set some styles with CSS like this:
DateChooser{
rollOverIndicatorSkin: Embed(source="/assets/skin/flex_skins2.swf", symbol="DateChooser_rollOverIndicatorSkin");
selectionIndicatorSkin: Embed(source="/assets/skin/flex_skins2.swf", symbol="DateChooser_selectionIndicatorSkin");
headerColors: #333333, #000000;
backgroundColor: #474747;
color: #a7a7a7;
headerStyleName: "mydateChooserHeaderStyle";
}
.mydateChooserHeaderStyle {
color: #a7a7a7;
} |
and insert a datefield, not all styles are applied to the build-in datechooser of the datefield (for instance, the background-color, it just stays white).
The solution to this problem is to use the date-chooser-style-name property of the datefield. You then can specify a classname for the datechooser. The problem with this solution is that you get two classes, specifying the same component.
But then I thought wait… It’s CSS right? So I can specify styles for multiple classes or containers, like this:
DateChooser, .date-chooser{
/* code here */
}
DateField{
date-chooser-style-name: "date-chooser";
} |