[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
