royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] branch feature/jewel-ui-set updated: extract bg border in buttons to a mixin and fix focus on active and hover
Date Wed, 04 Apr 2018 15:53:08 GMT
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 <carlosrovira@apache.org>
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
carlosrovira@apache.org.

Mime
View raw message