This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/feature/jewel-ui-set by this
push:
new ddef54a extract bg border in buttons to a mixin and fix focus on
active and hover
ddef54a is described below
commit ddef54a2bf1308f9c5ba3e9ee6729de039aacc86
Author: Carlos Rovira <[email protected]>
AuthorDate: Wed Apr 4 17:53:00 2018 +0200
extract bg border in buttons to a mixin and fix focus on active and hover
---
.../JewelBlueTheme/src/main/resources/defaults.css | 16 +++----
.../JewelBlueTheme/src/main/sass/_mixins.sass | 46 +++++++++++++++++++
.../src/main/sass/components/_button.sass | 37 +++------------
.../src/main/sass/components/_textbutton.sass | 49 +++++++-------------
.../JewelTheme/src/main/resources/defaults.css | 46 +++++++++----------
.../themes/JewelTheme/src/main/sass/_mixins.sass | 46 +++++++++++++++++++
.../src/main/sass/components/_button.sass | 40 +++--------------
.../src/main/sass/components/_textbutton.sass | 52 +++++++---------------
8 files changed, 167 insertions(+), 165 deletions(-)
diff --git a/frameworks/themes/JewelBlueTheme/src/main/resources/defaults.css
b/frameworks/themes/JewelBlueTheme/src/main/resources/defaults.css
index d8aed77..1bacd30 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelBlueTheme/src/main/resources/defaults.css
@@ -28,11 +28,11 @@
box-shadow: inset 0 1px 0 #f6a389;
border-radius: 3px;
}
-.jewel.button.secondary:hover {
+.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
border: 1px solid #a6320d;
background: linear-gradient(#EF5A2A, #d64010);
}
-.jewel.button.secondary:active {
+.jewel.button.secondary:active, .jewel.button.secondary:active:focus {
border: 1px solid #772409;
background: linear-gradient(#d64010, #a6320d);
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
@@ -43,10 +43,10 @@
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
}
.jewel.button.secondary[disabled] {
+ cursor: unset;
border: 1px solid #d9d9d9;
background: #f3f3f3;
box-shadow: none;
- cursor: unset;
}
.jewel.textbutton.secondary {
@@ -66,13 +66,13 @@
color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
- shadow: 0 1px 0 #d9d9d9;
+ text-shadow: 0 -1px 0 rgba(119, 36, 9, 0.7);
}
-.jewel.textbutton.secondary:hover {
+.jewel.textbutton.secondary:hover, .jewel.textbutton.secondary:hover:focus {
border: 1px solid #a6320d;
background: linear-gradient(#EF5A2A, #d64010);
}
-.jewel.textbutton.secondary:active {
+.jewel.textbutton.secondary:active, .jewel.textbutton.secondary:active:focus {
border: 1px solid #772409;
background: linear-gradient(#d64010, #a6320d);
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
@@ -83,11 +83,11 @@
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
}
.jewel.textbutton.secondary[disabled] {
+ cursor: unset;
border: 1px solid #d9d9d9;
background: #f3f3f3;
- color: silver;
box-shadow: none;
- cursor: unset;
+ color: silver;
font-weight: normal;
text-shadow: unset;
}
diff --git a/frameworks/themes/JewelBlueTheme/src/main/sass/_mixins.sass
b/frameworks/themes/JewelBlueTheme/src/main/sass/_mixins.sass
index a0a4045..85e2ddf 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/_mixins.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/_mixins.sass
@@ -29,3 +29,49 @@
// -moz-transition: $val
// -o-transition: $val
// transition: $val
+
+
+=jewel-bg-border($state, $bg-color, $border-radius: 0px)
+ @if ($state == "normal")
+ @if $flat
+ border: 0px solid
+ background: $bg-color
+ @else
+ border: 1px solid darken($bg-color, 15%)// .094em
+ background: linear-gradient(lighten($bg-color, 5%),
darken($bg-color, 5%))
+ box-shadow: inset 0 1px 0 lighten($bg-color, 20%)
+ border-radius: $border-radius //.625em
+
+ @else if ($state == "hover")
+ @if $flat
+ border: 0px solid
+ background: darken($bg-color, 5%)
+ @else
+ border: 1px solid darken($bg-color, 20%)// .094em
+ background: linear-gradient($bg-color,
darken($bg-color, 10%))
+
+ @else if ($state == "active")
+ @if $flat
+ border: 0px solid
+ background: darken($bg-color, 15%)
+ @else
+ border: 1px solid darken($bg-color, 30%)// .094em
+ background: linear-gradient(darken($bg-color, 10%),
darken($bg-color, 20%))
+ box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5)
+
+ @else if ($state == "focus")
+ @if $flat
+ border: 1px solid $bg-color
+ box-shadow: inset 0px 0px 0px 1px
rgba(lighten($bg-color, 50%), .5)
+ @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
+ border: 0px solid
+ background: $disabled-color
+ @else
+ border: 1px solid $disabled-border-color// .094em
+ background: $disabled-color
+ box-shadow: none
diff --git
a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_button.sass
b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_button.sass
index dd31d47..674fd65 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_button.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_button.sass
@@ -37,49 +37,26 @@ $button-border-radius: 3px
min-width: $button-min-width
min-height: $button-min-height
- @if $flat
- border: 0px solid
- background: $button-color
- @else
- border: 1px solid darken($button-color, 15%)// .094em
- background: linear-gradient(lighten($button-color, 5%),
darken($button-color, 5%))
- box-shadow: inset 0 1px 0 lighten($button-color, 20%) //0px 0px
0px 4px rgba($light-color,.3),
- border-radius: $button-border-radius //.625em
+ +jewel-bg-border("normal", $button-color, $button-border-radius)
@if $transitions-enable
transition:
duration: $transition-duration
timing-function: $transition-timing
- &:hover
- @if $flat
- background: darken($button-color, 5%)
- @else
- border: 1px solid darken($button-color, 20%)// .094em
- background: linear-gradient($button-color,
darken($button-color, 10%))
+ &:hover, &:hover:focus
+ +jewel-bg-border("hover", $button-color)
- &:active
- @if $flat
- background: darken($button-color, 15%)
- @else
- border: 1px solid darken($button-color, 30%)// .094em
- background: linear-gradient(darken($button-color, 10%),
darken($button-color, 20%))
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5)
+ &:active, &:active:focus
+ +jewel-bg-border("active", $button-color)
&:focus
outline: none
- @if $flat
- border: 1px solid $button-color
- box-shadow: inset 0px 0px 0px 1px
rgba(lighten($button-color, 50%), .5)
- @else
- border: 1px solid darken($button-color, 15%)
- box-shadow: inset 0px 0px 0px 1px
rgba(lighten($button-color, 50%), .5), inset 0 1px 0
rgba(lighten($button-color, 55%), .6)
+ +jewel-bg-border("focus", $button-color)
&[disabled]
- border: 1px solid $disabled-border-color// .094em
- background: $disabled-color
- box-shadow: none
cursor: unset
+ +jewel-bg-border("disabled", $button-color)
.jewel.button.secondary
+button-theme($secondary-color)
diff --git
a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textbutton.sass
b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textbutton.sass
index 24ece04..12c1939 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textbutton.sass
@@ -25,6 +25,8 @@ $textbutton-padding: 10px 16px !default
$textbutton-min-height: 34px !default
$textbutton-min-width: 74px !default
+$textbutton-border-radius: 3px
+
=textbutton-theme($textbutton-color, $text-color)
cursor: pointer
display: inline-block
@@ -35,14 +37,7 @@ $textbutton-min-width: 74px !default
min-width: $textbutton-min-width
min-height: $textbutton-min-height
- @if $flat
- border: 0px solid
- background: $textbutton-color
- @else
- border: 1px solid darken($textbutton-color, 15%)// .094em solid
- background: linear-gradient(lighten($textbutton-color, 5%),
darken($textbutton-color, 5%))
- box-shadow: inset 0 1px 0 lighten($textbutton-color, 20%)
- border-radius: $button-border-radius //.625em
+ +jewel-bg-border("normal", $textbutton-color, $textbutton-border-radius)
@if $transitions-enable
transition:
@@ -58,37 +53,23 @@ $textbutton-min-width: 74px !default
transform: uppercase
decoration: none
@if not $flat and $text-color == $font-theme-color
- shadow: 0 1px 0 darken($text-color, 15%) //0 .063em
-
- &:hover
- @if $flat
- background: darken($textbutton-color, 5%)
- @else
- border: 1px solid darken($textbutton-color, 20%)//
.094em solid
- background: linear-gradient($textbutton-color,
darken($textbutton-color, 10%))
- &:active
- @if $flat
- background: darken($textbutton-color, 15%)
- @else
- border: 1px solid darken($textbutton-color, 30%)//
.094em solid
- background: linear-gradient(darken($textbutton-color,
10%), darken($textbutton-color, 20%))
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5)
+ text:
+ shadow: 0 -1px 0 rgba(darken($textbutton-color, 30%),
.7) //0 .063em
+ &:hover, &:hover:focus
+ +jewel-bg-border("hover", $textbutton-color)
+
+ &:active, &:active:focus
+ +jewel-bg-border("active", $textbutton-color)
+
&:focus
outline: none
- @if $flat
- border: 1px solid $textbutton-color
- box-shadow: inset 0px 0px 0px 1px
rgba(lighten($textbutton-color, 50%), .5)
- @else
- border: 1px solid darken($textbutton-color, 15%)
- box-shadow: inset 0px 0px 0px 1px
rgba(lighten($textbutton-color, 50%), .5), inset 0 1px 0
rgba(lighten($textbutton-color, 55%), .6)
-
+ +jewel-bg-border("focus", $textbutton-color)
+
&[disabled]
- border: 1px solid $disabled-border-color// .094em
- background: $disabled-color
- color: $disabled-font-color
- box-shadow: none
cursor: unset
+ +jewel-bg-border("disabled", $textbutton-color)
+ color: $disabled-font-color
font:
weight: normal
text:
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 1af48ad..50e8227 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -147,11 +147,11 @@ j|Alert {
box-shadow: inset 0 1px 0 white;
border-radius: 3px;
}
-.jewel.button:hover {
+.jewel.button:hover, .jewel.button:hover:focus {
border: 1px solid #a6a6a6;
background: linear-gradient(#d9d9d9, silver);
}
-.jewel.button:active {
+.jewel.button:active, .jewel.button:active:focus {
border: 1px solid #8d8d8d;
background: linear-gradient(silver, #a6a6a6);
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
@@ -162,10 +162,10 @@ j|Alert {
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
}
.jewel.button[disabled] {
+ cursor: unset;
border: 1px solid #d9d9d9;
background: #f3f3f3;
box-shadow: none;
- cursor: unset;
}
.jewel.button.primary {
@@ -180,11 +180,11 @@ j|Alert {
box-shadow: inset 0 1px 0 #9bd5f8;
border-radius: 3px;
}
-.jewel.button.primary:hover {
+.jewel.button.primary:hover, .jewel.button.primary:hover:focus {
border: 1px solid #0d79ba;
background: linear-gradient(#3CADF1, #1198e9);
}
-.jewel.button.primary:active {
+.jewel.button.primary:active, .jewel.button.primary:active:focus {
border: 1px solid #0a5a8a;
background: linear-gradient(#1198e9, #0d79ba);
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
@@ -195,10 +195,10 @@ j|Alert {
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
}
.jewel.button.primary[disabled] {
+ cursor: unset;
border: 1px solid #d9d9d9;
background: #f3f3f3;
box-shadow: none;
- cursor: unset;
}
.jewel.button.emphasized {
@@ -213,11 +213,11 @@ j|Alert {
box-shadow: inset 0 1px 0 #7fd68a;
border-radius: 3px;
}
-.jewel.button.emphasized:hover {
+.jewel.button.emphasized:hover, .jewel.button.emphasized:hover:focus {
border: 1px solid #21682a;
background: linear-gradient(#3AB549, #2e8e39);
}
-.jewel.button.emphasized:active {
+.jewel.button.emphasized:active, .jewel.button.emphasized:active:focus {
border: 1px solid #15411a;
background: linear-gradient(#2e8e39, #21682a);
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
@@ -228,10 +228,10 @@ j|Alert {
box-shadow: inset 0px 0px 0px 1px rgba(243, 251, 244, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
}
.jewel.button.emphasized[disabled] {
+ cursor: unset;
border: 1px solid #d9d9d9;
background: #f3f3f3;
box-shadow: none;
- cursor: unset;
}
.jewel.checkbox {
@@ -415,11 +415,11 @@ j|Alert {
text-transform: uppercase;
text-decoration: none;
}
-.jewel.textbutton:hover {
+.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
border: 1px solid #a6a6a6;
background: linear-gradient(#d9d9d9, silver);
}
-.jewel.textbutton:active {
+.jewel.textbutton:active, .jewel.textbutton:active:focus {
border: 1px solid #8d8d8d;
background: linear-gradient(silver, #a6a6a6);
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
@@ -430,11 +430,11 @@ j|Alert {
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
}
.jewel.textbutton[disabled] {
+ cursor: unset;
border: 1px solid #d9d9d9;
background: #f3f3f3;
- color: silver;
box-shadow: none;
- cursor: unset;
+ color: silver;
font-weight: normal;
text-shadow: unset;
}
@@ -456,13 +456,13 @@ j|Alert {
color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
- shadow: 0 1px 0 #d9d9d9;
+ text-shadow: 0 -1px 0 rgba(10, 90, 138, 0.7);
}
-.jewel.textbutton.primary:hover {
+.jewel.textbutton.primary:hover, .jewel.textbutton.primary:hover:focus {
border: 1px solid #0d79ba;
background: linear-gradient(#3CADF1, #1198e9);
}
-.jewel.textbutton.primary:active {
+.jewel.textbutton.primary:active, .jewel.textbutton.primary:active:focus {
border: 1px solid #0a5a8a;
background: linear-gradient(#1198e9, #0d79ba);
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
@@ -473,11 +473,11 @@ j|Alert {
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
}
.jewel.textbutton.primary[disabled] {
+ cursor: unset;
border: 1px solid #d9d9d9;
background: #f3f3f3;
- color: silver;
box-shadow: none;
- cursor: unset;
+ color: silver;
font-weight: normal;
text-shadow: unset;
}
@@ -499,13 +499,13 @@ j|Alert {
color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
- shadow: 0 1px 0 #d9d9d9;
+ text-shadow: 0 -1px 0 rgba(21, 65, 26, 0.7);
}
-.jewel.textbutton.emphasized:hover {
+.jewel.textbutton.emphasized:hover, .jewel.textbutton.emphasized:hover:focus {
border: 1px solid #21682a;
background: linear-gradient(#3AB549, #2e8e39);
}
-.jewel.textbutton.emphasized:active {
+.jewel.textbutton.emphasized:active, .jewel.textbutton.emphasized:active:focus
{
border: 1px solid #15411a;
background: linear-gradient(#2e8e39, #21682a);
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
@@ -516,11 +516,11 @@ j|Alert {
box-shadow: inset 0px 0px 0px 1px rgba(243, 251, 244, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
}
.jewel.textbutton.emphasized[disabled] {
+ cursor: unset;
border: 1px solid #d9d9d9;
background: #f3f3f3;
- color: silver;
box-shadow: none;
- cursor: unset;
+ color: silver;
font-weight: normal;
text-shadow: unset;
}
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
index a0a4045..85e2ddf 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
@@ -29,3 +29,49 @@
// -moz-transition: $val
// -o-transition: $val
// transition: $val
+
+
+=jewel-bg-border($state, $bg-color, $border-radius: 0px)
+ @if ($state == "normal")
+ @if $flat
+ border: 0px solid
+ background: $bg-color
+ @else
+ border: 1px solid darken($bg-color, 15%)// .094em
+ background: linear-gradient(lighten($bg-color, 5%),
darken($bg-color, 5%))
+ box-shadow: inset 0 1px 0 lighten($bg-color, 20%)
+ border-radius: $border-radius //.625em
+
+ @else if ($state == "hover")
+ @if $flat
+ border: 0px solid
+ background: darken($bg-color, 5%)
+ @else
+ border: 1px solid darken($bg-color, 20%)// .094em
+ background: linear-gradient($bg-color,
darken($bg-color, 10%))
+
+ @else if ($state == "active")
+ @if $flat
+ border: 0px solid
+ background: darken($bg-color, 15%)
+ @else
+ border: 1px solid darken($bg-color, 30%)// .094em
+ background: linear-gradient(darken($bg-color, 10%),
darken($bg-color, 20%))
+ box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5)
+
+ @else if ($state == "focus")
+ @if $flat
+ border: 1px solid $bg-color
+ box-shadow: inset 0px 0px 0px 1px
rgba(lighten($bg-color, 50%), .5)
+ @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
+ border: 0px solid
+ background: $disabled-color
+ @else
+ border: 1px solid $disabled-border-color// .094em
+ background: $disabled-color
+ box-shadow: none
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
index 4061ef9..2e15d9c 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
@@ -37,49 +37,26 @@ $button-border-radius: 3px
min-width: $button-min-width
min-height: $button-min-height
- @if $flat
- border: 0px solid
- background: $button-color
- @else
- border: 1px solid darken($button-color, 15%)// .094em
- background: linear-gradient(lighten($button-color, 5%),
darken($button-color, 5%))
- box-shadow: inset 0 1px 0 lighten($button-color, 20%) //0px 0px
0px 4px rgba($light-color,.3),
- border-radius: $button-border-radius //.625em
+ +jewel-bg-border("normal", $button-color, $button-border-radius)
@if $transitions-enable
transition:
duration: $transition-duration
timing-function: $transition-timing
- &:hover
- @if $flat
- background: darken($button-color, 5%)
- @else
- border: 1px solid darken($button-color, 20%)// .094em
- background: linear-gradient($button-color,
darken($button-color, 10%))
+ &:hover, &:hover:focus
+ +jewel-bg-border("hover", $button-color)
- &:active
- @if $flat
- background: darken($button-color, 15%)
- @else
- border: 1px solid darken($button-color, 30%)// .094em
- background: linear-gradient(darken($button-color, 10%),
darken($button-color, 20%))
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5)
+ &:active, &:active:focus
+ +jewel-bg-border("active", $button-color)
&:focus
outline: none
- @if $flat
- border: 1px solid $button-color
- box-shadow: inset 0px 0px 0px 1px
rgba(lighten($button-color, 50%), .5)
- @else
- border: 1px solid darken($button-color, 15%)
- box-shadow: inset 0px 0px 0px 1px
rgba(lighten($button-color, 50%), .5), inset 0 1px 0
rgba(lighten($button-color, 55%), .6)
+ +jewel-bg-border("focus", $button-color)
&[disabled]
- border: 1px solid $disabled-border-color// .094em
- background: $disabled-color
- box-shadow: none
cursor: unset
+ +jewel-bg-border("disabled", $button-color)
.jewel.button
+button-theme($default-color)
@@ -87,9 +64,6 @@ $button-border-radius: 3px
.jewel.button.primary
+button-theme($primary-color)
-//.jewel.button.secondary
-// +button-theme($secondary-color)
-
.jewel.button.emphasized
+button-theme($emphasized-color)
diff --git
a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
index 83ae8b6..dc4ec6b 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
@@ -25,6 +25,8 @@ $textbutton-padding: 10px 16px !default
$textbutton-min-height: 34px !default
$textbutton-min-width: 74px !default
+$textbutton-border-radius: 3px
+
=textbutton-theme($textbutton-color, $text-color)
cursor: pointer
display: inline-block
@@ -35,14 +37,7 @@ $textbutton-min-width: 74px !default
min-width: $textbutton-min-width
min-height: $textbutton-min-height
- @if $flat
- border: 0px solid
- background: $textbutton-color
- @else
- border: 1px solid darken($textbutton-color, 15%)// .094em solid
- background: linear-gradient(lighten($textbutton-color, 5%),
darken($textbutton-color, 5%))
- box-shadow: inset 0 1px 0 lighten($textbutton-color, 20%)
- border-radius: $button-border-radius //.625em
+ +jewel-bg-border("normal", $textbutton-color, $textbutton-border-radius)
@if $transitions-enable
transition:
@@ -58,37 +53,23 @@ $textbutton-min-width: 74px !default
transform: uppercase
decoration: none
@if not $flat and $text-color == $font-theme-color
- shadow: 0 1px 0 darken($text-color, 15%) //0 .063em
-
- &:hover
- @if $flat
- background: darken($textbutton-color, 5%)
- @else
- border: 1px solid darken($textbutton-color, 20%)//
.094em solid
- background: linear-gradient($textbutton-color,
darken($textbutton-color, 10%))
- &:active
- @if $flat
- background: darken($textbutton-color, 15%)
- @else
- border: 1px solid darken($textbutton-color, 30%)//
.094em solid
- background: linear-gradient(darken($textbutton-color,
10%), darken($textbutton-color, 20%))
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5)
+ text:
+ shadow: 0 -1px 0 rgba(darken($textbutton-color, 30%),
.7) //0 .063em
+ &:hover, &:hover:focus
+ +jewel-bg-border("hover", $textbutton-color)
+
+ &:active, &:active:focus
+ +jewel-bg-border("active", $textbutton-color)
+
&:focus
outline: none
- @if $flat
- border: 1px solid $textbutton-color
- box-shadow: inset 0px 0px 0px 1px
rgba(lighten($textbutton-color, 50%), .5)
- @else
- border: 1px solid darken($textbutton-color, 15%)
- box-shadow: inset 0px 0px 0px 1px
rgba(lighten($textbutton-color, 50%), .5), inset 0 1px 0
rgba(lighten($textbutton-color, 55%), .6)
-
+ +jewel-bg-border("focus", $textbutton-color)
+
&[disabled]
- border: 1px solid $disabled-border-color// .094em
- background: $disabled-color
- color: $disabled-font-color
- box-shadow: none
cursor: unset
+ +jewel-bg-border("disabled", $textbutton-color)
+ color: $disabled-font-color
font:
weight: normal
text:
@@ -100,8 +81,5 @@ $textbutton-min-width: 74px !default
.jewel.textbutton.primary
+textbutton-theme($primary-color, $font-theme-color)
-//.jewel.textbutton.secondary
-// +textbutton-theme($secondary-color, $font-theme-color)
-
.jewel.textbutton.emphasized
+textbutton-theme($emphasized-color, $font-theme-color)
--
To stop receiving notification emails like this one, please contact
[email protected].
