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 d10aa7da2b025b6c9533a0a5f61546eedc306a14 Author: Carlos Rovira <[email protected]> AuthorDate: Sat Mar 24 10:48:29 2018 +0100 remove primary from textfield and integrate in border when focus --- .../src/main/royale/TextInputPlayGround.mxml | 2 +- .../royale/jewel/supportClasses/TextFieldBase.as | 32 +-------- .../JewelTheme/src/main/resources/defaults.css | 79 +++++++++------------- .../src/main/sass/components/_textfield.sass | 21 +++--- 4 files changed, 46 insertions(+), 88 deletions(-) diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml index 6880431..e5a1021 100644 --- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml +++ b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml @@ -34,7 +34,7 @@ limitations under the License. <j:HorizontalLayoutWithPaddingAndGap gap="10"/> </js:beads> <j:TextButton text="Check it!" primary="true"/> - <j:TextField text="A TextField" primary="true"/> + <j:TextField text="A TextField"/> </js:Group> <js:Group> diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as index 5977727..0a8399e 100644 --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as @@ -127,37 +127,7 @@ package org.apache.royale.jewel.supportClasses //positioner.className = value; addStyles(positioner, value); } - - private var _primary:Boolean = false; - - /** - * A boolean flag to activate "primary" effect selector. - * Applies primary color display effect. - * Colors are defined in royale-jewel.css - * - * @langversion 3.0 - * @playerversion Flash 10.2 - * @playerversion AIR 2.6 - * @productversion Royale 0.9.2 - */ - public function get primary():Boolean - { - return _primary; - } - - public function set primary(value:Boolean):void - { - if (_primary != value) - { - _primary = value; - - COMPILE::JS - { - toggleStyle(positioner, "primary", _primary); - } - } - } - + private var _isInvalid:Boolean = false; /** * A boolean flag to activate "is-invalid" effect selector. diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css index 8352a0f..92c4c04 100644 --- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css +++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css @@ -21,7 +21,7 @@ -webkit-box-sizing: border-box; box-sizing: border-box; font-family: "Lato", sans-serif; - color: #FFFFFF; + color: #808080; } .royale { @@ -56,18 +56,18 @@ span { padding: 10px 16px; min-width: 74px; min-height: 34px; - border: 1px solid #404040; - background: linear-gradient(#737373, #595959); - box-shadow: inset 0 1px 0 #999999; + border: 1px solid #b3b3b3; + background: linear-gradient(#e6e6e6, #cccccc); + box-shadow: inset 0 1px 0 white; border-radius: 3px; } .jewel.button:hover { - border: 1px solid #333333; - background: linear-gradient(#666666, #4d4d4d); + border: 1px solid #a6a6a6; + background: linear-gradient(#d9d9d9, silver); } .jewel.button:active { - border: 1px solid #1a1a1a; - background: linear-gradient(#4d4d4d, #333333); + border: 1px solid #8d8d8d; + background: linear-gradient(silver, #a6a6a6); box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5); } .jewel.button:focus { @@ -173,6 +173,11 @@ span { cursor: unset; } +.jewel.checkbox { + position: absolute; + left: -9999px; + cursor: pointer; +} .jewel.checkbox .span { padding-left: 5px; } @@ -206,6 +211,7 @@ span { opacity: 0.7; -webkit-transition: 0.2s; transition: opacity 0.2s; + focus-outline: none; } .jewel.slider .slider:hover { opacity: 1; @@ -213,17 +219,17 @@ span { .jewel.slider .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; - width: 25px; - height: 25px; + width: 15px; + height: 15px; border-radius: 50%; - background: #4CAF50; + background: #3CADF1; cursor: pointer; } .jewel.slider .slider::-moz-range-thumb { - width: 25px; - height: 25px; + width: 15px; + height: 15px; border-radius: 50%; - background: #4CAF50; + background: #3CADF1; cursor: pointer; } @@ -234,25 +240,24 @@ span { padding: 10px 16px; min-width: 74px; min-height: 34px; - border: 1px solid #404040; - background: linear-gradient(#737373, #595959); - box-shadow: inset 0 1px 0 #999999; + border: 1px solid #b3b3b3; + background: linear-gradient(#e6e6e6, #cccccc); + box-shadow: inset 0 1px 0 white; border-radius: 3px; font-family: "Lato", sans-serif; font-size: 14px; font-weight: bold; - color: #FFFFFF; + color: #808080; text-transform: uppercase; text-decoration: none; - shadow: 0 1px 0 #d9d9d9; } .jewel.textbutton:hover { - border: 1px solid #333333; - background: linear-gradient(#666666, #4d4d4d); + border: 1px solid #a6a6a6; + background: linear-gradient(#d9d9d9, silver); } .jewel.textbutton:active { - border: 1px solid #1a1a1a; - background: linear-gradient(#4d4d4d, #333333); + border: 1px solid #8d8d8d; + background: linear-gradient(silver, #a6a6a6); box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5); } .jewel.textbutton:focus { @@ -407,34 +412,14 @@ span { font-family: "Lato", sans-serif; font-size: 14px; font-weight: normal; - color: #FFFFFF; - background: linear-gradient(#8c8c8c, gray); - border: 1px solid #404040; + color: #808080; + background: linear-gradient(white, #f3f3f3); + border: 1px solid #b3b3b3; border-radius: 3px; box-shadow: none; } - -.jewel.textfield.primary { - position: relative; - display: inline-flex; -} -.jewel.textfield.primary .input { - margin: 0; - padding: 0.67em 1em; - max-width: 100%; - flex: 1 0 auto; - outline: none; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - text-align: left; - line-height: 1.4em; - font-family: "Lato", sans-serif; - font-size: 14px; - font-weight: normal; - color: #FFFFFF; - background: linear-gradient(#8c8c8c, gray); +.jewel.textfield .input:focus { border: 1px solid #0f88d1; - border-radius: 3px; - box-shadow: none; } /*# sourceMappingURL=defaults.css.map */ diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass index 15c2744..6e38184 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass @@ -28,7 +28,7 @@ $textfield-min-width: 74px !default $textfield-border-radius: 3px -=textfield-theme($textfield-color, $textfield-text-color) +=textfield-theme($textfield-text-color) position: relative display: inline-flex @@ -52,24 +52,27 @@ $textfield-border-radius: 3px color: $textfield-text-color background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%)) - border: 1px solid darken($textfield-color, 15%) + border: 1px solid darken($default-color, 15%) border-radius: $textfield-border-radius //transition: transition box-shadow: none + &:focus + border: 1px solid darken($primary-color, 15%) + //:hover // padding: 5px; // background-color: #DFDFDF; .jewel.textfield @if $dark - +textfield-theme($default-color, $font-dark-color) + +textfield-theme($font-dark-color) @else - +textfield-theme($default-color, $font-light-color) + +textfield-theme($font-light-color) -.jewel.textfield.primary - @if $dark - +textfield-theme($primary-color, $font-dark-color) - @else - +textfield-theme($primary-color, $font-light-color) +// .jewel.textfield.primary +// @if $dark +// +textfield-theme($primary-color, $font-dark-color) +// @else +// +textfield-theme($primary-color, $font-light-color) -- To stop receiving notification emails like this one, please contact [email protected].
