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 2020/03/26 22:42:07 UTC
[royale-asjs] branch develop updated: jewel-togglebutton: fix
selected unboxed and outlined styles
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new 7b8a291 jewel-togglebutton: fix selected unboxed and outlined styles
7b8a291 is described below
commit 7b8a291f06ce84c36fcc8411f83bf55869dae0e7
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Mar 26 23:42:02 2020 +0100
jewel-togglebutton: fix selected unboxed and outlined styles
---
.../JewelTheme/src/main/resources/defaults.css | 53 +++++++++++++---------
.../themes/JewelTheme/src/main/sass/_mixins.sass | 6 ++-
2 files changed, 37 insertions(+), 22 deletions(-)
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index ef49e30..1c61f4c 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -1384,6 +1384,7 @@ div {
background: linear-gradient(silver, #a6a6a6);
border: 1px solid #8d8d8d;
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+ color: #808080;
}
.jewel.togglebutton[disabled] {
font-weight: 400;
@@ -1439,6 +1440,7 @@ div {
background: linear-gradient(#1198e9, #0d79ba);
border: 1px solid #0a5a8a;
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+ color: #FFFFFF;
}
.jewel.togglebutton.outlined {
@@ -1471,9 +1473,10 @@ div {
text-shadow: unset;
}
.jewel.togglebutton.outlined.selected {
- background: linear-gradient(#999999, gray);
- border: 1px solid #666666;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+ background: rgba(179, 179, 179, 0.25);
+ border: 1px solid #858585;
+ box-shadow: none;
+ color: #737373;
}
.jewel.togglebutton.primary.outlined {
@@ -1506,9 +1509,10 @@ div {
text-shadow: unset;
}
.jewel.togglebutton.primary.outlined.selected {
- background: linear-gradient(#1198e9, #0d79ba);
- border: 1px solid #0a5a8a;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+ background: rgba(60, 173, 241, 0.25);
+ border: 1px solid #0e7fc3;
+ box-shadow: none;
+ color: #0c69a2;
}
.jewel.togglebutton.unboxed {
@@ -1542,9 +1546,10 @@ div {
text-shadow: unset;
}
.jewel.togglebutton.unboxed.selected {
- background: linear-gradient(#999999, gray);
- border: 1px solid #666666;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+ background: rgba(179, 179, 179, 0.25);
+ border: 1px solid transparent;
+ box-shadow: none;
+ color: #737373;
}
.jewel.togglebutton.primary.unboxed {
@@ -1578,9 +1583,10 @@ div {
text-shadow: unset;
}
.jewel.togglebutton.primary.unboxed.selected {
- background: linear-gradient(#1198e9, #0d79ba);
- border: 1px solid #0a5a8a;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+ background: rgba(60, 173, 241, 0.25);
+ border: 1px solid transparent;
+ box-shadow: none;
+ color: #0c69a2;
}
.jewel.tooltip {
@@ -1892,6 +1898,7 @@ a:active {
background: linear-gradient(#d64010, #a6320d);
border: 1px solid #772409;
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+ color: #FFFFFF;
}
.jewel.togglebutton.secondary.outlined {
@@ -1924,9 +1931,10 @@ a:active {
text-shadow: unset;
}
.jewel.togglebutton.secondary.outlined.selected {
- background: linear-gradient(#d64010, #a6320d);
- border: 1px solid #772409;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+ background: rgba(239, 90, 42, 0.25);
+ border: 1px solid #b0350d;
+ box-shadow: none;
+ color: #8f2b0b;
}
.jewel.togglebutton.secondary.unboxed {
@@ -2155,6 +2163,7 @@ a:active {
background: linear-gradient(#71a02f, #557923);
border: 1px solid #395118;
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+ color: #FFFFFF;
}
.jewel.togglebutton.emphasized.outlined {
@@ -2187,9 +2196,10 @@ a:active {
text-shadow: unset;
}
.jewel.togglebutton.emphasized.outlined.selected {
- background: linear-gradient(#71a02f, #557923);
- border: 1px solid #395118;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+ background: rgba(140, 198, 60, 0.25);
+ border: 1px solid #5a8126;
+ box-shadow: none;
+ color: #47651e;
}
.jewel.togglebutton.emphasized.unboxed {
@@ -2223,9 +2233,10 @@ a:active {
text-shadow: unset;
}
.jewel.togglebutton.emphasized.unboxed.selected {
- background: linear-gradient(#71a02f, #557923);
- border: 1px solid #395118;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+ background: rgba(140, 198, 60, 0.25);
+ border: 1px solid transparent;
+ box-shadow: none;
+ color: #47651e;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
index c10c97f..f1bc2a5 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
@@ -190,4 +190,8 @@
text-shadow: unset
&.selected
- +jewel-bg-border("selected", $togglebutton-color)
+ +jewel-bg-border("selected", $togglebutton-color, $outlined, $unboxed)
+ @if $outlined or $unboxed
+ color: darken($togglebutton-color, 25%)
+ @else
+ color: $text-color