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 b89163f jewel-button: new unboxed style
b89163f is described below
commit b89163f67275aab6d09ede1b2cbd8d176e2c650a
Author: Carlos Rovira <[email protected]>
AuthorDate: Mon Feb 24 13:16:20 2020 +0100
jewel-button: new unboxed style
---
.../jewel/supportClasses/button/SimpleButton.as | 46 ++
.../JewelTheme/src/main/resources/defaults.css | 461 +++++++++++++++++----
.../themes/JewelTheme/src/main/sass/_mixins.sass | 34 +-
.../main/sass/components-emphasized/_button.sass | 34 +-
.../sass/components-emphasized/_togglebutton.sass | 37 +-
.../src/main/sass/components-primary/_button.sass | 54 ++-
.../src/main/sass/components-primary/_card.sass | 4 +-
.../sass/components-primary/_togglebutton.sass | 51 ++-
.../main/sass/components-secondary/_button.sass | 34 +-
.../sass/components-secondary/_togglebutton.sass | 37 +-
10 files changed, 541 insertions(+), 251 deletions(-)
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/button/SimpleButton.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/button/SimpleButton.as
index 1097e34..d4b21ac 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/button/SimpleButton.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/button/SimpleButton.as
@@ -231,6 +231,29 @@ package org.apache.royale.jewel.supportClasses.button
}
}
+ private var _unboxed:Boolean;
+ /**
+ * Applies unboxed style to the button. This combines with the
emphasis styles
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public function get unboxed():Boolean
+ {
+ return _unboxed;
+ }
+ public function set unboxed(value:Boolean):void
+ {
+ if (_unboxed != value)
+ {
+ _unboxed = value;
+
+ _unboxed ? addClass("unboxed") : removeClass("unboxed");
+ }
+ }
+
/**
* Add a class selector to the list.
*
@@ -365,5 +388,28 @@ package org.apache.royale.jewel.supportClasses.button
_outlined ? addClass("outlined") : removeClass("outlined");
}
}
+
+ private var _unboxed:Boolean;
+ /**
+ * Applies unboxed style to the button. This combines with the
emphasis styles
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public function get unboxed():Boolean
+ {
+ return _unboxed;
+ }
+ public function set unboxed(value:Boolean):void
+ {
+ if (_unboxed != value)
+ {
+ _unboxed = value;
+
+ _unboxed ? addClass("unboxed") : removeClass("unboxed");
+ }
+ }
}
}
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 13c7359..682a854 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -146,15 +146,18 @@ hr {
.jewel.button:hover, .jewel.button:hover:focus {
background: linear-gradient(#d9d9d9, silver);
border: 1px solid #a6a6a6;
+ color: #808080;
}
.jewel.button:active, .jewel.button:active:focus {
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.button:focus {
border: 1px solid #b3b3b3;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
+ color: #808080;
}
.jewel.button[disabled] {
background: #f3f3f3 !important;
@@ -182,35 +185,6 @@ hr {
margin-right: 0px;
}
-.jewel.button.outline {
- background: rgba(166, 166, 166, 0.05);
- border: 1px solid #8d8d8d;
- box-shadow: none;
- border-radius: 0.25rem;
- color: gray;
- text-shadow: none;
-}
-.jewel.button.outline:hover, .jewel.button.outline:hover:focus {
- background: rgba(166, 166, 166, 0.15);
- border: 1px solid gray;
-}
-.jewel.button.outline:active, .jewel.button.outline:active:focus {
- background: rgba(166, 166, 166, 0.25);
- border: 1px solid #787878;
- box-shadow: none;
-}
-.jewel.button.outline:focus {
- border: 1px solid #737373;
- box-shadow: none;
-}
-.jewel.button.outline[disabled] {
- background: #f3f3f3 !important;
- border: 1px solid #d9d9d9 !important;
- box-shadow: none !important;
- color: silver;
- text-shadow: unset;
-}
-
.jewel.button.primary {
background: linear-gradient(#54b7f3, #24a3ef);
border: 1px solid #0f88d1;
@@ -222,15 +196,18 @@ hr {
.jewel.button.primary:hover, .jewel.button.primary:hover:focus {
background: linear-gradient(#3CADF1, #1198e9);
border: 1px solid #0d79ba;
+ color: #FFFFFF;
}
.jewel.button.primary:active, .jewel.button.primary:active:focus {
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.button.primary:focus {
border: 1px solid #0f88d1;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
+ color: #FFFFFF;
}
.jewel.button.primary[disabled] {
background: #f3f3f3 !important;
@@ -240,31 +217,124 @@ hr {
text-shadow: unset;
}
+.jewel.button.outlined {
+ background: rgba(179, 179, 179, 0.05);
+ border: 1px solid #999999;
+ box-shadow: none;
+ color: #8d8d8d;
+ text-shadow: none;
+}
+.jewel.button.outlined:hover, .jewel.button.outlined:hover:focus {
+ background: rgba(179, 179, 179, 0.15);
+ border: 1px solid #8d8d8d;
+ color: #737373;
+}
+.jewel.button.outlined:active, .jewel.button.outlined:active:focus {
+ background: rgba(179, 179, 179, 0.25);
+ border: 1px solid #858585;
+ box-shadow: none;
+ color: #737373;
+}
+.jewel.button.outlined:focus {
+ border: 1px solid gray;
+ box-shadow: none;
+ color: #737373;
+}
+.jewel.button.outlined[disabled] {
+ background: #f3f3f3 !important;
+ border: 1px solid #d9d9d9 !important;
+ color: silver;
+ text-shadow: unset;
+}
+
.jewel.button.primary.outlined {
background: rgba(60, 173, 241, 0.05);
border: 1px solid #1198e9;
box-shadow: none;
- border-radius: 0.25rem;
color: #0f88d1;
text-shadow: none;
}
.jewel.button.primary.outlined:hover,
.jewel.button.primary.outlined:hover:focus {
background: rgba(60, 173, 241, 0.15);
border: 1px solid #0f88d1;
+ color: #0c69a2;
}
.jewel.button.primary.outlined:active,
.jewel.button.primary.outlined:active:focus {
background: rgba(60, 173, 241, 0.25);
border: 1px solid #0e7fc3;
box-shadow: none;
+ color: #0c69a2;
}
.jewel.button.primary.outlined:focus {
border: 1px solid #0d79ba;
box-shadow: none;
+ color: #0c69a2;
}
.jewel.button.primary.outlined[disabled] {
background: #f3f3f3 !important;
border: 1px solid #d9d9d9 !important;
- box-shadow: none !important;
+ color: silver;
+ text-shadow: unset;
+}
+
+.jewel.button.unboxed {
+ background: rgba(179, 179, 179, 0);
+ border: 1px solid transparent;
+ box-shadow: none;
+ color: #8d8d8d;
+ text-shadow: none;
+}
+.jewel.button.unboxed:hover, .jewel.button.unboxed:hover:focus {
+ background: rgba(179, 179, 179, 0.15);
+ border: 1px solid transparent;
+ color: #737373;
+}
+.jewel.button.unboxed:active, .jewel.button.unboxed:active:focus {
+ background: rgba(179, 179, 179, 0.25);
+ border: 1px solid transparent;
+ box-shadow: none;
+ color: #737373;
+}
+.jewel.button.unboxed:focus {
+ background: rgba(179, 179, 179, 0.15);
+ border: 1px solid transparent;
+ box-shadow: none;
+ color: #737373;
+}
+.jewel.button.unboxed[disabled] {
+ background: rgba(243, 243, 243, 0) !important;
+ border: 1px solid transparent !important;
+ color: silver;
+ text-shadow: unset;
+}
+
+.jewel.button.primary.unboxed {
+ background: rgba(60, 173, 241, 0);
+ border: 1px solid transparent;
+ box-shadow: none;
+ color: #0f88d1;
+ text-shadow: none;
+}
+.jewel.button.primary.unboxed:hover, .jewel.button.primary.unboxed:hover:focus
{
+ background: rgba(60, 173, 241, 0.15);
+ border: 1px solid transparent;
+ color: #0c69a2;
+}
+.jewel.button.primary.unboxed:active,
.jewel.button.primary.unboxed:active:focus {
+ background: rgba(60, 173, 241, 0.25);
+ border: 1px solid transparent;
+ box-shadow: none;
+ color: #0c69a2;
+}
+.jewel.button.primary.unboxed:focus {
+ background: rgba(60, 173, 241, 0.15);
+ border: 1px solid transparent;
+ box-shadow: none;
+ color: #0c69a2;
+}
+.jewel.button.primary.unboxed[disabled] {
+ background: rgba(243, 243, 243, 0) !important;
+ border: 1px solid transparent !important;
color: silver;
text-shadow: unset;
}
@@ -281,14 +351,14 @@ hr {
}
.jewel.card .cardHeader {
border-bottom: 1px solid #d2dadf;
- padding: 20px;
+ padding: 12px 20px;
}
.jewel.card .cardPrimaryContent {
padding: 20px;
}
.jewel.card .cardActions {
border-top: 1px solid #d2dadf;
- padding: 20px;
+ padding: 18px 20px;
}
j|Card {
@@ -1250,15 +1320,18 @@ div {
.jewel.togglebutton:hover, .jewel.togglebutton:hover:focus {
background: linear-gradient(#d9d9d9, silver);
border: 1px solid #a6a6a6;
+ color: #808080;
}
.jewel.togglebutton:active, .jewel.togglebutton:active:focus {
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:focus {
border: 1px solid #b3b3b3;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
+ color: #808080;
}
.jewel.togglebutton[disabled] {
background: #f3f3f3 !important;
@@ -1291,40 +1364,6 @@ div {
margin-right: 0px;
}
-.jewel.button.outlined {
- background: rgba(166, 166, 166, 0.05);
- border: 1px solid #8d8d8d;
- box-shadow: none;
- border-radius: 0.25rem;
- color: gray;
- text-shadow: none;
-}
-.jewel.button.outlined:hover, .jewel.button.outlined:hover:focus {
- background: rgba(166, 166, 166, 0.15);
- border: 1px solid gray;
-}
-.jewel.button.outlined:active, .jewel.button.outlined:active:focus {
- background: rgba(166, 166, 166, 0.25);
- border: 1px solid #787878;
- box-shadow: none;
-}
-.jewel.button.outlined:focus {
- border: 1px solid #737373;
- box-shadow: none;
-}
-.jewel.button.outlined[disabled] {
- background: #f3f3f3 !important;
- border: 1px solid #d9d9d9 !important;
- box-shadow: none !important;
- color: silver;
- text-shadow: unset;
-}
-.jewel.button.outlined.selected {
- background: linear-gradient(#8d8d8d, #737373);
- border: 1px solid #5a5a5a;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-
.jewel.togglebutton.primary {
background: linear-gradient(#54b7f3, #24a3ef);
border: 1px solid #0f88d1;
@@ -1336,15 +1375,18 @@ div {
.jewel.togglebutton.primary:hover, .jewel.togglebutton.primary:hover:focus {
background: linear-gradient(#3CADF1, #1198e9);
border: 1px solid #0d79ba;
+ color: #FFFFFF;
}
.jewel.togglebutton.primary:active, .jewel.togglebutton.primary:active:focus {
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.primary:focus {
border: 1px solid #0f88d1;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
+ color: #FFFFFF;
}
.jewel.togglebutton.primary[disabled] {
background: #f3f3f3 !important;
@@ -1359,31 +1401,67 @@ div {
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
+.jewel.togglebutton.outlined {
+ background: rgba(179, 179, 179, 0.05);
+ border: 1px solid #999999;
+ box-shadow: none;
+ color: #8d8d8d;
+ text-shadow: none;
+}
+.jewel.togglebutton.outlined:hover, .jewel.togglebutton.outlined:hover:focus {
+ background: rgba(179, 179, 179, 0.15);
+ border: 1px solid #8d8d8d;
+ color: #737373;
+}
+.jewel.togglebutton.outlined:active, .jewel.togglebutton.outlined:active:focus
{
+ background: rgba(179, 179, 179, 0.25);
+ border: 1px solid #858585;
+ box-shadow: none;
+ color: #737373;
+}
+.jewel.togglebutton.outlined:focus {
+ border: 1px solid gray;
+ box-shadow: none;
+ color: #737373;
+}
+.jewel.togglebutton.outlined[disabled] {
+ background: #f3f3f3 !important;
+ border: 1px solid #d9d9d9 !important;
+ color: silver;
+ 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);
+}
+
.jewel.togglebutton.primary.outlined {
background: rgba(60, 173, 241, 0.05);
border: 1px solid #1198e9;
box-shadow: none;
- border-radius: 0.25rem;
color: #0f88d1;
text-shadow: none;
}
.jewel.togglebutton.primary.outlined:hover,
.jewel.togglebutton.primary.outlined:hover:focus {
background: rgba(60, 173, 241, 0.15);
border: 1px solid #0f88d1;
+ color: #0c69a2;
}
.jewel.togglebutton.primary.outlined:active,
.jewel.togglebutton.primary.outlined:active:focus {
background: rgba(60, 173, 241, 0.25);
border: 1px solid #0e7fc3;
box-shadow: none;
+ color: #0c69a2;
}
.jewel.togglebutton.primary.outlined:focus {
border: 1px solid #0d79ba;
box-shadow: none;
+ color: #0c69a2;
}
.jewel.togglebutton.primary.outlined[disabled] {
background: #f3f3f3 !important;
border: 1px solid #d9d9d9 !important;
- box-shadow: none !important;
color: silver;
text-shadow: unset;
}
@@ -1393,6 +1471,78 @@ div {
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
+.jewel.togglebutton.unboxed {
+ background: rgba(179, 179, 179, 0);
+ border: 1px solid transparent;
+ box-shadow: none;
+ color: #8d8d8d;
+ text-shadow: none;
+}
+.jewel.togglebutton.unboxed:hover, .jewel.togglebutton.unboxed:hover:focus {
+ background: rgba(179, 179, 179, 0.15);
+ border: 1px solid transparent;
+ color: #737373;
+}
+.jewel.togglebutton.unboxed:active, .jewel.togglebutton.unboxed:active:focus {
+ background: rgba(179, 179, 179, 0.25);
+ border: 1px solid transparent;
+ box-shadow: none;
+ color: #737373;
+}
+.jewel.togglebutton.unboxed:focus {
+ background: rgba(179, 179, 179, 0.15);
+ border: 1px solid transparent;
+ box-shadow: none;
+ color: #737373;
+}
+.jewel.togglebutton.unboxed[disabled] {
+ background: rgba(243, 243, 243, 0) !important;
+ border: 1px solid transparent !important;
+ color: silver;
+ 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);
+}
+
+.jewel.togglebutton.primary.unboxed {
+ background: rgba(60, 173, 241, 0);
+ border: 1px solid transparent;
+ box-shadow: none;
+ color: #0f88d1;
+ text-shadow: none;
+}
+.jewel.togglebutton.primary.unboxed:hover,
.jewel.togglebutton.primary.unboxed:hover:focus {
+ background: rgba(60, 173, 241, 0.15);
+ border: 1px solid transparent;
+ color: #0c69a2;
+}
+.jewel.togglebutton.primary.unboxed:active,
.jewel.togglebutton.primary.unboxed:active:focus {
+ background: rgba(60, 173, 241, 0.25);
+ border: 1px solid transparent;
+ box-shadow: none;
+ color: #0c69a2;
+}
+.jewel.togglebutton.primary.unboxed:focus {
+ background: rgba(60, 173, 241, 0.15);
+ border: 1px solid transparent;
+ box-shadow: none;
+ color: #0c69a2;
+}
+.jewel.togglebutton.primary.unboxed[disabled] {
+ background: rgba(243, 243, 243, 0) !important;
+ border: 1px solid transparent !important;
+ color: silver;
+ 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);
+}
+
.jewel.tooltip {
color: #FFFFFF;
background: #404040;
@@ -1507,22 +1657,25 @@ j|Wizard {
background: linear-gradient(#f16c42, #ed4812);
border: 1px solid #be390e;
box-shadow: inset 0 1px 0 #f6a389;
- border-radius: 3px;
+ border-radius: 0.25rem;
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(119, 36, 9, 0.7);
}
.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
background: linear-gradient(#EF5A2A, #d64010);
border: 1px solid #a6320d;
+ color: #FFFFFF;
}
.jewel.button.secondary:active, .jewel.button.secondary:active:focus {
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.button.secondary:focus {
border: 1px solid #be390e;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
+ color: #FFFFFF;
}
.jewel.button.secondary[disabled] {
background: #f3f3f3 !important;
@@ -1536,27 +1689,59 @@ j|Wizard {
background: rgba(239, 90, 42, 0.05);
border: 1px solid #d64010;
box-shadow: none;
- border-radius: 3px;
color: #be390e;
text-shadow: none;
}
.jewel.button.secondary.outlined:hover,
.jewel.button.secondary.outlined:hover:focus {
background: rgba(239, 90, 42, 0.15);
border: 1px solid #be390e;
+ color: #8f2b0b;
}
.jewel.button.secondary.outlined:active,
.jewel.button.secondary.outlined:active:focus {
background: rgba(239, 90, 42, 0.25);
border: 1px solid #b0350d;
box-shadow: none;
+ color: #8f2b0b;
}
.jewel.button.secondary.outlined:focus {
border: 1px solid #a6320d;
box-shadow: none;
+ color: #8f2b0b;
}
.jewel.button.secondary.outlined[disabled] {
background: #f3f3f3 !important;
border: 1px solid #d9d9d9 !important;
- box-shadow: none !important;
+ color: silver;
+ text-shadow: unset;
+}
+
+.jewel.button.secondary.unboxed {
+ background: rgba(239, 90, 42, 0);
+ border: 1px solid transparent;
+ box-shadow: none;
+ color: #be390e;
+ text-shadow: none;
+}
+.jewel.button.secondary.unboxed:hover,
.jewel.button.secondary.unboxed:hover:focus {
+ background: rgba(239, 90, 42, 0.15);
+ border: 1px solid transparent;
+ color: #8f2b0b;
+}
+.jewel.button.secondary.unboxed:active,
.jewel.button.secondary.unboxed:active:focus {
+ background: rgba(239, 90, 42, 0.25);
+ border: 1px solid transparent;
+ box-shadow: none;
+ color: #8f2b0b;
+}
+.jewel.button.secondary.unboxed:focus {
+ background: rgba(239, 90, 42, 0.15);
+ border: 1px solid transparent;
+ box-shadow: none;
+ color: #8f2b0b;
+}
+.jewel.button.secondary.unboxed[disabled] {
+ background: rgba(243, 243, 243, 0) !important;
+ border: 1px solid transparent !important;
color: silver;
text-shadow: unset;
}
@@ -1627,22 +1812,25 @@ a:active {
background: linear-gradient(#f16c42, #ed4812);
border: 1px solid #be390e;
box-shadow: inset 0 1px 0 #f6a389;
- border-radius: 3px;
+ border-radius: 0.25rem;
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(119, 36, 9, 0.7);
}
.jewel.togglebutton.secondary:hover, .jewel.togglebutton.secondary:hover:focus
{
background: linear-gradient(#EF5A2A, #d64010);
border: 1px solid #a6320d;
+ color: #FFFFFF;
}
.jewel.togglebutton.secondary:active,
.jewel.togglebutton.secondary:active:focus {
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:focus {
border: 1px solid #be390e;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
+ color: #FFFFFF;
}
.jewel.togglebutton.secondary[disabled] {
background: #f3f3f3 !important;
@@ -1661,34 +1849,66 @@ a:active {
background: rgba(239, 90, 42, 0.05);
border: 1px solid #d64010;
box-shadow: none;
- border-radius: 3px;
color: #be390e;
text-shadow: none;
}
.jewel.togglebutton.secondary.outlined:hover,
.jewel.togglebutton.secondary.outlined:hover:focus {
background: rgba(239, 90, 42, 0.15);
border: 1px solid #be390e;
+ color: #8f2b0b;
}
.jewel.togglebutton.secondary.outlined:active,
.jewel.togglebutton.secondary.outlined:active:focus {
background: rgba(239, 90, 42, 0.25);
border: 1px solid #b0350d;
box-shadow: none;
+ color: #8f2b0b;
}
.jewel.togglebutton.secondary.outlined:focus {
border: 1px solid #a6320d;
box-shadow: none;
+ color: #8f2b0b;
}
.jewel.togglebutton.secondary.outlined[disabled] {
background: #f3f3f3 !important;
border: 1px solid #d9d9d9 !important;
- box-shadow: none !important;
color: silver;
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);
+}
+
+.jewel.togglebutton.secondary.unboxed {
+ background: rgba(239, 90, 42, 0);
+ border: 1px solid transparent;
+ box-shadow: none;
+ color: #be390e;
+ text-shadow: none;
+}
+.jewel.togglebutton.secondary.unboxed:hover,
.jewel.togglebutton.secondary.unboxed:hover:focus {
+ background: rgba(239, 90, 42, 0.15);
+ border: 1px solid transparent;
+ color: #8f2b0b;
+}
+.jewel.togglebutton.secondary.unboxed:active,
.jewel.togglebutton.secondary.unboxed:active:focus {
background: rgba(239, 90, 42, 0.25);
- border: 1px solid #b0350d;
+ border: 1px solid transparent;
+ box-shadow: none;
+ color: #8f2b0b;
+}
+.jewel.togglebutton.secondary.unboxed:focus {
+ background: rgba(239, 90, 42, 0.15);
+ border: 1px solid transparent;
box-shadow: none;
+ color: #8f2b0b;
+}
+.jewel.togglebutton.secondary.unboxed[disabled] {
+ background: rgba(243, 243, 243, 0) !important;
+ border: 1px solid transparent !important;
+ color: silver;
+ text-shadow: unset;
}
.jewel.badge.emphasized {
@@ -1700,22 +1920,25 @@ a:active {
background: linear-gradient(#98cc50, #7eb435);
border: 1px solid #638c29;
box-shadow: inset 0 1px 0 #bbdd8b;
- border-radius: 3px;
+ border-radius: 0.25rem;
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(57, 81, 24, 0.7);
}
.jewel.button.emphasized:hover, .jewel.button.emphasized:hover:focus {
background: linear-gradient(#8CC63C, #71a02f);
border: 1px solid #557923;
+ color: #FFFFFF;
}
.jewel.button.emphasized:active, .jewel.button.emphasized:active:focus {
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.button.emphasized:focus {
border: 1px solid #638c29;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
+ color: #FFFFFF;
}
.jewel.button.emphasized[disabled] {
background: #f3f3f3 !important;
@@ -1729,27 +1952,59 @@ a:active {
background: rgba(140, 198, 60, 0.05);
border: 1px solid #71a02f;
box-shadow: none;
- border-radius: 3px;
color: #638c29;
text-shadow: none;
}
.jewel.button.emphasized.outlined:hover,
.jewel.button.emphasized.outlined:hover:focus {
background: rgba(140, 198, 60, 0.15);
border: 1px solid #638c29;
+ color: #47651e;
}
.jewel.button.emphasized.outlined:active,
.jewel.button.emphasized.outlined:active:focus {
background: rgba(140, 198, 60, 0.25);
border: 1px solid #5a8126;
box-shadow: none;
+ color: #47651e;
}
.jewel.button.emphasized.outlined:focus {
border: 1px solid #557923;
box-shadow: none;
+ color: #47651e;
}
.jewel.button.emphasized.outlined[disabled] {
background: #f3f3f3 !important;
border: 1px solid #d9d9d9 !important;
- box-shadow: none !important;
+ color: silver;
+ text-shadow: unset;
+}
+
+.jewel.button.emphasized.unboxed {
+ background: rgba(140, 198, 60, 0);
+ border: 1px solid transparent;
+ box-shadow: none;
+ color: #638c29;
+ text-shadow: none;
+}
+.jewel.button.emphasized.unboxed:hover,
.jewel.button.emphasized.unboxed:hover:focus {
+ background: rgba(140, 198, 60, 0.15);
+ border: 1px solid transparent;
+ color: #47651e;
+}
+.jewel.button.emphasized.unboxed:active,
.jewel.button.emphasized.unboxed:active:focus {
+ background: rgba(140, 198, 60, 0.25);
+ border: 1px solid transparent;
+ box-shadow: none;
+ color: #47651e;
+}
+.jewel.button.emphasized.unboxed:focus {
+ background: rgba(140, 198, 60, 0.15);
+ border: 1px solid transparent;
+ box-shadow: none;
+ color: #47651e;
+}
+.jewel.button.emphasized.unboxed[disabled] {
+ background: rgba(243, 243, 243, 0) !important;
+ border: 1px solid transparent !important;
color: silver;
text-shadow: unset;
}
@@ -1808,22 +2063,25 @@ a:active {
background: linear-gradient(#98cc50, #7eb435);
border: 1px solid #638c29;
box-shadow: inset 0 1px 0 #bbdd8b;
- border-radius: 3px;
+ border-radius: 0.25rem;
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(57, 81, 24, 0.7);
}
.jewel.togglebutton.emphasized:hover,
.jewel.togglebutton.emphasized:hover:focus {
background: linear-gradient(#8CC63C, #71a02f);
border: 1px solid #557923;
+ color: #FFFFFF;
}
.jewel.togglebutton.emphasized:active,
.jewel.togglebutton.emphasized:active:focus {
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:focus {
border: 1px solid #638c29;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
+ color: #FFFFFF;
}
.jewel.togglebutton.emphasized[disabled] {
background: #f3f3f3 !important;
@@ -1842,34 +2100,71 @@ a:active {
background: rgba(140, 198, 60, 0.05);
border: 1px solid #71a02f;
box-shadow: none;
- border-radius: 3px;
color: #638c29;
text-shadow: none;
}
.jewel.togglebutton.emphasized.outlined:hover,
.jewel.togglebutton.emphasized.outlined:hover:focus {
background: rgba(140, 198, 60, 0.15);
border: 1px solid #638c29;
+ color: #47651e;
}
.jewel.togglebutton.emphasized.outlined:active,
.jewel.togglebutton.emphasized.outlined:active:focus {
background: rgba(140, 198, 60, 0.25);
border: 1px solid #5a8126;
box-shadow: none;
+ color: #47651e;
}
.jewel.togglebutton.emphasized.outlined:focus {
border: 1px solid #557923;
box-shadow: none;
+ color: #47651e;
}
.jewel.togglebutton.emphasized.outlined[disabled] {
background: #f3f3f3 !important;
border: 1px solid #d9d9d9 !important;
- box-shadow: none !important;
color: silver;
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);
+}
+
+.jewel.togglebutton.emphasized.unboxed {
+ background: rgba(140, 198, 60, 0);
+ border: 1px solid transparent;
+ box-shadow: none;
+ color: #638c29;
+ text-shadow: none;
+}
+.jewel.togglebutton.emphasized.unboxed:hover,
.jewel.togglebutton.emphasized.unboxed:hover:focus {
+ background: rgba(140, 198, 60, 0.15);
+ border: 1px solid transparent;
+ color: #47651e;
+}
+.jewel.togglebutton.emphasized.unboxed:active,
.jewel.togglebutton.emphasized.unboxed:active:focus {
background: rgba(140, 198, 60, 0.25);
- border: 1px solid #5a8126;
+ border: 1px solid transparent;
+ box-shadow: none;
+ color: #47651e;
+}
+.jewel.togglebutton.emphasized.unboxed:focus {
+ background: rgba(140, 198, 60, 0.15);
+ border: 1px solid transparent;
box-shadow: none;
+ color: #47651e;
+}
+.jewel.togglebutton.emphasized.unboxed[disabled] {
+ background: rgba(243, 243, 243, 0) !important;
+ border: 1px solid transparent !important;
+ color: silver;
+ 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);
}
/*# 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 203b5f3..c03de27 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
@@ -17,12 +17,16 @@
//
////////////////////////////////////////////////////////////////////////////////
-=jewel-bg-border($state, $bg-color, $outline: false, $bg-border-radius: 0px)
+=jewel-bg-border($state, $bg-color, $outlined: false, $unboxed: false,
$bg-border-radius: 0px)
@if ($state == "normal")
- @if $outline
+ @if $outlined
background: rgba($bg-color, 0.05)
border: 1px solid darken($bg-color, 10%)
box-shadow: none
+ @else if $unboxed
+ background: rgba($bg-color, 0)
+ border: 1px solid transparent
+ box-shadow: none
@else
@if $flat
background: $bg-color
@@ -32,12 +36,15 @@
background: linear-gradient(lighten($bg-color,
5%), darken($bg-color, 5%))
border: 1px solid darken($bg-color, 15%)
box-shadow: inset 0 1px 0 lighten($bg-color,
20%)
- border-radius: $bg-border-radius
+ border-radius: $bg-border-radius
@else if ($state == "hover")
- @if $outline
+ @if $outlined
background: rgba($bg-color, .15)
border: 1px solid darken($bg-color, 15%)
+ @else if $unboxed
+ background: rgba($bg-color, .15)
+ border: 1px solid transparent
@else
@if $flat
background: darken($bg-color, 5%)
@@ -47,10 +54,14 @@
border: 1px solid darken($bg-color, 20%)
@else if ($state == "active") or ($state == "selected")
- @if $outline
+ @if $outlined
background: rgba($bg-color, .25)
border: 1px solid darken($bg-color, 18%)
box-shadow: none
+ @else if $unboxed
+ background: rgba($bg-color, .25)
+ border: 1px solid transparent
+ box-shadow: none
@else
@if $flat
background: darken($bg-color, 15%)
@@ -62,9 +73,13 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50,
50, 0.5)
@else if ($state == "focus")
- @if $outline
+ @if $outlined
border: 1px solid darken($bg-color, 20%)
box-shadow: none
+ @else if $unboxed
+ background: rgba($bg-color, .15)
+ border: 1px solid transparent
+ box-shadow: none
@else
@if $flat
background: lighten($bg-color, 5%)
@@ -75,9 +90,12 @@
box-shadow: inset 0px 0px 0px 1px
rgba(lighten($bg-color, 50%), .5), inset 0 1px 0 rgba(lighten($bg-color, 55%),
.6)
@else if ($state == "disabled")
- @if $outline
+ @if $outlined
background: $disabled-color !important
border: 1px solid $disabled-border-color !important
+ @else if $unboxed
+ background: rgba($disabled-color, 0) !important
+ border: 1px solid transparent !important
@else
@if $flat
background: $disabled-color !important
@@ -85,4 +103,4 @@
@else
background: $disabled-color !important
border: 1px solid $disabled-border-color
!important
- box-shadow: none !important
+ box-shadow: none !important
diff --git
a/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_button.sass
b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_button.sass
index 0fe70f7..0cf638c 100644
---
a/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_button.sass
+++
b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_button.sass
@@ -20,42 +20,18 @@
// Jewel Button
// Button variables
-$button-border-radius: 3px
-
-=button-theme($button-color, $text-color, $outline: false)
-
- +jewel-bg-border("normal", $button-color, $outline,
$button-border-radius)
-
- @if $outline
- color: darken($button-color, 15%)
- @else
- color: $text-color
-
- @if not $outline and not $flat and $text-color == $font-theme-color
- text-shadow: 0 -1px 0 rgba(darken($button-color, 30%), .7) //0
.063em
- @else
- text-shadow: none
-
- &:hover, &:hover:focus
- +jewel-bg-border("hover", $button-color, $outline)
-
- &:active, &:active:focus
- +jewel-bg-border("active", $button-color, $outline)
-
- &:focus
- +jewel-bg-border("focus", $button-color, $outline)
-
- &[disabled]
- +jewel-bg-border("disabled", $button-color, $outline)
- color: $disabled-font-color
- text-shadow: unset
.jewel.button.emphasized
+button-theme($emphasized-color, $font-theme-color, false)
+// OUTLINED
.jewel.button.emphasized.outlined
+button-theme($emphasized-color, $font-theme-color, true)
+// UNBOXED
+.jewel.button.emphasized.unboxed
+ +button-theme($emphasized-color, $font-theme-color, false, true)
+
//SVGs
//border:1px; /*without this svg shows scaled and bigger*/
diff --git
a/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_togglebutton.sass
b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_togglebutton.sass
index 8354d78..27c4152 100644
---
a/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_togglebutton.sass
+++
b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_togglebutton.sass
@@ -20,41 +20,14 @@
// Jewel ToggleButton
// ToggleButton variables
-$togglebutton-border-radius: 3px
-
-=togglebutton-theme($togglebutton-color, $text-color, $outline: false)
-
- +jewel-bg-border("normal", $togglebutton-color, $outline,
$togglebutton-border-radius)
-
- @if $outline
- color: darken($togglebutton-color, 15%)
- @else
- color: $text-color
-
- @if not $outline and not $flat and $text-color == $font-theme-color
- text-shadow: 0 -1px 0 rgba(darken($togglebutton-color, 30%),
.7) //0 .063em
- @else
- text-shadow: none
-
- &:hover, &:hover:focus
- +jewel-bg-border("hover", $togglebutton-color, $outline)
-
- &:active, &:active:focus
- +jewel-bg-border("active", $togglebutton-color, $outline)
-
- &:focus
- +jewel-bg-border("focus", $togglebutton-color, $outline)
-
- &[disabled]
- +jewel-bg-border("disabled", $togglebutton-color, $outline)
- color: $disabled-font-color
- text-shadow: unset
-
- &.selected
- +jewel-bg-border("selected", $togglebutton-color, $outline)
.jewel.togglebutton.emphasized
+togglebutton-theme($emphasized-color, $font-theme-color, false)
+// OUTLINED
.jewel.togglebutton.emphasized.outlined
+togglebutton-theme($emphasized-color, $font-theme-color, true)
+
+// UNBOXED
+.jewel.togglebutton.emphasized.unboxed
+ +togglebutton-theme($emphasized-color, $font-theme-color, false, true)
\ No newline at end of file
diff --git
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_button.sass
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_button.sass
index ca2c0e3..7dc32ec 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_button.sass
@@ -25,31 +25,43 @@ $button-padding: 0.679em 1.12em !default
$icon-button-padding: 0.429em 0.87em !default
$button-border-radius: $border-radius
-=button-theme($button-color, $text-color, $outline: false)
+=button-theme($button-color, $text-color, $outlined: false, $unboxed: false)
- +jewel-bg-border("normal", $button-color, $outline,
$button-border-radius)
+ +jewel-bg-border("normal", $button-color, $outlined, $unboxed,
$button-border-radius)
- @if $outline
+ @if $outlined or $unboxed
color: darken($button-color, 15%)
@else
color: $text-color
- @if not $outline and not $flat and $text-color == $font-theme-color
+ @if not $outlined and not $unboxed and not $flat and $text-color ==
$font-theme-color
text-shadow: 0 -1px 0 rgba(darken($button-color, 30%), .7)
@else
text-shadow: none
-
+
&:hover, &:hover:focus
- +jewel-bg-border("hover", $button-color, $outline)
-
+ +jewel-bg-border("hover", $button-color, $outlined, $unboxed)
+ @if $outlined or $unboxed
+ color: darken($button-color, 25%)
+ @else
+ color: $text-color
+
&:active, &:active:focus
- +jewel-bg-border("active", $button-color, $outline)
-
+ +jewel-bg-border("active", $button-color, $outlined, $unboxed)
+ @if $outlined or $unboxed
+ color: darken($button-color, 25%)
+ @else
+ color: $text-color
+
&:focus
- +jewel-bg-border("focus", $button-color, $outline)
-
+ +jewel-bg-border("focus", $button-color, $outlined, $unboxed)
+ @if $outlined or $unboxed
+ color: darken($button-color, 25%)
+ @else
+ color: $text-color
+
&[disabled]
- +jewel-bg-border("disabled", $button-color, $outline)
+ +jewel-bg-border("disabled", $button-color, $outlined, $unboxed)
color: $disabled-font-color
text-shadow: unset
@@ -57,11 +69,10 @@ $button-border-radius: $border-radius
margin: $button-margin
padding: $button-padding
- +button-theme($default-color, $default-font-color, false)
+ +button-theme($default-color, $default-font-color)
// -- BUTTON LABEL
font:
- // family: $font-stack
weight: bold
text:
transform: uppercase
@@ -91,14 +102,19 @@ $button-border-radius: $border-radius
margin-left: 8px
margin-right: 0px
-.jewel.button.outline
- +button-theme(darken($default-color, 20%), darken($default-font-color,
20%), true)
-
-
.jewel.button.primary
+button-theme($primary-color, $font-theme-color)
+// OUTLINED
+.jewel.button.outlined
+ +button-theme(darken($default-color, 15%), darken($default-font-color,
15%), true)
+
.jewel.button.primary.outlined
+button-theme($primary-color, $font-theme-color, true)
-
\ No newline at end of file
+// UNBOXED
+.jewel.button.unboxed
+ +button-theme(darken($default-color, 15%), darken($default-font-color,
15%), false, true)
+
+.jewel.button.primary.unboxed
+ +button-theme($primary-color, $font-theme-color, false, true)
\ No newline at end of file
diff --git
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass
index c55b164..3f21c1c 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass
@@ -44,7 +44,7 @@
border-bottom: 1px solid transparent
@else
border-bottom: 1px solid desaturate(lighten($primary-color, 26%),
70%)
- padding: 20px
+ padding: 12px 20px
.cardPrimaryContent
padding: 20px
@@ -54,7 +54,7 @@
border-top: 1px solid transparent
@else
border-top: 1px solid desaturate(lighten($primary-color, 26%), 70%)
- padding: 20px
+ padding: 18px 20px
j|Card
gap: 3
diff --git
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_togglebutton.sass
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_togglebutton.sass
index 65bc991..4524076 100644
---
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_togglebutton.sass
+++
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_togglebutton.sass
@@ -25,47 +25,57 @@ $togglebutton-padding: 0.679em 1.12em !default
$icon-togglebutton-padding: 0.429em 0.87em !default
$togglebutton-border-radius: $border-radius
-=togglebutton-theme($togglebutton-color, $text-color, $outline: false)
+=togglebutton-theme($togglebutton-color, $text-color, $outlined: false,
$unboxed: false)
- +jewel-bg-border("normal", $togglebutton-color, $outline,
$togglebutton-border-radius)
+ +jewel-bg-border("normal", $togglebutton-color, $outlined, $unboxed,
$togglebutton-border-radius)
- @if $outline
+ @if $outlined or $unboxed
color: darken($togglebutton-color, 15%)
@else
color: $text-color
- @if not $outline and not $outline and not $flat and $text-color ==
$font-theme-color
+ @if not $outlined and not $unboxed and not $flat and $text-color ==
$font-theme-color
text-shadow: 0 -1px 0 rgba(darken($togglebutton-color, 30%), .7)
@else
text-shadow: none
&:hover, &:hover:focus
- +jewel-bg-border("hover", $togglebutton-color, $outline)
-
+ +jewel-bg-border("hover", $togglebutton-color, $outlined,
$unboxed)
+ @if $outlined or $unboxed
+ color: darken($togglebutton-color, 25%)
+ @else
+ color: $text-color
&:active, &:active:focus
- +jewel-bg-border("active", $togglebutton-color, $outline)
+ +jewel-bg-border("active", $togglebutton-color, $outlined,
$unboxed)
+ @if $outlined or $unboxed
+ color: darken($togglebutton-color, 25%)
+ @else
+ color: $text-color
&:focus
- +jewel-bg-border("focus", $togglebutton-color, $outline)
+ +jewel-bg-border("focus", $togglebutton-color, $outlined,
$unboxed)
+ @if $outlined or $unboxed
+ color: darken($togglebutton-color, 25%)
+ @else
+ color: $text-color
&[disabled]
- +jewel-bg-border("disabled", $togglebutton-color, $outline)
+ +jewel-bg-border("disabled", $togglebutton-color, $outlined,
$unboxed)
color: $disabled-font-color
text-shadow: unset
&.selected
- +jewel-bg-border("selected", $togglebutton-color, false)
+ +jewel-bg-border("selected", $togglebutton-color)
.jewel.togglebutton
margin: $togglebutton-margin
padding: $togglebutton-padding
- +togglebutton-theme($default-color, $default-font-color, false)
+ +togglebutton-theme($default-color, $default-font-color)
// -- TOGGLEBUTTON LABEL
font:
- // family: $font-stack
weight: bold
text:
transform: uppercase
@@ -80,7 +90,7 @@ $togglebutton-border-radius: $border-radius
weight: $font-weight-normal
&.icon
- padding: $icon-button-padding
+ padding: $icon-togglebutton-padding
i
margin-left: 0px
@@ -94,14 +104,21 @@ $togglebutton-border-radius: $border-radius
i
margin-left: 8px
margin-right: 0px
-
-.jewel.button.outlined
- +togglebutton-theme(darken($default-color, 20%),
darken($default-font-color, 20%), true)
-
.jewel.togglebutton.primary
+togglebutton-theme($primary-color, $font-theme-color)
+// OUTLINED
+.jewel.togglebutton.outlined
+ +togglebutton-theme(darken($default-color, 15%),
darken($default-font-color, 15%), true)
+
.jewel.togglebutton.primary.outlined
+togglebutton-theme($primary-color, $font-theme-color, true)
+// UNBOXED
+.jewel.togglebutton.unboxed
+ +togglebutton-theme(darken($default-color, 15%),
darken($default-font-color, 15%), false, true)
+
+.jewel.togglebutton.primary.unboxed
+ +togglebutton-theme($primary-color, $font-theme-color, false, true)
+
diff --git
a/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_button.sass
b/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_button.sass
index 640859e..f4b4843 100644
---
a/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_button.sass
+++
b/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_button.sass
@@ -20,38 +20,14 @@
// Jewel Button
// Button variables
-$button-border-radius: 3px
-=button-theme($button-color, $text-color, $outline: false)
-
- +jewel-bg-border("normal", $button-color, $outline,
$button-border-radius)
-
- @if $outline
- color: darken($button-color, 15%)
- @else
- color: $text-color
-
- @if not $outline and not $flat and $text-color == $font-theme-color
- text-shadow: 0 -1px 0 rgba(darken($button-color, 30%), .7) //0
.063em
- @else
- text-shadow: none
-
- &:hover, &:hover:focus
- +jewel-bg-border("hover", $button-color, $outline)
-
- &:active, &:active:focus
- +jewel-bg-border("active", $button-color, $outline)
-
- &:focus
- +jewel-bg-border("focus", $button-color, $outline)
-
- &[disabled]
- +jewel-bg-border("disabled", $button-color, $outline)
- color: $disabled-font-color
- text-shadow: unset
-
.jewel.button.secondary
+button-theme($secondary-color, $font-theme-color, false)
+// OUTLINED
.jewel.button.secondary.outlined
+button-theme($secondary-color, $font-theme-color, true)
+
+// UNBOXED
+.jewel.button.secondary.unboxed
+ +button-theme($secondary-color, $font-theme-color, false, true)
diff --git
a/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_togglebutton.sass
b/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_togglebutton.sass
index c9fa38f..b62113b 100644
---
a/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_togglebutton.sass
+++
b/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_togglebutton.sass
@@ -20,41 +20,14 @@
// Jewel ToggleButton
// ToggleButton variables
-$togglebutton-border-radius: 3px
-
-=togglebutton-theme($togglebutton-color, $text-color, $outline: false)
-
- +jewel-bg-border("normal", $togglebutton-color, $outline,
$togglebutton-border-radius)
- @if $outline
- color: darken($togglebutton-color, 15%)
- @else
- color: $text-color
-
- @if not $outline and not $flat and $text-color == $font-theme-color
- text-shadow: 0 -1px 0 rgba(darken($togglebutton-color, 30%),
.7) //0 .063em
- @else
- text-shadow: none
-
- &:hover, &:hover:focus
- +jewel-bg-border("hover", $togglebutton-color, $outline)
-
- &:active, &:active:focus
- +jewel-bg-border("active", $togglebutton-color, $outline)
-
- &:focus
- +jewel-bg-border("focus", $togglebutton-color, $outline)
-
- &[disabled]
- +jewel-bg-border("disabled", $togglebutton-color, $outline)
- color: $disabled-font-color
- text-shadow: unset
-
- &.selected
- +jewel-bg-border("selected", $togglebutton-color, $outline)
-
.jewel.togglebutton.secondary
+togglebutton-theme($secondary-color, $font-theme-color, false)
+// OUTLINED
.jewel.togglebutton.secondary.outlined
+togglebutton-theme($secondary-color, $font-theme-color, true)
+
+// UNBOXED
+.jewel.togglebutton.secondary.unboxed
+ +button-theme($secondary-color, $font-theme-color, false, true)
\ No newline at end of file
