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 2786bee jewel-button: new outlined style to combine with emphasis
2786bee is described below
commit 2786bee2cf3e653c228dceddb15849a92eefd672
Author: Carlos Rovira <[email protected]>
AuthorDate: Sun Feb 23 20:14:59 2020 +0100
jewel-button: new outlined style to combine with emphasis
---
.../jewel/supportClasses/button/SimpleButton.as | 46 ++++
.../JewelTheme/src/main/resources/defaults.css | 252 +++++++++++++++++++++
.../themes/JewelTheme/src/main/sass/_mixins.sass | 74 +++---
.../main/sass/components-emphasized/_button.sass | 24 +-
.../sass/components-emphasized/_togglebutton.sass | 26 ++-
.../src/main/sass/components-primary/_button.sass | 30 ++-
.../sass/components-primary/_togglebutton.sass | 32 ++-
.../main/sass/components-secondary/_button.sass | 24 +-
.../sass/components-secondary/_togglebutton.sass | 26 ++-
9 files changed, 449 insertions(+), 85 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 d4c314d..1097e34 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
@@ -208,6 +208,29 @@ package org.apache.royale.jewel.supportClasses.button
}
}
+ private var _outlined:Boolean;
+ /**
+ * Applies outlined 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 outlined():Boolean
+ {
+ return _outlined;
+ }
+ public function set outlined(value:Boolean):void
+ {
+ if (_outlined != value)
+ {
+ _outlined = value;
+
+ _outlined ? addClass("outlined") : removeClass("outlined");
+ }
+ }
+
/**
* Add a class selector to the list.
*
@@ -319,5 +342,28 @@ package org.apache.royale.jewel.supportClasses.button
return element;
}
+
+ private var _outlined:Boolean;
+ /**
+ * Applies outlined 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 outlined():Boolean
+ {
+ return _outlined;
+ }
+ public function set outlined(value:Boolean):void
+ {
+ if (_outlined != value)
+ {
+ _outlined = value;
+
+ _outlined ? addClass("outlined") : removeClass("outlined");
+ }
+ }
}
}
\ 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 13970bd..13c7359 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -182,6 +182,35 @@ 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;
@@ -211,6 +240,35 @@ hr {
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;
+}
+.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;
+}
+.jewel.button.primary.outlined:focus {
+ border: 1px solid #0d79ba;
+ box-shadow: none;
+}
+.jewel.button.primary.outlined[disabled] {
+ background: #f3f3f3 !important;
+ border: 1px solid #d9d9d9 !important;
+ box-shadow: none !important;
+ color: silver;
+ text-shadow: unset;
+}
+
.jewel.card {
font-size: 1em;
font-weight: 400;
@@ -1233,6 +1291,40 @@ 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;
@@ -1267,6 +1359,40 @@ div {
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;
+}
+.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;
+}
+.jewel.togglebutton.primary.outlined:focus {
+ border: 1px solid #0d79ba;
+ box-shadow: none;
+}
+.jewel.togglebutton.primary.outlined[disabled] {
+ background: #f3f3f3 !important;
+ border: 1px solid #d9d9d9 !important;
+ box-shadow: none !important;
+ color: silver;
+ 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);
+}
+
.jewel.tooltip {
color: #FFFFFF;
background: #404040;
@@ -1406,6 +1532,35 @@ j|Wizard {
text-shadow: unset;
}
+.jewel.button.secondary.outlined {
+ 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;
+}
+.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;
+}
+.jewel.button.secondary.outlined:focus {
+ border: 1px solid #a6320d;
+ box-shadow: none;
+}
+.jewel.button.secondary.outlined[disabled] {
+ background: #f3f3f3 !important;
+ border: 1px solid #d9d9d9 !important;
+ box-shadow: none !important;
+ color: silver;
+ text-shadow: unset;
+}
+
.jewel.datagrid .jewel.list.column .jewel.item.datagrid.secondary.hovered {
background: #f38663;
}
@@ -1502,6 +1657,40 @@ a:active {
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
+.jewel.togglebutton.secondary.outlined {
+ 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;
+}
+.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;
+}
+.jewel.togglebutton.secondary.outlined:focus {
+ border: 1px solid #a6320d;
+ box-shadow: none;
+}
+.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: rgba(239, 90, 42, 0.25);
+ border: 1px solid #b0350d;
+ box-shadow: none;
+}
+
.jewel.badge.emphasized {
background: #8CC63C;
color: #FFFFFF;
@@ -1536,6 +1725,35 @@ a:active {
text-shadow: unset;
}
+.jewel.button.emphasized.outlined {
+ 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;
+}
+.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;
+}
+.jewel.button.emphasized.outlined:focus {
+ border: 1px solid #557923;
+ box-shadow: none;
+}
+.jewel.button.emphasized.outlined[disabled] {
+ background: #f3f3f3 !important;
+ border: 1px solid #d9d9d9 !important;
+ box-shadow: none !important;
+ color: silver;
+ text-shadow: unset;
+}
+
.jewel.datagrid .jewel.list.column .jewel.item.datagrid.emphasized.hovered {
background: #a8d46b;
}
@@ -1620,4 +1838,38 @@ a:active {
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
+.jewel.togglebutton.emphasized.outlined {
+ 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;
+}
+.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;
+}
+.jewel.togglebutton.emphasized.outlined:focus {
+ border: 1px solid #557923;
+ box-shadow: none;
+}
+.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: rgba(140, 198, 60, 0.25);
+ border: 1px solid #5a8126;
+ box-shadow: none;
+}
+
/*# 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 7e9e507..203b5f3 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
@@ -17,50 +17,72 @@
//
////////////////////////////////////////////////////////////////////////////////
-=jewel-bg-border($state, $bg-color, $bg-border-radius: 0px)
+=jewel-bg-border($state, $bg-color, $outline: false, $bg-border-radius: 0px)
@if ($state == "normal")
- @if $flat
- background: $bg-color
- border: 1px solid darken($bg-color, 8%)
+ @if $outline
+ background: rgba($bg-color, 0.05)
+ border: 1px solid darken($bg-color, 10%)
box-shadow: none
@else
- 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%)
+ @if $flat
+ background: $bg-color
+ border: 1px solid darken($bg-color, 8%)
+ box-shadow: none
+ @else
+ 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
@else if ($state == "hover")
- @if $flat
- background: darken($bg-color, 5%)
- border: 1px solid darken($bg-color, 8%)
+ @if $outline
+ background: rgba($bg-color, .15)
+ border: 1px solid darken($bg-color, 15%)
@else
- background: linear-gradient($bg-color,
darken($bg-color, 10%))
- border: 1px solid darken($bg-color, 20%)
+ @if $flat
+ background: darken($bg-color, 5%)
+ border: 1px solid darken($bg-color, 8%)
+ @else
+ background: linear-gradient($bg-color,
darken($bg-color, 10%))
+ border: 1px solid darken($bg-color, 20%)
@else if ($state == "active") or ($state == "selected")
- @if $flat
- background: darken($bg-color, 15%)
- border: 1px solid darken($bg-color, 8%)
+ @if $outline
+ background: rgba($bg-color, .25)
+ border: 1px solid darken($bg-color, 18%)
box-shadow: none
@else
- background: linear-gradient(darken($bg-color, 10%),
darken($bg-color, 20%))
- border: 1px solid darken($bg-color, 30%)
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5)
+ @if $flat
+ background: darken($bg-color, 15%)
+ border: 1px solid darken($bg-color, 8%)
+ box-shadow: none
+ @else
+ background: linear-gradient(darken($bg-color,
10%), darken($bg-color, 20%))
+ border: 1px solid darken($bg-color, 30%)
+ box-shadow: inset 0px 1px 3px 0px rgba(50, 50,
50, 0.5)
@else if ($state == "focus")
- @if $flat
- background: lighten($bg-color, 5%)
- border: 1px solid darken($bg-color, 8%)
+ @if $outline
+ border: 1px solid darken($bg-color, 20%)
box-shadow: none
@else
- border: 1px solid darken($bg-color, 15%)
- box-shadow: inset 0px 0px 0px 1px
rgba(lighten($bg-color, 50%), .5), inset 0 1px 0 rgba(lighten($bg-color, 55%),
.6)
+ @if $flat
+ background: lighten($bg-color, 5%)
+ border: 1px solid darken($bg-color, 8%)
+ box-shadow: none
+ @else
+ border: 1px solid darken($bg-color, 15%)
+ 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 $flat
+ @if $outline
background: $disabled-color !important
border: 1px solid $disabled-border-color !important
@else
- background: $disabled-color !important
- border: 1px solid $disabled-border-color !important
+ @if $flat
+ background: $disabled-color !important
+ border: 1px solid $disabled-border-color
!important
+ @else
+ background: $disabled-color !important
+ border: 1px solid $disabled-border-color
!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 02a5a89..0fe70f7 100644
---
a/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_button.sass
+++
b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_button.sass
@@ -22,33 +22,39 @@
// Button variables
$button-border-radius: 3px
-=button-theme($button-color, $text-color)
+=button-theme($button-color, $text-color, $outline: false)
- +jewel-bg-border("normal", $button-color, $button-border-radius)
+ +jewel-bg-border("normal", $button-color, $outline,
$button-border-radius)
- color: $text-color
+ @if $outline
+ color: darken($button-color, 15%)
+ @else
+ color: $text-color
- @if not $flat and $text-color == $font-theme-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)
+ +jewel-bg-border("hover", $button-color, $outline)
&:active, &:active:focus
- +jewel-bg-border("active", $button-color)
+ +jewel-bg-border("active", $button-color, $outline)
&:focus
- +jewel-bg-border("focus", $button-color)
+ +jewel-bg-border("focus", $button-color, $outline)
&[disabled]
- +jewel-bg-border("disabled", $button-color)
+ +jewel-bg-border("disabled", $button-color, $outline)
color: $disabled-font-color
text-shadow: unset
.jewel.button.emphasized
- +button-theme($emphasized-color, $font-theme-color)
+ +button-theme($emphasized-color, $font-theme-color, false)
+
+.jewel.button.emphasized.outlined
+ +button-theme($emphasized-color, $font-theme-color, true)
//SVGs
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 18d2358..8354d78 100644
---
a/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_togglebutton.sass
+++
b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_togglebutton.sass
@@ -22,33 +22,39 @@
// ToggleButton variables
$togglebutton-border-radius: 3px
-=togglebutton-theme($togglebutton-color, $text-color)
+=togglebutton-theme($togglebutton-color, $text-color, $outline: false)
- +jewel-bg-border("normal", $togglebutton-color,
$togglebutton-border-radius)
+ +jewel-bg-border("normal", $togglebutton-color, $outline,
$togglebutton-border-radius)
- color: $text-color
+ @if $outline
+ color: darken($togglebutton-color, 15%)
+ @else
+ color: $text-color
- @if not $flat and $text-color == $font-theme-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)
+ +jewel-bg-border("hover", $togglebutton-color, $outline)
&:active, &:active:focus
- +jewel-bg-border("active", $togglebutton-color)
+ +jewel-bg-border("active", $togglebutton-color, $outline)
&:focus
- +jewel-bg-border("focus", $togglebutton-color)
+ +jewel-bg-border("focus", $togglebutton-color, $outline)
&[disabled]
- +jewel-bg-border("disabled", $togglebutton-color)
+ +jewel-bg-border("disabled", $togglebutton-color, $outline)
color: $disabled-font-color
text-shadow: unset
&.selected
- +jewel-bg-border("selected", $togglebutton-color)
+ +jewel-bg-border("selected", $togglebutton-color, $outline)
.jewel.togglebutton.emphasized
- +togglebutton-theme($emphasized-color, $font-theme-color)
+ +togglebutton-theme($emphasized-color, $font-theme-color, false)
+
+.jewel.togglebutton.emphasized.outlined
+ +togglebutton-theme($emphasized-color, $font-theme-color, true)
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 4ddab3f..ca2c0e3 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_button.sass
@@ -25,28 +25,31 @@ $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)
+=button-theme($button-color, $text-color, $outline: false)
- +jewel-bg-border("normal", $button-color, $button-border-radius)
+ +jewel-bg-border("normal", $button-color, $outline,
$button-border-radius)
- color: $text-color
-
- @if not $flat and $text-color == $font-theme-color
+ @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)
@else
text-shadow: none
&:hover, &:hover:focus
- +jewel-bg-border("hover", $button-color)
+ +jewel-bg-border("hover", $button-color, $outline)
&:active, &:active:focus
- +jewel-bg-border("active", $button-color)
+ +jewel-bg-border("active", $button-color, $outline)
&:focus
- +jewel-bg-border("focus", $button-color)
+ +jewel-bg-border("focus", $button-color, $outline)
&[disabled]
- +jewel-bg-border("disabled", $button-color)
+ +jewel-bg-border("disabled", $button-color, $outline)
color: $disabled-font-color
text-shadow: unset
@@ -54,7 +57,7 @@ $button-border-radius: $border-radius
margin: $button-margin
padding: $button-padding
- +button-theme($default-color, $default-font-color)
+ +button-theme($default-color, $default-font-color, false)
// -- BUTTON LABEL
font:
@@ -88,7 +91,14 @@ $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)
+.jewel.button.primary.outlined
+ +button-theme($primary-color, $font-theme-color, true)
+
\ No newline at end of file
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 c90d613..65bc991 100644
---
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_togglebutton.sass
+++
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_togglebutton.sass
@@ -25,39 +25,42 @@ $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)
+=togglebutton-theme($togglebutton-color, $text-color, $outline: false)
- +jewel-bg-border("normal", $togglebutton-color,
$togglebutton-border-radius)
+ +jewel-bg-border("normal", $togglebutton-color, $outline,
$togglebutton-border-radius)
- color: $text-color
-
- @if not $flat and $text-color == $font-theme-color
+ @if $outline
+ color: darken($togglebutton-color, 15%)
+ @else
+ color: $text-color
+
+ @if not $outline and not $outline 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)
+ +jewel-bg-border("hover", $togglebutton-color, $outline)
&:active, &:active:focus
- +jewel-bg-border("active", $togglebutton-color)
+ +jewel-bg-border("active", $togglebutton-color, $outline)
&:focus
- +jewel-bg-border("focus", $togglebutton-color)
+ +jewel-bg-border("focus", $togglebutton-color, $outline)
&[disabled]
- +jewel-bg-border("disabled", $togglebutton-color)
+ +jewel-bg-border("disabled", $togglebutton-color, $outline)
color: $disabled-font-color
text-shadow: unset
&.selected
- +jewel-bg-border("selected", $togglebutton-color)
+ +jewel-bg-border("selected", $togglebutton-color, false)
.jewel.togglebutton
margin: $togglebutton-margin
padding: $togglebutton-padding
- +togglebutton-theme($default-color, $default-font-color)
+ +togglebutton-theme($default-color, $default-font-color, false)
// -- TOGGLEBUTTON LABEL
@@ -92,6 +95,13 @@ $togglebutton-border-radius: $border-radius
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)
+.jewel.togglebutton.primary.outlined
+ +togglebutton-theme($primary-color, $font-theme-color, 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 271931a..640859e 100644
---
a/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_button.sass
+++
b/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_button.sass
@@ -22,30 +22,36 @@
// Button variables
$button-border-radius: 3px
-=button-theme($button-color, $text-color)
+=button-theme($button-color, $text-color, $outline: false)
- +jewel-bg-border("normal", $button-color, $button-border-radius)
+ +jewel-bg-border("normal", $button-color, $outline,
$button-border-radius)
- color: $text-color
+ @if $outline
+ color: darken($button-color, 15%)
+ @else
+ color: $text-color
- @if not $flat and $text-color == $font-theme-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)
+ +jewel-bg-border("hover", $button-color, $outline)
&:active, &:active:focus
- +jewel-bg-border("active", $button-color)
+ +jewel-bg-border("active", $button-color, $outline)
&:focus
- +jewel-bg-border("focus", $button-color)
+ +jewel-bg-border("focus", $button-color, $outline)
&[disabled]
- +jewel-bg-border("disabled", $button-color)
+ +jewel-bg-border("disabled", $button-color, $outline)
color: $disabled-font-color
text-shadow: unset
.jewel.button.secondary
- +button-theme($secondary-color, $font-theme-color)
+ +button-theme($secondary-color, $font-theme-color, false)
+
+.jewel.button.secondary.outlined
+ +button-theme($secondary-color, $font-theme-color, 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 9c70253..c9fa38f 100644
---
a/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_togglebutton.sass
+++
b/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_togglebutton.sass
@@ -22,33 +22,39 @@
// ToggleButton variables
$togglebutton-border-radius: 3px
-=togglebutton-theme($togglebutton-color, $text-color)
+=togglebutton-theme($togglebutton-color, $text-color, $outline: false)
- +jewel-bg-border("normal", $togglebutton-color,
$togglebutton-border-radius)
+ +jewel-bg-border("normal", $togglebutton-color, $outline,
$togglebutton-border-radius)
- color: $text-color
+ @if $outline
+ color: darken($togglebutton-color, 15%)
+ @else
+ color: $text-color
- @if not $flat and $text-color == $font-theme-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)
+ +jewel-bg-border("hover", $togglebutton-color, $outline)
&:active, &:active:focus
- +jewel-bg-border("active", $togglebutton-color)
+ +jewel-bg-border("active", $togglebutton-color, $outline)
&:focus
- +jewel-bg-border("focus", $togglebutton-color)
+ +jewel-bg-border("focus", $togglebutton-color, $outline)
&[disabled]
- +jewel-bg-border("disabled", $togglebutton-color)
+ +jewel-bg-border("disabled", $togglebutton-color, $outline)
color: $disabled-font-color
text-shadow: unset
&.selected
- +jewel-bg-border("selected", $togglebutton-color)
+ +jewel-bg-border("selected", $togglebutton-color, $outline)
.jewel.togglebutton.secondary
- +togglebutton-theme($secondary-color, $font-theme-color)
+ +togglebutton-theme($secondary-color, $font-theme-color, false)
+
+.jewel.togglebutton.secondary.outlined
+ +togglebutton-theme($secondary-color, $font-theme-color, true)
