royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] 10/22: wiring textbutton with variables
Date Mon, 12 Mar 2018 14:32:39 GMT
This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch jewel-ui
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git

commit 99bd9849d2c10adb93a9fc8cf25b6f000e237582
Author: Carlos Rovira <carlosrovira@apache.org>
AuthorDate: Thu Mar 8 18:54:33 2018 +0100

    wiring textbutton with variables
---
 frameworks/themes/JewelTheme/pom.xml               |  4 -
 .../JewelTheme/src/main/resources/TextButton.css   | 96 ----------------------
 .../JewelTheme/src/main/resources/defaults.css     | 45 +++++++++-
 .../JewelTheme/src/main/sass/_textbutton.sass      | 92 +++++++++++++++++++++
 .../JewelTheme/src/main/sass/_variables.sass       |  9 +-
 .../themes/JewelTheme/src/main/sass/defaults.sass  |  3 +
 6 files changed, 147 insertions(+), 102 deletions(-)

diff --git a/frameworks/themes/JewelTheme/pom.xml b/frameworks/themes/JewelTheme/pom.xml
index f577bab..c431c4b 100644
--- a/frameworks/themes/JewelTheme/pom.xml
+++ b/frameworks/themes/JewelTheme/pom.xml
@@ -69,10 +69,6 @@
               <path>../src/main/resources/Button.css</path>
             </include-file>
             <include-file>
-              <name>TextButton.css</name>
-              <path>../src/main/resources/TextButton.css</path>
-            </include-file>
-            <include-file>
               <name>TextField.css</name>
               <path>../src/main/resources/TextField.css</path>
             </include-file>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/TextButton.css b/frameworks/themes/JewelTheme/src/main/resources/TextButton.css
deleted file mode 100644
index 975a138..0000000
--- a/frameworks/themes/JewelTheme/src/main/resources/TextButton.css
+++ /dev/null
@@ -1,96 +0,0 @@
-/*
- *
- *  Licensed to the Apache Software Foundation (ASF) under one or more
- *  contributor license agreements.  See the NOTICE file distributed with
- *  this work for additional information regarding copyright ownership.
- *  The ASF licenses this file to You under the Apache License, Version 2.0
- *  (the "License"); you may not use this file except in compliance with
- *  the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- *  Unless required by applicable law or agreed to in writing, software
- *  distributed under the License is distributed on an "AS IS" BASIS,
- *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *  See the License for the specific language governing permissions and
- *  limitations under the License.
- *
- */
-
-@namespace "library://ns.apache.org/royale/jewel";
- 
-/*
-* Jewel TextButton
-*/
-.textbutton, .textbutton:hover {
-	
-	cursor:pointer;
-	
-	/* Background: */
-	border: none;
-	border-radius: 3px;
-
-	/*border:1px;*/ /*without this svg shows scaled and bigger*/
-	/*border-image-source: url(assets/jewel-button.svg) ;
-	border-image-slice: 4;
-	border-image-width: 4;*/
-	
-	/*background-image: linear-gradient(#3BB0FF, #1E36FA);*/
-	/*background-color: #006CEB;
-	background-size: cover;
-	background-repeat: no-repeat;
-	background-clip: padding-box;*/
-
-	/* TextField: */
-	font-family: 'Lato-Bold', sans-serif;
-	font-size: 14px;
-	font-weight:bold;
-	color: #fff;
-	text-shadow: 0 1px 0 #555;
-
-	padding: 10px 0px;
-	display:inline-block;
-	min-width: 80px;
-
-	/*background: url(assets/4slicewithpattern.svg);
-	background-size: cover;
-	width: fit-content;
-	height: fit-content;*/
-	/*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;
-	*/
-}
-
-.textbutton {
-	background-color: #006CEB;
-	transition-duration: 0.4s;
-}
-
-.textbutton:hover {
-	background-color: #3389EF;
-	
-	/* button/large: */
-	/*background: linear-gradient(#FD9958, #F76943);
-	border: 1px solid #BC573C;
-	line-height:16px;
-	padding: 8px 16px;*/
-}
-
-.textbutton:active {
-	background-color: #0056BC;
-	
-	/*box-shadow: #E6431D 0 1px 0 inset;
-	text-shadow: 0 -1px 0 #5F3A29;*/
-}
-.textbutton:focus {
-	outline: 0;
-}
-
-.textbutton[disabled] {
-	background-color: #CCCCCC;
-	color: #888;
-	text-shadow: unset;
-	cursor: unset;
-}
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 29d83ac..3a2634f 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -30,7 +30,50 @@
 
 body {
   font: 100% "Lato-Bold", sans-serif;
-  color: #333;
+  color: red;
+}
+
+/**
+ * Jewel TextButton
+ */
+.textbutton, .textbutton:hover {
+  cursor: pointer;
+  /* Background: */
+  border: none;
+  border-radius: 3px;
+  /* TextField: */
+  font-family: "Lato-Bold", sans-serif;
+  font-size: 14px;
+  font-weight: bold;
+  color: #fff;
+  text-shadow: 0 1px 0 #555;
+  padding: 10px 0px;
+  display: inline-block;
+  min-width: 80px;
+}
+
+.textbutton {
+  background-color: red;
+  transition-duration: 0.4s;
+}
+
+.textbutton:hover {
+  background-color: #3389EF;
+}
+
+.textbutton:active {
+  background-color: #0056BC;
+}
+
+.textbutton:focus {
+  outline: 0;
+}
+
+.textbutton[disabled] {
+  background-color: #CCCCCC;
+  color: #888888;
+  text-shadow: unset;
+  cursor: unset;
 }
 
 /*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
new file mode 100644
index 0000000..ee1c655
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
@@ -0,0 +1,92 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+ 
+/**
+ * Jewel TextButton
+ */
+.textbutton, .textbutton:hover
+	
+	cursor: pointer
+	
+	/* Background: */
+	border: none
+	border-radius: 3px
+
+	//border:1px; /*without this svg shows scaled and bigger*/
+	//border-image-source: url(assets/jewel-button.svg) ;
+	//border-image-slice: 4;
+	//border-image-width: 4;
+	
+	//background-image: linear-gradient(#3BB0FF, #1E36FA);
+
+	//background-color: #006CEB;
+	//background-size: cover;
+	//background-repeat: no-repeat;
+	//background-clip: padding-box;
+
+	/* TextField: */
+	font-family: $font-stack
+	font-size: 14px
+	font-weight: bold
+	color: $font-normal-color
+	text-shadow: 0 1px 0 #555
+
+	padding: 10px 0px
+	display: inline-block
+	min-width: 80px
+
+	//background: url(assets/4slicewithpattern.svg);
+	//background-size: cover;
+	//width: fit-content;
+	//height: fit-content;
+	
+	//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;
+
+.textbutton
+	background-color: $primary-color
+	transition-duration: 0.4s
+
+
+.textbutton:hover
+	background-color: $hover-color
+	
+	//background: linear-gradient(#FD9958, #F76943);
+	//border: 1px solid #BC573C;
+	//line-height:16px;
+	//padding: 8px 16px;
+
+.textbutton:active
+	background-color: $active-color
+	
+	//box-shadow: #E6431D 0 1px 0 inset;
+	//text-shadow: 0 -1px 0 #5F3A29;
+
+.textbutton:focus
+	outline: 0
+
+
+.textbutton[disabled]
+	background-color: $disabled-color
+	color: $font-disabled-color
+	text-shadow: unset
+	cursor: unset
+
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
index 33e2064..46227a0 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
@@ -18,4 +18,11 @@
 ////////////////////////////////////////////////////////////////////////////////
 
 $font-stack: 'Lato-Bold', sans-serif
-$primary-color: #333
\ No newline at end of file
+
+$primary-color: #006CEB
+$hover-color: #3389EF
+$active-color: #0056BC
+$disabled-color: #CCCCCC
+
+$font-normal-color: #fff
+$font-disabled-color: #888888
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
index b45e844..aa62d14 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -33,3 +33,6 @@
 body
 	font: 100% $font-stack
 	color: $primary-color
+
+// Components
+@import "textbutton"
\ No newline at end of file

-- 
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.

Mime
View raw message