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


The following commit(s) were added to refs/heads/jewel-ui by this push:
     new 0bf2b1e  fix button disabled state and appearence
0bf2b1e is described below

commit 0bf2b1eaae5b0b72cef877b2473f71e35920de49
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.

Reply via email to