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
The following commit(s) were added to refs/heads/feature/jewel-ui-set by this
push:
new f855a1d disabled and light-dark color update
f855a1d is described below
commit f855a1dab2ed4fcc281ee4df84b3d907302208a5
Author: Carlos Rovira <carlosrov...@apache.org>
AuthorDate: Tue Apr 3 17:25:59 2018 +0200
disabled and light-dark color update
---
.../src/main/resources/jewel-example-styles.css | 5 +-
.../src/main/royale/ButtonPlayGround.mxml | 9 +-
.../JewelBlueTheme/src/main/resources/defaults.css | 125 ++++---------------
.../JewelBlueTheme/src/main/sass/_variables.sass | 21 +++-
.../src/main/sass/components/_alert.sass | 1 -
.../src/main/sass/components/_button.sass | 4 +-
.../src/main/sass/components/_controlbar.sass | 2 -
.../src/main/sass/components/_label.sass | 9 +-
.../src/main/sass/components/_slider.sass | 33 -----
.../src/main/sass/components/_textbutton.sass | 5 +-
.../src/main/sass/components/_textfield.sass | 79 ------------
.../src/main/sass/components/_titlebar.sass | 2 -
.../JewelTheme/src/main/resources/defaults.css | 138 +++++++++++----------
.../themes/JewelTheme/src/main/sass/_global.sass | 13 ++
.../JewelTheme/src/main/sass/_variables.sass | 19 ++-
.../src/main/sass/components/_alert.sass | 6 +-
.../src/main/sass/components/_button.sass | 4 +-
.../src/main/sass/components/_checkbox.sass | 6 +-
.../src/main/sass/components/_radiobutton.sass | 6 +-
.../src/main/sass/components/_textbutton.sass | 4 +-
.../src/main/sass/components/_textfield.sass | 7 +-
21 files changed, 176 insertions(+), 322 deletions(-)
diff --git
a/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
b/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
index 397f472..02b57dc 100644
--- a/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
+++ b/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
@@ -23,14 +23,13 @@
.Application
{
- background: #fff;
padding: 10px;
margin: 10px;
}
-.container {
+/* .container {
background: #efefef;
border-radius: 10px;
padding: 20px;
-}
+} */
\ No newline at end of file
diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
index b2d396e..aa44652 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -24,13 +24,20 @@ limitations under the License.
className="container">
<js:beads>
- <j:VerticalLayoutWithPaddingAndGap gap="10"/>
+ <j:HorizontalLayoutWithPaddingAndGap gap="10"/>
</js:beads>
<html:H3 text="Jewel Button"/>
<j:Button/>
<j:Button primary="true"/>
+ <j:Button secondary="true"/>
<j:Button emphasized="true"/>
+
+ <j:Button>
+ <j:beads>
+ <j:Disabled/>
+ </j:beads>
+ </j:Button>
</js:Group>
diff --git a/frameworks/themes/JewelBlueTheme/src/main/resources/defaults.css
b/frameworks/themes/JewelBlueTheme/src/main/resources/defaults.css
index 3121d33..75082b6 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelBlueTheme/src/main/resources/defaults.css
@@ -23,71 +23,32 @@
padding: 8px;
min-width: 34px;
min-height: 34px;
- border: 1px solid #551654;
- background: linear-gradient(#a62aa4, #7e207c);
- box-shadow: inset 0 1px 0 #d24bcf;
+ border: 1px solid #be390e;
+ background: linear-gradient(#f16c42, #ed4812);
+ box-shadow: inset 0 1px 0 #f6a389;
border-radius: 3px;
}
.jewel.button.secondary:hover {
- border: 1px solid #411040;
- background: linear-gradient(#922590, #691b68);
+ border: 1px solid #a6320d;
+ background: linear-gradient(#EF5A2A, #d64010);
}
.jewel.button.secondary:active {
- border: 1px solid #180618;
- background: linear-gradient(#691b68, #411040);
+ border: 1px solid #772409;
+ background: linear-gradient(#d64010, #a6320d);
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.secondary:focus {
outline: none;
- border: 1px solid #551654;
- box-shadow: inset 0px 0px 0px 1px rgba(240, 198, 240, 0.5), inset 0 1px 0
rgba(246, 218, 245, 0.6);
+ border: 1px solid #be390e;
+ box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
}
.jewel.button.secondary[disabled] {
- border: 1px solid #c6c6c6;
- background: #F9F9F9;
+ border: 1px solid #0d0d0d;
+ background: #404040;
box-shadow: none;
cursor: unset;
}
-.jewel.label {
- font-family: "Lato", sans-serif;
- font-size: 14px;
-}
-
-.jewel.slider input {
- -webkit-appearance: none;
- width: 100%;
- height: 15px;
- border-radius: 5px;
- background: #d3d3d3;
- outline: none;
- opacity: 0.7;
- -webkit-transition: 0.2s;
- transition: opacity 0.2s;
-}
-.jewel.slider input:hover {
- opacity: 1;
-}
-.jewel.slider input:focus {
- outline: none;
-}
-.jewel.slider input::-webkit-slider-thumb {
- -webkit-appearance: none;
- appearance: none;
- width: 15px;
- height: 15px;
- border-radius: 50%;
- background: #3CADF1;
- cursor: pointer;
-}
-.jewel.slider input::-moz-range-thumb {
- width: 15px;
- height: 15px;
- border-radius: 50%;
- background: #3CADF1;
- cursor: pointer;
-}
-
.jewel.textbutton.secondary {
cursor: pointer;
display: inline-block;
@@ -95,9 +56,9 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- border: 1px solid #551654;
- background: linear-gradient(#a62aa4, #7e207c);
- box-shadow: inset 0 1px 0 #d24bcf;
+ border: 1px solid #be390e;
+ background: linear-gradient(#f16c42, #ed4812);
+ box-shadow: inset 0 1px 0 #f6a389;
border-radius: 3px;
font-family: "Lato", sans-serif;
font-size: 14px;
@@ -108,67 +69,27 @@
shadow: 0 1px 0 #d9d9d9;
}
.jewel.textbutton.secondary:hover {
- border: 1px solid #411040;
- background: linear-gradient(#922590, #691b68);
+ border: 1px solid #a6320d;
+ background: linear-gradient(#EF5A2A, #d64010);
}
.jewel.textbutton.secondary:active {
- border: 1px solid #180618;
- background: linear-gradient(#691b68, #411040);
+ border: 1px solid #772409;
+ background: linear-gradient(#d64010, #a6320d);
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.textbutton.secondary:focus {
outline: none;
- border: 1px solid #551654;
- box-shadow: inset 0px 0px 0px 1px rgba(240, 198, 240, 0.5), inset 0 1px 0
rgba(246, 218, 245, 0.6);
+ border: 1px solid #be390e;
+ box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
}
.jewel.textbutton.secondary[disabled] {
- border: 1px solid #c6c6c6;
- background: #F9F9F9;
- color: #c6c6c6;
+ border: 1px solid #0d0d0d;
+ background: #404040;
+ color: #737373;
box-shadow: none;
cursor: unset;
font-weight: normal;
text-shadow: unset;
}
-.jewel.textfield {
- position: relative;
- display: inline-flex;
-}
-.jewel.textfield input {
- margin: 0;
- padding: 0.67em 1em;
- max-width: 100%;
- flex: 1 0 auto;
- outline: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- text-align: left;
- line-height: 1.4em;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: normal;
- color: #808080;
- background: linear-gradient(white, #f3f3f3);
- border: 1px solid #b3b3b3;
- border-radius: 3px;
- transition-duration: 0.3s;
- transition-timing-function: easein;
-}
-.jewel.textfield input:focus {
- border: 1px solid #0f88d1;
-}
-.jewel.textfield input::placeholder {
- color: #a6a6a6;
-}
-.jewel.textfield input[disabled] {
- cursor: unset;
- border: 1px solid #c6c6c6;
- background: #F9F9F9;
- box-shadow: none;
- color: #c6c6c6;
-}
-.jewel.textfield input[disabled]::placeholder {
- color: #c6c6c6;
-}
-
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/JewelBlueTheme/src/main/sass/_variables.sass
b/frameworks/themes/JewelBlueTheme/src/main/sass/_variables.sass
index 5b5fa04..046d83f 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/_variables.sass
@@ -36,12 +36,12 @@ $font-theme-color: #FFFFFF
$light-color: #d9d9d9
$font-light-color: #808080
-$dark-color: #666666
+$dark-color: #595959
$font-dark-color: #FFFFFF
//Theme Style (Flat or Gradient)
$flat: false
-$dark: false
+$dark: true
$transitions-enable: false
$transition-duration: .3s
$transition-timing: easein
@@ -56,14 +56,27 @@ $default-color: $light-color
$default-color: $dark-color
$primary-color: $blue
-$secondary-color: $amethyst
+$secondary-color: $topaz
$emphasized-color: $green
$default-font-color: $font-light-color
@if $dark
$default-font-color: $font-dark-color
-$disabled-color: #F9F9F9 // maybe make it dependent of theme colors
+// DISABLED
+$disabled-color: lighten($light-color, 10%)
+@if $dark
+ $disabled-color: darken($dark-color, 10%)
+$disabled-font-color: darken($disabled-color, 20%)
+@if $dark
+ $disabled-font-color: lighten($disabled-color, 20%)
+$disabled-border-color: darken($disabled-color, 10%)
+@if $dark
+ $disabled-border-color: darken($disabled-color, 20%)
+// BACKGROUND
+$background-color: lighten($light-color, 45%)
+@if $dark
+ $background-color: darken($dark-color, 35%)
\ No newline at end of file
diff --git
a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_alert.sass
b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_alert.sass
index a4257b5..1c8d95a 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_alert.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_alert.sass
@@ -21,4 +21,3 @@
// Alert variables
-.jewel.alert
diff --git
a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_button.sass
b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_button.sass
index aba1d66..dd31d47 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_button.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_button.sass
@@ -62,7 +62,7 @@ $button-border-radius: 3px
@if $flat
background: darken($button-color, 15%)
@else
- border: 1px solid darken($button-color, 30%)// .094em
solid
+ border: 1px solid darken($button-color, 30%)// .094em
background: linear-gradient(darken($button-color, 10%),
darken($button-color, 20%))
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5)
@@ -76,7 +76,7 @@ $button-border-radius: 3px
box-shadow: inset 0px 0px 0px 1px
rgba(lighten($button-color, 50%), .5), inset 0 1px 0
rgba(lighten($button-color, 55%), .6)
&[disabled]
- border: 1px solid darken($disabled-color, 20%)// .094em solid
+ border: 1px solid $disabled-border-color// .094em
background: $disabled-color
box-shadow: none
cursor: unset
diff --git
a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_controlbar.sass
b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_controlbar.sass
index 49bc0db..5ddca20 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_controlbar.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_controlbar.sass
@@ -20,5 +20,3 @@
// Jewel ControlBar
// ControlBar variables
-
-.jewel.controlbar
\ No newline at end of file
diff --git
a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_label.sass
b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_label.sass
index 7887e00..019c818 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_label.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_label.sass
@@ -17,11 +17,4 @@
//
////////////////////////////////////////////////////////////////////////////////
-j|Label
- //IBeadView:
ClassReference("org.apache.royale.html.beads.TextFieldView")
- //IBeadView:
ClassReference("org.apache.royale.jewel.beads.views.LabelViewBead")
-
-.jewel.label
- font:
- family: $font-stack
- size: $font-size
\ No newline at end of file
+
diff --git
a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_slider.sass
b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_slider.sass
index 115df2c..019c818 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_slider.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_slider.sass
@@ -17,37 +17,4 @@
//
////////////////////////////////////////////////////////////////////////////////
-.jewel.slider
- input
- -webkit-appearance: none
- width: 100%
- height: 15px
- border-radius: 5px
- background: #d3d3d3
- outline: none
- opacity: 0.7
- -webkit-transition: .2s
- transition: opacity .2s
-
- &:hover
- opacity: 1
-
- &:focus
- outline: none
-
- &::-webkit-slider-thumb
- -webkit-appearance: none
- appearance: none
- width: 15px
- height: 15px
- border-radius: 50%
- background: $primary-color
- cursor: pointer
-
- &::-moz-range-thumb
- width: 15px
- height: 15px
- border-radius: 50%
- background: $primary-color
- cursor: pointer
diff --git
a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textbutton.sass
b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textbutton.sass
index 02edd71..24ece04 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textbutton.sass
@@ -84,9 +84,9 @@ $textbutton-min-width: 74px !default
box-shadow: inset 0px 0px 0px 1px
rgba(lighten($textbutton-color, 50%), .5), inset 0 1px 0
rgba(lighten($textbutton-color, 55%), .6)
&[disabled]
- border: 1px solid darken($disabled-color, 20%)// .094em solid
+ border: 1px solid $disabled-border-color// .094em
background: $disabled-color
- color: darken($disabled-color, 20%)
+ color: $disabled-font-color
box-shadow: none
cursor: unset
font:
@@ -94,6 +94,5 @@ $textbutton-min-width: 74px !default
text:
shadow: unset
-
.jewel.textbutton.secondary
+textbutton-theme($secondary-color, $font-theme-color)
diff --git
a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textfield.sass
b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textfield.sass
index 3e04d9a..5ac77c9 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textfield.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textfield.sass
@@ -20,82 +20,3 @@
// Jewel Textfield
// Textfield variables
-$textfield-margin: 0 !default
-$textfield-padding: .67em 1em !default
-//10px 16px
-$textfield-min-height: 34px !default
-$textfield-min-width: 74px !default
-
-$textfield-border-radius: 3px
-
-=textfield-theme($textfield-text-color)
- position: relative
- display: inline-flex
-
- input
- margin: $textfield-margin
- padding: $textfield-padding
-
- max-width: 100%
-
- flex: 1 0 auto
- outline: none
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0)
-
- text-align: left
- line-height: 1.4em
-
- font:
- family: $font-stack
- size: $font-size
- weight: normal
- color: $textfield-text-color
-
- @if $flat
- border: 0px solid
- background: $default-color
- @else
- background: linear-gradient(lighten($default-color,
15%), lighten($default-color, 10%))
- border: 1px solid darken($default-color, 15%)
- //box-shadow: none
- border-radius: $textfield-border-radius
-
- @if $transitions-enable
- transition:
- duration: $transition-duration
- timing-function: $transition-timing
-
- &:focus
- @if $flat
- background: lighten($primary-color, 25%)
- @else
- border: 1px solid darken($primary-color, 15%)
-
- //&:hover
- // padding: 5px;
- // background-color: #DFDFDF;
-
- &::placeholder
- color: lighten($textfield-text-color, 15%)
-
- &[disabled]
- cursor: unset
- border: 1px solid darken($disabled-color, 20%)
- background: $disabled-color
- box-shadow: none
- color: darken($disabled-color, 20%)
-
- &::placeholder
- color: darken($disabled-color, 20%)
-
-.jewel.textfield
- @if $dark
- +textfield-theme($font-dark-color)
- @else
- +textfield-theme($font-light-color)
-
-// .jewel.textfield.primary
-// @if $dark
-// +textfield-theme($primary-color, $font-dark-color)
-// @else
-// +textfield-theme($primary-color, $font-light-color)
diff --git
a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_titlebar.sass
b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_titlebar.sass
index 047d4d4..813c0f0 100644
--- a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_titlebar.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_titlebar.sass
@@ -20,5 +20,3 @@
// Jewel TitleBAr
// TitleBar variables
-
-.jewel.titlebar
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 28d3e5c..a0f611e 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -21,8 +21,9 @@
}
j|Application {
+ background: black;
font-family: "Lato", sans-serif;
- color: #808080;
+ color: #FFFFFF;
}
h1 {
@@ -49,6 +50,12 @@ div {
font-size: 14px;
}
+.container {
+ background: #1a1a1a;
+ border-radius: 10px;
+ padding: 20px;
+}
+
.jewel.alert {
display: block;
position: fixed;
@@ -64,12 +71,12 @@ div {
border: 0px solid;
border-radius: 3px;
box-shadow: 0px 20px 65px 0px rgba(0, 0, 0, 0.8);
- background-color: #FFFFFF;
+ background-color: black;
}
.jewel.alert .jewel.titlebar {
padding: 20px 20px 0px 20px;
height: 50px;
- color: #0c69a2;
+ color: #d9d9d9;
}
.jewel.alert .jewel.titlebar .jewel.label {
font-size: 1.9em;
@@ -85,14 +92,14 @@ div {
}
.jewel.alert .Group .jewel.label {
white-space: normal;
- color: #808080;
+ color: #FFFFFF;
font-size: 1.1em;
font-weight: normal;
}
.jewel.alert .jewel.controlbar {
- border-top: 1px solid #b3b3b3;
- background: linear-gradient(#e6e6e6, #cccccc);
- box-shadow: inset 0 1px 0 white;
+ border-top: 1px solid #333333;
+ background: linear-gradient(#666666, #4c4c4c);
+ box-shadow: inset 0 1px 0 #8c8c8c;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 3px;
@@ -135,28 +142,28 @@ j|Alert {
padding: 8px;
min-width: 34px;
min-height: 34px;
- border: 1px solid #b3b3b3;
- background: linear-gradient(#e6e6e6, #cccccc);
- box-shadow: inset 0 1px 0 white;
+ border: 1px solid #333333;
+ background: linear-gradient(#666666, #4c4c4c);
+ box-shadow: inset 0 1px 0 #8c8c8c;
border-radius: 3px;
}
.jewel.button:hover {
- border: 1px solid #a6a6a6;
- background: linear-gradient(#d9d9d9, silver);
+ border: 1px solid #262626;
+ background: linear-gradient(#595959, #404040);
}
.jewel.button:active {
- border: 1px solid #8d8d8d;
- background: linear-gradient(silver, #a6a6a6);
+ border: 1px solid #0d0d0d;
+ background: linear-gradient(#404040, #262626);
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
outline: none;
- border: 1px solid #b3b3b3;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
+ border: 1px solid #333333;
+ box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0
rgba(229, 229, 229, 0.6);
}
.jewel.button[disabled] {
- border: 1px solid #c6c6c6;
- background: #F9F9F9;
+ border: 1px solid #0d0d0d;
+ background: #404040;
box-shadow: none;
cursor: unset;
}
@@ -188,8 +195,8 @@ j|Alert {
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
}
.jewel.button.primary[disabled] {
- border: 1px solid #c6c6c6;
- background: #F9F9F9;
+ border: 1px solid #0d0d0d;
+ background: #404040;
box-shadow: none;
cursor: unset;
}
@@ -221,8 +228,8 @@ j|Alert {
box-shadow: inset 0px 0px 0px 1px rgba(243, 251, 244, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
}
.jewel.button.emphasized[disabled] {
- border: 1px solid #c6c6c6;
- background: #F9F9F9;
+ border: 1px solid #0d0d0d;
+ background: #404040;
box-shadow: none;
cursor: unset;
}
@@ -247,8 +254,8 @@ j|Alert {
width: 22px;
height: 22px;
line-height: 22px;
- background: linear-gradient(white, #f3f3f3);
- border: 1px solid #b3b3b3;
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
border-radius: 3px;
}
.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
@@ -264,16 +271,16 @@ j|Alert {
}
.jewel.checkbox input[disabled] {
cursor: unset;
- border: 1px solid #c6c6c6;
- background: #F9F9F9;
+ border: 1px solid #0d0d0d;
+ background: #404040;
}
.jewel.checkbox input[disabled] + span {
cursor: unset;
- color: #c6c6c6;
+ color: #737373;
}
.jewel.checkbox input[disabled]:checked {
- border: 1px solid #c6c6c6;
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13'
version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763,
-290)'><g transform='translate(760, 285)'><polygon fill='lightgray' points='3
13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #F9F9F9;
+ border: 1px solid #0d0d0d;
+ background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13'
version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763,
-290)'><g transform='translate(760, 285)'><polygon fill='#191919' points='3 13
9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #404040;
background-size: 90%;
background-position: center;
background-repeat: no-repeat;
@@ -314,8 +321,8 @@ j|Alert {
width: 22px;
height: 22px;
line-height: 22px;
- background: linear-gradient(white, #f3f3f3);
- border: 1px solid #b3b3b3;
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
border-radius: 50%;
}
.jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active {
@@ -331,16 +338,16 @@ j|Alert {
}
.jewel.radiobutton input[disabled] {
cursor: unset;
- border: 1px solid #c6c6c6;
- background: #F9F9F9;
+ border: 1px solid #0d0d0d;
+ background: #404040;
}
.jewel.radiobutton input[disabled] + span {
cursor: unset;
- color: #c6c6c6;
+ color: #737373;
}
.jewel.radiobutton input[disabled]:checked {
- border: 1px solid #c6c6c6;
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12'
version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616,
-350)'><g transform='translate(611, 345)'><circle fill='lightgray' cx='11'
cy='11' r='6'></circle></g></g></svg>"), #F9F9F9;
+ border: 1px solid #0d0d0d;
+ background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12'
version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616,
-350)'><g transform='translate(611, 345)'><circle fill='#191919' cx='11'
cy='11' r='6'></circle></g></g></svg>"), #404040;
background-size: 60%;
background-position: center;
background-repeat: no-repeat;
@@ -397,35 +404,36 @@ j|Alert {
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- border: 1px solid #b3b3b3;
- background: linear-gradient(#e6e6e6, #cccccc);
- box-shadow: inset 0 1px 0 white;
+ border: 1px solid #333333;
+ background: linear-gradient(#666666, #4c4c4c);
+ box-shadow: inset 0 1px 0 #8c8c8c;
border-radius: 3px;
font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: bold;
- color: #808080;
+ color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
+ shadow: 0 1px 0 #d9d9d9;
}
.jewel.textbutton:hover {
- border: 1px solid #a6a6a6;
- background: linear-gradient(#d9d9d9, silver);
+ border: 1px solid #262626;
+ background: linear-gradient(#595959, #404040);
}
.jewel.textbutton:active {
- border: 1px solid #8d8d8d;
- background: linear-gradient(silver, #a6a6a6);
+ border: 1px solid #0d0d0d;
+ background: linear-gradient(#404040, #262626);
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.textbutton:focus {
outline: none;
- border: 1px solid #b3b3b3;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
+ border: 1px solid #333333;
+ box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0
rgba(229, 229, 229, 0.6);
}
.jewel.textbutton[disabled] {
- border: 1px solid #c6c6c6;
- background: #F9F9F9;
- color: #c6c6c6;
+ border: 1px solid #0d0d0d;
+ background: #404040;
+ color: #737373;
box-shadow: none;
cursor: unset;
font-weight: normal;
@@ -466,9 +474,9 @@ j|Alert {
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
}
.jewel.textbutton.primary[disabled] {
- border: 1px solid #c6c6c6;
- background: #F9F9F9;
- color: #c6c6c6;
+ border: 1px solid #0d0d0d;
+ background: #404040;
+ color: #737373;
box-shadow: none;
cursor: unset;
font-weight: normal;
@@ -509,9 +517,9 @@ j|Alert {
box-shadow: inset 0px 0px 0px 1px rgba(243, 251, 244, 0.5), inset 0 1px 0
rgba(255, 255, 255, 0.6);
}
.jewel.textbutton.emphasized[disabled] {
- border: 1px solid #c6c6c6;
- background: #F9F9F9;
- color: #c6c6c6;
+ border: 1px solid #0d0d0d;
+ background: #404040;
+ color: #737373;
box-shadow: none;
cursor: unset;
font-weight: normal;
@@ -523,6 +531,10 @@ j|Alert {
display: inline-flex;
}
.jewel.textfield input {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -o-appearance: none;
+ appearance: none;
margin: 0;
padding: 0.67em 1em;
max-width: 100%;
@@ -534,9 +546,9 @@ j|Alert {
font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: normal;
- color: #808080;
- background: linear-gradient(white, #f3f3f3);
- border: 1px solid #b3b3b3;
+ color: #FFFFFF;
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
border-radius: 3px;
transition-duration: 0.3s;
transition-timing-function: easein;
@@ -545,17 +557,17 @@ j|Alert {
border: 1px solid #0f88d1;
}
.jewel.textfield input::placeholder {
- color: #a6a6a6;
+ color: white;
}
.jewel.textfield input[disabled] {
cursor: unset;
- border: 1px solid #c6c6c6;
- background: #F9F9F9;
+ border: 1px solid #0d0d0d;
+ background: #404040;
box-shadow: none;
- color: #c6c6c6;
+ color: #737373;
}
.jewel.textfield input[disabled]::placeholder {
- color: #c6c6c6;
+ color: #737373;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_global.sass
b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
index 9e5681e..27c03d4 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_global.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
@@ -25,6 +25,7 @@
box-sizing: border-box
j|Application
+ background: $background-color
font:
family: $font-stack
color: $default-font-color
@@ -46,3 +47,15 @@ span
div
font-size: 14px
+
+
+//temporal
+.container
+ @if $dark
+ background: lighten($background-color, 10%)
+ @else
+ background: darken($background-color, 8%)
+
+ border-radius: 10px
+ padding: 20px
+
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
index 974be28..046d83f 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
@@ -36,12 +36,12 @@ $font-theme-color: #FFFFFF
$light-color: #d9d9d9
$font-light-color: #808080
-$dark-color: #666666
+$dark-color: #595959
$font-dark-color: #FFFFFF
//Theme Style (Flat or Gradient)
$flat: false
-$dark: false
+$dark: true
$transitions-enable: false
$transition-duration: .3s
$transition-timing: easein
@@ -63,7 +63,20 @@ $default-font-color: $font-light-color
@if $dark
$default-font-color: $font-dark-color
-$disabled-color: #F9F9F9 // maybe make it dependent of theme colors
+// DISABLED
+$disabled-color: lighten($light-color, 10%)
+@if $dark
+ $disabled-color: darken($dark-color, 10%)
+$disabled-font-color: darken($disabled-color, 20%)
+@if $dark
+ $disabled-font-color: lighten($disabled-color, 20%)
+$disabled-border-color: darken($disabled-color, 10%)
+@if $dark
+ $disabled-border-color: darken($disabled-color, 20%)
+// BACKGROUND
+$background-color: lighten($light-color, 45%)
+@if $dark
+ $background-color: darken($dark-color, 35%)
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_alert.sass
b/frameworks/themes/JewelTheme/src/main/sass/components/_alert.sass
index 68f8296..b0d6da4 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_alert.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_alert.sass
@@ -29,11 +29,11 @@ $alert-border-radius: 3px
$alert-title-font-size: 1.9em
$alert-title-font-weight: bold
-$alert-title-color: darken($primary-color, 25%)
+$alert-title-color: darken($default-font-color, 15%)
$alert-label-font-size: 1.1em
$alert-label-font-weight: normal
-$alert-label-color: $font-light-color
+$alert-label-color: $default-font-color
$alert-control-bar-align: 'left'
@@ -56,7 +56,7 @@ $alert-modal-opacity: .5
border: 0px solid
border-radius: $alert-border-radius
box-shadow: 0px 20px 65px 0px rgba(0,0,0,0.8)
- background-color: #FFFFFF
+ background-color: $background-color
.jewel.titlebar
padding: $alert-padding $alert-padding 0px $alert-padding
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
index c91d9cd..4061ef9 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
@@ -62,7 +62,7 @@ $button-border-radius: 3px
@if $flat
background: darken($button-color, 15%)
@else
- border: 1px solid darken($button-color, 30%)// .094em
solid
+ border: 1px solid darken($button-color, 30%)// .094em
background: linear-gradient(darken($button-color, 10%),
darken($button-color, 20%))
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5)
@@ -76,7 +76,7 @@ $button-border-radius: 3px
box-shadow: inset 0px 0px 0px 1px
rgba(lighten($button-color, 50%), .5), inset 0 1px 0
rgba(lighten($button-color, 55%), .6)
&[disabled]
- border: 1px solid darken($disabled-color, 20%)// .094em solid
+ border: 1px solid $disabled-border-color// .094em
background: $disabled-color
box-shadow: none
cursor: unset
diff --git
a/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
b/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
index 9542f99..7ab546f 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
@@ -78,15 +78,15 @@ $checkbox-label-font-size: 16px
&[disabled]
cursor: unset
- border: 1px solid darken($disabled-color, 20%)
+ border: 1px solid $disabled-border-color// .094em
background: $disabled-color
& + span
cursor: unset
- color: darken($disabled-color, 20%)
+ color: $disabled-font-color
&:checked
- border: 1px solid darken($disabled-color, 20%)
+ border: 1px solid $disabled-border-color// .094em
background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16
13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g
transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon
fill='#{darken($disabled-color, 15%)}' points='3 13 9 18 19 7 16 5 9 13 6
10'></polygon></g></g></svg>"), $disabled-color
background-size: 90%
background-position: center
diff --git
a/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
b/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
index f746686..ce73c9a 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
@@ -74,15 +74,15 @@ $radiobutton-label-font-size: 16px
&[disabled]
cursor: unset
- border: 1px solid darken($disabled-color, 20%)
+ border: 1px solid $disabled-border-color// .094em
background: $disabled-color
& + span
cursor: unset
- color: darken($disabled-color, 20%)
+ color: $disabled-font-color
&:checked
- border: 1px solid darken($disabled-color, 20%)
+ border: 1px solid $disabled-border-color// .094em
background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12
12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g
transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle
fill='#{darken($disabled-color, 15%)}' cx='11' cy='11'
r='6'></circle></g></g></svg>"), $disabled-color
background-size: 60%
background-position: center
diff --git
a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
index 097860e..83ae8b6 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
@@ -84,9 +84,9 @@ $textbutton-min-width: 74px !default
box-shadow: inset 0px 0px 0px 1px
rgba(lighten($textbutton-color, 50%), .5), inset 0 1px 0
rgba(lighten($textbutton-color, 55%), .6)
&[disabled]
- border: 1px solid darken($disabled-color, 20%)// .094em solid
+ border: 1px solid $disabled-border-color// .094em
background: $disabled-color
- color: darken($disabled-color, 20%)
+ color: $disabled-font-color
box-shadow: none
cursor: unset
font:
diff --git
a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
index 3e04d9a..e11d3bd 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
@@ -33,6 +33,7 @@ $textfield-border-radius: 3px
display: inline-flex
input
+ +appear(none)
margin: $textfield-margin
padding: $textfield-padding
@@ -80,13 +81,13 @@ $textfield-border-radius: 3px
&[disabled]
cursor: unset
- border: 1px solid darken($disabled-color, 20%)
+ border: 1px solid $disabled-border-color// .094em
background: $disabled-color
box-shadow: none
- color: darken($disabled-color, 20%)
+ color: $disabled-font-color
&::placeholder
- color: darken($disabled-color, 20%)
+ color: $disabled-font-color
.jewel.textfield
@if $dark
--
To stop receiving notification emails like this one, please contact
carlosrov...@apache.org.
