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 54f5e07d52da7c1fb95271ae67a6f7e0a360b3dc Author: Carlos Rovira <[email protected]> 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 [email protected].
