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 <[email protected]> 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"
