This is an automated email from the ASF dual-hosted git repository. carlosrovira pushed a commit to branch jewel-ui in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 4846918cf34870e7878821f35dccc828e9d8956d Author: Carlos Rovira <carlosrov...@apache.org> AuthorDate: Fri Mar 9 23:58:36 2018 +0100 changes to get two initial themes blue and red --- .../src/main/royale/ButtonPlayGround.mxml | 20 ++++----- .../main/royale/org/apache/royale/jewel/Button.as | 4 +- frameworks/themes/JewelTheme/pom.xml | 2 +- .../JewelTheme/src/main/resources/defaults.css | 33 +++++++------- .../src/main/resources/royale-jewel-blue.css | 33 +++++++------- .../{defaults.css => royale-jewel-red.css} | 41 +++++++++-------- .../themes/JewelTheme/src/main/sass/_button.sass | 51 ++++++++-------------- .../JewelTheme/src/main/sass/_textbutton.sass | 25 ++++++++--- .../JewelTheme/src/main/sass/_variables.sass | 13 +----- .../_blue-color-palette.sass} | 22 +--------- .../_red-color-palette.sass} | 22 +--------- .../themes/JewelTheme/src/main/sass/defaults.sass | 2 +- .../src/main/sass/royale-jewel-blue.sass | 1 + ...oyale-jewel-blue.sass => royale-jewel-red.sass} | 1 + 14 files changed, 107 insertions(+), 163 deletions(-) diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml index 3efb4df..218680a 100644 --- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml +++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml @@ -38,30 +38,28 @@ limitations under the License. <js:Button/> <js:TextButton text="Basic"/> - <j:Button/> - <j:TextButton text="C" /> + <j:Button primary="true"/> + <j:TextButton text="C" primary="true"/> - <j:TextButton text="Button"/> - - <j:TextButton text="Button With More Text" /> + <j:TextButton text="Button" primary="true"/> - <j:TextButton text="Button" width="120" height="40" /> + <j:TextButton text="Button With More Text" primary="true"/> + <j:TextButton text="Button" width="120" height="40" primary="true"/> <j:TextButton text="Button" primary="true"/> - <j:TextButton text="Disabled" > + <j:TextButton text="Disabled" primary="true"> <j:beads> <j:Disabled/> </j:beads> </j:TextButton> - - <j:Slider id="slider" width="250" value="420" minimum="50" maximum="500" + <j:Slider id="slider" width="250" value="100" minimum="50" maximum="500" valueChange="onValueChange(event)"/> - <j:Slider id="slider_v" width="250" value="440" minimum="50" maximum="500" + <j:Slider id="slider_v" width="250" value="100" minimum="50" maximum="500" valueChange="onValueChange(event)"/> - <j:TextButton id="button" text="Button" width="420" height="440" /> + <j:TextButton id="button" text="Button" width="100" height="100" primary="true"/> </js:Group> 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 938ed89..0d73362 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 @@ -86,7 +86,7 @@ package org.apache.royale.jewel private var _primary:Boolean = false; /** - * A boolean flag to activate "jewel-button--primary" effect selector. + * A boolean flag to activate "button--primary" effect selector. * Applies primary color display effect. * Colors are defined in royale-jewel.css * @@ -108,7 +108,7 @@ package org.apache.royale.jewel COMPILE::JS { - addOrRemove("jewel-button--primary",value); + addOrRemove("button--primary",value); setClassName(computeFinalClassNames()); } } diff --git a/frameworks/themes/JewelTheme/pom.xml b/frameworks/themes/JewelTheme/pom.xml index 562dd07..702d626 100644 --- a/frameworks/themes/JewelTheme/pom.xml +++ b/frameworks/themes/JewelTheme/pom.xml @@ -65,7 +65,7 @@ <path>../src/main/resources/defaults.css</path> </include-file> --> <include-file> - <name>royale-jewel-blue.css</name> + <name>royale-jewel-red.css</name> <path>../src/main/resources/royale-jewel-blue.css</path> </include-file> </includeFiles> diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css index 782e6d5..c092842 100644 --- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css +++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css @@ -14,7 +14,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -/* BUTTON */ @namespace j "library://ns.apache.org/royale/jewel"; @namespace "http://www.w3.org/1999/xhtml"; .royale *, .royale *:before, .royale *:after { @@ -32,7 +31,7 @@ /** * Jewel Button */ -.button, .textbutton { +.button, .button:hover, .textbutton, .textbutton:hover { cursor: pointer; display: inline-block; margin: 0; @@ -41,29 +40,22 @@ /* Background: */ border: none; border-radius: 3px; - /* TextField */ - color: rgba(255, 255, 255, 0.4); - font-family: "Lato-Bold", sans-serif; - font-style: bold; - font-size: 0.7rem; - text-transform: uppercase; - text-decoration: none; } -.jewel-button--primary { +.button--primary { background-color: #006CEB; transition-duration: 0.4s; } -.jewel-button--primary:hover { +.button--primary:hover { background-color: #0b7bff; } -.jewel-button--primary:active { +.button--primary:active { background-color: #005ecc; } -.jewel-button--primary:focus { +.button--primary:focus { outline: 0; } -.jewel-button--primary [disabled] { +.button--primary [disabled] { background-color: #CCCCCC; color: #888888; cursor: unset; @@ -72,10 +64,17 @@ /** * Jewel TextButton */ -.textbutton[disabled] { +.textbutton, .textbutton:hover { + /* TextField */ + color: rgba(255, 255, 255, 0.9); + font-family: "Lato-Bold", sans-serif; + font-style: bold; + font-size: 0.7rem; + text-transform: uppercase; + text-decoration: none; +} +.textbutton [disabled] { text-shadow: unset; - cursor: unset; - /* TextField: */ } /** diff --git a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css index 76cae63..7d56600 100644 --- a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css +++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css @@ -14,7 +14,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -/* BUTTON */ @namespace j "library://ns.apache.org/royale/jewel"; @namespace "http://www.w3.org/1999/xhtml"; .royale *, .royale *:before, .royale *:after { @@ -32,7 +31,7 @@ /** * Jewel Button */ -.button, .textbutton { +.button, .button:hover, .textbutton, .textbutton:hover { cursor: pointer; display: inline-block; margin: 0; @@ -41,29 +40,22 @@ /* Background: */ border: none; border-radius: 3px; - /* TextField */ - color: rgba(255, 255, 255, 0.4); - font-family: "Lato-Bold", sans-serif; - font-style: bold; - font-size: 0.7rem; - text-transform: uppercase; - text-decoration: none; } -.jewel-button--primary { +.button--primary { background-color: #006CEB; transition-duration: 0.4s; } -.jewel-button--primary:hover { +.button--primary:hover { background-color: #0b7bff; } -.jewel-button--primary:active { +.button--primary:active { background-color: #005ecc; } -.jewel-button--primary:focus { +.button--primary:focus { outline: 0; } -.jewel-button--primary [disabled] { +.button--primary [disabled] { background-color: #CCCCCC; color: #888888; cursor: unset; @@ -72,10 +64,17 @@ /** * Jewel TextButton */ -.textbutton[disabled] { +.textbutton, .textbutton:hover { + /* TextField */ + color: rgba(255, 255, 255, 0.9); + font-family: "Lato-Bold", sans-serif; + font-style: bold; + font-size: 0.7rem; + text-transform: uppercase; + text-decoration: none; +} +.textbutton [disabled] { text-shadow: unset; - cursor: unset; - /* TextField: */ } /** diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css similarity index 85% copy from frameworks/themes/JewelTheme/src/main/resources/defaults.css copy to frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css index 782e6d5..56a785d 100644 --- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css +++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css @@ -14,7 +14,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -/* BUTTON */ @namespace j "library://ns.apache.org/royale/jewel"; @namespace "http://www.w3.org/1999/xhtml"; .royale *, .royale *:before, .royale *:after { @@ -32,7 +31,7 @@ /** * Jewel Button */ -.button, .textbutton { +.button, .button:hover, .textbutton, .textbutton:hover { cursor: pointer; display: inline-block; margin: 0; @@ -41,29 +40,22 @@ /* Background: */ border: none; border-radius: 3px; - /* TextField */ - color: rgba(255, 255, 255, 0.4); - font-family: "Lato-Bold", sans-serif; - font-style: bold; - font-size: 0.7rem; - text-transform: uppercase; - text-decoration: none; } -.jewel-button--primary { - background-color: #006CEB; +.button--primary { + background-color: #FF0000; transition-duration: 0.4s; } -.jewel-button--primary:hover { - background-color: #0b7bff; +.button--primary:hover { + background-color: #ff1f1f; } -.jewel-button--primary:active { - background-color: #005ecc; +.button--primary:active { + background-color: #e00000; } -.jewel-button--primary:focus { +.button--primary:focus { outline: 0; } -.jewel-button--primary [disabled] { +.button--primary [disabled] { background-color: #CCCCCC; color: #888888; cursor: unset; @@ -72,10 +64,17 @@ /** * Jewel TextButton */ -.textbutton[disabled] { +.textbutton, .textbutton:hover { + /* TextField */ + color: rgba(255, 255, 255, 0.9); + font-family: "Lato-Bold", sans-serif; + font-style: bold; + font-size: 0.7rem; + text-transform: uppercase; + text-decoration: none; +} +.textbutton [disabled] { text-shadow: unset; - cursor: unset; - /* TextField: */ } /** @@ -121,4 +120,4 @@ TextField { text-align: left; } -/*# sourceMappingURL=defaults.css.map */ +/*# sourceMappingURL=royale-jewel-red.css.map */ diff --git a/frameworks/themes/JewelTheme/src/main/sass/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/_button.sass index 376f994..8d416f2 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/_button.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/_button.sass @@ -32,46 +32,31 @@ border: none // .094em solid border-radius: 3px //.625em //box-shadow: 0 .375em .313em -.313em rgba(black,.8), inset 0 .063em $off-wht, inset 0 -.188em rgba(black,.15) - - /* TextField */ - color: $white - font: - family: $font-stack - style: bold - size: .7rem - //+trans(0.2s ease-in-out) - text: - transform: uppercase - decoration: none - //shadow: 0 .063em rgba(black,.3) -.button +.button, .button:hover @extend %button-def -.jewel-button--primary +.button--primary +button-theme($primary-color) +//SVGs +//border:1px; /*without this svg shows scaled and bigger*/ +//border-image-source: url(assets/jewel-button.svg) ; +//border-image-slice: 4; +//border-image-width: 4; +//background-image: linear-gradient(#3BB0FF, #1E36FA); +//background-color: #006CEB; +//background-size: cover; +//background-repeat: no-repeat; +//background-clip: padding-box; - //SVGs - //border:1px; /*without this svg shows scaled and bigger*/ - //border-image-source: url(assets/jewel-button.svg) ; - //border-image-slice: 4; - //border-image-width: 4; - - //background-image: linear-gradient(#3BB0FF, #1E36FA); - - //background-color: #006CEB; - //background-size: cover; - //background-repeat: no-repeat; - //background-clip: padding-box; - - //background: url(assets/4slicewithpattern.svg); - //background-size: cover; - //width: fit-content; - //height: fit-content; +//background: url(assets/4slicewithpattern.svg); +//background-size: cover; +//width: fit-content; +//height: fit-content; //.button:active - //box-shadow: #E6431D 0 1px 0 inset; - //text-shadow: 0 -1px 0 #5F3A29; \ No newline at end of file +//box-shadow: #E6431D 0 1px 0 inset; +//text-shadow: 0 -1px 0 #5F3A29; \ No newline at end of file diff --git a/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass index 4211663..4cf7a0f 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass @@ -20,17 +20,28 @@ /** * Jewel TextButton */ - -.textbutton +%textbutton-def @extend %button-def + /* TextField */ + color: $white + font: + family: $font-stack + style: bold + size: .7rem + //+trans(0.2s ease-in-out) + text: + transform: uppercase + decoration: none + //shadow: 0 .063em rgba(black,.3) + [disabled] + text: + shadow: unset -.textbutton[disabled] - text: - shadow: unset - cursor: unset +.textbutton, .textbutton:hover + @extend %textbutton-def - /* TextField: */ +// /* TextField: */ // font-family: $font-stack // font-size: 14px // font-weight: bold diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass index 90ff1c5..b1f1f39 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass @@ -20,20 +20,11 @@ $font-stack: 'Lato-Bold', sans-serif // Common Colors -$white: rgba(white,.4) +$white: rgba(white,.9) $disabled-color: #CCCCCC $font-disabled-color: #888888 -// Color Themes -$primary-color: #006CEB - -//$purple: #9A68C7 -//$blue: #3BA9E4 -//$green: #75B343 -//$orange: #FF6A42 - - -/* BUTTON */ +// Button variables $button-min-width: 74px !default diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass similarity index 77% copy from frameworks/themes/JewelTheme/src/main/sass/_variables.sass copy to frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass index 90ff1c5..fbe84c7 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass @@ -16,25 +16,5 @@ // limitations under the License. // //////////////////////////////////////////////////////////////////////////////// - -$font-stack: 'Lato-Bold', sans-serif - -// Common Colors -$white: rgba(white,.4) -$disabled-color: #CCCCCC -$font-disabled-color: #888888 - // Color Themes -$primary-color: #006CEB - -//$purple: #9A68C7 -//$blue: #3BA9E4 -//$green: #75B343 -//$orange: #FF6A42 - - -/* BUTTON */ -$button-min-width: 74px !default - - - +$primary-color: #006CEB \ No newline at end of file diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass similarity index 77% copy from frameworks/themes/JewelTheme/src/main/sass/_variables.sass copy to frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass index 90ff1c5..b1af604 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass @@ -16,25 +16,5 @@ // limitations under the License. // //////////////////////////////////////////////////////////////////////////////// - -$font-stack: 'Lato-Bold', sans-serif - -// Common Colors -$white: rgba(white,.4) -$disabled-color: #CCCCCC -$font-disabled-color: #888888 - // Color Themes -$primary-color: #006CEB - -//$purple: #9A68C7 -//$blue: #3BA9E4 -//$green: #75B343 -//$orange: #FF6A42 - - -/* BUTTON */ -$button-min-width: 74px !default - - - +$primary-color: #FF0000 \ No newline at end of file diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass index 7ad0fdd..5f5343c 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass @@ -15,8 +15,8 @@ * limitations under the License. */ - // Variables +@import "colors/blue-color-palette" @import "variables" @import "mixins" @import "functions" diff --git a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass index 98d8247..3c82eb7 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass @@ -16,6 +16,7 @@ */ // Variables +@import "colors/blue-color-palette" @import "variables" @import "mixins" @import "functions" diff --git a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass similarity index 96% copy from frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass copy to frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass index 98d8247..54e8f75 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass @@ -16,6 +16,7 @@ */ // Variables +@import "colors/red-color-palette" @import "variables" @import "mixins" @import "functions" -- To stop receiving notification emails like this one, please contact carlosrov...@apache.org.