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