It needs to be implemented in the compiler first. Right now, the inspectable tag is not preserved.
Is that something which simply needs to be adjusted in the build scripts, or it’s more fundamental than that? Harbs > On Jun 14, 2018, at 3:20 PM, Carlos Rovira <[email protected]> wrote: > > Right, that would be good, although is something that all IDEs should > implement in order to work > > 2018-06-14 14:17 GMT+02:00 Harbs <[email protected]>: > >> [Inspectable] meta tags could help verify correct values in MXML. I hope >> we’ll get that working some day… >> >> Thanks, >> Harbs >> >>> On Jun 14, 2018, at 3:14 PM, Carlos Rovira <[email protected]> >> wrote: >>> >>> Ok, I was trying to avoid properties based on texts, but I think here's >> the >>> only way >>> >>> The only way to get things more compilation free will be: >>> >>> <j:Button text="xsmall" size="{Button.XSMALL}”/> >>> >>> That's what we use to do with MDL icons... >>> >>> I'll apply your changes >>> >>> Thanks! >>> >>> >>> 2018-06-14 13:08 GMT+02:00 Harbs <[email protected]>: >>> >>>> <j:Button text="xsmall" size="xsmall”/> >>>> >>>> Here’s a possible implementation: >>>> >>>> public static const XSMALL:String = "xsmall"; >>>> public static const SMALL:String = "small"; >>>> public static const LARGE:String = "large"; >>>> public static const XLARGE:String = "xlarge"; >>>> >>>> private var _size:Boolean = false; >>>> >>>> /** >>>> * A size effect selector. >>>> * Sets the size of the button using one of the "size" constants >>>> * >>>> * @langversion 3.0 >>>> * @playerversion Flash 10.2 >>>> * @playerversion AIR 2.6 >>>> * @productversion Royale 0.9.3 >>>> */ >>>> public function get size():String >>>> { >>>> return _size; >>>> } >>>> >>>> public function set size(value:String):void >>>> { >>>> if (_size != value) >>>> { >>>> if(_size) >>>> { >>>> classSelectorList.toggle(_size, false); >>>> } >>>> _size = value; >>>> >>>> classSelectorList.toggle(_size, true); >>>> } >>>> } >>>> >>>> I wish we had support for the [Inspectable] meta tag in Royale. That >> would >>>> make MXML autocomplete a lot nicer. >>>> >>>>> On Jun 14, 2018, at 1:36 PM, Carlos Rovira <[email protected]> >>>> wrote: >>>>> >>>>> Hi Harbs, >>>>> >>>>> please write how the user will write it so I can understand it. Maybe >>>> will >>>>> be using binding in the mxml declaration? >>>>> >>>>> thanks! >>>>> >>>>> >>>>> >>>>> 2018-06-14 10:14 GMT+02:00 Harbs <[email protected]>: >>>>> >>>>>> Why not have a single “size” property with constants for xsmall, >> small, >>>>>> normal, large and xlarge? >>>>>> >>>>>> It also look like it’s possible to set both small and large to true. >>>> That >>>>>> seems like something which should be avoided. >>>>>> >>>>>> Thanks, >>>>>> Harbs >>>>>> >>>>>>> On Jun 14, 2018, at 2:09 AM, [email protected] wrote: >>>>>>> >>>>>>> This is an automated email from the ASF dual-hosted git repository. >>>>>>> >>>>>>> carlosrovira pushed a commit to branch develop >>>>>>> in repository https://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 >>>> >>>> >>> >>> >>> -- >>> Carlos Rovira >>> http://about.me/carlosrovira >> >> > > > -- > Carlos Rovira > http://about.me/carlosrovira
