[royale-asjs] branch develop updated: jewel-card: improve flat/noflat styles

[carlosrovira]

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


The following commit(s) were added to refs/heads/develop by this push:
     new ef339cf  jewel-card: improve flat/noflat styles
ef339cf is described below

commit ef339cf6c824e57a239383c02d264b1e6e71acbf
Author: Carlos Rovira <carlosrov...@apache.org>
AuthorDate: Thu Feb 20 17:06:59 2020 +0100

    jewel-card: improve flat/noflat styles
---
 .../themes/JewelTheme/src/main/resources/defaults.css     |  4 ++--
 .../src/main/sass/components-primary/_card.sass           | 15 ++++++++++++---
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css 
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 7bc7813..0bb820d 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -245,14 +245,14 @@ hr {
   padding: 20px;
 }
 .jewel.card .cardHeader {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid #d2dadf;
   padding: 20px;
 }
 .jewel.card .cardPrimaryContent {
   padding: 20px;
 }
 .jewel.card .cardActions {
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-top: 1px solid #d2dadf;
   padding: 20px;
 }
 
diff --git 
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass 
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass
index 3263b65..c55b164 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass
@@ -30,21 +30,30 @@
         background: lighten($background-color, 10%)
     @else
         background: lighten($background-color, 10%)
-    border: 1px solid desaturate(lighten($primary-color, 26%), 70%)
+    @if $flat
+        border: 1px solid transparent
+    @else
+        border: 1px solid desaturate(lighten($primary-color, 26%), 70%)
     border-radius: $border-radius
 
     &.simple
         padding: 20px
 
     .cardHeader
-        border-bottom: 1px solid rgba(0,0,0,.1)
+        @if $flat
+            border-bottom: 1px solid transparent
+        @else
+            border-bottom: 1px solid desaturate(lighten($primary-color, 26%), 
70%)
         padding: 20px
 
     .cardPrimaryContent
         padding: 20px
 
     .cardActions
-        border-top: 1px solid rgba(0,0,0,.1)
+        @if $flat
+            border-top: 1px solid transparent
+        @else
+            border-top: 1px solid desaturate(lighten($primary-color, 26%), 70%)
         padding: 20px
 
 j|Card