From be91ee143b7b4cbd429846b5d8616b0f5fadb52a Mon Sep 17 00:00:00 2001 From: elise Date: Tue, 6 Aug 2024 19:29:39 +0200 Subject: [PATCH] add hover animation to event item --- .../components/events/eventItem.module.scss | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/web/src/components/events/eventItem.module.scss b/web/src/components/events/eventItem.module.scss index ab1c7e1..d7d6441 100644 --- a/web/src/components/events/eventItem.module.scss +++ b/web/src/components/events/eventItem.module.scss @@ -10,6 +10,12 @@ .details { font-size: var(--font-size-body); } + + .text { + &:before { + display: none; + } + } } &.medium { @@ -37,6 +43,9 @@ .text { align-self: start; + &:before { + display: none; + } } .time { @@ -54,6 +63,7 @@ &.large { align-content: start; + margin-bottom: 1rem; .image { order: 1; @@ -68,6 +78,16 @@ order: 3; } } + + &:hover { + opacity: 1; + .text { + &:before { + transform: translateX(0); + opacity: 1; + } + } + } } .image { @@ -84,6 +104,29 @@ } } +.text { + --size-icon: var(--font-size-caption); + padding-right: 2rem; + position: relative; + + &:before { + content: ""; + display: inline-block; + vertical-align: middle; + width: var(--size-icon); + height: var(--size-icon); + margin-right: var(--spacing-xs); + border-radius: var(--size-icon); + background: var(--color-goldenOrange); + position: absolute; + right: 0; + top: calc(var(--font-size-h3)/2.5); + transform: translateX(-.5rem); + opacity: 0; + transition: transform .4s ease, opacity .2s ease;; + } +} + .title { font-size: var(--font-size-h3); }