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 38be443c5ff9c9d9799bf6679efe44feffa63d9d Author: Carlos Rovira <[email protected]> AuthorDate: Wed Mar 21 00:32:23 2018 +0100 12 Color Palette Plan Almost done and working for Button, but only one project theme for now --- examples/royale/JewelExample/pom.xml | 4 +- .../src/main/royale/ButtonPlayGround.mxml | 6 +- .../JewelTheme/src/main/resources/defaults.css | 276 ++++++++++++++------- .../src/main/sass/_default-color-palette.sass | 32 ++- .../themes/JewelTheme/src/main/sass/_mixins.sass | 19 +- .../JewelTheme/src/main/sass/_variables.sass | 10 +- .../src/main/sass/components/_button.sass | 42 ++-- .../src/main/sass/components/_textbutton.sass | 68 +++-- .../src/main/sass/components/_textfield.sass | 9 +- 9 files changed, 295 insertions(+), 171 deletions(-) diff --git a/examples/royale/JewelExample/pom.xml b/examples/royale/JewelExample/pom.xml index 5427bc4..b2b08f8 100644 --- a/examples/royale/JewelExample/pom.xml +++ b/examples/royale/JewelExample/pom.xml @@ -120,13 +120,13 @@ <scope>theme</scope> <classifier>js</classifier> </dependency> - <dependency> + <!-- <dependency> <groupId>org.apache.royale.framework</groupId> <artifactId>JewelBlueTheme</artifactId> <version>0.9.3-SNAPSHOT</version> <type>swc</type> <scope>theme</scope> - </dependency> + </dependency> --> </dependencies> </project> diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml index f89ecaa..51b95e5 100644 --- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml +++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml @@ -53,10 +53,10 @@ limitations under the License. </j:beads> </j:TextButton> <j:Label text="Jewel Button Sizing (respect min values)"/> - <j:Slider id="slider" width="250" value="100" minimum="0" maximum="500" + <j:Slider id="slider" width="250" value="120" minimum="100" maximum="500" valueChange="onValueChange(event)"/> - <j:Slider id="slider_v" width="250" value="40" minimum="0" maximum="300" + <j:Slider id="slider_v" width="250" value="40" minimum="40" maximum="300" valueChange="onValueChange(event)"/> - <j:TextButton id="button" text="Button" width="100" height="40" primary="true"/> + <j:TextButton id="button" text="Button" width="120" height="40" primary="true"/> </js:Group> diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css index cc10a23..6e720c5 100644 --- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css +++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css @@ -27,10 +27,7 @@ margin: 10px; } -/** - * Jewel Button - */ -.jewel.button, .jewel.button:hover, .jewel.textbutton, .jewel.textbutton:hover { +.jewel.button { cursor: pointer; display: inline-block; margin: 0; @@ -38,194 +35,299 @@ min-width: 74px; min-height: 34px; /* Background: */ - border: none; border-radius: 3px; -} - -.jewel.button { - background-color: rgba(0, 0, 0, 0.3); - transition-duration: 0.4s; - color: rgba(0, 0, 0, 0.4); + border: 1px solid #b3b3b3; + background: linear-gradient(#e6e6e6, #cccccc); + box-shadow: inset 0 1px 0 white; } .jewel.button:hover { - background-color: rgba(15, 15, 15, 0.3); + border: 1px solid #a6a6a6; + background: linear-gradient(#d9d9d9, silver); } .jewel.button:active { - background-color: rgba(0, 0, 0, 0.3); + border: 1px solid #8d8d8d; + background: linear-gradient(silver, #a6a6a6); + box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75); } .jewel.button:focus { outline: 0; } .jewel.button[disabled] { - background-color: #CCCCCC; - color: #888888; + border: 1px solid #c6c6c6; + background: #F9F9F9; + box-shadow: none; cursor: unset; } .jewel.button.primary { - background-color: #dedede; - transition-duration: 0.4s; - color: #000000; + cursor: pointer; + display: inline-block; + margin: 0; + padding: 10px 16px; + min-width: 74px; + min-height: 34px; + /* Background: */ + border-radius: 3px; + border: 1px solid #0f88d1; + background: linear-gradient(#54b7f3, #24a3ef); + box-shadow: inset 0 1px 0 #9bd5f8; } .jewel.button.primary:hover { - background-color: #ededed; + border: 1px solid #0d79ba; + background: linear-gradient(#3CADF1, #1198e9); } .jewel.button.primary:active { - background-color: #cfcfcf; + border: 1px solid #0a5a8a; + background: linear-gradient(#1198e9, #0d79ba); + box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75); } .jewel.button.primary:focus { outline: 0; } .jewel.button.primary[disabled] { - background-color: #CCCCCC; - color: #888888; + border: 1px solid #c6c6c6; + background: #F9F9F9; + box-shadow: none; cursor: unset; } .jewel.button.secondary { - background-color: #011833; - transition-duration: 0.4s; - color: #000000; + cursor: pointer; + display: inline-block; + margin: 0; + padding: 10px 16px; + min-width: 74px; + min-height: 34px; + /* Background: */ + border-radius: 3px; + border: 1px solid #be390e; + background: linear-gradient(#f16c42, #ed4812); + box-shadow: inset 0 1px 0 #f6a389; } .jewel.button.secondary:hover { - background-color: #022651; + border: 1px solid #a6320d; + background: linear-gradient(#EF5A2A, #d64010); } .jewel.button.secondary:active { - background-color: #000a15; + border: 1px solid #772409; + background: linear-gradient(#d64010, #a6320d); + box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75); } .jewel.button.secondary:focus { outline: 0; } .jewel.button.secondary[disabled] { - background-color: #CCCCCC; - color: #888888; + border: 1px solid #c6c6c6; + background: #F9F9F9; + box-shadow: none; cursor: unset; } .jewel.button.emphasized { - background-color: #1FD348; - transition-duration: 0.4s; - color: #000000; + cursor: pointer; + display: inline-block; + margin: 0; + padding: 10px 16px; + min-width: 74px; + min-height: 34px; + /* Background: */ + border-radius: 3px; + border: 1px solid #277b32; + background: linear-gradient(#45c354, #34a241); + box-shadow: inset 0 1px 0 #7fd68a; } .jewel.button.emphasized:hover { - background-color: #30e158; + border: 1px solid #21682a; + background: linear-gradient(#3AB549, #2e8e39); } .jewel.button.emphasized:active { - background-color: #1bb83f; + border: 1px solid #15411a; + background: linear-gradient(#2e8e39, #21682a); + box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75); } .jewel.button.emphasized:focus { outline: 0; } .jewel.button.emphasized[disabled] { - background-color: #CCCCCC; - color: #888888; + border: 1px solid #c6c6c6; + background: #F9F9F9; + box-shadow: none; cursor: unset; } -/** - * Jewel TextButton - */ -.jewel.textbutton, .jewel.textbutton:hover { - /* TextField */ +.jewel.label { font-family: "Lato", sans-serif; - font-style: bold; - font-size: 0.75rem; - text-transform: uppercase; - text-decoration: none; -} -.jewel.textbutton [disabled] { - text-shadow: unset; + font-size: 14px; } .jewel.textbutton { - background-color: rgba(0, 0, 0, 0.3); - transition-duration: 0.4s; - color: rgba(0, 0, 0, 0.4); + cursor: pointer; + display: inline-block; + margin: 0; + padding: 10px 16px; + min-width: 74px; + min-height: 34px; + /* Background: */ + border-radius: 3px; + border: 1px solid #b3b3b3; + background: linear-gradient(#e6e6e6, #cccccc); + box-shadow: inset 0 1px 0 white; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: bold; + color: #808080; + text-transform: uppercase; + text-decoration: none; } .jewel.textbutton:hover { - background-color: rgba(15, 15, 15, 0.3); + border: 1px solid #a6a6a6; + background: linear-gradient(#d9d9d9, silver); } .jewel.textbutton:active { - background-color: rgba(0, 0, 0, 0.3); + border: 1px solid #8d8d8d; + background: linear-gradient(silver, #a6a6a6); + box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75); } .jewel.textbutton:focus { outline: 0; } .jewel.textbutton[disabled] { - background-color: #CCCCCC; - color: #888888; + border: 1px solid #c6c6c6; + background: #F9F9F9; + color: #b9b9b9; + box-shadow: none; cursor: unset; + font-weight: normal; + text-shadow: unset; } .jewel.textbutton.primary { - background-color: #dedede; - transition-duration: 0.4s; - color: #000000; + cursor: pointer; + display: inline-block; + margin: 0; + padding: 10px 16px; + min-width: 74px; + min-height: 34px; + /* Background: */ + border-radius: 3px; + border: 1px solid #0f88d1; + background: linear-gradient(#54b7f3, #24a3ef); + box-shadow: inset 0 1px 0 #9bd5f8; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: bold; + color: #FFFFFF; + text-transform: uppercase; + text-decoration: none; + shadow: 0 1px 0 #d9d9d9; } .jewel.textbutton.primary:hover { - background-color: #ededed; + border: 1px solid #0d79ba; + background: linear-gradient(#3CADF1, #1198e9); } .jewel.textbutton.primary:active { - background-color: #cfcfcf; + border: 1px solid #0a5a8a; + background: linear-gradient(#1198e9, #0d79ba); + box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75); } .jewel.textbutton.primary:focus { outline: 0; } .jewel.textbutton.primary[disabled] { - background-color: #CCCCCC; - color: #888888; + border: 1px solid #c6c6c6; + background: #F9F9F9; + color: #b9b9b9; + box-shadow: none; cursor: unset; + font-weight: normal; + text-shadow: unset; } .jewel.textbutton.secondary { - background-color: #011833; - transition-duration: 0.4s; - color: #000000; + cursor: pointer; + display: inline-block; + margin: 0; + padding: 10px 16px; + min-width: 74px; + min-height: 34px; + /* Background: */ + border-radius: 3px; + border: 1px solid #be390e; + background: linear-gradient(#f16c42, #ed4812); + box-shadow: inset 0 1px 0 #f6a389; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: bold; + color: #FFFFFF; + text-transform: uppercase; + text-decoration: none; + shadow: 0 1px 0 #d9d9d9; } .jewel.textbutton.secondary:hover { - background-color: #022651; + border: 1px solid #a6320d; + background: linear-gradient(#EF5A2A, #d64010); } .jewel.textbutton.secondary:active { - background-color: #000a15; + border: 1px solid #772409; + background: linear-gradient(#d64010, #a6320d); + box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75); } .jewel.textbutton.secondary:focus { outline: 0; } .jewel.textbutton.secondary[disabled] { - background-color: #CCCCCC; - color: #888888; + border: 1px solid #c6c6c6; + background: #F9F9F9; + color: #b9b9b9; + box-shadow: none; cursor: unset; + font-weight: normal; + text-shadow: unset; } .jewel.textbutton.emphasized { - background-color: #1FD348; - transition-duration: 0.4s; - color: #000000; + cursor: pointer; + display: inline-block; + margin: 0; + padding: 10px 16px; + min-width: 74px; + min-height: 34px; + /* Background: */ + border-radius: 3px; + border: 1px solid #277b32; + background: linear-gradient(#45c354, #34a241); + box-shadow: inset 0 1px 0 #7fd68a; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: bold; + color: #FFFFFF; + text-transform: uppercase; + text-decoration: none; + shadow: 0 1px 0 #d9d9d9; } .jewel.textbutton.emphasized:hover { - background-color: #30e158; + border: 1px solid #21682a; + background: linear-gradient(#3AB549, #2e8e39); } .jewel.textbutton.emphasized:active { - background-color: #1bb83f; + border: 1px solid #15411a; + background: linear-gradient(#2e8e39, #21682a); + box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75); } .jewel.textbutton.emphasized:focus { outline: 0; } .jewel.textbutton.emphasized[disabled] { - background-color: #CCCCCC; - color: #888888; + border: 1px solid #c6c6c6; + background: #F9F9F9; + color: #b9b9b9; + box-shadow: none; cursor: unset; + font-weight: normal; + text-shadow: unset; } -.jewel.label { - font-family: "Lato", sans-serif; - font-size: 0.75rem; -} - -/** - * Jewel TextField - */ -TextField { +.jewel.textfield { position: relative; display: inline-block; box-sizing: border-box; @@ -234,7 +336,7 @@ TextField { margin: 0; } -.vTextField--input { +.jewel.textfield > input { font-size: 16px; font-family: "Lato", sans-serif; border: none; @@ -250,7 +352,7 @@ TextField { outline: none; } -.vTextField--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 index 1b331d7..a4cfa7c 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass @@ -16,11 +16,29 @@ // limitations under the License. // //////////////////////////////////////////////////////////////////////////////// -// Color Themes -$default-color: rgba(0,0,0,.3) -$primary-color: #dedede -$secondary-color: #011833 -$emphasized-color: #1FD348 -$default-font-color: rgba(0, 0, 0, .4) -$font-color: #000000 \ No newline at end of file +// 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 + +// Common Colors +$font-color: #FFFFFF +$default-color: #d9d9d9 +$default-font-color: #808080 +$disabled-color: #F9F9F9 + +// Var Colors +$default-color: $default-color +$primary-color: $blue +$secondary-color: $topaz +$emphasized-color: $green diff --git a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass index f4e7302..22b1b05 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass @@ -17,24 +17,7 @@ // //////////////////////////////////////////////////////////////////////////////// -=button-theme($button-color, $text-color) - //border-color: darken($button-color, 20%) - background-color: $button-color - transition: - duration: 0.4s - color: $text-color - &:hover - background-color: lighten($button-color, 6%) - //box-shadow: 0 .125em $off-wht, inset 0 .063em $off-wht, inset 0 -.188em lighten($btn-color, 2%) - &:active - background-color: darken($button-color, 6%) - //box-shadow: 0 .063em $off-wht, inset 0 0 1.094em darken($btn-color, 40%), inset 0 .063em darken($btn-color, 20%),inset 0 -0.188em darken($btn-color, 20%) - &:focus - outline: 0 - &[disabled] - background-color: $disabled-color - color: $font-disabled-color - cursor: unset + //=trans($val...) // -webkit-transition: $val diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass index 3a6b64b..9a5fef9 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass @@ -18,14 +18,12 @@ //////////////////////////////////////////////////////////////////////////////// $font-stack: 'Lato', sans-serif -$font-size: 0.75rem - -// Common Colors -$white: rgba(white,.9) -$disabled-color: #CCCCCC -$font-disabled-color: #888888 +$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 diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass index f8c5952..fc76a5a 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass @@ -17,34 +17,46 @@ // //////////////////////////////////////////////////////////////////////////////// -%button-def +=button-theme($button-color) cursor: pointer - display: inline-block - margin: 0 //1rem - padding: 10px 16px //.938em 1.875em + margin: $button-margin //1rem + padding: $button-padding //.938em 1.875em min-width: $button-min-width - min-height: 34px - + min-height: $button-min-height /* Background: */ - 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) - -.jewel.button, .jewel.button:hover - @extend %button-def + border: 1px solid darken($button-color, 15%)// .094em solid + background: linear-gradient(lighten($button-color, 5%), darken($button-color, 5%)) + box-shadow: inset 0 1px 0 lighten($button-color, 20%) + //transition: + // duration: 0.4s + &:hover + border: 1px solid darken($button-color, 20%)// .094em solid + background: linear-gradient($button-color, darken($button-color, 10%)) + &:active + border: 1px solid darken($button-color, 30%)// .094em solid + background: linear-gradient(darken($button-color, 10%), darken($button-color, 20%)) + box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75) + &:focus + outline: 0 + &[disabled] + border: 1px solid darken($disabled-color, 20%)// .094em solid + background: $disabled-color + box-shadow: none + cursor: unset .jewel.button - +button-theme($default-color, $default-font-color) + +button-theme($default-color) .jewel.button.primary - +button-theme($primary-color, $font-color) + +button-theme($primary-color) .jewel.button.secondary - +button-theme($secondary-color, $font-color) + +button-theme($secondary-color) .jewel.button.emphasized - +button-theme($emphasized-color, $font-color) + +button-theme($emphasized-color) //SVGs diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass index eb82343..d081579 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass @@ -17,45 +17,59 @@ // //////////////////////////////////////////////////////////////////////////////// -%textbutton-def - @extend %button-def - /* TextField */ + +=textbutton-theme($button-color, $text-color) + cursor: pointer + display: inline-block + margin: $button-margin //1rem + padding: $button-padding //.938em 1.875em + min-width: $button-min-width + min-height: $button-min-height + /* Background: */ + border-radius: 3px //.625em + border: 1px solid darken($button-color, 15%)// .094em solid + background: linear-gradient(lighten($button-color, 5%), darken($button-color, 5%)) + box-shadow: inset 0 1px 0 lighten($button-color, 20%) + //transition: + // duration: 0.4s font: family: $font-stack - style: bold - size: $font-size - //+trans(0.2s ease-in-out) + size: $font-size//+trans(0.2s ease-in-out) + weight: bold + color: $text-color text: transform: uppercase decoration: none - //shadow: 0 -1px 0 rgba(0,0,0,0.70) //0 .063em - [disabled] + @if $text-color == $font-color + shadow: 0 1px 0 darken($text-color, 15%) //0 .063em + &:hover + border: 1px solid darken($button-color, 20%)// .094em solid + background: linear-gradient($button-color, darken($button-color, 10%)) + &:active + border: 1px solid darken($button-color, 30%)// .094em solid + background: linear-gradient(darken($button-color, 10%), darken($button-color, 20%)) + box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75) + &:focus + outline: 0 + &[disabled] + border: 1px solid darken($disabled-color, 20%)// .094em solid + background: $disabled-color + color: darken($disabled-color, 25%) + box-shadow: none + cursor: unset + font: + weight: normal text: shadow: unset -.jewel.textbutton, .jewel.textbutton:hover - @extend %textbutton-def - .jewel.textbutton - +button-theme($default-color, $default-font-color) + +textbutton-theme($default-color, $default-font-color) .jewel.textbutton.primary - +button-theme($primary-color, $font-color) + +textbutton-theme($primary-color, $font-color) .jewel.textbutton.secondary - +button-theme($secondary-color, $font-color) + +textbutton-theme($secondary-color, $font-color) .jewel.textbutton.emphasized - +button-theme($emphasized-color, $font-color) - -// /* TextField: */ -// font-family: $font-stack -// font-size: 14px -// font-weight: bold -// color: $font-normal-color -// text-shadow: 0 1px 0 #555 - -// padding: 10px 0px -// display: inline-block -// min-width: 80px - + +textbutton-theme($emphasized-color, $font-color) diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass index 84b696c..952e7c5 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass @@ -17,10 +17,7 @@ // //////////////////////////////////////////////////////////////////////////////// -/** - * Jewel TextField - */ -TextField +.jewel.textfield position: relative display: inline-block box-sizing: border-box @@ -28,7 +25,7 @@ TextField max-width: 100% margin: 0 -.vTextField--input +.jewel.textfield > input font-size: 16px font-family: 'Lato', sans-serif @@ -44,7 +41,7 @@ TextField color: inherit outline: none -.vTextField--label +.jewel.textfield > label bottom: 0 color: #ff0000 font-size: 13px -- To stop receiving notification emails like this one, please contact [email protected].
