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