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/23 07:57:31 UTC
[royale-asjs] 31/36: Headings and text styling,
condense vars in one file
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 10cd9365deebdbc83880da39d6b27bf7df6b084a
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Mar 21 16:46:09 2018 +0100
Headings and text styling, condense vars in one file
---
.../src/main/royale/ButtonPlayGround.mxml | 10 ++--
.../src/main/royale/TextInputPlayGround.mxml | 20 +++++++-
.../royale/org/apache/royale/jewel/TextField.as | 2 +-
.../JewelTheme/src/main/resources/defaults.css | 46 +++++++++---------
.../src/main/sass/_default-color-palette.sass | 55 ----------------------
.../themes/JewelTheme/src/main/sass/_global.sass | 20 ++++++++
.../JewelTheme/src/main/sass/_variables.sass | 42 ++++++++++++++---
.../src/main/sass/components/_button.sass | 12 ++++-
.../src/main/sass/components/_textbutton.sass | 3 +-
.../src/main/sass/components/_textfield.sass | 4 +-
.../themes/JewelTheme/src/main/sass/defaults.sass | 1 -
11 files changed, 118 insertions(+), 97 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
index 51b95e5..32596a8 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -19,6 +19,7 @@ limitations under the License.
-->
<js:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:js="library://ns.apache.org/royale/basic"
+ xmlns:html="library://ns.apache.org/royale/html"
xmlns:j="library://ns.apache.org/royale/jewel">
<fx:Script>
@@ -35,13 +36,10 @@ limitations under the License.
<j:VerticalLayoutWithPaddingAndGap gap="10"/>
</js:beads>
- <j:Label text="Basic"/>
- <js:Button/>
- <js:TextButton text="Basic"/>
-
- <j:Label text="Jewel Button"/>
+ <html:H4 text="Jewel Button"/>
<j:Button primary="true"/>
- <j:Label text="Jewel TextButton"/>
+
+ <html:H4 text="Jewel TextButton"/>
<j:TextButton text="Default"/>
<j:TextButton text="Button With More Text"/>
<j:TextButton text="Primary" primary="true"/>
diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
index cb236e9..903bd68 100644
--- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
@@ -19,10 +19,28 @@ limitations under the License.
-->
<js:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:js="library://ns.apache.org/royale/basic"
+ xmlns:html="library://ns.apache.org/royale/html"
xmlns:j="library://ns.apache.org/royale/jewel">
+ <js:beads>
+ <j:VerticalLayoutWithPaddingAndGap gap="10"/>
+ </js:beads>
- <j:RadioButton/>
+ <html:H1 text="Heading H1"/>
+ <html:H2 text="Heading H2"/>
+ <html:H3 text="Heading H3"/>
+ <html:H4 text="Heading H4"/>
+
+ <html:Span text="Normal text to use in labels, texts and fields with single line or multiple lines."/>
+
+ <html:H4 text="Jewel TextField"/>
+
<j:TextField text="Text Input" width="120" height="40"/>
+
+ <html:H4 text="Jewel CheckBox"/>
<j:CheckBox/>
+
+ <html:H4 text="Jewel RadioButton"/>
+ <j:RadioButton/>
+
</js:Group>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as
index 6bd9f01..c3e18d5 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as
@@ -50,7 +50,7 @@ package org.apache.royale.jewel
{
super();
- typeNames = "jewel textField";
+ typeNames = "jewel textfield";
}
COMPILE::JS
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index dac767d..cb1350f 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -20,6 +20,8 @@
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
+ font-family: "Lato", sans-serif;
+ color: #808080;
}
.royale {
@@ -27,6 +29,26 @@
margin: 10px;
}
+h1 {
+ font-size: 22px;
+}
+
+h2 {
+ font-size: 19px;
+}
+
+h3 {
+ font-size: 17px;
+}
+
+h4 {
+ font-size: 15px;
+}
+
+span {
+ font-size: 14px;
+}
+
.jewel.button {
cursor: pointer;
display: inline-block;
@@ -38,8 +60,6 @@
background: linear-gradient(#e6e6e6, #cccccc);
box-shadow: inset 0 1px 0 white;
border-radius: 3px;
- transition-duration: 1s;
- transition-timing-function: ease;
}
.jewel.button:hover {
border: 1px solid #a6a6a6;
@@ -71,8 +91,6 @@
background: linear-gradient(#54b7f3, #24a3ef);
box-shadow: inset 0 1px 0 #9bd5f8;
border-radius: 3px;
- transition-duration: 1s;
- transition-timing-function: ease;
}
.jewel.button.primary:hover {
border: 1px solid #0d79ba;
@@ -104,8 +122,6 @@
background: linear-gradient(#f16c42, #ed4812);
box-shadow: inset 0 1px 0 #f6a389;
border-radius: 3px;
- transition-duration: 1s;
- transition-timing-function: ease;
}
.jewel.button.secondary:hover {
border: 1px solid #a6320d;
@@ -137,8 +153,6 @@
background: linear-gradient(#45c354, #34a241);
box-shadow: inset 0 1px 0 #7fd68a;
border-radius: 3px;
- transition-duration: 1s;
- transition-timing-function: ease;
}
.jewel.button.emphasized:hover {
border: 1px solid #21682a;
@@ -175,8 +189,6 @@
background: linear-gradient(#e6e6e6, #cccccc);
box-shadow: inset 0 1px 0 white;
border-radius: 3px;
- transition-duration: 1s;
- transition-timing-function: ease;
font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: bold;
@@ -187,7 +199,6 @@
.jewel.textbutton:hover {
border: 1px solid #a6a6a6;
background: linear-gradient(#d9d9d9, silver);
- box-shadow: inser 0 0 0;
}
.jewel.textbutton:active {
border: 1px solid #8d8d8d;
@@ -218,8 +229,6 @@
background: linear-gradient(#54b7f3, #24a3ef);
box-shadow: inset 0 1px 0 #9bd5f8;
border-radius: 3px;
- transition-duration: 1s;
- transition-timing-function: ease;
font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: bold;
@@ -231,7 +240,6 @@
.jewel.textbutton.primary:hover {
border: 1px solid #0d79ba;
background: linear-gradient(#3CADF1, #1198e9);
- box-shadow: inser 0 0 0;
}
.jewel.textbutton.primary:active {
border: 1px solid #0a5a8a;
@@ -262,8 +270,6 @@
background: linear-gradient(#f16c42, #ed4812);
box-shadow: inset 0 1px 0 #f6a389;
border-radius: 3px;
- transition-duration: 1s;
- transition-timing-function: ease;
font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: bold;
@@ -275,7 +281,6 @@
.jewel.textbutton.secondary:hover {
border: 1px solid #a6320d;
background: linear-gradient(#EF5A2A, #d64010);
- box-shadow: inser 0 0 0;
}
.jewel.textbutton.secondary:active {
border: 1px solid #772409;
@@ -306,8 +311,6 @@
background: linear-gradient(#45c354, #34a241);
box-shadow: inset 0 1px 0 #7fd68a;
border-radius: 3px;
- transition-duration: 1s;
- transition-timing-function: ease;
font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: bold;
@@ -319,7 +322,6 @@
.jewel.textbutton.emphasized:hover {
border: 1px solid #21682a;
background: linear-gradient(#3AB549, #2e8e39);
- box-shadow: inser 0 0 0;
}
.jewel.textbutton.emphasized:active {
border: 1px solid #15411a;
@@ -348,7 +350,7 @@
margin: 0;
}
-.jewel.textfield > input {
+.jewel.textfield input {
font-size: 16px;
font-family: "Lato", sans-serif;
border: none;
@@ -364,7 +366,7 @@
outline: none;
}
-.jewel.textfield > label {
+.jewel.textfield label {
bottom: 0;
color: #ff0000;
font-size: 13px;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass b/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass
deleted file mode 100644
index d585185..0000000
--- a/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass
+++ /dev/null
@@ -1,55 +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.
-//
-////////////////////////////////////////////////////////////////////////////////
-
-// CONSTANTS
-// 12 Color Themes (this will go to one separate project each one)
-$red: #EC1C24
-$amethyst: #922590
-$violet: #662C90
-$Sapphire: #2C74BE
-$blue: #3CADF1
-$turquoise: #29A89F
-$green: #3AB549
-$emerald: #8CC63C
-$yellow: #FCEF0A
-$sunflower: #F8B13F
-$orange: #F7941D
-$topaz: #EF5A2A
-$font-theme-color: #FFFFFF
-
-$light-color: #d9d9d9
-$font-light-color: #808080
-
-$dark-color: #666666
-$font-dark-color: #FFFFFF
-
-//Theme Style (Flat or Gradient)
-$flat: false
-$transitions-enable: false
-$transition-duration: .3s
-$transition-timing: easein
-
-// VARIABLES
-$default-color: $light-color // change this from light to dark
-$primary-color: $blue
-$secondary-color: $topaz
-$emphasized-color: $green
-
-$default-font-color: $font-light-color // change this from light to dark
-$disabled-color: #F9F9F9 // maybe make it dependent of theme colors
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_global.sass b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
index 23fa5ea..0a30c44 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_global.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
@@ -26,6 +26,26 @@
-webkit-box-sizing: border-box
box-sizing: border-box
+ font:
+ family: $font-stack
+ color: $default-font-color
+
+
.royale
padding: 10px
margin: 10px
+
+h1
+ font-size: 22px
+
+h2
+ font-size: 19px
+
+h3
+ font-size: 17px
+
+h4
+ font-size: 15px
+
+span
+ font-size: 14px
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
index 73291fb..1d5a14f 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
@@ -17,16 +17,46 @@
//
////////////////////////////////////////////////////////////////////////////////
+// CONSTANTS
+// 12 Color Themes (this will go to one separate project each one)
+$red: #EC1C24
+$amethyst: #922590
+$violet: #662C90
+$Sapphire: #2C74BE
+$blue: #3CADF1
+$turquoise: #29A89F
+$green: #3AB549
+$emerald: #8CC63C
+$yellow: #FCEF0A
+$sunflower: #F8B13F
+$orange: #F7941D
+$topaz: #EF5A2A
+$font-theme-color: #FFFFFF
+
+$light-color: #d9d9d9
+$font-light-color: #808080
+
+$dark-color: #666666
+$font-dark-color: #FFFFFF
+
+//Theme Style (Flat or Gradient)
+$flat: false
+$transitions-enable: false
+$transition-duration: .3s
+$transition-timing: easein
+
+// FONTS
$font-stack: 'Lato', sans-serif
$font-size: 14px//0.75rem
-// Button variables
-$button-margin: 0 !default
-$button-padding: 10px 16px !default
-$button-min-height: 34px !default
-$button-min-width: 74px !default
+// VARIABLES
+$default-color: $light-color // change this from light to dark
+$primary-color: $blue
+$secondary-color: $topaz
+$emphasized-color: $green
-$button-border-radius: 3px
+$default-font-color: $font-light-color // change this from light to dark
+$disabled-color: #F9F9F9 // maybe make it dependent of theme colors
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
index 17a4fb7..6b8551f 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
@@ -17,6 +17,14 @@
//
////////////////////////////////////////////////////////////////////////////////
+// Button variables
+$button-margin: 0 !default
+$button-padding: 10px 16px !default
+$button-min-height: 34px !default
+$button-min-width: 74px !default
+
+$button-border-radius: 3px
+
=button-theme($button-color)
cursor: pointer
display: inline-block
@@ -31,7 +39,7 @@
border: 0px solid
background: $button-color
@else
- border: 1px solid darken($button-color, 15%)// .094em solid
+ border: 1px solid darken($button-color, 15%)// .094em
background: linear-gradient(lighten($button-color, 5%), darken($button-color, 5%))
box-shadow: inset 0 1px 0 lighten($button-color, 20%)
border-radius: $button-border-radius //.625em
@@ -45,7 +53,7 @@
@if $flat
background: darken($button-color, 5%)
@else
- border: 1px solid darken($button-color, 20%)// .094em solid
+ border: 1px solid darken($button-color, 20%)// .094em
background: linear-gradient($button-color, darken($button-color, 10%))
&:active
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
index 663ada9..03b66da 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
@@ -17,6 +17,7 @@
//
////////////////////////////////////////////////////////////////////////////////
+// Note: Use Button variables
=textbutton-theme($button-color, $text-color)
cursor: pointer
@@ -44,7 +45,7 @@
font:
family: $font-stack
- size: $font-size//+trans(0.2s ease-in-out)
+ size: $font-size
weight: bold
color: $text-color
text:
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
index 952e7c5..d2d842a 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
@@ -25,7 +25,7 @@
max-width: 100%
margin: 0
-.jewel.textfield > input
+.jewel.textfield input
font-size: 16px
font-family: 'Lato', sans-serif
@@ -41,7 +41,7 @@
color: inherit
outline: none
-.jewel.textfield > label
+.jewel.textfield label
bottom: 0
color: #ff0000
font-size: 13px
diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
index 7ecc056..e377e4d 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -16,7 +16,6 @@
*/
// Variables
-@import "default-color-palette"
@import "variables"
@import "mixins"
@import "functions"
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.