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].
