<j:Button text="xsmall" size="xsmall”/>
Here’s a possible implementation:
public static const XSMALL:String = "xsmall";
public static const SMALL:String = "small";
public static const LARGE:String = "large";
public static const XLARGE:String = "xlarge";
private var _size:Boolean = false;
/**
* A size effect selector.
* Sets the size of the button using one of the "size" constants
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.9.3
*/
public function get size():String
{
return _size;
}
public function set size(value:String):void
{
if (_size != value)
{
if(_size)
{
classSelectorList.toggle(_size, false);
}
_size = value;
classSelectorList.toggle(_size, true);
}
}
I wish we had support for the [Inspectable] meta tag in Royale. That would make
MXML autocomplete a lot nicer.
> On Jun 14, 2018, at 1:36 PM, Carlos Rovira <[email protected]> wrote:
>
> Hi Harbs,
>
> please write how the user will write it so I can understand it. Maybe will
> be using binding in the mxml declaration?
>
> thanks!
>
>
>
> 2018-06-14 10:14 GMT+02:00 Harbs <[email protected]>:
>
>> Why not have a single “size” property with constants for xsmall, small,
>> normal, large and xlarge?
>>
>> It also look like it’s possible to set both small and large to true. That
>> seems like something which should be avoided.
>>
>> Thanks,
>> Harbs
>>
>>> On Jun 14, 2018, at 2:09 AM, [email protected] wrote:
>>>
>>> This is an automated email from the ASF dual-hosted git repository.
>>>
>>> carlosrovira pushed a commit to branch develop
>>> in repository https://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 <[email protected]>
>>> AuthorDate: Thu Jun 14 01:09:13 2018 +0200
>>>
>>> Jewel Button new sizes, fixes, things missed and optimization and
>> reduction of file size
>>> ---
>>> .../src/main/royale/ButtonPlayGround.mxml | 8 +
>>> .../projects/Jewel/src/main/resources/defaults.css | 24 +++
>>> .../main/royale/org/apache/royale/jewel/Button.as | 208
>> +++++++++++++++++++++
>>> .../projects/Jewel/src/main/sass/_global.sass | 3 +
>>> .../Jewel/src/main/sass/components/_button.sass | 34 ++++
>>> .../JewelTheme/src/main/resources/defaults.css | 91 ++-------
>>> .../main/sass/components-emphasized/_button.sass | 34 +---
>>> .../src/main/sass/components-primary/_button.sass | 66 ++++---
>>> .../main/sass/components-secondary/_button.sass | 34 +---
>>> 9 files changed, 335 insertions(+), 167 deletions(-)
>>>
>>> diff --git
>>> a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
>> b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
>>> index 966925c..dece666 100644
>>> --- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
>>> +++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
>>> @@ -41,4 +41,12 @@ limitations under the License.
>>> <j:Disabled/>
>>> </j:beads>
>>> </j:Button>
>>> +
>>> + <html:H4 text="Sizes"/>
>>> +
>>> + <j:Button text="xsmall" xsmall="true"/>
>>> + <j:Button text="small" small="true" primary="true"/>
>>> + <j:Button text="large" large="true" secondary="true"/>
>>> + <j:Button text="xlarge" xlarge="true" emphasized="true"/>
>>
>>> +
>>> </j:Card>
>>> diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css
>> b/frameworks/projects/Jewel/src/main/resources/defaults.css
>>> index 5d6c0de..6b521dd 100644
>>> --- a/frameworks/projects/Jewel/src/main/resources/defaults.css
>>> +++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
>>> @@ -24,6 +24,10 @@
>>> border: 0;
>>> }
>>>
>>> +button::-moz-focus-inner {
>>> + padding: 0;
>>> +}
>>> +
>>> j|View {
>>> IBeadView: ClassReference("org.apache.royale.core.beads.GroupView");
>>> }
>>> @@ -85,6 +89,26 @@ j|Alert {
>>> IBeadView: ClassReference("org.apache.royale.jewel.beads.views.
>> AlertView");
>>> }
>>>
>>> +.jewel.button {
>>> + margin: 0;
>>> + padding: 0.72em 1.12em;
>>> + cursor: pointer;
>>> + user-select: none;
>>> + display: inline-block;
>>> + zoom: 1;
>>> + vertical-align: middle;
>>> + white-space: nowrap;
>>> + line-height: normal !important;
>>> + text-align: center;
>>> + text-decoration: none;
>>> +}
>>> +.jewel.button:focus {
>>> + outline: none;
>>> +}
>>> +.jewel.button[disabled] {
>>> + cursor: unset;
>>> +}
>>> +
>>> .jewel.card {
>>> flex-direction: column;
>>> min-width: 320px;
>>> diff --git
>>> a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
>> b/frameworks/projects/Jewel/src/main/royale/org/apache/
>> royale/jewel/Button.as
>>> index a6c17df..6dfc1b0 100644
>>> --- a/frameworks/projects/Jewel/src/main/royale/org/apache/
>> royale/jewel/Button.as
>>> +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/
>> royale/jewel/Button.as
>>> @@ -311,6 +311,110 @@ package org.apache.royale.jewel
>>> classSelectorList.toggle("emphasized", value);
>>> }
>>> }
>>> +
>>> + private var _xsmall:Boolean = false;
>>> +
>>> + /**
>>> + * A boolean flag to activate "xsmall" effect selector.
>>> + * Makes the size of the button small
>>> + *
>>> + * @langversion 3.0
>>> + * @playerversion Flash 10.2
>>> + * @playerversion AIR 2.6
>>> + * @productversion Royale 0.9.3
>>> + */
>>> + public function get xsmall():Boolean
>>> + {
>>> + return _xsmall;
>>> + }
>>> +
>>> + public function set xsmall(value:Boolean):void
>>> + {
>>> + if (_xsmall != value)
>>> + {
>>> + _xsmall = value;
>>> +
>>> + classSelectorList.toggle("xsmall", value);
>>> + }
>>> + }
>>> +
>>> + private var _small:Boolean = false;
>>> +
>>> + /**
>>> + * A boolean flag to activate "small" effect selector.
>>> + * Makes the size of the button small
>>> + *
>>> + * @langversion 3.0
>>> + * @playerversion Flash 10.2
>>> + * @playerversion AIR 2.6
>>> + * @productversion Royale 0.9.3
>>> + */
>>> + public function get small():Boolean
>>> + {
>>> + return _small;
>>> + }
>>> +
>>> + public function set small(value:Boolean):void
>>> + {
>>> + if (_small != value)
>>> + {
>>> + _small = value;
>>> +
>>> + classSelectorList.toggle("small", value);
>>> + }
>>> + }
>>> +
>>> + private var _large:Boolean = false;
>>> +
>>> + /**
>>> + * A boolean flag to activate "large" effect selector.
>>> + * Makes the size of the button large
>>> + *
>>> + * @langversion 3.0
>>> + * @playerversion Flash 10.2
>>> + * @playerversion AIR 2.6
>>> + * @productversion Royale 0.9.3
>>> + */
>>> + public function get large():Boolean
>>> + {
>>> + return _large;
>>> + }
>>> +
>>> + public function set large(value:Boolean):void
>>> + {
>>> + if (_large != value)
>>> + {
>>> + _large = value;
>>> +
>>> + classSelectorList.toggle("large", value);
>>> + }
>>> + }
>>> +
>>> + private var _xlarge:Boolean = false;
>>> +
>>> + /**
>>> + * A boolean flag to activate "xlarge" effect selector.
>>> + * Makes the size of the button xlarge
>>> + *
>>> + * @langversion 3.0
>>> + * @playerversion Flash 10.2
>>> + * @playerversion AIR 2.6
>>> + * @productversion Royale 0.9.3
>>> + */
>>> + public function get xlarge():Boolean
>>> + {
>>> + return _xlarge;
>>> + }
>>> +
>>> + public function set xlarge(value:Boolean):void
>>> + {
>>> + if (_xlarge != value)
>>> + {
>>> + _xlarge = value;
>>> +
>>> + classSelectorList.toggle("xlarge", value);
>>> + }
>>> + }
>>> }
>>>
>>> /**
>>> @@ -472,6 +576,110 @@ package org.apache.royale.jewel
>>> toggleClass("emphasized", value);
>>> }
>>> }
>>> +
>>> + private var _xsmall:Boolean = false;
>>> +
>>> + /**
>>> + * A boolean flag to activate "xsmall" effect selector.
>>> + * Makes the size of the button small
>>> + *
>>> + * @langversion 3.0
>>> + * @playerversion Flash 10.2
>>> + * @playerversion AIR 2.6
>>> + * @productversion Royale 0.9.3
>>> + */
>>> + public function get xsmall():Boolean
>>> + {
>>> + return _xsmall;
>>> + }
>>> +
>>> + public function set xsmall(value:Boolean):void
>>> + {
>>> + if (_xsmall != value)
>>> + {
>>> + _xsmall = value;
>>> +
>>> + toggleClass("xsmall", value);
>>> + }
>>> + }
>>> +
>>> + private var _small:Boolean = false;
>>> +
>>> + /**
>>> + * A boolean flag to activate "small" effect selector.
>>> + * Makes the size of the button small
>>> + *
>>> + * @langversion 3.0
>>> + * @playerversion Flash 10.2
>>> + * @playerversion AIR 2.6
>>> + * @productversion Royale 0.9.3
>>> + */
>>> + public function get small():Boolean
>>> + {
>>> + return _small;
>>> + }
>>> +
>>> + public function set small(value:Boolean):void
>>> + {
>>> + if (_small != value)
>>> + {
>>> + _small = value;
>>> +
>>> + toggleClass("small", value);
>>> + }
>>> + }
>>> +
>>> + private var _large:Boolean = false;
>>> +
>>> + /**
>>> + * A boolean flag to activate "large" effect selector.
>>> + * Makes the size of the button large
>>> + *
>>> + * @langversion 3.0
>>> + * @playerversion Flash 10.2
>>> + * @playerversion AIR 2.6
>>> + * @productversion Royale 0.9.3
>>> + */
>>> + public function get large():Boolean
>>> + {
>>> + return _large;
>>> + }
>>> +
>>> + public function set large(value:Boolean):void
>>> + {
>>> + if (_large != value)
>>> + {
>>> + _large = value;
>>> +
>>> + toggleClass("large", value);
>>> + }
>>> + }
>>> +
>>> + private var _xlarge:Boolean = false;
>>> +
>>> + /**
>>> + * A boolean flag to activate "xlarge" effect selector.
>>> + * Makes the size of the button xlarge
>>> + *
>>> + * @langversion 3.0
>>> + * @playerversion Flash 10.2
>>> + * @playerversion AIR 2.6
>>> + * @productversion Royale 0.9.3
>>> + */
>>> + public function get xlarge():Boolean
>>> + {
>>> + return _xlarge;
>>> + }
>>> +
>>> + public function set xlarge(value:Boolean):void
>>> + {
>>> + if (_xlarge != value)
>>> + {
>>> + _xlarge = value;
>>> +
>>> + toggleClass("xlarge", value);
>>> + }
>>> + }
>>>
>>> /**
>>> * @royaleignorecoercion org.apache.royale.core.
>> WrappedHTMLElement
>>> diff --git a/frameworks/projects/Jewel/src/main/sass/_global.sass
>> b/frameworks/projects/Jewel/src/main/sass/_global.sass
>>> index f4792c9..b58d133 100644
>>> --- a/frameworks/projects/Jewel/src/main/sass/_global.sass
>>> +++ b/frameworks/projects/Jewel/src/main/sass/_global.sass
>>> @@ -28,6 +28,9 @@
>>> // remove dotted outline
>>> ::-moz-focus-inner, ::-moz-focus-outer
>>> border: 0
>>> +
>>> +button::-moz-focus-inner
>>> + padding: 0
>>>
>>> j|View
>>> IBeadView: ClassReference("org.apache.
>> royale.core.beads.GroupView")
>>> diff --git a/frameworks/projects/Jewel/src/main/sass/components/_button.sass
>> b/frameworks/projects/Jewel/src/main/sass/components/_button.sass
>>> index 019c818..ea0c8ae 100644
>>> --- a/frameworks/projects/Jewel/src/main/sass/components/_button.sass
>>> +++ b/frameworks/projects/Jewel/src/main/sass/components/_button.sass
>>> @@ -17,4 +17,38 @@
>>> //
>>> ////////////////////////////////////////////////////////////
>> ////////////////////
>>>
>>> +// Jewel Button
>>>
>>> +// Button variables
>>> +$button-margin: 0 !default
>>> +$button-padding: 0.72em 1.12em !default
>>> +$button-min-height: 28px !default
>>> +$button-min-width: 74px !default
>>> +
>>> +.jewel.button
>>> + margin: $button-margin
>>> + padding: $button-padding
>>> +
>>> + // min-width: $button-min-width
>>> + // min-height: $button-min-height
>>> +
>>> + cursor: pointer
>>> + user-select: none
>>> +
>>> + display: inline-block
>>> + zoom: 1
>>> + vertical-align: middle
>>> +
>>> + // -- BUTTON LABEL
>>> + white-space: nowrap
>>> + line-height: normal !important
>>> +
>>> + text:
>>> + align: center
>>> + decoration: none
>>> +
>>> + &:focus
>>> + outline: none
>>> +
>>> + &[disabled]
>>> + cursor: unset
>>> \ No newline at end of file
>>> diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
>> b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
>>> index 5dd17c1..7659a38 100644
>>> --- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
>>> +++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
>>> @@ -102,23 +102,15 @@ div {
>>> }
>>>
>>> .jewel.button {
>>> - cursor: pointer;
>>> - display: inline-block;
>>> - margin: 0;
>>> - padding: 10px 16px;
>>> - min-width: 74px;
>>> - min-height: 34px;
>>> background: linear-gradient(#e6e6e6, #cccccc);
>>> border: 1px solid #b3b3b3;
>>> box-shadow: inset 0 1px 0 white;
>>> border-radius: 3px;
>>> - white-space: nowrap;
>>> + color: #808080;
>>> font-family: "Lato", sans-serif;
>>> font-size: 14px;
>>> font-weight: bold;
>>> - color: #808080;
>>> text-transform: uppercase;
>>> - text-decoration: none;
>>> }
>>> .jewel.button:hover, .jewel.button:hover:focus {
>>> background: linear-gradient(#d9d9d9, silver);
>>> @@ -130,38 +122,26 @@ div {
>>> box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
>>> }
>>> .jewel.button:focus {
>>> - outline: none;
>>> border: 1px solid #b3b3b3;
>>> box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0
>> 1px 0 rgba(255, 255, 255, 0.6);
>>> }
>>> .jewel.button[disabled] {
>>> - cursor: unset;
>>> background: #f3f3f3;
>>> border: 1px solid #d9d9d9;
>>> box-shadow: none;
>>> color: silver;
>>> +}
>>> +.jewel.button[disabled] {
>>> font-weight: normal;
>>> text-shadow: unset;
>>> }
>>>
>>> .jewel.button.primary {
>>> - cursor: pointer;
>>> - display: inline-block;
>>> - margin: 0;
>>> - padding: 10px 16px;
>>> - min-width: 74px;
>>> - min-height: 34px;
>>> background: linear-gradient(#54b7f3, #24a3ef);
>>> border: 1px solid #0f88d1;
>>> box-shadow: inset 0 1px 0 #9bd5f8;
>>> border-radius: 3px;
>>> - white-space: nowrap;
>>> - font-family: "Lato", sans-serif;
>>> - font-size: 14px;
>>> - font-weight: bold;
>>> color: #FFFFFF;
>>> - text-transform: uppercase;
>>> - text-decoration: none;
>>> text-shadow: 0 -1px 0 rgba(10, 90, 138, 0.7);
>>> }
>>> .jewel.button.primary:hover, .jewel.button.primary:hover:focus {
>>> @@ -174,18 +154,30 @@ div {
>>> box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
>>> }
>>> .jewel.button.primary:focus {
>>> - outline: none;
>>> border: 1px solid #0f88d1;
>>> box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0
>> 1px 0 rgba(255, 255, 255, 0.6);
>>> }
>>> .jewel.button.primary[disabled] {
>>> - cursor: unset;
>>> background: #f3f3f3;
>>> border: 1px solid #d9d9d9;
>>> box-shadow: none;
>>> color: silver;
>>> - font-weight: normal;
>>> - text-shadow: unset;
>>> +}
>>> +
>>> +.jewel.button.xsmall {
>>> + font-size: 60%;
>>> +}
>>> +
>>> +.jewel.button.small {
>>> + font-size: 80%;
>>> +}
>>> +
>>> +.jewel.button.large {
>>> + font-size: 120%;
>>> +}
>>> +
>>> +.jewel.button.xlarge {
>>> + font-size: 140%;
>>> }
>>>
>>> .jewel.card {
>>> @@ -619,22 +611,11 @@ j|Card {
>>> }
>>>
>>> .jewel.button.secondary {
>>> - cursor: pointer;
>>> - display: inline-block;
>>> - margin: 0;
>>> - padding: 10px 16px;
>>> - min-width: 74px;
>>> - min-height: 34px;
>>> background: linear-gradient(#f16c42, #ed4812);
>>> border: 1px solid #be390e;
>>> box-shadow: inset 0 1px 0 #f6a389;
>>> border-radius: 3px;
>>> - font-family: "Lato", sans-serif;
>>> - font-size: 14px;
>>> - font-weight: bold;
>>> color: #FFFFFF;
>>> - text-transform: uppercase;
>>> - text-decoration: none;
>>> text-shadow: 0 -1px 0 rgba(119, 36, 9, 0.7);
>>> }
>>> .jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
>>> @@ -647,37 +628,22 @@ j|Card {
>>> box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
>>> }
>>> .jewel.button.secondary:focus {
>>> - outline: none;
>>> border: 1px solid #be390e;
>>> box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0
>> 1px 0 rgba(255, 255, 255, 0.6);
>>> }
>>> .jewel.button.secondary[disabled] {
>>> - cursor: unset;
>>> background: #f3f3f3;
>>> border: 1px solid #d9d9d9;
>>> box-shadow: none;
>>> color: silver;
>>> - font-weight: normal;
>>> - text-shadow: unset;
>>> }
>>>
>>> .jewel.button {
>>> - cursor: pointer;
>>> - display: inline-block;
>>> - margin: 0;
>>> - padding: 10px 16px;
>>> - min-width: 74px;
>>> - min-height: 34px;
>>> background: linear-gradient(#e6e6e6, #cccccc);
>>> border: 1px solid #b3b3b3;
>>> box-shadow: inset 0 1px 0 white;
>>> border-radius: 3px;
>>> - font-family: "Lato", sans-serif;
>>> - font-size: 14px;
>>> - font-weight: bold;
>>> color: #808080;
>>> - text-transform: uppercase;
>>> - text-decoration: none;
>>> }
>>> .jewel.button:hover, .jewel.button:hover:focus {
>>> background: linear-gradient(#d9d9d9, silver);
>>> @@ -689,37 +655,22 @@ j|Card {
>>> box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
>>> }
>>> .jewel.button:focus {
>>> - outline: none;
>>> border: 1px solid #b3b3b3;
>>> box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0
>> 1px 0 rgba(255, 255, 255, 0.6);
>>> }
>>> .jewel.button[disabled] {
>>> - cursor: unset;
>>> background: #f3f3f3;
>>> border: 1px solid #d9d9d9;
>>> box-shadow: none;
>>> color: silver;
>>> - font-weight: normal;
>>> - text-shadow: unset;
>>> }
>>>
>>> .jewel.button.emphasized {
>>> - cursor: pointer;
>>> - display: inline-block;
>>> - margin: 0;
>>> - padding: 10px 16px;
>>> - min-width: 74px;
>>> - min-height: 34px;
>>> background: linear-gradient(#98cc50, #7eb435);
>>> border: 1px solid #638c29;
>>> box-shadow: inset 0 1px 0 #bbdd8b;
>>> border-radius: 3px;
>>> - font-family: "Lato", sans-serif;
>>> - font-size: 14px;
>>> - font-weight: bold;
>>> color: #FFFFFF;
>>> - text-transform: uppercase;
>>> - text-decoration: none;
>>> text-shadow: 0 -1px 0 rgba(57, 81, 24, 0.7);
>>> }
>>> .jewel.button.emphasized:hover, .jewel.button.emphasized:hover:focus {
>>> @@ -732,18 +683,14 @@ j|Card {
>>> box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
>>> }
>>> .jewel.button.emphasized:focus {
>>> - outline: none;
>>> border: 1px solid #638c29;
>>> box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0
>> 1px 0 rgba(255, 255, 255, 0.6);
>>> }
>>> .jewel.button.emphasized[disabled] {
>>> - cursor: unset;
>>> background: #f3f3f3;
>>> border: 1px solid #d9d9d9;
>>> box-shadow: none;
>>> color: silver;
>>> - font-weight: normal;
>>> - text-shadow: unset;
>>> }
>>>
>>> /*# sourceMappingURL=defaults.css.map */
>>> diff --git a/frameworks/themes/JewelTheme/src/main/sass/
>> components-emphasized/_button.sass b/frameworks/themes/
>> JewelTheme/src/main/sass/components-emphasized/_button.sass
>>> index 1076aa0..998359d 100644
>>> --- a/frameworks/themes/JewelTheme/src/main/sass/
>> components-emphasized/_button.sass
>>> +++ b/frameworks/themes/JewelTheme/src/main/sass/
>> components-emphasized/_button.sass
>>> @@ -20,38 +20,14 @@
>>> // Jewel Button
>>>
>>> // Button variables
>>> -$button-margin: 0 !default
>>> -$button-padding: 10px 16px !default
>>> -$button-min-height: 34px !default
>>> -$button-min-width: 74px !default
>>> -
>>> $button-border-radius: 3px
>>>
>>> =button-theme($button-color, $text-color)
>>> - cursor: pointer
>>> - display: inline-block
>>> -
>>> - margin: $button-margin //1rem
>>> - padding: $button-padding //.938em 1.875em
>>> -
>>> - min-width: $button-min-width
>>> - min-height: $button-min-height
>>>
>>> +jewel-bg-border("normal", $button-color, $button-border-radius)
>>>
>>> - @if $transitions-enable
>>> - transition:
>>> - duration: $transition-duration
>>> - timing-function: $transition-timing
>>> -
>>> - font:
>>> - family: $font-stack
>>> - size: $font-size
>>> - weight: bold
>>> color: $text-color
>>> - text:
>>> - transform: uppercase
>>> - decoration: none
>>> +
>>> @if not $flat and $text-color == $font-theme-color
>>> text:
>>> shadow: 0 -1px 0 rgba(darken($button-color, 30%),
>> .7) //0 .063em
>>> @@ -63,18 +39,12 @@ $button-border-radius: 3px
>>> +jewel-bg-border("active", $button-color)
>>>
>>> &:focus
>>> - outline: none
>>> +jewel-bg-border("focus", $button-color)
>>>
>>> &[disabled]
>>> - cursor: unset
>>> +jewel-bg-border("disabled", $button-color)
>>> color: $disabled-font-color
>>> - font:
>>> - weight: normal
>>> - text:
>>> - shadow: unset
>>> -
>>> +
>>> .jewel.button
>>> +button-theme($default-color, $default-font-color)
>>>
>>> diff --git a/frameworks/themes/JewelTheme/src/main/sass/
>> components-primary/_button.sass b/frameworks/themes/
>> JewelTheme/src/main/sass/components-primary/_button.sass
>>> index 751a948..cfa3571 100644
>>> --- a/frameworks/themes/JewelTheme/src/main/sass/
>> components-primary/_button.sass
>>> +++ b/frameworks/themes/JewelTheme/src/main/sass/
>> components-primary/_button.sass
>>> @@ -20,40 +20,19 @@
>>> // Jewel Button
>>>
>>> // Button variables
>>> -$button-margin: 0 !default
>>> -$button-padding: 10px 16px !default
>>> -$button-min-height: 34px !default
>>> -$button-min-width: 74px !default
>>> +// $button-margin: 0 !default
>>> +// $button-padding: 0.72em 1.12em !default
>>> +// $button-min-height: 28px !default
>>> +// $button-min-width: 74px !default
>>>
>>> $button-border-radius: 3px
>>>
>>> =button-theme($button-color, $text-color)
>>> - cursor: pointer
>>> - display: inline-block
>>> -
>>> - margin: $button-margin //1rem
>>> - padding: $button-padding //.938em 1.875em
>>> -
>>> - min-width: $button-min-width
>>> - min-height: $button-min-height
>>>
>>> +jewel-bg-border("normal", $button-color, $button-border-radius)
>>>
>>> - @if $transitions-enable
>>> - transition:
>>> - duration: $transition-duration
>>> - timing-function: $transition-timing
>>> -
>>> - // -- BUTTON LABEL
>>> - white-space: nowrap
>>> - font:
>>> - family: $font-stack
>>> - size: $font-size
>>> - weight: bold
>>> color: $text-color
>>> - text:
>>> - transform: uppercase
>>> - decoration: none
>>> +
>>> @if not $flat and $text-color == $font-theme-color
>>> text:
>>> shadow: 0 -1px 0 rgba(darken($button-color, 30%),
>> .7) //0 .063em
>>> @@ -65,21 +44,46 @@ $button-border-radius: 3px
>>> +jewel-bg-border("active", $button-color)
>>>
>>> &:focus
>>> - outline: none
>>> +jewel-bg-border("focus", $button-color)
>>>
>>> &[disabled]
>>> - cursor: unset
>>> +jewel-bg-border("disabled", $button-color)
>>> color: $disabled-font-color
>>> +
>>> +.jewel.button
>>> + +button-theme($default-color, $default-font-color)
>>> +
>>> + // -- BUTTON LABEL
>>> + font:
>>> + family: $font-stack
>>> + size: $font-size
>>> + weight: bold
>>> + text:
>>> + transform: uppercase
>>> +
>>> + @if $transitions-enable
>>> + transition:
>>> + duration: $transition-duration
>>> + timing-function: $transition-timing
>>> +
>>> + &[disabled]
>>> font:
>>> weight: normal
>>> text:
>>> shadow: unset
>>>
>>> -.jewel.button
>>> - +button-theme($default-color, $default-font-color)
>>> -
>>> .jewel.button.primary
>>> +button-theme($primary-color, $font-theme-color)
>>>
>>> +.jewel.button.xsmall
>>> + font-size: 60%
>>> +
>>> +.jewel.button.small
>>> + font-size: 80%
>>> +
>>> +.jewel.button.large
>>> + font-size: 120%
>>> +
>>> +.jewel.button.xlarge
>>> + font-size: 140%
>>> +
>>> \ No newline at end of file
>>> diff --git a/frameworks/themes/JewelTheme/src/main/sass/
>> components-secondary/_button.sass b/frameworks/themes/
>> JewelTheme/src/main/sass/components-secondary/_button.sass
>>> index 95ce496..2ebafe4 100644
>>> --- a/frameworks/themes/JewelTheme/src/main/sass/
>> components-secondary/_button.sass
>>> +++ b/frameworks/themes/JewelTheme/src/main/sass/
>> components-secondary/_button.sass
>>> @@ -20,38 +20,14 @@
>>> // Jewel Button
>>>
>>> // Button variables
>>> -$button-margin: 0 !default
>>> -$button-padding: 10px 16px !default
>>> -$button-min-height: 34px !default
>>> -$button-min-width: 74px !default
>>> -
>>> $button-border-radius: 3px
>>>
>>> =button-theme($button-color, $text-color)
>>> - cursor: pointer
>>> - display: inline-block
>>> -
>>> - margin: $button-margin //1rem
>>> - padding: $button-padding //.938em 1.875em
>>> -
>>> - min-width: $button-min-width
>>> - min-height: $button-min-height
>>>
>>> +jewel-bg-border("normal", $button-color, $button-border-radius)
>>>
>>> - @if $transitions-enable
>>> - transition:
>>> - duration: $transition-duration
>>> - timing-function: $transition-timing
>>> -
>>> - font:
>>> - family: $font-stack
>>> - size: $font-size
>>> - weight: bold
>>> color: $text-color
>>> - text:
>>> - transform: uppercase
>>> - decoration: none
>>> +
>>> @if not $flat and $text-color == $font-theme-color
>>> text:
>>> shadow: 0 -1px 0 rgba(darken($button-color, 30%),
>> .7) //0 .063em
>>> @@ -63,17 +39,11 @@ $button-border-radius: 3px
>>> +jewel-bg-border("active", $button-color)
>>>
>>> &:focus
>>> - outline: none
>>> +jewel-bg-border("focus", $button-color)
>>>
>>> &[disabled]
>>> - cursor: unset
>>> +jewel-bg-border("disabled", $button-color)
>>> color: $disabled-font-color
>>> - font:
>>> - weight: normal
>>> - text:
>>> - shadow: unset
>>> -
>>> +
>>> .jewel.button.secondary
>>> +button-theme($secondary-color, $font-theme-color)
>>>
>>> --
>>> To stop receiving notification emails like this one, please contact
>>> [email protected].
>>
>>
>
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
