In FB there was a file that holds that values in SWC if I recall right. We should provide that kind of file and IDEs use it. But I think compiler should not need to be aware of that metadata since it will not be use when run or debug.
2018-06-14 15:15 GMT+02:00 Harbs <[email protected]>: > 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://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 > >> > >> > > > > > > -- > > Carlos Rovira > > http://about.me/carlosrovira > > > -- Carlos Rovira http://about.me/carlosrovira
