royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] 41/49: - Fix TextField disabled w/wout prompt - Improve focus on buttons and textfield
Date Tue, 27 Mar 2018 08:32:36 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

commit 5b299c1ad48c56353087db5ad4c753b52f403bff
Author: Carlos Rovira <carlosrovira@apache.org>
AuthorDate: Sat Mar 24 19:45:47 2018 +0100

    - Fix TextField disabled w/wout prompt
    - Improve focus on buttons and textfield
---
 .../src/main/royale/TextInputPlayGround.mxml       |  11 ++-
 .../JewelTheme/src/main/resources/defaults.css     | 104 ++++++++++++++++-----
 .../themes/JewelTheme/src/main/sass/_mixins.sass   |   5 +
 .../src/main/sass/components/_button.sass          |  12 ++-
 .../src/main/sass/components/_slider.sass          |   4 +-
 .../src/main/sass/components/_textbutton.sass      |  10 +-
 6 files changed, 117 insertions(+), 29 deletions(-)

diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
index e5a1021..fa64a53 100644
--- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
@@ -49,11 +49,20 @@ limitations under the License.
 		<j:TextButton text="Send" primary="true"/>
 	</js:Group>
 
-	<j:TextField>
+	<j:TextField text="Disabled with text...">
 		<j:beads>
 			<js:TextPromptBead prompt="Disabled Textfield..."/>
 			<j:Disabled/>
 		</j:beads>
 	</j:TextField>
 
+	<j:TextField>
+		<j:beads>
+			<js:TextPromptBead prompt="Disabled with prompt..."/>
+			<j:Disabled/>
+		</j:beads>
+	</j:TextField>
+
+	
+
 </js:Group>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 92c4c04..22b39bc 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -71,7 +71,9 @@ span {
   box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
 }
 .jewel.button:focus {
-  outline: 0;
+  outline: none;
+  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);
 }
 .jewel.button[disabled] {
   border: 1px solid #c6c6c6;
@@ -102,7 +104,9 @@ span {
   box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
 }
 .jewel.button.primary:focus {
-  outline: 0;
+  outline: none;
+  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);
 }
 .jewel.button.primary[disabled] {
   border: 1px solid #c6c6c6;
@@ -133,7 +137,9 @@ span {
   box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
 }
 .jewel.button.secondary:focus {
-  outline: 0;
+  outline: none;
+  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);
 }
 .jewel.button.secondary[disabled] {
   border: 1px solid #c6c6c6;
@@ -164,7 +170,9 @@ span {
   box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
 }
 .jewel.button.emphasized:focus {
-  outline: 0;
+  outline: none;
+  border: 1px solid #277b32;
+  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] {
   border: 1px solid #c6c6c6;
@@ -174,18 +182,48 @@ span {
 }
 
 .jewel.checkbox {
-  position: absolute;
-  left: -9999px;
   cursor: pointer;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  vertical-align: middle;
+  box-sizing: border-box;
+  width: 100%;
+  height: 24px;
+}
+.jewel.checkbox .input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+  width: 22px;
+  height: 22px;
+  line-height: 24px;
+  border: 1px solid #3CADF1;
+  border-radius: 3px;
+}
+.jewel.checkbox .input:checked {
+  border: 3px solid #3CADF1;
+}
+.jewel.checkbox .input:checked:active {
+  border: 4px solid #EF5A2A;
+}
+.jewel.checkbox .input:checked:after {
+  font-size: 14px;
+  position: absolute;
+  top: 0px;
+  left: 3px;
+  color: #99a1a7;
+}
+.jewel.checkbox .input[disabled] {
+  cursor: unset;
+  border: 1px solid #c6c6c6;
+  background: #F9F9F9;
 }
 .jewel.checkbox .span {
   padding-left: 5px;
 }
-.jewel.checkbox .input {
-  width: 15px;
-  height: 15px;
-  border: 1px solid;
-}
 
 .jewel.label {
   font-family: "Lato", sans-serif;
@@ -211,11 +249,13 @@ span {
   opacity: 0.7;
   -webkit-transition: 0.2s;
   transition: opacity 0.2s;
-  focus-outline: none;
 }
 .jewel.slider .slider:hover {
   opacity: 1;
 }
+.jewel.slider .slider:focus {
+  outline: none;
+}
 .jewel.slider .slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
@@ -261,12 +301,14 @@ span {
   box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
 }
 .jewel.textbutton:focus {
-  outline: 0;
+  outline: none;
+  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);
 }
 .jewel.textbutton[disabled] {
   border: 1px solid #c6c6c6;
   background: #F9F9F9;
-  color: #b9b9b9;
+  color: #c6c6c6;
   box-shadow: none;
   cursor: unset;
   font-weight: normal;
@@ -302,12 +344,14 @@ span {
   box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
 }
 .jewel.textbutton.primary:focus {
-  outline: 0;
+  outline: none;
+  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);
 }
 .jewel.textbutton.primary[disabled] {
   border: 1px solid #c6c6c6;
   background: #F9F9F9;
-  color: #b9b9b9;
+  color: #c6c6c6;
   box-shadow: none;
   cursor: unset;
   font-weight: normal;
@@ -343,12 +387,14 @@ span {
   box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
 }
 .jewel.textbutton.secondary:focus {
-  outline: 0;
+  outline: none;
+  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);
 }
 .jewel.textbutton.secondary[disabled] {
   border: 1px solid #c6c6c6;
   background: #F9F9F9;
-  color: #b9b9b9;
+  color: #c6c6c6;
   box-shadow: none;
   cursor: unset;
   font-weight: normal;
@@ -384,12 +430,14 @@ span {
   box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
 }
 .jewel.textbutton.emphasized:focus {
-  outline: 0;
+  outline: none;
+  border: 1px solid #277b32;
+  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] {
   border: 1px solid #c6c6c6;
   background: #F9F9F9;
-  color: #b9b9b9;
+  color: #c6c6c6;
   box-shadow: none;
   cursor: unset;
   font-weight: normal;
@@ -416,10 +464,24 @@ span {
   background: linear-gradient(white, #f3f3f3);
   border: 1px solid #b3b3b3;
   border-radius: 3px;
-  box-shadow: none;
+  transition-duration: 0.3s;
+  transition-timing-function: easein;
 }
 .jewel.textfield .input:focus {
   border: 1px solid #0f88d1;
 }
+.jewel.textfield .input::placeholder {
+  color: #a6a6a6;
+}
+.jewel.textfield .input[disabled] {
+  cursor: unset;
+  border: 1px solid #c6c6c6;
+  background: #F9F9F9;
+  box-shadow: none;
+  color: #c6c6c6;
+}
+.jewel.textfield .input[disabled]::placeholder {
+  color: #c6c6c6;
+}
 
 /*# 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 22b1b05..a0a4045 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
@@ -18,6 +18,11 @@
 ////////////////////////////////////////////////////////////////////////////////
 
 
+=appear($val)
+	-webkit-appearance: $val
+	-moz-appearance: $val
+	-o-appearance: $val
+	appearance: $val
 
 //=trans($val...)
 //	-webkit-transition: $val
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
index 6afddb2..fc7e11f 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
@@ -43,7 +43,7 @@ $button-border-radius: 3px
 	@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%)
+		box-shadow: inset 0 1px 0 lighten($button-color, 20%) //0px 0px 0px 4px rgba($light-color,.3),
 	border-radius: $button-border-radius //.625em
 	
 	@if $transitions-enable
@@ -67,8 +67,14 @@ $button-border-radius: 3px
 			box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5)
 	
 	&:focus
-		outline: 0
-	
+		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)
+
 	&[disabled]
 		border: 1px solid darken($disabled-color, 20%)// .094em solid 
 		background: $disabled-color
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_slider.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_slider.sass
index 9fd2299..f92fdd0 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_slider.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_slider.sass
@@ -33,9 +33,9 @@
         &:hover
             opacity: 1
 
-        :focus
+        &:focus
             outline: none
-            
+
         &::-webkit-slider-thumb
             -webkit-appearance: none
             appearance: none
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
index d10fb6e..1609be9 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
@@ -70,12 +70,18 @@
 			box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5)
 	
 	&:focus
-		outline: 0
+		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)
 	
 	&[disabled]
 		border: 1px solid darken($disabled-color, 20%)// .094em solid 
 		background: $disabled-color
-		color: darken($disabled-color, 25%)
+		color: darken($disabled-color, 20%)
 		box-shadow: none
 		cursor: unset
 		font:

-- 
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.

Mime
View raw message