You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2018/03/11 11:47:58 UTC
[royale-asjs] 15/17: fix button disabled state and appearence
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 <ca...@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.