This is an automated email from the ASF dual-hosted git repository. carlosrovira pushed a commit to branch feature/vivid-ui-set in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 0be29eddfc30fa961a6873b1da306acedb38507b Author: Carlos Rovira <[email protected]> AuthorDate: Sat Mar 3 19:17:29 2018 +0100 Button initial styles --- .../src/main/royale/ButtonPlayGround.mxml | 7 +++- .../src/main/resources/TextButton.css | 46 +++++++++++----------- .../src/main/resources/assets/JewelButton.svg | 11 +++--- 3 files changed, 35 insertions(+), 29 deletions(-) diff --git a/examples/royale/VividExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/VividExample/src/main/royale/ButtonPlayGround.mxml index 1c95229..1ae7485 100644 --- a/examples/royale/VividExample/src/main/royale/ButtonPlayGround.mxml +++ b/examples/royale/VividExample/src/main/royale/ButtonPlayGround.mxml @@ -36,7 +36,12 @@ limitations under the License. <v:TextButton id="button" text="Button" width="120" height="40"/> - <v:Slider id="slider" width="250" value="120" minimum="50" maximum="250" + + <v:TextButton id="button2" text="Button"/> + + + + <v:Slider id="slider" width="250" value="120" minimum="50" maximum="450" valueChange="onValueChange(event)"/> </js:Group> diff --git a/frameworks/themes/VividBlueTheme/src/main/resources/TextButton.css b/frameworks/themes/VividBlueTheme/src/main/resources/TextButton.css index 84778d5..8064fe6 100644 --- a/frameworks/themes/VividBlueTheme/src/main/resources/TextButton.css +++ b/frameworks/themes/VividBlueTheme/src/main/resources/TextButton.css @@ -24,36 +24,38 @@ * Vivid TextButton */ -TextButton, TextButton:hover { - border: none; - /* Background: */ - background: url(assets/JewelButton.svg); - background-size: cover; - width: fit-content; - height: fit-content; +TextButton { - /*background-color: #D8D8D8; - border: 1px solid #979797; - border-radius: 3px;*/ + cursor:pointer; + /* Background: */ + background: linear-gradient(#FF893B, #FA461E); + border: 1px solid #A93116; + border-radius: 3px; + box-shadow: #E6B89B 0 1px 0 inset, #E6431D 0 -1px 0 inset, #aaa 0 1px 0 inset; + /* TextField: */ - font-family: 'Lato', sans-serif; - font-size: 13px; + font-family: 'Lato-Bold', sans-serif; + font-size: 14px; + font-weight:bold; color: #fff; -} + text-shadow: 0 1px 0 #5F3A29; -/*.no-svg .main-header { - background-image: url(logo.png); -}*/ + line-height:16px; + padding: 8px 16px; +} TextButton:hover { - /*background-color: #CFCFCF; - vertical-align: middle; - border: none; - border-radius: 6px;*/ + background: linear-gradient(#FD9958, #F76943); + border: 1px solid #BC573C; + line-height:16px; + padding: 8px 16px; } TextButton:active { - background-color: #77CEFF; - color: #FFFFFF; + box-shadow: #E6431D 0 1px 0 inset; + text-shadow: 0 -1px 0 #5F3A29; +} +TextButton:focus { + outline:0; } \ No newline at end of file diff --git a/frameworks/themes/VividBlueTheme/src/main/resources/assets/JewelButton.svg b/frameworks/themes/VividBlueTheme/src/main/resources/assets/JewelButton.svg index 31ed58a..6c0eb82 100644 --- a/frameworks/themes/VividBlueTheme/src/main/resources/assets/JewelButton.svg +++ b/frameworks/themes/VividBlueTheme/src/main/resources/assets/JewelButton.svg @@ -16,27 +16,26 @@ limitations under the License. --> -<svg viewBox="0 0 152 42" preserveAspectRatio="none" version="1.1" - xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink";> +<svg viewBox="0 0 152 42" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink";> <defs> <linearGradient x1="50%" y1="3.10307717%" x2="50%" y2="100%" id="linearGradient-1"> <stop stop-color="#FF893B" offset="0%"></stop> <stop stop-color="#FA461E" offset="100%"></stop> </linearGradient> - <rect id="path-2" x="0" y="0" width="150" height="40" rx="3" shape-rendering="crispEdges"></rect> + <rect id="path-2" x="0" y="0" width="150" height="40" rx="3"></rect> <linearGradient x1="50%" y1="0%" x2="50%" y2="98.2362085%" id="linearGradient-3"> <stop stop-color="#FFBA8E" offset="0%"></stop> <stop stop-color="#E6431D" offset="100%"></stop> </linearGradient> </defs> <g id="JewelButton" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> - <g id="Button" transform="translate(1.000000, 1.000000)"> + <g id="Button"> <g id="Background"> <g> <use fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-2"></use> - <rect stroke="#A93116" stroke-width="1" x="-0.5" y="-0.5" width="151" height="41" rx="3" shape-rendering="crispEdges"></rect> + <rect stroke="#A93116" stroke-width="1" x="-0.5" y="-0.5" width="151" height="41" rx="3" ></rect> </g> - <rect stroke="url(#linearGradient-3)" x="0.5" y="0.5" width="149" height="39" rx="3" shape-rendering="crispEdges"></rect> + <rect stroke="url(#linearGradient-3)" x="0.5" y="0.5" width="149" height="39" rx="3"></rect> </g> </g> </g> -- To stop receiving notification emails like this one, please contact [email protected].
