royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] branch jewel-ui updated: fix button disabled state and appearence
Date Sat, 10 Mar 2018 10:24:55 GMT
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 <carlosrovira@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
carlosrovira@apache.org.

Mime
View raw message