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/09/10 11:27:11 UTC
[royale-asjs] 02/02: improve organization in jewel theme code for
snackbar. and remove round corners on bottom of the component.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 9cf2e264045b2e3534d7016d84867b5e1ebc3067
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Mon Sep 10 13:27:02 2018 +0200
improve organization in jewel theme code for snackbar. and remove round corners on bottom of the component.
---
.../projects/Jewel/src/main/resources/defaults.css | 81 +++++++++-----------
.../Jewel/src/main/sass/components/_snackbar.sass | 25 +++----
.../projects/Jewel/src/main/sass/defaults.sass | 2 +-
.../JewelTheme/src/main/resources/defaults.css | 87 +++++++++++++---------
.../themes/JewelTheme/src/main/sass/_colors.sass | 3 +-
.../main/sass/components-emphasized/_snackbar.sass | 23 ++++--
.../main/sass/components-primary/_snackbar.sass | 47 ++++++++++--
.../main/sass/components-secondary/_snackbar.sass | 23 ++++--
.../themes/JewelTheme/src/main/sass/defaults.sass | 6 +-
9 files changed, 180 insertions(+), 117 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index a536fee..db37cf9 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3140,6 +3140,42 @@ j|Slider {
iTrackView: ClassReference("org.apache.royale.jewel.beads.views.SliderTrackView");
}
}
+.jewel.snackbar {
+ bottom: 0;
+ position: fixed;
+ width: 100%;
+}
+
+.jewel.snackbar-content {
+ max-width: 568px;
+ min-width: 288px;
+ padding: 0.68em 1.12em;
+ position: relative;
+}
+
+.jewel.snackbar-message {
+ float: left;
+ margin: 10px;
+}
+
+.jewel.snackbar-action {
+ cursor: pointer;
+ float: right;
+ padding: 10px;
+}
+
+@media (max-width: 992px) {
+ .jewel.snackbar-content {
+ max-width: 100%;
+ width: 100%;
+ }
+}
+j|Snackbar {
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.SnackbarModel");
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.SnackbarController");
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.views.SnackbarView");
+}
+
.jewel.simpletable {
position: relative;
white-space: nowrap;
@@ -3457,49 +3493,4 @@ j|ApplicationMainContent {
IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel");
}
-j|Snackbar {
- IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.SnackbarModel");
- IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.SnackbarController");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.SnackbarView");
-}
-
-.jewel.snackbar {
- bottom: 0;
- position: fixed;
- width: 100%;
-}
-
-.jewel.snackbar-content {
- background: #2C3E50;
- border-radius: 3px;
- max-width: 568px;
- min-width: 288px;
- padding: 6px;
- position: relative;
-}
-
-.jewel.snackbar-message {
- color: #fff;
- float: left;
- margin: 10px;
-}
-
-.jewel.snackbar-action {
- color: #FFD740;
- cursor: pointer;
- float: right;
- padding: 10px;
-}
-.jewel.snackbar-action:hover {
- background-color: #3C4E60;
-}
-
-@media (max-width: 992px) {
- .jewel.snackbar-content {
- max-width: 100%;
- width: 100%;
- border-radius: 0px;
- }
-}
-
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_snackbar.sass b/frameworks/projects/Jewel/src/main/sass/components/_snackbar.sass
index 4b14614..efdab42 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_snackbar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_snackbar.sass
@@ -17,10 +17,10 @@
//
////////////////////////////////////////////////////////////////////////////////
-j|Snackbar
- IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.SnackbarModel")
- IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.SnackbarController")
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.SnackbarView")
+// Jewel SnackBar
+
+// SnackBar variables
+
.jewel.snackbar
bottom: 0
@@ -28,30 +28,27 @@ j|Snackbar
width: 100%
.jewel.snackbar-content
- background: #2C3E50
- border-radius: 3px
max-width: 568px
min-width: 288px
- padding: 6px
+ padding: 0.68em 1.12em
position: relative
.jewel.snackbar-message
- color: #fff
float: left
margin: 10px
.jewel.snackbar-action
- color: #FFD740
cursor: pointer
float: right
padding: 10px
- &:hover
- background-color: #3C4E60
-
-
@media (max-width: $desktop)
.jewel.snackbar-content
max-width: 100%
width: 100%
- border-radius: 0px
+
+
+j|Snackbar
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.SnackbarModel")
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.SnackbarController")
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.views.SnackbarView")
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/defaults.sass b/frameworks/projects/Jewel/src/main/sass/defaults.sass
index a3af19f..02e6df9 100644
--- a/frameworks/projects/Jewel/src/main/sass/defaults.sass
+++ b/frameworks/projects/Jewel/src/main/sass/defaults.sass
@@ -44,6 +44,7 @@
@import "components/radiobutton"
@import "components/sectioncontent"
@import "components/slider"
+@import "components/snackbar"
@import "components/table"
@import "components/text"
@import "components/textinput"
@@ -52,4 +53,3 @@
@import "components/tooltip"
@import "components/topappbar"
@import "components/applicationmaincontent"
-@import "components/snackbar"
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index b203d09..5b3a5d7 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -605,6 +605,43 @@ j|Card {
border-radius: 3px;
}
+.jewel.snackbar.primary .jewel.snackbar-content {
+ background: linear-gradient(#54b7f3, #24a3ef);
+ border: 1px solid #0f88d1;
+ box-shadow: inset 0 1px 0 #9bd5f8;
+ border-bottom: none;
+}
+.jewel.snackbar.primary .jewel.snackbar-message {
+ color: #FFFFFF;
+}
+.jewel.snackbar.primary .jewel.snackbar-action {
+ color: #E2D70B;
+}
+.jewel.snackbar.primary .jewel.snackbar-action:hover {
+ background: linear-gradient(#3CADF1, #1198e9);
+}
+
+.jewel.snackbar-content {
+ background: #2C3E50;
+ border-radius: 0.25rem 0.25rem 0px 0px;
+}
+
+.jewel.snackbar-message {
+ color: #FFFFFF;
+}
+
+.jewel.snackbar-action {
+ color: #FFD740;
+}
+.jewel.snackbar-action:hover {
+ background-color: #3C4E60;
+}
+
+@media (max-width: 992px) {
+ .jewel.snackbar-content {
+ border-radius: 0px;
+ }
+}
.jewel.simpletable {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
@@ -832,24 +869,6 @@ a:active {
padding-right: 0;
}
-.jewel.snackbar.primary .jewel.snackbar-content {
- background: linear-gradient(#54b7f3, #24a3ef);
- border: 1px solid #0f88d1;
- box-shadow: inset 0 1px 0 #9bd5f8;
- border-radius: 3px;
-}
-.jewel.snackbar.primary .jewel.snackbar-message {
- color: #FFFFFF;
-}
-.jewel.snackbar.primary .jewel.snackbar-action {
- color: #E2D70B;
-}
-.jewel.snackbar.primary .jewel.snackbar-action:hover {
- background: linear-gradient(#3CADF1, #1198e9);
- border: 1px solid #0d79ba;
- border: none;
-}
-
.jewel.button.secondary {
background: linear-gradient(#f16c42, #ed4812);
border: 1px solid #be390e;
@@ -878,23 +897,11 @@ a:active {
color: silver;
}
-a:visited {
- color: #d64010;
-}
-
-a:hover {
- color: #EF5A2A;
-}
-
-a:active {
- color: #f37f59;
-}
-
.jewel.snackbar.secondary .jewel.snackbar-content {
background: linear-gradient(#f16c42, #ed4812);
border: 1px solid #be390e;
box-shadow: inset 0 1px 0 #f6a389;
- border-radius: 3px;
+ border-bottom: none;
}
.jewel.snackbar.secondary .jewel.snackbar-message {
color: #FFFFFF;
@@ -904,8 +911,18 @@ a:active {
}
.jewel.snackbar.secondary .jewel.snackbar-action:hover {
background: linear-gradient(#EF5A2A, #d64010);
- border: 1px solid #a6320d;
- border: none;
+}
+
+a:visited {
+ color: #d64010;
+}
+
+a:hover {
+ color: #EF5A2A;
+}
+
+a:active {
+ color: #f37f59;
}
.jewel.button.emphasized {
@@ -940,7 +957,7 @@ a:active {
background: linear-gradient(#98cc50, #7eb435);
border: 1px solid #638c29;
box-shadow: inset 0 1px 0 #bbdd8b;
- border-radius: 3px;
+ border-bottom: none;
}
.jewel.snackbar.emphasized .jewel.snackbar-message {
color: #FFFFFF;
@@ -950,8 +967,6 @@ a:active {
}
.jewel.snackbar.emphasized .jewel.snackbar-action:hover {
background: linear-gradient(#8CC63C, #71a02f);
- border: 1px solid #557923;
- border: none;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_colors.sass b/frameworks/themes/JewelTheme/src/main/sass/_colors.sass
index 831737e..40ea783 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_colors.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_colors.sass
@@ -40,4 +40,5 @@ $font-light-color: #808080
$dark-color: #595959
$font-dark-color: #FFFFFF
-$error-color: #EC1C24
\ No newline at end of file
+$error-color: #EC1C24
+$action-color: #FFD740
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_snackbar.sass b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_snackbar.sass
index ea9cb3a..3065cd6 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_snackbar.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_snackbar.sass
@@ -20,11 +20,19 @@
// Jewel Snackbar
// Snackbar variables
-$snackbar-border-radius: 3px
+$snackbar-border-radius: $border-radius
.jewel.snackbar.emphasized
.jewel.snackbar-content
- +jewel-bg-border("normal", $emphasized-color, $snackbar-border-radius)
+ @if $flat
+ background: $emphasized-color
+ border: 0px solid
+ @else
+ background: linear-gradient(lighten($emphasized-color, 5%), darken($emphasized-color, 5%))
+ border: 1px solid darken($emphasized-color, 15%)
+ box-shadow: inset 0 1px 0 lighten($emphasized-color, 20%)
+ border-bottom: none
+ // +jewel-bg-border("normal", $emphasized-color, $snackbar-border-radius)
.jewel.snackbar-message
color: $font-theme-color
@@ -33,6 +41,11 @@ $snackbar-border-radius: 3px
color: $yellow
&:hover
- +jewel-bg-border("hover", $emphasized-color)
- @if $flat == false
- border: none
\ No newline at end of file
+ @if $flat
+ background: darken($emphasized-color, 5%)
+ border: none
+ @else
+ background: linear-gradient($emphasized-color, darken($emphasized-color, 10%))
+ // +jewel-bg-border("hover", $emphasized-color)
+ // @if $flat == false
+ // border: none
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_snackbar.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_snackbar.sass
index 2aaa863..2fa582b 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_snackbar.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_snackbar.sass
@@ -17,14 +17,25 @@
//
////////////////////////////////////////////////////////////////////////////////
-// Jewel Snackbar
+// Jewel SnackBar
-// Snackbar variables
-$snackbar-border-radius: 3px
+// SnackBar variables
+$snackbar-border-radius: $border-radius
+$snackbar-default-color: #2C3E50
+$snackbar-action-color: $action-color
.jewel.snackbar.primary
.jewel.snackbar-content
- +jewel-bg-border("normal", $primary-color, $snackbar-border-radius)
+ @if $flat
+ background: $primary-color
+ border: 0px solid
+ @else
+ background: linear-gradient(lighten($primary-color, 5%), darken($primary-color, 5%))
+ border: 1px solid darken($primary-color, 15%)
+ box-shadow: inset 0 1px 0 lighten($primary-color, 20%)
+ border-bottom: none
+
+ // +jewel-bg-border("normal", $primary-color, $snackbar-border-radius) --> we want only rounded corners on top corners
.jewel.snackbar-message
color: $font-theme-color
@@ -33,6 +44,28 @@ $snackbar-border-radius: 3px
color: $yellow
&:hover
- +jewel-bg-border("hover", $primary-color)
- @if $flat == false
- border: none
\ No newline at end of file
+ @if $flat
+ background: darken($primary-color, 5%)
+ border: none
+ @else
+ background: linear-gradient($primary-color, darken($primary-color, 10%))
+ // +jewel-bg-border("hover", $primary-color)
+ // @if $flat == false
+ // border: none
+
+.jewel.snackbar-content
+ background: $snackbar-default-color
+ border-radius: $snackbar-border-radius $snackbar-border-radius 0px 0px
+
+.jewel.snackbar-message
+ color: $font-theme-color
+
+.jewel.snackbar-action
+ color: $snackbar-action-color
+
+ &:hover
+ background-color: #3C4E60
+
+@media (max-width: $desktop)
+ .jewel.snackbar-content
+ border-radius: 0px
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_snackbar.sass b/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_snackbar.sass
index 07132bd..531b8be 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_snackbar.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_snackbar.sass
@@ -20,11 +20,19 @@
// Jewel Snackbar
// Snackbar variables
-$snackbar-border-radius: 3px
+$snackbar-border-radius: $border-radius
.jewel.snackbar.secondary
.jewel.snackbar-content
- +jewel-bg-border("normal", $secondary-color, $snackbar-border-radius)
+ @if $flat
+ background: $secondary-color
+ border: 0px solid
+ @else
+ background: linear-gradient(lighten($secondary-color, 5%), darken($secondary-color, 5%))
+ border: 1px solid darken($secondary-color, 15%)
+ box-shadow: inset 0 1px 0 lighten($secondary-color, 20%)
+ border-bottom: none
+ // +jewel-bg-border("normal", $secondary-color, $snackbar-border-radius)
.jewel.snackbar-message
color: $font-theme-color
@@ -33,6 +41,11 @@ $snackbar-border-radius: 3px
color: $yellow
&:hover
- +jewel-bg-border("hover", $secondary-color)
- @if $flat == false
- border: none
\ No newline at end of file
+ @if $flat
+ background: darken($secondary-color, 5%)
+ border: none
+ @else
+ background: linear-gradient($secondary-color, darken($secondary-color, 10%))
+ // +jewel-bg-border("hover", $secondary-color)
+ // @if $flat == false
+ // border: none
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
index 3df7469..7d9a262 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -45,6 +45,7 @@
@import "components-primary/numericstepper"
@import "components-primary/radiobutton"
@import "components-primary/slider"
+@import "components-primary/snackbar"
@import "components-primary/table"
@import "components-primary/text"
@import "components-primary/textinput"
@@ -52,7 +53,6 @@
@import "components-primary/togglebutton"
@import "components-primary/tooltip"
@import "components-primary/topappbar"
-@import "components-primary/snackbar"
@import "components-secondary/alert"
@import "components-secondary/button"
@@ -65,10 +65,10 @@
@import "components-secondary/list"
@import "components-secondary/radiobutton"
@import "components-secondary/slider"
+@import "components-secondary/snackbar"
@import "components-secondary/text"
@import "components-secondary/textinput"
@import "components-secondary/titlebar"
-@import "components-secondary/snackbar"
@import "components-emphasized/alert"
@import "components-emphasized/button"
@@ -81,7 +81,7 @@
@import "components-emphasized/list"
@import "components-emphasized/radiobutton"
@import "components-emphasized/slider"
+@import "components-emphasized/snackbar"
@import "components-emphasized/text"
@import "components-emphasized/textinput"
@import "components-emphasized/titlebar"
-@import "components-emphasized/snackbar"