royale-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Carlos Rovira <carlosrov...@apache.org>
Subject Re: [royale-asjs] branch develop updated: Jewel Button new sizes, fixes, things missed and optimization and reduction of file size
Date Fri, 15 Jun 2018 08:46:43 GMT
Hi Alex,

thanks, I'll look at it. The need is not for this case, I want at some time
make some kind of dependency injection and only want to know about it.

Regarding the size functionality, I think we need for more cases so I'll
refactor it to a bead, so button, textinput and more components can use it.

2018-06-14 22:21 GMT+02:00 Alex Harui <aharui@adobe.com.invalid>:

> I'm not sure why you need to access Metadata at runtime in this case, but
> in general, the API for metadata and reflection in general is
>
> org.apache.royale.reflection.describeType
>
> HTH,
> -Alex
>
> On 6/14/18, 1:15 PM, "carlos.rovira@gmail.com on behalf of Carlos
> Rovira" <carlos.rovira@gmail.com on behalf of carlosrovira@apache.org>
> wrote:
>
>     Thanks Alex,
>
>     how can we access metadata from AS3 code? Can you share some basic API
>     usage to get started?
>
>
>     2018-06-14 18:28 GMT+02:00 Alex Harui <aharui@adobe.com.invalid>:
>
>     > Keeping [Inspectable] should be as simple as adding to
> -keep-as3-metadata
>     > in the src/main/config/compile-swf-config.xml (and the similar one
> in the
>     > "JS" project).
>     >
>     > The compiler does not check for allowed values based on any
> metadata.  But
>     > if the 'size' property just specifies a CSS class selector, why not
> let
>     > folks assign it to any class selector they want so they can add new
> sizes?
>     >
>     > HTH,
>     > -Alex
>     >
>     > On 6/14/18, 6:15 AM, "Harbs" <harbs.lists@gmail.com> wrote:
>     >
>     >     The IDE needs to get this metadata from somewhere. The
> inspectable
>     > properties have to be saved in the swc for the IDE to read the
> values.
>     >
>     >     Right now, I think any [Inspectable] meta tags are stripped out
> when
>     > the swc is compiled, although I could be missing something...
>     >
>     >     Harbs
>     >
>     >     > On Jun 14, 2018, at 3:34 PM, Carlos Rovira <
> carlosrovira@apache.org>
>     > wrote:
>     >     >
>     >     > I think that metadata is something that should be analyzed
> only in
>     > IDE, and
>     >     > should not be considered in the compilation phase...maybe I'm
>     > wrong...
>     >     >
>     >     > 2018-06-14 14:25 GMT+02:00 Harbs <harbs.lists@gmail.com>:
>     >     >
>     >     >> It needs to be implemented in the compiler first. Right now,
> the
>     >     >> inspectable tag is not preserved.
>     >     >>
>     >     >> Is that something which simply needs to be adjusted in the
> build
>     > scripts,
>     >     >> or it’s more fundamental than that?
>     >     >>
>     >     >> Harbs
>     >     >>
>     >     >>> On Jun 14, 2018, at 3:20 PM, Carlos Rovira <
>     > carlosrovira@apache.org>
>     >     >> wrote:
>     >     >>>
>     >     >>> Right, that would be good, although is something that all
> IDEs
>     > should
>     >     >>> implement in order to work
>     >     >>>
>     >     >>> 2018-06-14 14:17 GMT+02:00 Harbs <harbs.lists@gmail.com>:
>     >     >>>
>     >     >>>> [Inspectable] meta tags could help verify correct values in
> MXML.
>     > I hope
>     >     >>>> we’ll get that working some day…
>     >     >>>>
>     >     >>>> Thanks,
>     >     >>>> Harbs
>     >     >>>>
>     >     >>>>> On Jun 14, 2018, at 3:14 PM, Carlos Rovira <
>     > carlosrovira@apache.org>
>     >     >>>> wrote:
>     >     >>>>>
>     >     >>>>> Ok, I was trying to avoid properties based on texts, but I
> think
>     > here's
>     >     >>>> the
>     >     >>>>> only way
>     >     >>>>>
>     >     >>>>> The only way to get things more compilation free will be:
>     >     >>>>>
>     >     >>>>> <j:Button text="xsmall" size="{Button.XSMALL}”/>
>     >     >>>>>
>     >     >>>>> That's what we use to do with MDL icons...
>     >     >>>>>
>     >     >>>>> I'll apply your changes
>     >     >>>>>
>     >     >>>>> Thanks!
>     >     >>>>>
>     >     >>>>>
>     >     >>>>> 2018-06-14 13:08 GMT+02:00 Harbs <harbs.lists@gmail.com>:
>     >     >>>>>
>     >     >>>>>> <j:Button text="xsmall" size="xsmall”/>
>     >     >>>>>>
>     >     >>>>>> Here’s a possible implementation:
>     >     >>>>>>
>     >     >>>>>> public static const XSMALL:String = "xsmall";
>     >     >>>>>> public static const SMALL:String = "small";
>     >     >>>>>> public static const LARGE:String = "large";
>     >     >>>>>> public static const XLARGE:String = "xlarge";
>     >     >>>>>>
>     >     >>>>>> private var _size:Boolean = false;
>     >     >>>>>>
>     >     >>>>>> /**
>     >     >>>>>>    *  A size effect selector.
>     >     >>>>>>    *  Sets the size of the button using one of the "size"
>     > constants
>     >     >>>>>>    *
>     >     >>>>>>    *  @langversion 3.0
>     >     >>>>>>    *  @playerversion Flash 10.2
>     >     >>>>>>    *  @playerversion AIR 2.6
>     >     >>>>>>    *  @productversion Royale 0.9.3
>     >     >>>>>>    */
>     >     >>>>>> public function get size():String
>     >     >>>>>> {
>     >     >>>>>>  return _size;
>     >     >>>>>> }
>     >     >>>>>>
>     >     >>>>>> public function set size(value:String):void
>     >     >>>>>> {
>     >     >>>>>>  if (_size != value)
>     >     >>>>>>  {
>     >     >>>>>>    if(_size)
>     >     >>>>>>    {
>     >     >>>>>>       classSelectorList.toggle(_size, false);
>     >     >>>>>>    }
>     >     >>>>>>    _size = value;
>     >     >>>>>>
>     >     >>>>>>      classSelectorList.toggle(_size, true);
>     >     >>>>>>  }
>     >     >>>>>> }
>     >     >>>>>>
>     >     >>>>>> I wish we had support for the [Inspectable] meta tag in
> Royale.
>     > That
>     >     >>>> would
>     >     >>>>>> make MXML autocomplete a lot nicer.
>     >     >>>>>>
>     >     >>>>>>> On Jun 14, 2018, at 1:36 PM, Carlos Rovira <
>     > carlosrovira@apache.org>
>     >     >>>>>> wrote:
>     >     >>>>>>>
>     >     >>>>>>> Hi Harbs,
>     >     >>>>>>>
>     >     >>>>>>> please write how the user will write it so I can
> understand
>     > it. Maybe
>     >     >>>>>> will
>     >     >>>>>>> be using binding in the mxml declaration?
>     >     >>>>>>>
>     >     >>>>>>> thanks!
>     >     >>>>>>>
>     >     >>>>>>>
>     >     >>>>>>>
>     >     >>>>>>> 2018-06-14 10:14 GMT+02:00 Harbs <harbs.lists@gmail.com
> >:
>     >     >>>>>>>
>     >     >>>>>>>> Why not have a single “size” property with constants for
>     > xsmall,
>     >     >>>> small,
>     >     >>>>>>>> normal, large and xlarge?
>     >     >>>>>>>>
>     >     >>>>>>>> It also look like it’s possible to set both small and
> large
>     > to true.
>     >     >>>>>> That
>     >     >>>>>>>> seems like something which should be avoided.
>     >     >>>>>>>>
>     >     >>>>>>>> Thanks,
>     >     >>>>>>>> Harbs
>     >     >>>>>>>>
>     >     >>>>>>>>> On Jun 14, 2018, at 2:09 AM, carlosrovira@apache.org
> wrote:
>     >     >>>>>>>>>
>     >     >>>>>>>>> This is an automated email from the ASF dual-hosted git
>     > repository.
>     >     >>>>>>>>>
>     >     >>>>>>>>> carlosrovira pushed a commit to branch develop
>     >     >>>>>>>>> in repository https://na01.safelinks.
> protection.outlook.com/?url=https%3A%2F%2Fna01.safelinks&
> data=02%7C01%7Caharui%40adobe.com%7C0489da5a7b2e477269ef08d5d2339ea8%
> 7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C1%7C636646041499325868&sdata=
> NbSlTp39SVf7ekO%2BDOITDfaXnnLOH7f673q5KcDH%2F%2Bw%3D&reserved=0.
>     > protection.outlook.com/?url=https%3A%2F%2Fgitbox.apache.
>     > org%2Frepos%2Fasf%2Froyale-asjs.git&data=02%7C01%7Caharui%
> 40adobe.com%
>     > 7C175fdf8089054b63695808d5d1f8f53e%7Cfa7b1b5a7b34438794aed2c178de
>     > cee1%7C0%7C1%7C636645789557061703&sdata=
> r6OsXypQG0TIWYUEJ0Q82jyR4QvGVL
>     > l4KooZASP%2Fkdo%3D&reserved=0
>     >     >>>>>>>>>
>     >     >>>>>>>>>
>     >     >>>>>>>>> The following commit(s) were added to
> refs/heads/develop by
>     > this
>     >     >>>> push:
>     >     >>>>>>>>> new 0480167  Jewel Button new sizes, fixes, things
> missed and
>     >     >>>>>>>> optimization and reduction of file size
>     >     >>>>>>>>> 0480167 is described below
>     >     >>>>>>>>>
>     >     >>>>>>>>> commit 0480167255954f2f72c0dcf836519f91a2ddbddf
>     >     >>>>>>>>> Author: Carlos Rovira <carlosrovira@apache.org>
>     >     >>>>>>>>> AuthorDate: Thu Jun 14 01:09:13 2018 +0200
>     >     >>>>>>>>>
>     >     >>>>>>>>> Jewel Button new sizes, fixes, things missed and
>     > optimization and
>     >     >>>>>>>> reduction of file size
>     >     >>>>>>>>> ---
>     >     >>>>>>>>> .../src/main/royale/ButtonPlayGround.mxml          |
>  8 +
>     >     >>>>>>>>> .../projects/Jewel/src/main/resources/defaults.css |
> 24 +++
>     >     >>>>>>>>> .../main/royale/org/apache/royale/jewel/Button.as  |
> 208
>     >     >>>>>>>> +++++++++++++++++++++
>     >     >>>>>>>>> .../projects/Jewel/src/main/sass/_global.sass      |
>  3 +
>     >     >>>>>>>>> .../Jewel/src/main/sass/components/_button.sass    |
> 34
>     > ++++
>     >     >>>>>>>>> .../JewelTheme/src/main/resources/defaults.css     |
> 91
>     > ++-------
>     >     >>>>>>>>> .../main/sass/components-emphasized/_button.sass   |
> 34
>     > +---
>     >     >>>>>>>>> .../src/main/sass/components-primary/_button.sass  |
> 66
>     > ++++---
>     >     >>>>>>>>> .../main/sass/components-secondary/_button.sass    |
> 34
>     > +---
>     >     >>>>>>>>> 9 files changed, 335 insertions(+), 167 deletions(-)
>     >     >>>>>>>>>
>     >     >>>>>>>>> diff --git a/examples/royale/
> JewelExample/src/main/royale/
>     >     >>>>>> ButtonPlayGround.mxml
>     >     >>>>>>>> b/examples/royale/JewelExample/src/main/royale/
>     >     >> ButtonPlayGround.mxml
>     >     >>>>>>>>> index 966925c..dece666 100644
>     >     >>>>>>>>> --- a/examples/royale/JewelExample/src/main/royale/
>     >     >>>>>> ButtonPlayGround.mxml
>     >     >>>>>>>>> +++ b/examples/royale/JewelExample/src/main/royale/
>     >     >>>>>> ButtonPlayGround.mxml
>     >     >>>>>>>>> @@ -41,4 +41,12 @@ limitations under the License.
>     >     >>>>>>>>>                   <j:Disabled/>
>     >     >>>>>>>>>           </j:beads>
>     >     >>>>>>>>>   </j:Button>
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +     <html:H4 text="Sizes"/>
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +     <j:Button text="xsmall" xsmall="true"/>
>     >     >>>>>>>>> +     <j:Button text="small" small="true"
> primary="true"/>
>     >     >>>>>>>>> +     <j:Button text="large" large="true"
> secondary="true"/>
>     >     >>>>>>>>> +     <j:Button text="xlarge" xlarge="true"
>     > emphasized="true"/>
>     >     >>>>>>>>
>     >     >>>>>>>>> +
>     >     >>>>>>>>> </j:Card>
>     >     >>>>>>>>> diff --git a/frameworks/projects/Jewel/
>     >     >> src/main/resources/defaults.
>     >     >>>> css
>     >     >>>>>>>> b/frameworks/projects/Jewel/
> src/main/resources/defaults.css
>     >     >>>>>>>>> index 5d6c0de..6b521dd 100644
>     >     >>>>>>>>> --- a/frameworks/projects/Jewel/
> src/main/resources/defaults.
>     > css
>     >     >>>>>>>>> +++ b/frameworks/projects/Jewel/
> src/main/resources/defaults.
>     > css
>     >     >>>>>>>>> @@ -24,6 +24,10 @@
>     >     >>>>>>>>> border: 0;
>     >     >>>>>>>>> }
>     >     >>>>>>>>>
>     >     >>>>>>>>> +button::-moz-focus-inner {
>     >     >>>>>>>>> +  padding: 0;
>     >     >>>>>>>>> +}
>     >     >>>>>>>>> +
>     >     >>>>>>>>> j|View {
>     >     >>>>>>>>> IBeadView: ClassReference("org.apache.
>     >     >> royale.core.beads.GroupView");
>     >     >>>>>>>>> }
>     >     >>>>>>>>> @@ -85,6 +89,26 @@ j|Alert {
>     >     >>>>>>>>> IBeadView: ClassReference("org.apache.
>     > royale.jewel.beads.views.
>     >     >>>>>>>> AlertView");
>     >     >>>>>>>>> }
>     >     >>>>>>>>>
>     >     >>>>>>>>> +.jewel.button {
>     >     >>>>>>>>> +  margin: 0;
>     >     >>>>>>>>> +  padding: 0.72em 1.12em;
>     >     >>>>>>>>> +  cursor: pointer;
>     >     >>>>>>>>> +  user-select: none;
>     >     >>>>>>>>> +  display: inline-block;
>     >     >>>>>>>>> +  zoom: 1;
>     >     >>>>>>>>> +  vertical-align: middle;
>     >     >>>>>>>>> +  white-space: nowrap;
>     >     >>>>>>>>> +  line-height: normal !important;
>     >     >>>>>>>>> +  text-align: center;
>     >     >>>>>>>>> +  text-decoration: none;
>     >     >>>>>>>>> +}
>     >     >>>>>>>>> +.jewel.button:focus {
>     >     >>>>>>>>> +  outline: none;
>     >     >>>>>>>>> +}
>     >     >>>>>>>>> +.jewel.button[disabled] {
>     >     >>>>>>>>> +  cursor: unset;
>     >     >>>>>>>>> +}
>     >     >>>>>>>>> +
>     >     >>>>>>>>> .jewel.card {
>     >     >>>>>>>>> flex-direction: column;
>     >     >>>>>>>>> min-width: 320px;
>     >     >>>>>>>>> diff --git a/frameworks/projects/Jewel/
>     > src/main/royale/org/apache/
>     >     >>>>>> royale/jewel/Button.as
>     >     >>>>>>>> b/frameworks/projects/Jewel/src/main/royale/org/apache/
>     >     >>>>>>>> royale/jewel/Button.as
>     >     >>>>>>>>> index a6c17df..6dfc1b0 100644
>     >     >>>>>>>>> --- a/frameworks/projects/Jewel/
> src/main/royale/org/apache/
>     >     >>>>>>>> royale/jewel/Button.as
>     >     >>>>>>>>> +++ b/frameworks/projects/Jewel/
> src/main/royale/org/apache/
>     >     >>>>>>>> royale/jewel/Button.as
>     >     >>>>>>>>> @@ -311,6 +311,110 @@ package org.apache.royale.jewel
>     >     >>>>>>>>>             classSelectorList.toggle("emphasized",
> value);
>     >     >>>>>>>>>         }
>     >     >>>>>>>>>     }
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +        private var _xsmall:Boolean = false;
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +        /**
>     >     >>>>>>>>> +              *  A boolean flag to activate "xsmall"
> effect
>     >     >>>> selector.
>     >     >>>>>>>>> +              *  Makes the size of the button small
>     >     >>>>>>>>> +         *
>     >     >>>>>>>>> +              *  @langversion 3.0
>     >     >>>>>>>>> +              *  @playerversion Flash 10.2
>     >     >>>>>>>>> +              *  @playerversion AIR 2.6
>     >     >>>>>>>>> +              *  @productversion Royale 0.9.3
>     >     >>>>>>>>> +              */
>     >     >>>>>>>>> +        public function get xsmall():Boolean
>     >     >>>>>>>>> +        {
>     >     >>>>>>>>> +            return _xsmall;
>     >     >>>>>>>>> +        }
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +        public function set xsmall(value:Boolean):void
>     >     >>>>>>>>> +        {
>     >     >>>>>>>>> +            if (_xsmall != value)
>     >     >>>>>>>>> +            {
>     >     >>>>>>>>> +                _xsmall = value;
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +                classSelectorList.toggle("xsmall",
> value);
>     >     >>>>>>>>> +            }
>     >     >>>>>>>>> +        }
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +        private var _small:Boolean = false;
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +        /**
>     >     >>>>>>>>> +              *  A boolean flag to activate "small"
> effect
>     >     >> selector.
>     >     >>>>>>>>> +              *  Makes the size of the button small
>     >     >>>>>>>>> +         *
>     >     >>>>>>>>> +              *  @langversion 3.0
>     >     >>>>>>>>> +              *  @playerversion Flash 10.2
>     >     >>>>>>>>> +              *  @playerversion AIR 2.6
>     >     >>>>>>>>> +              *  @productversion Royale 0.9.3
>     >     >>>>>>>>> +              */
>     >     >>>>>>>>> +        public function get small():Boolean
>     >     >>>>>>>>> +        {
>     >     >>>>>>>>> +            return _small;
>     >     >>>>>>>>> +        }
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +        public function set small(value:Boolean):void
>     >     >>>>>>>>> +        {
>     >     >>>>>>>>> +            if (_small != value)
>     >     >>>>>>>>> +            {
>     >     >>>>>>>>> +                _small = value;
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +                classSelectorList.toggle("small",
> value);
>     >     >>>>>>>>> +            }
>     >     >>>>>>>>> +        }
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +        private var _large:Boolean = false;
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +        /**
>     >     >>>>>>>>> +              *  A boolean flag to activate "large"
> effect
>     >     >> selector.
>     >     >>>>>>>>> +              *  Makes the size of the button large
>     >     >>>>>>>>> +         *
>     >     >>>>>>>>> +              *  @langversion 3.0
>     >     >>>>>>>>> +              *  @playerversion Flash 10.2
>     >     >>>>>>>>> +              *  @playerversion AIR 2.6
>     >     >>>>>>>>> +              *  @productversion Royale 0.9.3
>     >     >>>>>>>>> +              */
>     >     >>>>>>>>> +        public function get large():Boolean
>     >     >>>>>>>>> +        {
>     >     >>>>>>>>> +            return _large;
>     >     >>>>>>>>> +        }
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +        public function set large(value:Boolean):void
>     >     >>>>>>>>> +        {
>     >     >>>>>>>>> +            if (_large != value)
>     >     >>>>>>>>> +            {
>     >     >>>>>>>>> +                _large = value;
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +                classSelectorList.toggle("large",
> value);
>     >     >>>>>>>>> +            }
>     >     >>>>>>>>> +        }
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +        private var _xlarge:Boolean = false;
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +        /**
>     >     >>>>>>>>> +              *  A boolean flag to activate "xlarge"
> effect
>     >     >>>> selector.
>     >     >>>>>>>>> +              *  Makes the size of the button xlarge
>     >     >>>>>>>>> +         *
>     >     >>>>>>>>> +              *  @langversion 3.0
>     >     >>>>>>>>> +              *  @playerversion Flash 10.2
>     >     >>>>>>>>> +              *  @playerversion AIR 2.6
>     >     >>>>>>>>> +              *  @productversion Royale 0.9.3
>     >     >>>>>>>>> +              */
>     >     >>>>>>>>> +        public function get xlarge():Boolean
>     >     >>>>>>>>> +        {
>     >     >>>>>>>>> +            return _xlarge;
>     >     >>>>>>>>> +        }
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +        public function set xlarge(value:Boolean):void
>     >     >>>>>>>>> +        {
>     >     >>>>>>>>> +            if (_xlarge != value)
>     >     >>>>>>>>> +            {
>     >     >>>>>>>>> +                _xlarge = value;
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +                classSelectorList.toggle("xlarge",
> value);
>     >     >>>>>>>>> +            }
>     >     >>>>>>>>> +        }
>     >     >>>>>>>>>   }
>     >     >>>>>>>>>
>     >     >>>>>>>>> /**
>     >     >>>>>>>>> @@ -472,6 +576,110 @@ package org.apache.royale.jewel
>     >     >>>>>>>>>             toggleClass("emphasized", value);
>     >     >>>>>>>>>         }
>     >     >>>>>>>>>     }
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +        private var _xsmall:Boolean = false;
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +        /**
>     >     >>>>>>>>> +              *  A boolean flag to activate "xsmall"
> effect
>     >     >>>> selector.
>     >     >>>>>>>>> +              *  Makes the size of the button small
>     >     >>>>>>>>> +         *
>     >     >>>>>>>>> +              *  @langversion 3.0
>     >     >>>>>>>>> +              *  @playerversion Flash 10.2
>     >     >>>>>>>>> +              *  @playerversion AIR 2.6
>     >     >>>>>>>>> +              *  @productversion Royale 0.9.3
>     >     >>>>>>>>> +              */
>     >     >>>>>>>>> +        public function get xsmall():Boolean
>     >     >>>>>>>>> +        {
>     >     >>>>>>>>> +            return _xsmall;
>     >     >>>>>>>>> +        }
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +        public function set xsmall(value:Boolean):void
>     >     >>>>>>>>> +        {
>     >     >>>>>>>>> +            if (_xsmall != value)
>     >     >>>>>>>>> +            {
>     >     >>>>>>>>> +                _xsmall = value;
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +                toggleClass("xsmall", value);
>     >     >>>>>>>>> +            }
>     >     >>>>>>>>> +        }
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +        private var _small:Boolean = false;
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +        /**
>     >     >>>>>>>>> +              *  A boolean flag to activate "small"
> effect
>     >     >> selector.
>     >     >>>>>>>>> +              *  Makes the size of the button small
>     >     >>>>>>>>> +         *
>     >     >>>>>>>>> +              *  @langversion 3.0
>     >     >>>>>>>>> +              *  @playerversion Flash 10.2
>     >     >>>>>>>>> +              *  @playerversion AIR 2.6
>     >     >>>>>>>>> +              *  @productversion Royale 0.9.3
>     >     >>>>>>>>> +              */
>     >     >>>>>>>>> +        public function get small():Boolean
>     >     >>>>>>>>> +        {
>     >     >>>>>>>>> +            return _small;
>     >     >>>>>>>>> +        }
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +        public function set small(value:Boolean):void
>     >     >>>>>>>>> +        {
>     >     >>>>>>>>> +            if (_small != value)
>     >     >>>>>>>>> +            {
>     >     >>>>>>>>> +                _small = value;
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +                toggleClass("small", value);
>     >     >>>>>>>>> +            }
>     >     >>>>>>>>> +        }
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +        private var _large:Boolean = false;
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +        /**
>     >     >>>>>>>>> +              *  A boolean flag to activate "large"
> effect
>     >     >> selector.
>     >     >>>>>>>>> +              *  Makes the size of the button large
>     >     >>>>>>>>> +         *
>     >     >>>>>>>>> +              *  @langversion 3.0
>     >     >>>>>>>>> +              *  @playerversion Flash 10.2
>     >     >>>>>>>>> +              *  @playerversion AIR 2.6
>     >     >>>>>>>>> +              *  @productversion Royale 0.9.3
>     >     >>>>>>>>> +              */
>     >     >>>>>>>>> +        public function get large():Boolean
>     >     >>>>>>>>> +        {
>     >     >>>>>>>>> +            return _large;
>     >     >>>>>>>>> +        }
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +        public function set large(value:Boolean):void
>     >     >>>>>>>>> +        {
>     >     >>>>>>>>> +            if (_large != value)
>     >     >>>>>>>>> +            {
>     >     >>>>>>>>> +                _large = value;
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +                toggleClass("large", value);
>     >     >>>>>>>>> +            }
>     >     >>>>>>>>> +        }
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +        private var _xlarge:Boolean = false;
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +        /**
>     >     >>>>>>>>> +              *  A boolean flag to activate "xlarge"
> effect
>     >     >>>> selector.
>     >     >>>>>>>>> +              *  Makes the size of the button xlarge
>     >     >>>>>>>>> +         *
>     >     >>>>>>>>> +              *  @langversion 3.0
>     >     >>>>>>>>> +              *  @playerversion Flash 10.2
>     >     >>>>>>>>> +              *  @playerversion AIR 2.6
>     >     >>>>>>>>> +              *  @productversion Royale 0.9.3
>     >     >>>>>>>>> +              */
>     >     >>>>>>>>> +        public function get xlarge():Boolean
>     >     >>>>>>>>> +        {
>     >     >>>>>>>>> +            return _xlarge;
>     >     >>>>>>>>> +        }
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +        public function set xlarge(value:Boolean):void
>     >     >>>>>>>>> +        {
>     >     >>>>>>>>> +            if (_xlarge != value)
>     >     >>>>>>>>> +            {
>     >     >>>>>>>>> +                _xlarge = value;
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +                toggleClass("xlarge", value);
>     >     >>>>>>>>> +            }
>     >     >>>>>>>>> +        }
>     >     >>>>>>>>>
>     >     >>>>>>>>>     /**
>     >     >>>>>>>>>            * @royaleignorecoercion
> org.apache.royale.core.
>     >     >>>>>>>> WrappedHTMLElement
>     >     >>>>>>>>> diff --git a/frameworks/projects/Jewel/
>     > src/main/sass/_global.sass
>     >     >>>>>>>> b/frameworks/projects/Jewel/src/main/sass/_global.sass
>     >     >>>>>>>>> index f4792c9..b58d133 100644
>     >     >>>>>>>>> --- a/frameworks/projects/Jewel/
> src/main/sass/_global.sass
>     >     >>>>>>>>> +++ b/frameworks/projects/Jewel/
> src/main/sass/_global.sass
>     >     >>>>>>>>> @@ -28,6 +28,9 @@
>     >     >>>>>>>>> // remove dotted outline
>     >     >>>>>>>>> ::-moz-focus-inner, ::-moz-focus-outer
>     >     >>>>>>>>>   border: 0
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +button::-moz-focus-inner
>     >     >>>>>>>>> +     padding: 0
>     >     >>>>>>>>>
>     >     >>>>>>>>> j|View
>     >     >>>>>>>>>   IBeadView: ClassReference("org.apache.
>     >     >>>>>>>> royale.core.beads.GroupView")
>     >     >>>>>>>>> diff --git a/frameworks/projects/Jewel/
>     > src/main/sass/components/_
>     >     >>>>>> button.sass
>     >     >>>>>>>> b/frameworks/projects/Jewel/src/main/sass/components/_
>     > button.sass
>     >     >>>>>>>>> index 019c818..ea0c8ae 100644
>     >     >>>>>>>>> --- a/frameworks/projects/Jewel/
> src/main/sass/components/_
>     >     >>>> button.sass
>     >     >>>>>>>>> +++ b/frameworks/projects/Jewel/
> src/main/sass/components/_
>     >     >>>> button.sass
>     >     >>>>>>>>> @@ -17,4 +17,38 @@
>     >     >>>>>>>>> //
>     >     >>>>>>>>> //////////////////////////////
> //////////////////////////////
>     >     >>>>>>>> ////////////////////
>     >     >>>>>>>>>
>     >     >>>>>>>>> +// Jewel Button
>     >     >>>>>>>>>
>     >     >>>>>>>>> +// Button variables
>     >     >>>>>>>>> +$button-margin: 0 !default
>     >     >>>>>>>>> +$button-padding: 0.72em 1.12em !default
>     >     >>>>>>>>> +$button-min-height: 28px !default
>     >     >>>>>>>>> +$button-min-width: 74px !default
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +.jewel.button
>     >     >>>>>>>>> +    margin: $button-margin
>     >     >>>>>>>>> +    padding: $button-padding
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +    // min-width: $button-min-width
>     >     >>>>>>>>> +    // min-height: $button-min-height
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +    cursor: pointer
>     >     >>>>>>>>> +    user-select: none
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +    display: inline-block
>     >     >>>>>>>>> +    zoom: 1
>     >     >>>>>>>>> +    vertical-align: middle
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +    // -- BUTTON LABEL
>     >     >>>>>>>>> +    white-space: nowrap
>     >     >>>>>>>>> +    line-height: normal !important
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +    text:
>     >     >>>>>>>>> +        align: center
>     >     >>>>>>>>> +        decoration: none
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +    &:focus
>     >     >>>>>>>>> +        outline: none
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +    &[disabled]
>     >     >>>>>>>>> +        cursor: unset
>     >     >>>>>>>>> \ No newline at end of file
>     >     >>>>>>>>> diff --git a/frameworks/themes/
>     > JewelTheme/src/main/resources/
>     >     >>>>>> defaults.css
>     >     >>>>>>>> b/frameworks/themes/JewelTheme/src/main/resources/
>     > defaults.css
>     >     >>>>>>>>> index 5dd17c1..7659a38 100644
>     >     >>>>>>>>> --- a/frameworks/themes/JewelTheme/src/main/resources/
>     > defaults.css
>     >     >>>>>>>>> +++ b/frameworks/themes/JewelTheme/src/main/resources/
>     > defaults.css
>     >     >>>>>>>>> @@ -102,23 +102,15 @@ div {
>     >     >>>>>>>>> }
>     >     >>>>>>>>>
>     >     >>>>>>>>> .jewel.button {
>     >     >>>>>>>>> -  cursor: pointer;
>     >     >>>>>>>>> -  display: inline-block;
>     >     >>>>>>>>> -  margin: 0;
>     >     >>>>>>>>> -  padding: 10px 16px;
>     >     >>>>>>>>> -  min-width: 74px;
>     >     >>>>>>>>> -  min-height: 34px;
>     >     >>>>>>>>> background: linear-gradient(#e6e6e6, #cccccc);
>     >     >>>>>>>>> border: 1px solid #b3b3b3;
>     >     >>>>>>>>> box-shadow: inset 0 1px 0 white;
>     >     >>>>>>>>> border-radius: 3px;
>     >     >>>>>>>>> -  white-space: nowrap;
>     >     >>>>>>>>> +  color: #808080;
>     >     >>>>>>>>> font-family: "Lato", sans-serif;
>     >     >>>>>>>>> font-size: 14px;
>     >     >>>>>>>>> font-weight: bold;
>     >     >>>>>>>>> -  color: #808080;
>     >     >>>>>>>>> text-transform: uppercase;
>     >     >>>>>>>>> -  text-decoration: none;
>     >     >>>>>>>>> }
>     >     >>>>>>>>> .jewel.button:hover, .jewel.button:hover:focus {
>     >     >>>>>>>>> background: linear-gradient(#d9d9d9, silver);
>     >     >>>>>>>>> @@ -130,38 +122,26 @@ div {
>     >     >>>>>>>>> box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50,
> 0.5);
>     >     >>>>>>>>> }
>     >     >>>>>>>>> .jewel.button:focus {
>     >     >>>>>>>>> -  outline: none;
>     >     >>>>>>>>> border: 1px solid #b3b3b3;
>     >     >>>>>>>>> box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255,
> 0.5),
>     > inset 0
>     >     >>>>>>>> 1px 0 rgba(255, 255, 255, 0.6);
>     >     >>>>>>>>> }
>     >     >>>>>>>>> .jewel.button[disabled] {
>     >     >>>>>>>>> -  cursor: unset;
>     >     >>>>>>>>> background: #f3f3f3;
>     >     >>>>>>>>> border: 1px solid #d9d9d9;
>     >     >>>>>>>>> box-shadow: none;
>     >     >>>>>>>>> color: silver;
>     >     >>>>>>>>> +}
>     >     >>>>>>>>> +.jewel.button[disabled] {
>     >     >>>>>>>>> font-weight: normal;
>     >     >>>>>>>>> text-shadow: unset;
>     >     >>>>>>>>> }
>     >     >>>>>>>>>
>     >     >>>>>>>>> .jewel.button.primary {
>     >     >>>>>>>>> -  cursor: pointer;
>     >     >>>>>>>>> -  display: inline-block;
>     >     >>>>>>>>> -  margin: 0;
>     >     >>>>>>>>> -  padding: 10px 16px;
>     >     >>>>>>>>> -  min-width: 74px;
>     >     >>>>>>>>> -  min-height: 34px;
>     >     >>>>>>>>> background: linear-gradient(#54b7f3, #24a3ef);
>     >     >>>>>>>>> border: 1px solid #0f88d1;
>     >     >>>>>>>>> box-shadow: inset 0 1px 0 #9bd5f8;
>     >     >>>>>>>>> border-radius: 3px;
>     >     >>>>>>>>> -  white-space: nowrap;
>     >     >>>>>>>>> -  font-family: "Lato", sans-serif;
>     >     >>>>>>>>> -  font-size: 14px;
>     >     >>>>>>>>> -  font-weight: bold;
>     >     >>>>>>>>> color: #FFFFFF;
>     >     >>>>>>>>> -  text-transform: uppercase;
>     >     >>>>>>>>> -  text-decoration: none;
>     >     >>>>>>>>> text-shadow: 0 -1px 0 rgba(10, 90, 138, 0.7);
>     >     >>>>>>>>> }
>     >     >>>>>>>>> .jewel.button.primary:hover,
> .jewel.button.primary:hover:focus
>     > {
>     >     >>>>>>>>> @@ -174,18 +154,30 @@ div {
>     >     >>>>>>>>> box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50,
> 0.5);
>     >     >>>>>>>>> }
>     >     >>>>>>>>> .jewel.button.primary:focus {
>     >     >>>>>>>>> -  outline: none;
>     >     >>>>>>>>> border: 1px solid #0f88d1;
>     >     >>>>>>>>> box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255,
> 0.5),
>     > inset 0
>     >     >>>>>>>> 1px 0 rgba(255, 255, 255, 0.6);
>     >     >>>>>>>>> }
>     >     >>>>>>>>> .jewel.button.primary[disabled] {
>     >     >>>>>>>>> -  cursor: unset;
>     >     >>>>>>>>> background: #f3f3f3;
>     >     >>>>>>>>> border: 1px solid #d9d9d9;
>     >     >>>>>>>>> box-shadow: none;
>     >     >>>>>>>>> color: silver;
>     >     >>>>>>>>> -  font-weight: normal;
>     >     >>>>>>>>> -  text-shadow: unset;
>     >     >>>>>>>>> +}
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +.jewel.button.xsmall {
>     >     >>>>>>>>> +  font-size: 60%;
>     >     >>>>>>>>> +}
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +.jewel.button.small {
>     >     >>>>>>>>> +  font-size: 80%;
>     >     >>>>>>>>> +}
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +.jewel.button.large {
>     >     >>>>>>>>> +  font-size: 120%;
>     >     >>>>>>>>> +}
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +.jewel.button.xlarge {
>     >     >>>>>>>>> +  font-size: 140%;
>     >     >>>>>>>>> }
>     >     >>>>>>>>>
>     >     >>>>>>>>> .jewel.card {
>     >     >>>>>>>>> @@ -619,22 +611,11 @@ j|Card {
>     >     >>>>>>>>> }
>     >     >>>>>>>>>
>     >     >>>>>>>>> .jewel.button.secondary {
>     >     >>>>>>>>> -  cursor: pointer;
>     >     >>>>>>>>> -  display: inline-block;
>     >     >>>>>>>>> -  margin: 0;
>     >     >>>>>>>>> -  padding: 10px 16px;
>     >     >>>>>>>>> -  min-width: 74px;
>     >     >>>>>>>>> -  min-height: 34px;
>     >     >>>>>>>>> background: linear-gradient(#f16c42, #ed4812);
>     >     >>>>>>>>> border: 1px solid #be390e;
>     >     >>>>>>>>> box-shadow: inset 0 1px 0 #f6a389;
>     >     >>>>>>>>> border-radius: 3px;
>     >     >>>>>>>>> -  font-family: "Lato", sans-serif;
>     >     >>>>>>>>> -  font-size: 14px;
>     >     >>>>>>>>> -  font-weight: bold;
>     >     >>>>>>>>> color: #FFFFFF;
>     >     >>>>>>>>> -  text-transform: uppercase;
>     >     >>>>>>>>> -  text-decoration: none;
>     >     >>>>>>>>> text-shadow: 0 -1px 0 rgba(119, 36, 9, 0.7);
>     >     >>>>>>>>> }
>     >     >>>>>>>>> .jewel.button.secondary:hover,
> .jewel.button.secondary:hover:
>     > focus
>     >     >> {
>     >     >>>>>>>>> @@ -647,37 +628,22 @@ j|Card {
>     >     >>>>>>>>> box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50,
> 0.5);
>     >     >>>>>>>>> }
>     >     >>>>>>>>> .jewel.button.secondary:focus {
>     >     >>>>>>>>> -  outline: none;
>     >     >>>>>>>>> border: 1px solid #be390e;
>     >     >>>>>>>>> box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255,
> 0.5),
>     > inset 0
>     >     >>>>>>>> 1px 0 rgba(255, 255, 255, 0.6);
>     >     >>>>>>>>> }
>     >     >>>>>>>>> .jewel.button.secondary[disabled] {
>     >     >>>>>>>>> -  cursor: unset;
>     >     >>>>>>>>> background: #f3f3f3;
>     >     >>>>>>>>> border: 1px solid #d9d9d9;
>     >     >>>>>>>>> box-shadow: none;
>     >     >>>>>>>>> color: silver;
>     >     >>>>>>>>> -  font-weight: normal;
>     >     >>>>>>>>> -  text-shadow: unset;
>     >     >>>>>>>>> }
>     >     >>>>>>>>>
>     >     >>>>>>>>> .jewel.button {
>     >     >>>>>>>>> -  cursor: pointer;
>     >     >>>>>>>>> -  display: inline-block;
>     >     >>>>>>>>> -  margin: 0;
>     >     >>>>>>>>> -  padding: 10px 16px;
>     >     >>>>>>>>> -  min-width: 74px;
>     >     >>>>>>>>> -  min-height: 34px;
>     >     >>>>>>>>> background: linear-gradient(#e6e6e6, #cccccc);
>     >     >>>>>>>>> border: 1px solid #b3b3b3;
>     >     >>>>>>>>> box-shadow: inset 0 1px 0 white;
>     >     >>>>>>>>> border-radius: 3px;
>     >     >>>>>>>>> -  font-family: "Lato", sans-serif;
>     >     >>>>>>>>> -  font-size: 14px;
>     >     >>>>>>>>> -  font-weight: bold;
>     >     >>>>>>>>> color: #808080;
>     >     >>>>>>>>> -  text-transform: uppercase;
>     >     >>>>>>>>> -  text-decoration: none;
>     >     >>>>>>>>> }
>     >     >>>>>>>>> .jewel.button:hover, .jewel.button:hover:focus {
>     >     >>>>>>>>> background: linear-gradient(#d9d9d9, silver);
>     >     >>>>>>>>> @@ -689,37 +655,22 @@ j|Card {
>     >     >>>>>>>>> box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50,
> 0.5);
>     >     >>>>>>>>> }
>     >     >>>>>>>>> .jewel.button:focus {
>     >     >>>>>>>>> -  outline: none;
>     >     >>>>>>>>> border: 1px solid #b3b3b3;
>     >     >>>>>>>>> box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255,
> 0.5),
>     > inset 0
>     >     >>>>>>>> 1px 0 rgba(255, 255, 255, 0.6);
>     >     >>>>>>>>> }
>     >     >>>>>>>>> .jewel.button[disabled] {
>     >     >>>>>>>>> -  cursor: unset;
>     >     >>>>>>>>> background: #f3f3f3;
>     >     >>>>>>>>> border: 1px solid #d9d9d9;
>     >     >>>>>>>>> box-shadow: none;
>     >     >>>>>>>>> color: silver;
>     >     >>>>>>>>> -  font-weight: normal;
>     >     >>>>>>>>> -  text-shadow: unset;
>     >     >>>>>>>>> }
>     >     >>>>>>>>>
>     >     >>>>>>>>> .jewel.button.emphasized {
>     >     >>>>>>>>> -  cursor: pointer;
>     >     >>>>>>>>> -  display: inline-block;
>     >     >>>>>>>>> -  margin: 0;
>     >     >>>>>>>>> -  padding: 10px 16px;
>     >     >>>>>>>>> -  min-width: 74px;
>     >     >>>>>>>>> -  min-height: 34px;
>     >     >>>>>>>>> background: linear-gradient(#98cc50, #7eb435);
>     >     >>>>>>>>> border: 1px solid #638c29;
>     >     >>>>>>>>> box-shadow: inset 0 1px 0 #bbdd8b;
>     >     >>>>>>>>> border-radius: 3px;
>     >     >>>>>>>>> -  font-family: "Lato", sans-serif;
>     >     >>>>>>>>> -  font-size: 14px;
>     >     >>>>>>>>> -  font-weight: bold;
>     >     >>>>>>>>> color: #FFFFFF;
>     >     >>>>>>>>> -  text-transform: uppercase;
>     >     >>>>>>>>> -  text-decoration: none;
>     >     >>>>>>>>> text-shadow: 0 -1px 0 rgba(57, 81, 24, 0.7);
>     >     >>>>>>>>> }
>     >     >>>>>>>>> .jewel.button.emphasized:hover,
> .jewel.button.emphasized:
>     >     >> hover:focus
>     >     >>>> {
>     >     >>>>>>>>> @@ -732,18 +683,14 @@ j|Card {
>     >     >>>>>>>>> box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50,
> 0.5);
>     >     >>>>>>>>> }
>     >     >>>>>>>>> .jewel.button.emphasized:focus {
>     >     >>>>>>>>> -  outline: none;
>     >     >>>>>>>>> border: 1px solid #638c29;
>     >     >>>>>>>>> box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255,
> 0.5),
>     > inset 0
>     >     >>>>>>>> 1px 0 rgba(255, 255, 255, 0.6);
>     >     >>>>>>>>> }
>     >     >>>>>>>>> .jewel.button.emphasized[disabled] {
>     >     >>>>>>>>> -  cursor: unset;
>     >     >>>>>>>>> background: #f3f3f3;
>     >     >>>>>>>>> border: 1px solid #d9d9d9;
>     >     >>>>>>>>> box-shadow: none;
>     >     >>>>>>>>> color: silver;
>     >     >>>>>>>>> -  font-weight: normal;
>     >     >>>>>>>>> -  text-shadow: unset;
>     >     >>>>>>>>> }
>     >     >>>>>>>>>
>     >     >>>>>>>>> /*# sourceMappingURL=defaults.css.map */
>     >     >>>>>>>>> diff --git a/frameworks/themes/
> JewelTheme/src/main/sass/
>     >     >>>>>>>> components-emphasized/_button.sass b/frameworks/themes/
>     >     >>>>>>>> JewelTheme/src/main/sass/components-emphasized/_button.
> sass
>     >     >>>>>>>>> index 1076aa0..998359d 100644
>     >     >>>>>>>>> --- a/frameworks/themes/JewelTheme/src/main/sass/
>     >     >>>>>>>> components-emphasized/_button.sass
>     >     >>>>>>>>> +++ b/frameworks/themes/JewelTheme/src/main/sass/
>     >     >>>>>>>> components-emphasized/_button.sass
>     >     >>>>>>>>> @@ -20,38 +20,14 @@
>     >     >>>>>>>>> // Jewel Button
>     >     >>>>>>>>>
>     >     >>>>>>>>> // Button variables
>     >     >>>>>>>>> -$button-margin: 0 !default
>     >     >>>>>>>>> -$button-padding: 10px 16px !default
>     >     >>>>>>>>> -$button-min-height: 34px !default
>     >     >>>>>>>>> -$button-min-width: 74px !default
>     >     >>>>>>>>> -
>     >     >>>>>>>>> $button-border-radius: 3px
>     >     >>>>>>>>>
>     >     >>>>>>>>> =button-theme($button-color, $text-color)
>     >     >>>>>>>>> -     cursor: pointer
>     >     >>>>>>>>> -     display: inline-block
>     >     >>>>>>>>> -
>     >     >>>>>>>>> -     margin: $button-margin //1rem
>     >     >>>>>>>>> -     padding: $button-padding //.938em 1.875em
>     >     >>>>>>>>> -
>     >     >>>>>>>>> -     min-width: $button-min-width
>     >     >>>>>>>>> -     min-height: $button-min-height
>     >     >>>>>>>>>
>     >     >>>>>>>>>   +jewel-bg-border("normal", $button-color,
>     > $button-border-radius)
>     >     >>>>>>>>>
>     >     >>>>>>>>> -     @if $transitions-enable
>     >     >>>>>>>>> -             transition:
>     >     >>>>>>>>> -                     duration: $transition-duration
>     >     >>>>>>>>> -                     timing-function:
> $transition-timing
>     >     >>>>>>>>> -
>     >     >>>>>>>>> -     font:
>     >     >>>>>>>>> -             family: $font-stack
>     >     >>>>>>>>> -             size: $font-size
>     >     >>>>>>>>> -             weight: bold
>     >     >>>>>>>>>   color: $text-color
>     >     >>>>>>>>> -     text:
>     >     >>>>>>>>> -             transform: uppercase
>     >     >>>>>>>>> -             decoration: none
>     >     >>>>>>>>> +
>     >     >>>>>>>>>   @if not $flat and $text-color == $font-theme-color
>     >     >>>>>>>>>           text:
>     >     >>>>>>>>>                   shadow: 0 -1px 0
> rgba(darken($button-color,
>     >     >> 30%),
>     >     >>>>>>>> .7) //0 .063em
>     >     >>>>>>>>> @@ -63,18 +39,12 @@ $button-border-radius: 3px
>     >     >>>>>>>>>           +jewel-bg-border("active", $button-color)
>     >     >>>>>>>>>
>     >     >>>>>>>>>   &:focus
>     >     >>>>>>>>> -             outline: none
>     >     >>>>>>>>>           +jewel-bg-border("focus", $button-color)
>     >     >>>>>>>>>
>     >     >>>>>>>>>   &[disabled]
>     >     >>>>>>>>> -             cursor: unset
>     >     >>>>>>>>>           +jewel-bg-border("disabled", $button-color)
>     >     >>>>>>>>>           color: $disabled-font-color
>     >     >>>>>>>>> -             font:
>     >     >>>>>>>>> -                     weight: normal
>     >     >>>>>>>>> -             text:
>     >     >>>>>>>>> -                     shadow: unset
>     >     >>>>>>>>> -
>     >     >>>>>>>>> +
>     >     >>>>>>>>> .jewel.button
>     >     >>>>>>>>>   +button-theme($default-color, $default-font-color)
>     >     >>>>>>>>>
>     >     >>>>>>>>> diff --git a/frameworks/themes/
> JewelTheme/src/main/sass/
>     >     >>>>>>>> components-primary/_button.sass b/frameworks/themes/
>     >     >>>>>>>> JewelTheme/src/main/sass/components-primary/_button.
> sass
>     >     >>>>>>>>> index 751a948..cfa3571 100644
>     >     >>>>>>>>> --- a/frameworks/themes/JewelTheme/src/main/sass/
>     >     >>>>>>>> components-primary/_button.sass
>     >     >>>>>>>>> +++ b/frameworks/themes/JewelTheme/src/main/sass/
>     >     >>>>>>>> components-primary/_button.sass
>     >     >>>>>>>>> @@ -20,40 +20,19 @@
>     >     >>>>>>>>> // Jewel Button
>     >     >>>>>>>>>
>     >     >>>>>>>>> // Button variables
>     >     >>>>>>>>> -$button-margin: 0 !default
>     >     >>>>>>>>> -$button-padding: 10px 16px !default
>     >     >>>>>>>>> -$button-min-height: 34px !default
>     >     >>>>>>>>> -$button-min-width: 74px !default
>     >     >>>>>>>>> +// $button-margin: 0 !default
>     >     >>>>>>>>> +// $button-padding: 0.72em 1.12em !default
>     >     >>>>>>>>> +// $button-min-height: 28px !default
>     >     >>>>>>>>> +// $button-min-width: 74px !default
>     >     >>>>>>>>>
>     >     >>>>>>>>> $button-border-radius: 3px
>     >     >>>>>>>>>
>     >     >>>>>>>>> =button-theme($button-color, $text-color)
>     >     >>>>>>>>> -     cursor: pointer
>     >     >>>>>>>>> -     display: inline-block
>     >     >>>>>>>>> -
>     >     >>>>>>>>> -     margin: $button-margin //1rem
>     >     >>>>>>>>> -     padding: $button-padding //.938em 1.875em
>     >     >>>>>>>>> -
>     >     >>>>>>>>> -     min-width: $button-min-width
>     >     >>>>>>>>> -     min-height: $button-min-height
>     >     >>>>>>>>>
>     >     >>>>>>>>>   +jewel-bg-border("normal", $button-color,
>     > $button-border-radius)
>     >     >>>>>>>>>
>     >     >>>>>>>>> -     @if $transitions-enable
>     >     >>>>>>>>> -             transition:
>     >     >>>>>>>>> -                     duration: $transition-duration
>     >     >>>>>>>>> -                     timing-function:
> $transition-timing
>     >     >>>>>>>>> -
>     >     >>>>>>>>> -     // -- BUTTON LABEL
>     >     >>>>>>>>> -     white-space: nowrap
>     >     >>>>>>>>> -     font:
>     >     >>>>>>>>> -             family: $font-stack
>     >     >>>>>>>>> -             size: $font-size
>     >     >>>>>>>>> -             weight: bold
>     >     >>>>>>>>>   color: $text-color
>     >     >>>>>>>>> -     text:
>     >     >>>>>>>>> -             transform: uppercase
>     >     >>>>>>>>> -             decoration: none
>     >     >>>>>>>>> +
>     >     >>>>>>>>>   @if not $flat and $text-color == $font-theme-color
>     >     >>>>>>>>>           text:
>     >     >>>>>>>>>                   shadow: 0 -1px 0
> rgba(darken($button-color,
>     >     >> 30%),
>     >     >>>>>>>> .7) //0 .063em
>     >     >>>>>>>>> @@ -65,21 +44,46 @@ $button-border-radius: 3px
>     >     >>>>>>>>>           +jewel-bg-border("active", $button-color)
>     >     >>>>>>>>>
>     >     >>>>>>>>>   &:focus
>     >     >>>>>>>>> -             outline: none
>     >     >>>>>>>>>           +jewel-bg-border("focus", $button-color)
>     >     >>>>>>>>>
>     >     >>>>>>>>>   &[disabled]
>     >     >>>>>>>>> -             cursor: unset
>     >     >>>>>>>>>           +jewel-bg-border("disabled", $button-color)
>     >     >>>>>>>>>           color: $disabled-font-color
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +.jewel.button
>     >     >>>>>>>>> +     +button-theme($default-color,
> $default-font-color)
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +     // -- BUTTON LABEL
>     >     >>>>>>>>> +     font:
>     >     >>>>>>>>> +             family: $font-stack
>     >     >>>>>>>>> +             size: $font-size
>     >     >>>>>>>>> +             weight: bold
>     >     >>>>>>>>> +     text:
>     >     >>>>>>>>> +             transform: uppercase
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +     @if $transitions-enable
>     >     >>>>>>>>> +             transition:
>     >     >>>>>>>>> +                     duration: $transition-duration
>     >     >>>>>>>>> +                     timing-function:
> $transition-timing
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +     &[disabled]
>     >     >>>>>>>>>           font:
>     >     >>>>>>>>>                   weight: normal
>     >     >>>>>>>>>           text:
>     >     >>>>>>>>>                   shadow: unset
>     >     >>>>>>>>>
>     >     >>>>>>>>> -.jewel.button
>     >     >>>>>>>>> -     +button-theme($default-color,
> $default-font-color)
>     >     >>>>>>>>> -
>     >     >>>>>>>>> .jewel.button.primary
>     >     >>>>>>>>>   +button-theme($primary-color, $font-theme-color)
>     >     >>>>>>>>>
>     >     >>>>>>>>> +.jewel.button.xsmall
>     >     >>>>>>>>> +     font-size: 60%
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +.jewel.button.small
>     >     >>>>>>>>> +     font-size: 80%
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +.jewel.button.large
>     >     >>>>>>>>> +     font-size: 120%
>     >     >>>>>>>>> +
>     >     >>>>>>>>> +.jewel.button.xlarge
>     >     >>>>>>>>> +     font-size: 140%
>     >     >>>>>>>>> +
>     >     >>>>>>>>> \ No newline at end of file
>     >     >>>>>>>>> diff --git a/frameworks/themes/
> JewelTheme/src/main/sass/
>     >     >>>>>>>> components-secondary/_button.sass b/frameworks/themes/
>     >     >>>>>>>> JewelTheme/src/main/sass/components-secondary/_button.
> sass
>     >     >>>>>>>>> index 95ce496..2ebafe4 100644
>     >     >>>>>>>>> --- a/frameworks/themes/JewelTheme/src/main/sass/
>     >     >>>>>>>> components-secondary/_button.sass
>     >     >>>>>>>>> +++ b/frameworks/themes/JewelTheme/src/main/sass/
>     >     >>>>>>>> components-secondary/_button.sass
>     >     >>>>>>>>> @@ -20,38 +20,14 @@
>     >     >>>>>>>>> // Jewel Button
>     >     >>>>>>>>>
>     >     >>>>>>>>> // Button variables
>     >     >>>>>>>>> -$button-margin: 0 !default
>     >     >>>>>>>>> -$button-padding: 10px 16px !default
>     >     >>>>>>>>> -$button-min-height: 34px !default
>     >     >>>>>>>>> -$button-min-width: 74px !default
>     >     >>>>>>>>> -
>     >     >>>>>>>>> $button-border-radius: 3px
>     >     >>>>>>>>>
>     >     >>>>>>>>> =button-theme($button-color, $text-color)
>     >     >>>>>>>>> -     cursor: pointer
>     >     >>>>>>>>> -     display: inline-block
>     >     >>>>>>>>> -
>     >     >>>>>>>>> -     margin: $button-margin //1rem
>     >     >>>>>>>>> -     padding: $button-padding //.938em 1.875em
>     >     >>>>>>>>> -
>     >     >>>>>>>>> -     min-width: $button-min-width
>     >     >>>>>>>>> -     min-height: $button-min-height
>     >     >>>>>>>>>
>     >     >>>>>>>>>   +jewel-bg-border("normal", $button-color,
>     > $button-border-radius)
>     >     >>>>>>>>>
>     >     >>>>>>>>> -     @if $transitions-enable
>     >     >>>>>>>>> -             transition:
>     >     >>>>>>>>> -                     duration: $transition-duration
>     >     >>>>>>>>> -                     timing-function:
> $transition-timing
>     >     >>>>>>>>> -
>     >     >>>>>>>>> -     font:
>     >     >>>>>>>>> -             family: $font-stack
>     >     >>>>>>>>> -             size: $font-size
>     >     >>>>>>>>> -             weight: bold
>     >     >>>>>>>>>   color: $text-color
>     >     >>>>>>>>> -     text:
>     >     >>>>>>>>> -             transform: uppercase
>     >     >>>>>>>>> -             decoration: none
>     >     >>>>>>>>> +
>     >     >>>>>>>>>   @if not $flat and $text-color == $font-theme-color
>     >     >>>>>>>>>           text:
>     >     >>>>>>>>>                   shadow: 0 -1px 0
> rgba(darken($button-color,
>     >     >> 30%),
>     >     >>>>>>>> .7) //0 .063em
>     >     >>>>>>>>> @@ -63,17 +39,11 @@ $button-border-radius: 3px
>     >     >>>>>>>>>           +jewel-bg-border("active", $button-color)
>     >     >>>>>>>>>
>     >     >>>>>>>>>   &:focus
>     >     >>>>>>>>> -             outline: none
>     >     >>>>>>>>>           +jewel-bg-border("focus", $button-color)
>     >     >>>>>>>>>
>     >     >>>>>>>>>   &[disabled]
>     >     >>>>>>>>> -             cursor: unset
>     >     >>>>>>>>>           +jewel-bg-border("disabled", $button-color)
>     >     >>>>>>>>>           color: $disabled-font-color
>     >     >>>>>>>>> -             font:
>     >     >>>>>>>>> -                     weight: normal
>     >     >>>>>>>>> -             text:
>     >     >>>>>>>>> -                     shadow: unset
>     >     >>>>>>>>> -
>     >     >>>>>>>>> +
>     >     >>>>>>>>> .jewel.button.secondary
>     >     >>>>>>>>>   +button-theme($secondary-color, $font-theme-color)
>     >     >>>>>>>>>
>     >     >>>>>>>>> --
>     >     >>>>>>>>> To stop receiving notification emails like this one,
> please
>     > contact
>     >     >>>>>>>>> carlosrovira@apache.org.
>     >     >>>>>>>>
>     >     >>>>>>>>
>     >     >>>>>>>
>     >     >>>>>>>
>     >     >>>>>>> --
>     >     >>>>>>> Carlos Rovira
>     >     >>>>>>> https://na01.safelinks.protection.outlook.com/?url=
>     > http%3A%2F%2Fabout.me%2Fcarlosrovira&data=02%7C01%7Caharui%
> 40adobe.com%
>     > 7C175fdf8089054b63695808d5d1f8f53e%7Cfa7b1b5a7b34438794aed2c178de
>     > cee1%7C0%7C1%7C636645789557061703&sdata=BgDQr%
>     > 2FGofdBJSfqMSjUcmcCUAumRhLYv1T6eWq1Si8c%3D&reserved=0
>     >     >>>>>>
>     >     >>>>>>
>     >     >>>>>
>     >     >>>>>
>     >     >>>>> --
>     >     >>>>> Carlos Rovira
>     >     >>>>> https://na01.safelinks.protection.outlook.com/?url=
>     > http%3A%2F%2Fabout.me%2Fcarlosrovira&data=02%7C01%7Caharui%
> 40adobe.com%
>     > 7C175fdf8089054b63695808d5d1f8f53e%7Cfa7b1b5a7b34438794aed2c178de
>     > cee1%7C0%7C1%7C636645789557061703&sdata=BgDQr%
>     > 2FGofdBJSfqMSjUcmcCUAumRhLYv1T6eWq1Si8c%3D&reserved=0
>     >     >>>>
>     >     >>>>
>     >     >>>
>     >     >>>
>     >     >>> --
>     >     >>> Carlos Rovira
>     >     >>> https://na01.safelinks.protection.outlook.com/?url=
>     > http%3A%2F%2Fabout.me%2Fcarlosrovira&data=02%7C01%7Caharui%
> 40adobe.com%
>     > 7C175fdf8089054b63695808d5d1f8f53e%7Cfa7b1b5a7b34438794aed2c178de
>     > cee1%7C0%7C1%7C636645789557061703&sdata=BgDQr%
>     > 2FGofdBJSfqMSjUcmcCUAumRhLYv1T6eWq1Si8c%3D&reserved=0
>     >     >>
>     >     >>
>     >     >
>     >     >
>     >     > --
>     >     > Carlos Rovira
>     >     > https://na01.safelinks.protection.outlook.com/?url=
>     > http%3A%2F%2Fabout.me%2Fcarlosrovira&data=02%7C01%7Caharui%
> 40adobe.com%
>     > 7C175fdf8089054b63695808d5d1f8f53e%7Cfa7b1b5a7b34438794aed2c178de
>     > cee1%7C0%7C1%7C636645789557061703&sdata=BgDQr%
>     > 2FGofdBJSfqMSjUcmcCUAumRhLYv1T6eWq1Si8c%3D&reserved=0
>     >
>     >
>     >
>     >
>     >
>
>
>     --
>     Carlos Rovira
>     https://na01.safelinks.protection.outlook.com/?url=
> http%3A%2F%2Fabout.me%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
> 7C0489da5a7b2e477269ef08d5d2339ea8%7Cfa7b1b5a7b34438794aed2c178de
> cee1%7C0%7C1%7C636646041499325868&sdata=At0QvvC3hCZKrVTCPumlk4xmA7zKWZ
> pMIoo8ytpt4xg%3D&reserved=0
>
>
>


-- 
Carlos Rovira
http://about.me/carlosrovira

Mime
  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message