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
