fix(reveal card): card shadow being cut off (#1656)

akveo · Jul 1, 2019 · 6001564 · 6001564
1 parent ee2f235
commit 6001564
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 24 deletions.
diff --git a/e2e/reveal-card.e2e-spec.ts b/e2e/reveal-card.e2e-spec.ts
@@ -32,11 +32,10 @@ describe('nb-reveal-card', () => {
         protractor.promise.all([
           backCardContainer.getCssValue('top'),
           revealCard.getCssValue('height'),
-          revealCard.getCssValue('margin-bottom'),
-        ]).then(([ backCardTop, cardHeight, cardMargin ]) => {
+        ]).then(([ backCardTop, cardHeight ]) => {
           expect(revealCard.getAttribute('class')).not.toContain('revealed', `card shouldn't has 'revealed' class`);
           expect(frontCard.isDisplayed()).toBe(true, 'front card should be visible');
-          expect(toInt(backCardTop)).toEqual(toInt(cardHeight) - toInt(cardMargin), 'back card should be hidden');
+          expect(toInt(backCardTop)).toEqual(toInt(cardHeight), 'back card should be hidden');
         });
       }
 

diff --git a/src/framework/theme/components/card/reveal-card/_reveal-card.component.theme.scss b/src/framework/theme/components/card/reveal-card/_reveal-card.component.theme.scss
@@ -1,12 +1,16 @@
 @mixin nd-reveal-card-theme {
+  nb-reveal-card {
+    box-shadow: nb-theme(card-shadow);
+    margin-bottom: nb-theme(card-margin-bottom);
+  }
+
   .second-card-container {
-    height: calc(100% - #{nb-theme(card-margin-bottom)});
+    height: 100%;
     border-radius: nb-theme(card-border-radius);
   }
 
   .reveal-button {
     line-height: nb-theme(card-text-line-height);
     padding: nb-theme(card-padding);
-    margin-bottom: nb-theme(card-margin-bottom);
   }
 }
diff --git a/src/framework/theme/components/card/reveal-card/reveal-card.component.scss b/src/framework/theme/components/card/reveal-card/reveal-card.component.scss
@@ -2,24 +2,6 @@
   display: block;
   position: relative;
   overflow: hidden;
-  &.revealed {
-    .second-card-container {
-      top: 0;
-      transition: none;
-
-      ::ng-deep nb-card-back {
-        top: 0;
-      }
-    }
-    .reveal-button {
-      transform: none;
-    }
-  }
-
-  ::ng-deep nb-card-front {
-    display: block;
-    height: 100%;
-  }
 
   .second-card-container {
     position: absolute;
@@ -28,8 +10,21 @@
     left: 0;
     overflow: hidden;
     transition: top 0s 0.5s;
+  }
 
-    ::ng-deep nb-card-back {
+  ::ng-deep {
+    nb-card-front nb-card,
+    nb-card-back nb-card {
+      box-shadow: none;
+      margin: 0;
+    }
+
+    nb-card-front {
+      display: block;
+      height: 100%;
+    }
+
+    nb-card-back {
       position: absolute;
       left: 0;
       top: 100%;
@@ -47,3 +42,18 @@
     transition: transform 0.3s;
   }
 }
+
+:host(.revealed) {
+  .second-card-container {
+    top: 0;
+    transition: none;
+
+    ::ng-deep nb-card-back {
+      top: 0;
+    }
+  }
+
+  .reveal-button {
+    transform: none;
+  }
+}