royale-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Harbs <harbs.li...@gmail.com>
Subject Re: [royale-asjs] branch develop updated: Jewel Button new sizes, fixes, things missed and optimization and reduction of file size
Date Thu, 14 Jun 2018 11:08:32 GMT
<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 <carlosrovira@apache.org> 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 <harbs.lists@gmail.com>:
> 
>> 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, carlosrovira@apache.org 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 <carlosrovira@apache.org>
>>> 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
>>> carlosrovira@apache.org.
>> 
>> 
> 
> 
> -- 
> Carlos Rovira
> http://about.me/carlosrovira


Mime
View raw message