You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@royale.apache.org by Harbs <ha...@gmail.com> on 2018/06/14 08:14:20 UTC
Re: [royale-asjs] branch develop updated: Jewel Button new sizes,
fixes, things missed and optimization and reduction of file size
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://gitbox.apache.org/repos/asf/royale-asjs.git
>
>
> 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 <ca...@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.
Re: [royale-asjs] branch develop updated: Jewel Button new sizes,
fixes, things missed and optimization and reduction of file size
Posted by Carlos Rovira <ca...@apache.org>.
> 2018-06-14 10:14 GMT+02:00 Harbs <ha...@gmail.com>:
>>
>> It also look like it’s possible to set both small and large to true. That
>> seems like something which should be avoided.
>>
>>
How could we solve this? The same will happen for styles
primary/secondary/emphasized...
a boolean is very handy here, and is great for compilation checking, can we
get a solution that unifies all properties in one and already have the
compilation check capability?
thanks
> 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://gitbox.apache.org/repos/asf/royale-asjs.git
>> >
>> >
>> > 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 <ca...@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/ButtonPlayGro
>> und.mxml
>> > +++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGro
>> und.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.roy
>> ale.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/royal
>> e/jewel/Button.as
>> > index a6c17df..6dfc1b0 100644
>> > --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royal
>> e/jewel/Button.as
>> > +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royal
>> e/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.Wrapped
>> HTMLElement
>> > 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.roy
>> ale.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
> http://about.me/carlosrovira
>
>
--
Carlos Rovira
http://about.me/carlosrovira
Re: [royale-asjs] branch develop updated: Jewel Button new sizes,
fixes, things missed and optimization and reduction of file size
Posted by Carlos Rovira <ca...@apache.org>.
In FB there was a file that holds that values in SWC if I recall right. We
should provide that kind of file and IDEs use it. But I think compiler
should not need to be aware of that metadata since it will not be use when
run or debug.
2018-06-14 15:15 GMT+02:00 Harbs <ha...@gmail.com>:
> 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 <ca...@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 <ha...@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 <ca...@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 <ha...@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 <ca...@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 <ha...@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 <ha...@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://gitbox.apache.org/
> repos/asf/royale-asjs.git
> >>>>>>>>>
> >>>>>>>>>
> >>>>>>>>> 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 <ca...@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
> >>>>>>> http://about.me/carlosrovira
> >>>>>>
> >>>>>>
> >>>>>
> >>>>>
> >>>>> --
> >>>>> Carlos Rovira
> >>>>> http://about.me/carlosrovira
> >>>>
> >>>>
> >>>
> >>>
> >>> --
> >>> Carlos Rovira
> >>> http://about.me/carlosrovira
> >>
> >>
> >
> >
> > --
> > Carlos Rovira
> > http://about.me/carlosrovira
>
>
>
--
Carlos Rovira
http://about.me/carlosrovira
Re: [royale-asjs] branch develop updated: Jewel Button new sizes,
fixes, things missed and optimization and reduction of file size
Posted by Carlos Rovira <ca...@apache.org>.
Hi Alex,
right, but I think It does not cover all the cases. I think this will
deserve more discussion in its own thread, but better at the time I'll plan
to put some work on it so we catch on this fresh and with time o put time
on it.
Thanks
Carlos
2018-06-15 21:42 GMT+02:00 Alex Harui <ah...@adobe.com.invalid>:
>
>
> On 6/15/18, 1:47 AM, "carlos.rovira@gmail.com on behalf of Carlos
> Rovira" <carlos.rovira@gmail.com on behalf of carlosrovira@apache.org>
> wrote:
>
> 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.
>
> OK. IMO, beads, CSS and ValuesManager are a DI subsystem already. In
> theory, or TLCs have no assumptions on the concrete implementations other
> than the interfaces for the properties the proxy to the model.
>
> My 2 cents,
> -Alex
>
>
--
Carlos Rovira
http://about.me/carlosrovira
Re: [royale-asjs] branch develop updated: Jewel Button new sizes,
fixes, things missed and optimization and reduction of file size
Posted by Alex Harui <ah...@adobe.com.INVALID>.
On 6/15/18, 1:47 AM, "carlos.rovira@gmail.com on behalf of Carlos Rovira" <carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:
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.
OK. IMO, beads, CSS and ValuesManager are a DI subsystem already. In theory, or TLCs have no assumptions on the concrete implementations other than the interfaces for the properties the proxy to the model.
My 2 cents,
-Alex
Re: [royale-asjs] branch develop updated: Jewel Button new sizes,
fixes, things missed and optimization and reduction of file size
Posted by Carlos Rovira <ca...@apache.org>.
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 <ah...@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 <ah...@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" <ha...@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 <ha...@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 <ha...@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 <ha...@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 <ca...@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
Re: [royale-asjs] branch develop updated: Jewel Button new sizes,
fixes, things missed and optimization and reduction of file size
Posted by Alex Harui <ah...@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 <ah...@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" <ha...@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 <ca...@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 <ha...@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 <ha...@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 <ha...@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 <ha...@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 <ca...@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%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C1%7C636646041499325868&sdata=At0QvvC3hCZKrVTCPumlk4xmA7zKWZpMIoo8ytpt4xg%3D&reserved=0
Re: [royale-asjs] branch develop updated: Jewel Button new sizes,
fixes, things missed and optimization and reduction of file size
Posted by Carlos Rovira <ca...@apache.org>.
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 <ah...@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" <ha...@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 <ca...@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 <ha...@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 <ha...@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 <ha...@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 <ha...@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%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 <ca...@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
http://about.me/carlosrovira
Re: [royale-asjs] branch develop updated: Jewel Button new sizes,
fixes, things missed and optimization and reduction of file size
Posted by Alex Harui <ah...@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" <ha...@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 <ca...@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 <ha...@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 <ca...@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 <ha...@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 <ca...@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 <ha...@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 <ca...@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 <ha...@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%2Fgitbox.apache.org%2Frepos%2Fasf%2Froyale-asjs.git&data=02%7C01%7Caharui%40adobe.com%7C175fdf8089054b63695808d5d1f8f53e%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C1%7C636645789557061703&sdata=r6OsXypQG0TIWYUEJ0Q82jyR4QvGVLl4KooZASP%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 <ca...@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%7Cfa7b1b5a7b34438794aed2c178decee1%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%7Cfa7b1b5a7b34438794aed2c178decee1%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%7Cfa7b1b5a7b34438794aed2c178decee1%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%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C1%7C636645789557061703&sdata=BgDQr%2FGofdBJSfqMSjUcmcCUAumRhLYv1T6eWq1Si8c%3D&reserved=0
Re: [royale-asjs] branch develop updated: Jewel Button new sizes,
fixes, things missed and optimization and reduction of file size
Posted by Harbs <ha...@gmail.com>.
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 <ca...@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 <ha...@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 <ca...@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 <ha...@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 <ca...@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 <ha...@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 <ca...@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 <ha...@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://gitbox.apache.org/repos/asf/royale-asjs.git
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> 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 <ca...@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
>>>>>>> http://about.me/carlosrovira
>>>>>>
>>>>>>
>>>>>
>>>>>
>>>>> --
>>>>> Carlos Rovira
>>>>> http://about.me/carlosrovira
>>>>
>>>>
>>>
>>>
>>> --
>>> Carlos Rovira
>>> http://about.me/carlosrovira
>>
>>
>
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
Re: [royale-asjs] branch develop updated: Jewel Button new sizes,
fixes, things missed and optimization and reduction of file size
Posted by Carlos Rovira <ca...@apache.org>.
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 <ha...@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 <ca...@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 <ha...@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 <ca...@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 <ha...@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 <ca...@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 <ha...@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://gitbox.apache.org/repos/asf/royale-asjs.git
> >>>>>>>
> >>>>>>>
> >>>>>>> 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 <ca...@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
> >>>>> http://about.me/carlosrovira
> >>>>
> >>>>
> >>>
> >>>
> >>> --
> >>> Carlos Rovira
> >>> http://about.me/carlosrovira
> >>
> >>
> >
> >
> > --
> > Carlos Rovira
> > http://about.me/carlosrovira
>
>
--
Carlos Rovira
http://about.me/carlosrovira
Re: [royale-asjs] branch develop updated: Jewel Button new sizes,
fixes, things missed and optimization and reduction of file size
Posted by Harbs <ha...@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 <ca...@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 <ha...@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 <ca...@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 <ha...@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 <ca...@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 <ha...@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://gitbox.apache.org/repos/asf/royale-asjs.git
>>>>>>>
>>>>>>>
>>>>>>> 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 <ca...@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
>>>>> http://about.me/carlosrovira
>>>>
>>>>
>>>
>>>
>>> --
>>> Carlos Rovira
>>> http://about.me/carlosrovira
>>
>>
>
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
Re: [royale-asjs] branch develop updated: Jewel Button new sizes,
fixes, things missed and optimization and reduction of file size
Posted by Carlos Rovira <ca...@apache.org>.
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 <ha...@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 <ca...@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 <ha...@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 <ca...@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 <ha...@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://gitbox.apache.org/repos/asf/royale-asjs.git
> >>>>>
> >>>>>
> >>>>> 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 <ca...@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
> >>> http://about.me/carlosrovira
> >>
> >>
> >
> >
> > --
> > Carlos Rovira
> > http://about.me/carlosrovira
>
>
--
Carlos Rovira
http://about.me/carlosrovira
Re: [royale-asjs] branch develop updated: Jewel Button new sizes,
fixes, things missed and optimization and reduction of file size
Posted by Harbs <ha...@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 <ca...@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 <ha...@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 <ca...@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 <ha...@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://gitbox.apache.org/repos/asf/royale-asjs.git
>>>>>
>>>>>
>>>>> 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 <ca...@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
>>> http://about.me/carlosrovira
>>
>>
>
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
Re: [royale-asjs] branch develop updated: Jewel Button new sizes,
fixes, things missed and optimization and reduction of file size
Posted by Carlos Rovira <ca...@apache.org>.
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 <ha...@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 <ca...@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 <ha...@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://gitbox.apache.org/repos/asf/royale-asjs.git
> >>>
> >>>
> >>> 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 <ca...@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
> > http://about.me/carlosrovira
>
>
--
Carlos Rovira
http://about.me/carlosrovira
Re: [royale-asjs] branch develop updated: Jewel Button new sizes,
fixes, things missed and optimization and reduction of file size
Posted by Harbs <ha...@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 <ca...@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 <ha...@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://gitbox.apache.org/repos/asf/royale-asjs.git
>>>
>>>
>>> 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 <ca...@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
> http://about.me/carlosrovira
Re: [royale-asjs] branch develop updated: Jewel Button new sizes,
fixes, things missed and optimization and reduction of file size
Posted by Carlos Rovira <ca...@apache.org>.
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 <ha...@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://gitbox.apache.org/repos/asf/royale-asjs.git
> >
> >
> > 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 <ca...@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
http://about.me/carlosrovira