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
