| <?xml version="1.0"?> |
| <!-- |
| |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You under the Apache License, Version 2.0 |
| (the "License"); you may not use this file except in compliance with |
| the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| |
| --> |
| <!-- Simple example to demonstrate the pseudo selectors --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:custom="*"> |
| <fx:Style> |
| @namespace s "library://ns.adobe.com/flex/spark"; |
| @namespace mx "library://ns.adobe.com/flex/mx"; |
| s|Button:up { |
| chromeColor: #000000; |
| color: #FFFFFF; |
| } |
| |
| s|Button:over { |
| chromeColor: #484848; |
| fontWeight: "bold"; |
| color: #FFFFFF; |
| } |
| |
| s|Button:down { |
| chromeColor: #484848; |
| fontWeight: "bold"; |
| color: #FFFF66; |
| } |
| |
| mx|Box:normal { |
| fontSize: 10; |
| } |
| |
| mx|Box:zoomed { |
| fontSize: 20; |
| color: #330066; |
| } |
| |
| </fx:Style> |
| <fx:Script> |
| <![CDATA[ |
| private function changeCompState(): void |
| { |
| if(dateComp.currentState=='zoomed') |
| { |
| dateComp.currentState = 'normal'; |
| } |
| else |
| { |
| dateComp.currentState = 'zoomed'; |
| } |
| } |
| ]]> |
| </fx:Script> |
| <s:Panel title="Advanced CSS: Pseudo Selector Example" height="75%" width="75%" |
| horizontalCenter="0" verticalCenter="0"> |
| <s:Label text="The Spark Button below uses pseudo selectors to define its chromeColor for each of its states." |
| x="10" y="10" /> |
| <s:Button id="submitButton" label="Submit Form" x="10" y="35"/> |
| |
| <s:Button label="change halo state" click="changeCompState()" x="10" y="65"/> |
| <custom:DateStateComp id="dateComp" currentState="normal" x="140" y="35"/> |
| |
| </s:Panel> |
| </s:Application> |