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/11 11:47:56 UTC
[royale-asjs] 13/17: changes to get two initial themes blue and red
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 303327af6febcb36fb780d93df1a67a9555324fe
Author: Carlos Rovira <ca...@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.