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 48ac3791231a11debf869b7a4e761f0e5b56d138 Author: Carlos Rovira <carlosrov...@apache.org> AuthorDate: Sat Mar 10 11:24:51 2018 +0100 fix button disabled state and appearence --- .../main/royale/org/apache/royale/jewel/Button.as | 4 +-- .../JewelTheme/src/main/resources/defaults.css | 36 +++++++++++++++++----- .../src/main/resources/royale-jewel-blue.css | 36 +++++++++++++++++----- .../src/main/resources/royale-jewel-red.css | 36 +++++++++++++++++----- .../themes/JewelTheme/src/main/sass/_button.sass | 5 +-- .../themes/JewelTheme/src/main/sass/_mixins.sass | 2 +- .../JewelTheme/src/main/sass/_textbutton.sass | 6 ++-- 7 files changed, 94 insertions(+), 31 deletions(-) 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 0d73362..d008476 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 "button--primary" effect selector. + * A boolean flag to activate "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("button--primary",value); + addOrRemove("primary",value); setClassName(computeFinalClassNames()); } } diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css index c092842..da90252 100644 --- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css +++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css @@ -31,31 +31,32 @@ /** * Jewel Button */ -.button, .button:hover, .textbutton, .textbutton:hover { +.jewel.button, .jewel.button:hover, .jewel.textbutton, .jewel.textbutton:hover { cursor: pointer; display: inline-block; margin: 0; padding: 10px 0px; min-width: 74px; + min-height: 1em; /* Background: */ border: none; border-radius: 3px; } -.button--primary { +.jewel.button.primary { background-color: #006CEB; transition-duration: 0.4s; } -.button--primary:hover { +.jewel.button.primary:hover { background-color: #0b7bff; } -.button--primary:active { +.jewel.button.primary:active { background-color: #005ecc; } -.button--primary:focus { +.jewel.button.primary:focus { outline: 0; } -.button--primary [disabled] { +.jewel.button.primary[disabled] { background-color: #CCCCCC; color: #888888; cursor: unset; @@ -64,7 +65,7 @@ /** * Jewel TextButton */ -.textbutton, .textbutton:hover { +.jewel.textbutton, .jewel.textbutton:hover { /* TextField */ color: rgba(255, 255, 255, 0.9); font-family: "Lato-Bold", sans-serif; @@ -73,10 +74,29 @@ text-transform: uppercase; text-decoration: none; } -.textbutton [disabled] { +.jewel.textbutton [disabled] { text-shadow: unset; } +.jewel.textbutton.primary { + background-color: #006CEB; + transition-duration: 0.4s; +} +.jewel.textbutton.primary:hover { + background-color: #0b7bff; +} +.jewel.textbutton.primary:active { + background-color: #005ecc; +} +.jewel.textbutton.primary:focus { + outline: 0; +} +.jewel.textbutton.primary[disabled] { + background-color: #CCCCCC; + color: #888888; + cursor: unset; +} + /** * Jewel 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 7d56600..f748283 100644 --- a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css +++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css @@ -31,31 +31,32 @@ /** * Jewel Button */ -.button, .button:hover, .textbutton, .textbutton:hover { +.jewel.button, .jewel.button:hover, .jewel.textbutton, .jewel.textbutton:hover { cursor: pointer; display: inline-block; margin: 0; padding: 10px 0px; min-width: 74px; + min-height: 1em; /* Background: */ border: none; border-radius: 3px; } -.button--primary { +.jewel.button.primary { background-color: #006CEB; transition-duration: 0.4s; } -.button--primary:hover { +.jewel.button.primary:hover { background-color: #0b7bff; } -.button--primary:active { +.jewel.button.primary:active { background-color: #005ecc; } -.button--primary:focus { +.jewel.button.primary:focus { outline: 0; } -.button--primary [disabled] { +.jewel.button.primary[disabled] { background-color: #CCCCCC; color: #888888; cursor: unset; @@ -64,7 +65,7 @@ /** * Jewel TextButton */ -.textbutton, .textbutton:hover { +.jewel.textbutton, .jewel.textbutton:hover { /* TextField */ color: rgba(255, 255, 255, 0.9); font-family: "Lato-Bold", sans-serif; @@ -73,10 +74,29 @@ text-transform: uppercase; text-decoration: none; } -.textbutton [disabled] { +.jewel.textbutton [disabled] { text-shadow: unset; } +.jewel.textbutton.primary { + background-color: #006CEB; + transition-duration: 0.4s; +} +.jewel.textbutton.primary:hover { + background-color: #0b7bff; +} +.jewel.textbutton.primary:active { + background-color: #005ecc; +} +.jewel.textbutton.primary:focus { + outline: 0; +} +.jewel.textbutton.primary[disabled] { + background-color: #CCCCCC; + color: #888888; + cursor: unset; +} + /** * Jewel TextField */ diff --git a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css index 56a785d..3bda370 100644 --- a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css +++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css @@ -31,31 +31,32 @@ /** * Jewel Button */ -.button, .button:hover, .textbutton, .textbutton:hover { +.jewel.button, .jewel.button:hover, .jewel.textbutton, .jewel.textbutton:hover { cursor: pointer; display: inline-block; margin: 0; padding: 10px 0px; min-width: 74px; + min-height: 1em; /* Background: */ border: none; border-radius: 3px; } -.button--primary { +.jewel.button.primary { background-color: #FF0000; transition-duration: 0.4s; } -.button--primary:hover { +.jewel.button.primary:hover { background-color: #ff1f1f; } -.button--primary:active { +.jewel.button.primary:active { background-color: #e00000; } -.button--primary:focus { +.jewel.button.primary:focus { outline: 0; } -.button--primary [disabled] { +.jewel.button.primary[disabled] { background-color: #CCCCCC; color: #888888; cursor: unset; @@ -64,7 +65,7 @@ /** * Jewel TextButton */ -.textbutton, .textbutton:hover { +.jewel.textbutton, .jewel.textbutton:hover { /* TextField */ color: rgba(255, 255, 255, 0.9); font-family: "Lato-Bold", sans-serif; @@ -73,10 +74,29 @@ text-transform: uppercase; text-decoration: none; } -.textbutton [disabled] { +.jewel.textbutton [disabled] { text-shadow: unset; } +.jewel.textbutton.primary { + background-color: #FF0000; + transition-duration: 0.4s; +} +.jewel.textbutton.primary:hover { + background-color: #ff1f1f; +} +.jewel.textbutton.primary:active { + background-color: #e00000; +} +.jewel.textbutton.primary:focus { + outline: 0; +} +.jewel.textbutton.primary[disabled] { + background-color: #CCCCCC; + color: #888888; + cursor: unset; +} + /** * Jewel TextField */ diff --git a/frameworks/themes/JewelTheme/src/main/sass/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/_button.sass index 8d416f2..9d78f0f 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/_button.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/_button.sass @@ -27,16 +27,17 @@ margin: 0 //1rem padding: 10px 0px //.938em 1.875em min-width: $button-min-width + //min-height: 1em /* Background: */ 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) -.button, .button:hover +.jewel.button, .jewel.button:hover @extend %button-def -.button--primary +.jewel.button.primary +button-theme($primary-color) //SVGs diff --git a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass index 10d21e4..5a28fc8 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass @@ -30,7 +30,7 @@ //box-shadow: 0 .063em $off-wht, inset 0 0 1.094em darken($btn-color, 40%), inset 0 .063em darken($btn-color, 20%),inset 0 -0.188em darken($btn-color, 20%) &:focus outline: 0 - [disabled] + &[disabled] background-color: $disabled-color color: $font-disabled-color cursor: unset diff --git a/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass index 4cf7a0f..3994d20 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass @@ -33,14 +33,16 @@ transform: uppercase decoration: none //shadow: 0 .063em rgba(black,.3) - [disabled] text: shadow: unset -.textbutton, .textbutton:hover +.jewel.textbutton, .jewel.textbutton:hover @extend %textbutton-def +.jewel.textbutton.primary + +button-theme($primary-color) + // /* TextField: */ // font-family: $font-stack // font-size: 14px -- To stop receiving notification emails like this one, please contact carlosrov...@apache.org.