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 <[email protected]>:

> 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" <[email protected]> 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 <[email protected]>
> 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 <[email protected]>:
>     >
>     >> 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 <
> [email protected]>
>     >> 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 <[email protected]>:
>     >>>
>     >>>> [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 <
> [email protected]>
>     >>>> 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 <[email protected]>:
>     >>>>>
>     >>>>>> <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 <
> [email protected]>
>     >>>>>> 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 <[email protected]>:
>     >>>>>>>
>     >>>>>>>> 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, [email protected] 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%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 <[email protected]>
>     >>>>>>>>> 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
>     >>>>>>>>> [email protected].
>     >>>>>>>>
>     >>>>>>>>
>     >>>>>>>
>     >>>>>>>
>     >>>>>>> --
>     >>>>>>> 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
http://about.me/carlosrovira

Reply via email to