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
