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/07/22 10:26:35 UTC
[royale-asjs] branch develop updated: welcome section and more work
on sizes for text, buttons and icons
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new 0375989 welcome section and more work on sizes for text, buttons and icons
0375989 is described below
commit 0375989d1f98f3746e059f2526082bc45324187e
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sun Jul 22 12:26:30 2018 +0200
welcome section and more work on sizes for text, buttons and icons
---
.../JewelExample/src/main/royale/WelcomeSection.mxml | 15 ++++++++++++---
frameworks/projects/Jewel/src/main/resources/defaults.css | 15 ++++++++-------
.../Jewel/src/main/sass/components/_textinput.sass | 15 ++++++++-------
.../themes/JewelTheme/src/main/resources/defaults.css | 12 ++++++------
frameworks/themes/JewelTheme/src/main/sass/_global.sass | 12 ++++++------
.../src/main/sass/components-primary/_topappbar.sass | 2 +-
6 files changed, 41 insertions(+), 30 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/WelcomeSection.mxml b/examples/royale/JewelExample/src/main/royale/WelcomeSection.mxml
index e94339a..5e45aa7 100644
--- a/examples/royale/JewelExample/src/main/royale/WelcomeSection.mxml
+++ b/examples/royale/JewelExample/src/main/royale/WelcomeSection.mxml
@@ -31,12 +31,21 @@ limitations under the License.
<j:Label width="400"
multiline="true"
- text="Jewel is a themeizable set of user interface components built upon Apache Royale to quickly build Front-end Applications with AS3 & MXML">
+ text="Jewel is a themeizable set of user interface components for Apache Royale to quickly build Front-end Applications with AS3 & MXML.">
<j:beads>
<j:SizeControl size="large"/>
<j:TextAlign align="center"/>
</j:beads>
</j:Label>
+
+ <j:Label width="400"
+ multiline="true"
+ text="Browser support: Chrome, Firefox, IE11 & Edge, Safari, Opera. Mobile: iOS, Android & Windows">
+ <j:beads>
+ <j:SizeControl size="small"/>
+ <j:TextAlign align="center"/>
+ </j:beads>
+ </j:Label>
<j:HGroup gap="3">
<j:IconTextInput>
@@ -48,9 +57,9 @@ limitations under the License.
<js:FontIcon text="{MaterialIconType.SEARCH}" material="true"/>
</j:icon>
</j:IconTextInput>
- <j:Button text="Search" emphasis="primary">
+ <j:Button text="Search" emphasis="secondary">
<j:beads>
- <j:SizeControl size="xlarge"/>
+ <j:SizeControl size="xlarge"/>
</j:beads>
</j:Button>
</j:HGroup>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index cf79dd9..702c2d4 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -2770,24 +2770,25 @@ j|Slider {
cursor: unset;
}
.jewel.textinput.icon input {
- padding-left: 2.62em;
+ padding-left: 2.12em;
}
.jewel.textinput.icon i.fonticon {
- position: absolute;
- left: 12px;
- right: auto;
- top: 7px;
cursor: default;
pointer-events: none;
+ top: 50%;
+ left: 0.45em;
+ right: auto;
+ position: absolute;
text-align: center;
+ margin-top: -0.5em;
}
.jewel.textinput.icon.right input {
- padding-right: 2.62em;
+ padding-right: 2.12em;
padding-left: 1.12em;
}
.jewel.textinput.icon.right i.fonticon {
left: auto;
- right: 12px;
+ right: 0.45em;
}
j|TextInput {
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass b/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
index bc9b096..68ead0e 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
@@ -48,27 +48,28 @@ $textinput-padding-horizontal: 1.12em !default
&.icon
input
- padding-left: $textinput-padding-horizontal + 1.5
+ padding-left: $textinput-padding-horizontal + 1
i
&.fonticon
- position: absolute
- left: 12px
- right: auto
- top: 7px
cursor: default
pointer-events: none
+ top: 50%
+ left: .45em
+ right: auto
+ position: absolute
text-align: center
+ margin-top: -.5em
&.right
input
- padding-right: $textinput-padding-horizontal + 1.5
+ padding-right: $textinput-padding-horizontal + 1
padding-left: $textinput-padding-horizontal
i
&.fonticon
left: auto
- right: 12px
+ right: .45em
j|TextInput
IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TextModel")
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 230ecd0..e7fee4b 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -53,23 +53,23 @@ div {
}
.jewel.xsmall {
- font-size: 0.6em;
+ font-size: 0.6em !important;
}
.jewel.small {
- font-size: 0.8em;
+ font-size: 0.8em !important;
}
.jewel {
- font-size: 1em;
+ font-size: 1em !important;
}
.jewel.large {
- font-size: 1.2em;
+ font-size: 1.2em !important;
}
.jewel.xlarge {
- font-size: 1.4em;
+ font-size: 1.4em !important;
}
.jewel.alert {
@@ -606,7 +606,7 @@ j|Card {
.jewel.topappbartitle {
font-family: "Lato", sans-serif;
- font-size: 1.4em;
+ font-size: 1.4em !important;
font-weight: 800;
padding-left: 20px;
padding-right: 0;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_global.sass b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
index 9959a19..ad49fc2 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_global.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
@@ -49,23 +49,23 @@ span
div
font-size: 14px
-//Sizes for Button, TextInput and other controls
+//Sizes for Button, TextInput, Icons and other controls
.jewel.xsmall
font:
- size: $font-size-xsmall
+ size: $font-size-xsmall !important
.jewel.small
font:
- size: $font-size-small
+ size: $font-size-small !important
.jewel
font:
- size: $font-size
+ size: $font-size !important
.jewel.large
font:
- size: $font-size-large
+ size: $font-size-large !important
.jewel.xlarge
font:
- size: $font-size-xlarge
+ size: $font-size-xlarge !important
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_topappbar.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_topappbar.sass
index 74d75cd..2ac3e2d 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_topappbar.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_topappbar.sass
@@ -83,7 +83,7 @@ $top-app-bar-button-padding: 12px
.jewel.topappbartitle
font:
family: $font-stack
- size: $font-size-xlarge
+ size: $font-size-xlarge !important
weight: $font-weight-normal * 2
padding-left: 20px
padding-right: 0