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/21 14:54:14 UTC
[royale-asjs] branch feature/jewel-ui-set updated: add transition
configuration
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 e4097f5 add transition configuration
e4097f5 is described below
commit e4097f572437dc4c31aae58f058b2b92d4d4939f
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Mar 21 15:54:09 2018 +0100
add transition configuration
---
.../JewelTheme/src/main/resources/defaults.css | 119 +++++++++++++++------
.../src/main/sass/_default-color-palette.sass | 3 +
.../src/main/sass/components/_button.sass | 13 ++-
.../src/main/sass/components/_textbutton.sass | 13 ++-
4 files changed, 112 insertions(+), 36 deletions(-)
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 53d0f88..dac767d 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -34,15 +34,21 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- border: 0px solid;
- background: #d9d9d9;
+ border: 1px solid #b3b3b3;
+ 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 {
- background: #cccccc;
+ border: 1px solid #a6a6a6;
+ background: linear-gradient(#d9d9d9, silver);
}
.jewel.button:active {
- background: #b3b3b3;
+ border: 1px solid #8d8d8d;
+ background: linear-gradient(silver, #a6a6a6);
+ box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
outline: 0;
@@ -61,15 +67,21 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- border: 0px solid;
- background: #3CADF1;
+ border: 1px solid #0f88d1;
+ 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 {
- background: #24a3ef;
+ border: 1px solid #0d79ba;
+ background: linear-gradient(#3CADF1, #1198e9);
}
.jewel.button.primary:active {
- background: #0f88d1;
+ border: 1px solid #0a5a8a;
+ background: linear-gradient(#1198e9, #0d79ba);
+ box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.primary:focus {
outline: 0;
@@ -88,15 +100,21 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- border: 0px solid;
- background: #EF5A2A;
+ border: 1px solid #be390e;
+ 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 {
- background: #ed4812;
+ border: 1px solid #a6320d;
+ background: linear-gradient(#EF5A2A, #d64010);
}
.jewel.button.secondary:active {
- background: #be390e;
+ 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: 0;
@@ -115,15 +133,21 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- border: 0px solid;
- background: #3AB549;
+ border: 1px solid #277b32;
+ 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 {
- background: #34a241;
+ border: 1px solid #21682a;
+ background: linear-gradient(#3AB549, #2e8e39);
}
.jewel.button.emphasized:active {
- background: #277b32;
+ border: 1px solid #15411a;
+ background: linear-gradient(#2e8e39, #21682a);
+ box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.emphasized:focus {
outline: 0;
@@ -147,9 +171,12 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- border: 0px solid;
- background: #d9d9d9;
+ border: 1px solid #b3b3b3;
+ 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;
@@ -158,10 +185,14 @@
text-decoration: none;
}
.jewel.textbutton:hover {
- background: #cccccc;
+ border: 1px solid #a6a6a6;
+ background: linear-gradient(#d9d9d9, silver);
+ box-shadow: inser 0 0 0;
}
.jewel.textbutton:active {
- background: #b3b3b3;
+ border: 1px solid #8d8d8d;
+ background: linear-gradient(silver, #a6a6a6);
+ box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.textbutton:focus {
outline: 0;
@@ -183,21 +214,29 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- border: 0px solid;
- background: #3CADF1;
+ border: 1px solid #0f88d1;
+ 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;
color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
+ shadow: 0 1px 0 #d9d9d9;
}
.jewel.textbutton.primary:hover {
- background: #24a3ef;
+ border: 1px solid #0d79ba;
+ background: linear-gradient(#3CADF1, #1198e9);
+ box-shadow: inser 0 0 0;
}
.jewel.textbutton.primary:active {
- background: #0f88d1;
+ border: 1px solid #0a5a8a;
+ background: linear-gradient(#1198e9, #0d79ba);
+ box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.textbutton.primary:focus {
outline: 0;
@@ -219,21 +258,29 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- border: 0px solid;
- background: #EF5A2A;
+ border: 1px solid #be390e;
+ 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;
color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
+ shadow: 0 1px 0 #d9d9d9;
}
.jewel.textbutton.secondary:hover {
- background: #ed4812;
+ border: 1px solid #a6320d;
+ background: linear-gradient(#EF5A2A, #d64010);
+ box-shadow: inser 0 0 0;
}
.jewel.textbutton.secondary:active {
- background: #be390e;
+ 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: 0;
@@ -255,21 +302,29 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- border: 0px solid;
- background: #3AB549;
+ border: 1px solid #277b32;
+ 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;
color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
+ shadow: 0 1px 0 #d9d9d9;
}
.jewel.textbutton.emphasized:hover {
- background: #34a241;
+ border: 1px solid #21682a;
+ background: linear-gradient(#3AB549, #2e8e39);
+ box-shadow: inser 0 0 0;
}
.jewel.textbutton.emphasized:active {
- background: #277b32;
+ border: 1px solid #15411a;
+ background: linear-gradient(#2e8e39, #21682a);
+ box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.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 4b25446..d585185 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass
@@ -41,6 +41,9 @@ $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
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
index 99e4e04..17a4fb7 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
@@ -20,8 +20,10 @@
=button-theme($button-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
@@ -33,14 +35,19 @@
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
+
+ @if $transitions-enable
+ transition:
+ duration: $transition-duration
+ timing-function: $transition-timing
+
&:hover
@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
@if $flat
background: darken($button-color, 15%)
@@ -48,8 +55,10 @@
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]
border: 1px solid darken($disabled-color, 20%)// .094em solid
background: $disabled-color
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
index b5d2be4..663ada9 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
@@ -21,8 +21,10 @@
=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
@@ -34,8 +36,12 @@
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
+
+ @if $transitions-enable
+ transition:
+ duration: $transition-duration
+ timing-function: $transition-timing
+
font:
family: $font-stack
size: $font-size//+trans(0.2s ease-in-out)
@@ -46,6 +52,7 @@
decoration: none
@if not $flat and $text-color == $font-theme-color
shadow: 0 1px 0 darken($text-color, 15%) //0 .063em
+
&:hover
@if $flat
background: darken($button-color, 5%)
@@ -59,8 +66,10 @@
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]
border: 1px solid darken($disabled-color, 20%)// .094em solid
background: $disabled-color
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.