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/03 18:17:33 UTC
[royale-asjs] branch feature/vivid-ui-set updated: Button initial
styles
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
The following commit(s) were added to refs/heads/feature/vivid-ui-set by this push:
new 7143394 Button initial styles
7143394 is described below
commit 71433949a39dd77bd33ab3d19624c71e32cf73ea
Author: Carlos Rovira <ca...@apache.org>
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
carlosrovira@apache.org.