From 61614e57c4b87c6271fd4fef886ba6626cc8e49a Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 22 Apr 2021 20:48:06 +0200 Subject: Prevent card hover feedback loop --- assets/css/components/_card.scss | 14 ++++++++++++++ assets/css/components/_project.scss | 2 +- 2 files changed, 15 insertions(+), 1 deletion(-) (limited to 'assets/css/components') diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index 9e73dd9..7bd76f3 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss @@ -29,6 +29,16 @@ background-color: prop(--colors --bg); line-height: 1.4; + &::after { + content: ''; + display: none; + position: absolute; + top: 100%; + left: 0; + width: 100%; + height: calc(-1 * #{prop(--dims --hover-offset)}); + } + small, strong { transition: background-color .2s, color .2s; @@ -43,6 +53,10 @@ transform: translateY(#{prop(--dims --hover-offset)}); background-color: prop(--colors --hover --bg); color: prop(--colors --hover --fg); + + &::after { + display: block; + } small, strong { diff --git a/assets/css/components/_project.scss b/assets/css/components/_project.scss index 04efb1e..301827c 100644 --- a/assets/css/components/_project.scss +++ b/assets/css/components/_project.scss @@ -35,7 +35,7 @@ transform: translateY(#{prop(--card --dims --hover-offset, $global: true)}); background-color: prop(--card --colors --hover --bg, $global: true); color: prop(--card --colors --hover --fg, $global: true); - + small, strong { color: prop(--card --colors --hover --fg, $global: true); -- cgit v1.2.3-70-g09d2