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
