> 2018-06-14 10:14 GMT+02:00 Harbs <[email protected]>: >> >> It also look like it’s possible to set both small and large to true. That >> seems like something which should be avoided. >> >> How could we solve this? The same will happen for styles primary/secondary/emphasized...
a boolean is very handy here, and is great for compilation checking, can we get a solution that unifies all properties in one and already have the compilation check capability? thanks > 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/ButtonPlayGro >> und.mxml >> > +++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGro >> und.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.roy >> ale.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/royal >> e/jewel/Button.as >> > index a6c17df..6dfc1b0 100644 >> > --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royal >> e/jewel/Button.as >> > +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royal >> e/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.Wrapped >> HTMLElement >> > 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.roy >> ale.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
