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 <[email protected]> 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 [email protected].
