From dfc4b417c376ebdce0c3d21026fd181e60ac0fd5 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 13 Oct 2021 17:16:03 +0200 Subject: [PATCH] Render box-shadow border on top of `Card`s content --- packages/components/src/card/styles.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/packages/components/src/card/styles.js b/packages/components/src/card/styles.js index 70280ebc7266c8..c8ce8f32b21f5b 100644 --- a/packages/components/src/card/styles.js +++ b/packages/components/src/card/styles.js @@ -9,8 +9,20 @@ import { css } from '@emotion/react'; import { COLORS, CONFIG } from '../utils'; export const Card = css` - box-shadow: inset 0 0 0 1px ${ CONFIG.surfaceBorderColor }; outline: none; + + &::before { + content: ''; + + box-shadow: inset 0 0 0 1px ${ CONFIG.surfaceBorderColor }; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + + pointer-events: none; + } `; export const Header = css` @@ -77,7 +89,9 @@ export const borderColor = css` `; export const boxShadowless = css` - box-shadow: none; + &::before { + content: none; + } `; export const borderless = css`