royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] 13/22: changes to get two initial themes blue and red
Date Mon, 12 Mar 2018 14:32:42 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 4846918cf34870e7878821f35dccc828e9d8956d
Author: Carlos Rovira <carlosrovira@apache.org>
AuthorDate: Fri Mar 9 23:58:36 2018 +0100

    changes to get two initial themes blue and red
---
 .../src/main/royale/ButtonPlayGround.mxml          | 20 ++++-----
 .../main/royale/org/apache/royale/jewel/Button.as  |  4 +-
 frameworks/themes/JewelTheme/pom.xml               |  2 +-
 .../JewelTheme/src/main/resources/defaults.css     | 33 +++++++-------
 .../src/main/resources/royale-jewel-blue.css       | 33 +++++++-------
 .../{defaults.css => royale-jewel-red.css}         | 41 +++++++++--------
 .../themes/JewelTheme/src/main/sass/_button.sass   | 51 ++++++++--------------
 .../JewelTheme/src/main/sass/_textbutton.sass      | 25 ++++++++---
 .../JewelTheme/src/main/sass/_variables.sass       | 13 +-----
 .../_blue-color-palette.sass}                      | 22 +---------
 .../_red-color-palette.sass}                       | 22 +---------
 .../themes/JewelTheme/src/main/sass/defaults.sass  |  2 +-
 .../src/main/sass/royale-jewel-blue.sass           |  1 +
 ...oyale-jewel-blue.sass => royale-jewel-red.sass} |  1 +
 14 files changed, 107 insertions(+), 163 deletions(-)

diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
index 3efb4df..218680a 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -38,30 +38,28 @@ limitations under the License.
 	<js:Button/>
 	<js:TextButton text="Basic"/>
 
-	<j:Button/>
-	<j:TextButton text="C" />
+	<j:Button primary="true"/>
+	<j:TextButton text="C" primary="true"/>
 
-	<j:TextButton text="Button"/>
-
-	<j:TextButton text="Button With More Text" />
+	<j:TextButton text="Button" primary="true"/>
 
-	<j:TextButton text="Button" width="120" height="40" />
+	<j:TextButton text="Button With More Text" primary="true"/>
 
+	<j:TextButton text="Button" width="120" height="40" primary="true"/>
 	
 	<j:TextButton text="Button" primary="true"/>
 
-	<j:TextButton text="Disabled" >
+	<j:TextButton text="Disabled" primary="true">
 		<j:beads>
 			<j:Disabled/>
 		</j:beads>
 	</j:TextButton>
-	
 
-	<j:Slider id="slider" width="250" value="420" minimum="50" maximum="500"
+	<j:Slider id="slider" width="250" value="100" minimum="50" maximum="500"
 				valueChange="onValueChange(event)"/>
-	<j:Slider id="slider_v" width="250" value="440" minimum="50" maximum="500"
+	<j:Slider id="slider_v" width="250" value="100" minimum="50" maximum="500"
 				valueChange="onValueChange(event)"/>
 
-	<j:TextButton id="button" text="Button" width="420" height="440" />
+	<j:TextButton id="button" text="Button" width="100" height="100" primary="true"/>
 
 </js:Group>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
index 938ed89..0d73362 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
@@ -86,7 +86,7 @@ package org.apache.royale.jewel
         private var _primary:Boolean = false;
 
         /**
-		 *  A boolean flag to activate "jewel-button--primary" effect selector.
+		 *  A boolean flag to activate "button--primary" effect selector.
 		 *  Applies primary color display effect.
          *  Colors are defined in royale-jewel.css
          *
@@ -108,7 +108,7 @@ package org.apache.royale.jewel
 
                 COMPILE::JS
                 {
-                    addOrRemove("jewel-button--primary",value);
+                    addOrRemove("button--primary",value);
                     setClassName(computeFinalClassNames());
                 }
             }
diff --git a/frameworks/themes/JewelTheme/pom.xml b/frameworks/themes/JewelTheme/pom.xml
index 562dd07..702d626 100644
--- a/frameworks/themes/JewelTheme/pom.xml
+++ b/frameworks/themes/JewelTheme/pom.xml
@@ -65,7 +65,7 @@
               <path>../src/main/resources/defaults.css</path>
             </include-file> -->
             <include-file>
-              <name>royale-jewel-blue.css</name>
+              <name>royale-jewel-red.css</name>
               <path>../src/main/resources/royale-jewel-blue.css</path>
             </include-file>
           </includeFiles>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 782e6d5..c092842 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -14,7 +14,6 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-/* BUTTON */
 @namespace j "library://ns.apache.org/royale/jewel";
 @namespace "http://www.w3.org/1999/xhtml";
 .royale *, .royale *:before, .royale *:after {
@@ -32,7 +31,7 @@
 /**
  * Jewel Button
  */
-.button, .textbutton {
+.button, .button:hover, .textbutton, .textbutton:hover {
   cursor: pointer;
   display: inline-block;
   margin: 0;
@@ -41,29 +40,22 @@
   /* Background: */
   border: none;
   border-radius: 3px;
-  /* TextField */
-  color: rgba(255, 255, 255, 0.4);
-  font-family: "Lato-Bold", sans-serif;
-  font-style: bold;
-  font-size: 0.7rem;
-  text-transform: uppercase;
-  text-decoration: none;
 }
 
-.jewel-button--primary {
+.button--primary {
   background-color: #006CEB;
   transition-duration: 0.4s;
 }
-.jewel-button--primary:hover {
+.button--primary:hover {
   background-color: #0b7bff;
 }
-.jewel-button--primary:active {
+.button--primary:active {
   background-color: #005ecc;
 }
-.jewel-button--primary:focus {
+.button--primary:focus {
   outline: 0;
 }
-.jewel-button--primary [disabled] {
+.button--primary [disabled] {
   background-color: #CCCCCC;
   color: #888888;
   cursor: unset;
@@ -72,10 +64,17 @@
 /**
  * Jewel TextButton
  */
-.textbutton[disabled] {
+.textbutton, .textbutton:hover {
+  /* TextField */
+  color: rgba(255, 255, 255, 0.9);
+  font-family: "Lato-Bold", sans-serif;
+  font-style: bold;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  text-decoration: none;
+}
+.textbutton [disabled] {
   text-shadow: unset;
-  cursor: unset;
-  /* TextField: */
 }
 
 /**
diff --git a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
index 76cae63..7d56600 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
@@ -14,7 +14,6 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-/* BUTTON */
 @namespace j "library://ns.apache.org/royale/jewel";
 @namespace "http://www.w3.org/1999/xhtml";
 .royale *, .royale *:before, .royale *:after {
@@ -32,7 +31,7 @@
 /**
  * Jewel Button
  */
-.button, .textbutton {
+.button, .button:hover, .textbutton, .textbutton:hover {
   cursor: pointer;
   display: inline-block;
   margin: 0;
@@ -41,29 +40,22 @@
   /* Background: */
   border: none;
   border-radius: 3px;
-  /* TextField */
-  color: rgba(255, 255, 255, 0.4);
-  font-family: "Lato-Bold", sans-serif;
-  font-style: bold;
-  font-size: 0.7rem;
-  text-transform: uppercase;
-  text-decoration: none;
 }
 
-.jewel-button--primary {
+.button--primary {
   background-color: #006CEB;
   transition-duration: 0.4s;
 }
-.jewel-button--primary:hover {
+.button--primary:hover {
   background-color: #0b7bff;
 }
-.jewel-button--primary:active {
+.button--primary:active {
   background-color: #005ecc;
 }
-.jewel-button--primary:focus {
+.button--primary:focus {
   outline: 0;
 }
-.jewel-button--primary [disabled] {
+.button--primary [disabled] {
   background-color: #CCCCCC;
   color: #888888;
   cursor: unset;
@@ -72,10 +64,17 @@
 /**
  * Jewel TextButton
  */
-.textbutton[disabled] {
+.textbutton, .textbutton:hover {
+  /* TextField */
+  color: rgba(255, 255, 255, 0.9);
+  font-family: "Lato-Bold", sans-serif;
+  font-style: bold;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  text-decoration: none;
+}
+.textbutton [disabled] {
   text-shadow: unset;
-  cursor: unset;
-  /* TextField: */
 }
 
 /**
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
similarity index 85%
copy from frameworks/themes/JewelTheme/src/main/resources/defaults.css
copy to frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
index 782e6d5..56a785d 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
@@ -14,7 +14,6 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-/* BUTTON */
 @namespace j "library://ns.apache.org/royale/jewel";
 @namespace "http://www.w3.org/1999/xhtml";
 .royale *, .royale *:before, .royale *:after {
@@ -32,7 +31,7 @@
 /**
  * Jewel Button
  */
-.button, .textbutton {
+.button, .button:hover, .textbutton, .textbutton:hover {
   cursor: pointer;
   display: inline-block;
   margin: 0;
@@ -41,29 +40,22 @@
   /* Background: */
   border: none;
   border-radius: 3px;
-  /* TextField */
-  color: rgba(255, 255, 255, 0.4);
-  font-family: "Lato-Bold", sans-serif;
-  font-style: bold;
-  font-size: 0.7rem;
-  text-transform: uppercase;
-  text-decoration: none;
 }
 
-.jewel-button--primary {
-  background-color: #006CEB;
+.button--primary {
+  background-color: #FF0000;
   transition-duration: 0.4s;
 }
-.jewel-button--primary:hover {
-  background-color: #0b7bff;
+.button--primary:hover {
+  background-color: #ff1f1f;
 }
-.jewel-button--primary:active {
-  background-color: #005ecc;
+.button--primary:active {
+  background-color: #e00000;
 }
-.jewel-button--primary:focus {
+.button--primary:focus {
   outline: 0;
 }
-.jewel-button--primary [disabled] {
+.button--primary [disabled] {
   background-color: #CCCCCC;
   color: #888888;
   cursor: unset;
@@ -72,10 +64,17 @@
 /**
  * Jewel TextButton
  */
-.textbutton[disabled] {
+.textbutton, .textbutton:hover {
+  /* TextField */
+  color: rgba(255, 255, 255, 0.9);
+  font-family: "Lato-Bold", sans-serif;
+  font-style: bold;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  text-decoration: none;
+}
+.textbutton [disabled] {
   text-shadow: unset;
-  cursor: unset;
-  /* TextField: */
 }
 
 /**
@@ -121,4 +120,4 @@ TextField {
   text-align: left;
 }
 
-/*# sourceMappingURL=defaults.css.map */
+/*# sourceMappingURL=royale-jewel-red.css.map */
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/_button.sass
index 376f994..8d416f2 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_button.sass
@@ -32,46 +32,31 @@
 	border: none // .094em solid 
 	border-radius: 3px //.625em
 	//box-shadow: 0 .375em .313em -.313em rgba(black,.8), inset 0 .063em $off-wht, inset 0 -.188em
rgba(black,.15)
-	
-	/* TextField */
-	color: $white
-	font:
-		family: $font-stack 
-		style: bold 
-		size: .7rem 
-	//+trans(0.2s ease-in-out)
-	text:
-		transform: uppercase
-		decoration: none 
-		//shadow: 0 .063em rgba(black,.3)
 
-.button
+.button, .button:hover
 	@extend %button-def
 
-.jewel-button--primary
+.button--primary
 	+button-theme($primary-color)
 
+//SVGs
+//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;
 
-	//SVGs
-	//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;
-
-	//background: url(assets/4slicewithpattern.svg);
-	//background-size: cover;
-	//width: fit-content;
-	//height: fit-content;
+//background: url(assets/4slicewithpattern.svg);
+//background-size: cover;
+//width: fit-content;
+//height: fit-content;
 
 //.button:active	
-	//box-shadow: #E6431D 0 1px 0 inset;
-	//text-shadow: 0 -1px 0 #5F3A29;
\ No newline at end of file
+//box-shadow: #E6431D 0 1px 0 inset;
+//text-shadow: 0 -1px 0 #5F3A29;
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
index 4211663..4cf7a0f 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
@@ -20,17 +20,28 @@
 /**
  * Jewel TextButton
  */
-
-.textbutton
+%textbutton-def
 	@extend %button-def
+	/* TextField */
+	color: $white
+	font:
+		family: $font-stack 
+		style: bold 
+		size: .7rem 
+	//+trans(0.2s ease-in-out)
+	text:
+		transform: uppercase
+		decoration: none 
+		//shadow: 0 .063em rgba(black,.3)
 
+	[disabled]
+		text:
+			shadow: unset
 
-.textbutton[disabled]
-	text:
-		shadow: unset
-	cursor: unset
+.textbutton, .textbutton:hover
+	@extend %textbutton-def
 
-	/* TextField: */
+// /* TextField: */
 //	font-family: $font-stack
 //	font-size: 14px
 //	font-weight: bold
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
index 90ff1c5..b1f1f39 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
@@ -20,20 +20,11 @@
 $font-stack: 'Lato-Bold', sans-serif
 
 // Common Colors
-$white: rgba(white,.4)
+$white: rgba(white,.9)
 $disabled-color: #CCCCCC
 $font-disabled-color: #888888
 
-// Color Themes
-$primary-color: #006CEB
-
-//$purple: #9A68C7
-//$blue: #3BA9E4
-//$green: #75B343
-//$orange: #FF6A42
-
-
-/* BUTTON */
+// Button variables
 $button-min-width: 74px !default
 
 
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
similarity index 77%
copy from frameworks/themes/JewelTheme/src/main/sass/_variables.sass
copy to frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
index 90ff1c5..fbe84c7 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
@@ -16,25 +16,5 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-
-$font-stack: 'Lato-Bold', sans-serif
-
-// Common Colors
-$white: rgba(white,.4)
-$disabled-color: #CCCCCC
-$font-disabled-color: #888888
-
 // Color Themes
-$primary-color: #006CEB
-
-//$purple: #9A68C7
-//$blue: #3BA9E4
-//$green: #75B343
-//$orange: #FF6A42
-
-
-/* BUTTON */
-$button-min-width: 74px !default
-
-
-
+$primary-color: #006CEB
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass
similarity index 77%
copy from frameworks/themes/JewelTheme/src/main/sass/_variables.sass
copy to frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass
index 90ff1c5..b1af604 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass
@@ -16,25 +16,5 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-
-$font-stack: 'Lato-Bold', sans-serif
-
-// Common Colors
-$white: rgba(white,.4)
-$disabled-color: #CCCCCC
-$font-disabled-color: #888888
-
 // Color Themes
-$primary-color: #006CEB
-
-//$purple: #9A68C7
-//$blue: #3BA9E4
-//$green: #75B343
-//$orange: #FF6A42
-
-
-/* BUTTON */
-$button-min-width: 74px !default
-
-
-
+$primary-color: #FF0000
\ 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 7ad0fdd..5f5343c 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -15,8 +15,8 @@
  *  limitations under the License.
  */
 
-
 // Variables
+@import "colors/blue-color-palette"
 @import "variables"
 @import "mixins"
 @import "functions"
diff --git a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
index 98d8247..3c82eb7 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
@@ -16,6 +16,7 @@
  */
 
 // Variables
+@import "colors/blue-color-palette"
 @import "variables"
 @import "mixins"
 @import "functions"
diff --git a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass
similarity index 96%
copy from frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
copy to frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass
index 98d8247..54e8f75 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass
@@ -16,6 +16,7 @@
  */
 
 // Variables
+@import "colors/red-color-palette"
 @import "variables"
 @import "mixins"
 @import "functions"

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

Mime
View raw message