1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

<?xml version="1.0" encoding="utf-8"?>
<degrafa:GraphicRectangularBorderSkin xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:degrafa="http://www.degrafa.com/2007" xmlns:utils="info.joshmcdonald.barra.utils.*">

    <mx:Script>
        <![CDATA[
            import parade.utils.PStyleProxy;
            import mx.core.EdgeMetrics;
            
            private const bm:EdgeMetrics = new EdgeMetrics(2, 6, 2, 2);

            override public function get borderMetrics():EdgeMetrics
            {
                return bm;
            }

            override public function styleChanged(styleProp:String):void
            {
                super.styleChanged(styleProp);
                
                if (!styles)
                    styles = new PStyleProxy(this);
                    
                styles.handleStyleChange(styleProp); 
            }

            [Bindable]
            protected var styles:PStyleProxy;

        ]]>
    </mx:Script>
    
    <degrafa:states>
    
        <!-- Hover -->
        <degrafa:State name="overSkin">
            <degrafa:SetProperty target="{mainFill}" name="color" value="#dddddd"/>
        </degrafa:State>
    
        <!-- Selected -->
        <degrafa:State name="selectedUpSkin">
            <degrafa:SetProperty target="{outlineShape}" name="top" value="0"/>
            <degrafa:SetProperty target="{notch}" name="top" value="1"/>
            <degrafa:SetProperty target="{notch}" name="visible" value="true"/>
            <degrafa:SetProperty target="{notchOutline}" name="top" value="1"/>
            <degrafa:SetProperty target="{notchOutline}" name="visible" value="true"/>
            <degrafa:SetProperty target="{fillShape}" name="top" value="1"/>
            <degrafa:SetProperty target="{fillShape}" name="bottom" value="-2"/>
            <degrafa:SetProperty target="{bling}" name="top" value="1"/>
            <degrafa:SetProperty target="{bling}" name="visible" value="false"/>
            <degrafa:SetProperty target="{mainFill}" name="color" value="#dddddd"/>
        </degrafa:State>
        <degrafa:State name="selectedOverSkin" basedOn="selectedUpSkin"/>
        <degrafa:State name="selectedDownSkin" basedOn="selectedUpSkin"/>
        <degrafa:State name="selectedDisabledSkin" basedOn="selectedUpSkin"/>
        
    </degrafa:states>

    <degrafa:geometry>
    
        <degrafa:RoundedRectangleComplex id="outlineShape" top="3" right="0" bottom="0" left="0" topLeftRadius="7" topRightRadius="7">
            <degrafa:fill>
                <degrafa:SolidFill color="#00000" alpha="0.3"/>
            </degrafa:fill>
        </degrafa:RoundedRectangleComplex>

        <degrafa:RoundedRectangleComplex id="fillShape" top="4" right="1" bottom="1" left="1" topLeftRadius="6" topRightRadius="6">
            <degrafa:fill>
                <degrafa:SolidFill id="mainFill" color="#bbbbbb"/>
            </degrafa:fill>
        </degrafa:RoundedRectangleComplex>

        <degrafa:RoundedRectangleComplex id="notchOutline" top="4" left="8" right="8" bottomLeftRadius="4" bottomRightRadius="4" height="4" visible="false">
            <degrafa:fill>
                <degrafa:SolidFill color="0" alpha="0.4"/>
            </degrafa:fill>
        </degrafa:RoundedRectangleComplex>

        <degrafa:RoundedRectangleComplex id="notch" top="4" left="9" right="9" bottomLeftRadius="3" bottomRightRadius="3" height="3" visible="false">
            <degrafa:fill>
                <degrafa:SolidFill color="{styles.themeColor}"/>
            </degrafa:fill>
        </degrafa:RoundedRectangleComplex>
        
        <degrafa:RoundedRectangleComplex id="bling" top="4" right="1" bottom="1" left="1" topLeftRadius="6" topRightRadius="6">
            <degrafa:fill>
                <degrafa:LinearGradientFill angle="15">
                    <degrafa:GradientStop color="#ffffff" alpha="0.1"/>
                    <degrafa:GradientStop color="#ffffff" ratio="0.5" alpha="0.3"/>
                    <degrafa:GradientStop color="#ffffff" ratio="0.5" alpha="0"/>
                </degrafa:LinearGradientFill>
            </degrafa:fill>
        </degrafa:RoundedRectangleComplex>

    </degrafa:geometry>

</degrafa:GraphicRectangularBorderSkin>