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/27 08:32:24 UTC
[royale-asjs] 29/49: - Add theme styles: flat / gradient - Add
light / dark styles - Add more variables to tune final themes - Adjust some
values for better looking
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 465f13206bd86870fbd0b7465bae953b1d0cf1f2
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Mar 21 10:44:41 2018 +0100
- Add theme styles: flat / gradient
- Add light / dark styles
- Add more variables to tune final themes
- Adjust some values for better looking
---
.../JewelTheme/src/main/resources/defaults.css | 107 ++++++---------------
.../src/main/sass/_default-color-palette.sass | 22 +++--
.../JewelTheme/src/main/sass/_variables.sass | 2 +
.../src/main/sass/components/_button.sass | 30 ++++--
.../src/main/sass/components/_textbutton.sass | 38 +++++---
5 files changed, 93 insertions(+), 106 deletions(-)
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 6e720c5..53d0f88 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -34,20 +34,15 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- /* Background: */
+ border: 0px solid;
+ background: #d9d9d9;
border-radius: 3px;
- border: 1px solid #b3b3b3;
- background: linear-gradient(#e6e6e6, #cccccc);
- box-shadow: inset 0 1px 0 white;
}
.jewel.button:hover {
- border: 1px solid #a6a6a6;
- background: linear-gradient(#d9d9d9, silver);
+ background: #cccccc;
}
.jewel.button:active {
- border: 1px solid #8d8d8d;
- background: linear-gradient(silver, #a6a6a6);
- box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
+ background: #b3b3b3;
}
.jewel.button:focus {
outline: 0;
@@ -66,20 +61,15 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- /* Background: */
+ border: 0px solid;
+ background: #3CADF1;
border-radius: 3px;
- border: 1px solid #0f88d1;
- background: linear-gradient(#54b7f3, #24a3ef);
- box-shadow: inset 0 1px 0 #9bd5f8;
}
.jewel.button.primary:hover {
- border: 1px solid #0d79ba;
- background: linear-gradient(#3CADF1, #1198e9);
+ background: #24a3ef;
}
.jewel.button.primary:active {
- border: 1px solid #0a5a8a;
- background: linear-gradient(#1198e9, #0d79ba);
- box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
+ background: #0f88d1;
}
.jewel.button.primary:focus {
outline: 0;
@@ -98,20 +88,15 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- /* Background: */
+ border: 0px solid;
+ background: #EF5A2A;
border-radius: 3px;
- border: 1px solid #be390e;
- background: linear-gradient(#f16c42, #ed4812);
- box-shadow: inset 0 1px 0 #f6a389;
}
.jewel.button.secondary:hover {
- border: 1px solid #a6320d;
- background: linear-gradient(#EF5A2A, #d64010);
+ background: #ed4812;
}
.jewel.button.secondary:active {
- border: 1px solid #772409;
- background: linear-gradient(#d64010, #a6320d);
- box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
+ background: #be390e;
}
.jewel.button.secondary:focus {
outline: 0;
@@ -130,20 +115,15 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- /* Background: */
+ border: 0px solid;
+ background: #3AB549;
border-radius: 3px;
- border: 1px solid #277b32;
- background: linear-gradient(#45c354, #34a241);
- box-shadow: inset 0 1px 0 #7fd68a;
}
.jewel.button.emphasized:hover {
- border: 1px solid #21682a;
- background: linear-gradient(#3AB549, #2e8e39);
+ background: #34a241;
}
.jewel.button.emphasized:active {
- border: 1px solid #15411a;
- background: linear-gradient(#2e8e39, #21682a);
- box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
+ background: #277b32;
}
.jewel.button.emphasized:focus {
outline: 0;
@@ -167,11 +147,9 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- /* Background: */
+ border: 0px solid;
+ background: #d9d9d9;
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;
@@ -180,13 +158,10 @@
text-decoration: none;
}
.jewel.textbutton:hover {
- border: 1px solid #a6a6a6;
- background: linear-gradient(#d9d9d9, silver);
+ background: #cccccc;
}
.jewel.textbutton:active {
- border: 1px solid #8d8d8d;
- background: linear-gradient(silver, #a6a6a6);
- box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
+ background: #b3b3b3;
}
.jewel.textbutton:focus {
outline: 0;
@@ -208,27 +183,21 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- /* Background: */
+ border: 0px solid;
+ background: #3CADF1;
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 {
- border: 1px solid #0d79ba;
- background: linear-gradient(#3CADF1, #1198e9);
+ background: #24a3ef;
}
.jewel.textbutton.primary:active {
- border: 1px solid #0a5a8a;
- background: linear-gradient(#1198e9, #0d79ba);
- box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
+ background: #0f88d1;
}
.jewel.textbutton.primary:focus {
outline: 0;
@@ -250,27 +219,21 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- /* Background: */
+ border: 0px solid;
+ background: #EF5A2A;
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 {
- border: 1px solid #a6320d;
- background: linear-gradient(#EF5A2A, #d64010);
+ background: #ed4812;
}
.jewel.textbutton.secondary:active {
- border: 1px solid #772409;
- background: linear-gradient(#d64010, #a6320d);
- box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
+ background: #be390e;
}
.jewel.textbutton.secondary:focus {
outline: 0;
@@ -292,27 +255,21 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- /* Background: */
+ border: 0px solid;
+ background: #3AB549;
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 {
- border: 1px solid #21682a;
- background: linear-gradient(#3AB549, #2e8e39);
+ background: #34a241;
}
.jewel.textbutton.emphasized:active {
- border: 1px solid #15411a;
- background: linear-gradient(#2e8e39, #21682a);
- box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
+ background: #277b32;
}
.jewel.textbutton.emphasized:focus {
outline: 0;
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 a4cfa7c..4b25446 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass
@@ -17,6 +17,7 @@
//
////////////////////////////////////////////////////////////////////////////////
+// CONSTANTS
// 12 Color Themes (this will go to one separate project each one)
$red: #EC1C24
$amethyst: #922590
@@ -30,15 +31,22 @@ $yellow: #FCEF0A
$sunflower: #F8B13F
$orange: #F7941D
$topaz: #EF5A2A
+$font-theme-color: #FFFFFF
-// Common Colors
-$font-color: #FFFFFF
-$default-color: #d9d9d9
-$default-font-color: #808080
-$disabled-color: #F9F9F9
+$light-color: #d9d9d9
+$font-light-color: #808080
-// Var Colors
-$default-color: $default-color
+$dark-color: #666666
+$font-dark-color: #FFFFFF
+
+//Theme Style (Flat or Gradient)
+$flat: false
+
+// 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/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
index 9a5fef9..73291fb 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
@@ -26,5 +26,7 @@ $button-padding: 10px 16px !default
$button-min-height: 34px !default
$button-min-width: 74px !default
+$button-border-radius: 3px
+
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
index fc76a5a..99e4e04 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
@@ -24,20 +24,30 @@
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%)
+
+ @if $flat
+ border: 0px solid
+ background: $button-color
+ @else
+ 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%)
+ border-radius: $button-border-radius //.625em
//transition:
// duration: 0.4s
&:hover
- border: 1px solid darken($button-color, 20%)// .094em solid
- background: linear-gradient($button-color, darken($button-color, 10%))
+ @if $flat
+ background: darken($button-color, 5%)
+ @else
+ 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)
+ @if $flat
+ background: darken($button-color, 15%)
+ @else
+ border: 1px solid darken($button-color, 30%)// .094em solid
+ background: linear-gradient(darken($button-color, 10%), darken($button-color, 20%))
+ box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5)
&:focus
outline: 0
&[disabled]
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
index d081579..b5d2be4 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
@@ -25,11 +25,15 @@
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%)
+
+ @if $flat
+ border: 0px solid
+ background: $button-color
+ @else
+ 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%)
+ border-radius: $button-border-radius //.625em
//transition:
// duration: 0.4s
font:
@@ -40,15 +44,21 @@
text:
transform: uppercase
decoration: none
- @if $text-color == $font-color
+ @if not $flat and $text-color == $font-theme-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%))
+ @if $flat
+ background: darken($button-color, 5%)
+ @else
+ 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)
+ @if $flat
+ background: darken($button-color, 15%)
+ @else
+ border: 1px solid darken($button-color, 30%)// .094em solid
+ background: linear-gradient(darken($button-color, 10%), darken($button-color, 20%))
+ box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5)
&:focus
outline: 0
&[disabled]
@@ -66,10 +76,10 @@
+textbutton-theme($default-color, $default-font-color)
.jewel.textbutton.primary
- +textbutton-theme($primary-color, $font-color)
+ +textbutton-theme($primary-color, $font-theme-color)
.jewel.textbutton.secondary
- +textbutton-theme($secondary-color, $font-color)
+ +textbutton-theme($secondary-color, $font-theme-color)
.jewel.textbutton.emphasized
- +textbutton-theme($emphasized-color, $font-color)
+ +textbutton-theme($emphasized-color, $font-theme-color)
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.