diff --git a/e2e/reveal-card.e2e-spec.ts b/e2e/reveal-card.e2e-spec.ts index b85d2b68f9..3137b15787 100644 --- 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 index 0f0d833df0..96ad704cf0 100644 --- 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 index 46fa78fe07..883e181696 100644 --- 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; + } +}