You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2018/03/24 18:45:52 UTC
[royale-asjs] branch feature/jewel-ui-set updated: - Fix TextField
disabled w/wout prompt - Improve focus on buttons and textfield
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 3941ee6 - Fix TextField disabled w/wout prompt - Improve focus on buttons and textfield
3941ee6 is described below
commit 3941ee61308939a3c5d7c2b05a6a4d02c9a4503c
Author: Carlos Rovira <ca...@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.