From 5b1ecb1990463889bc736029fcbe38d0756141db Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Tue, 11 Jan 2022 02:26:35 +0100 Subject: fix(back-to-top): set translate with percentage With px/rem, on zoom the arrow head is not positionned correctly. Using percentage fix this issue. --- src/components/Footer/Footer.module.scss | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) (limited to 'src/components') diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss index 9376958..da4cd57 100644 --- a/src/components/Footer/Footer.module.scss +++ b/src/components/Footer/Footer.module.scss @@ -37,20 +37,19 @@ height: var(--button-size); svg { - padding: var(--spacing-2xs); + height: 85%; } :global { .arrow-head { - transform: translateY(#{fun.convert-px(18)}); + transform: translateY(30%); transition: all 0.45s ease-in-out 0s; } .arrow-bar { opacity: 0; - transform: translateY(#{fun.convert-px(18)}) - translateX(#{fun.convert-px(5)}) scale(0.5); - transition: transform 0.45s ease-in-out 0s, opacity 0.7s ease-in-out 0s; + transform: translateY(30%) translateX(25%) scale(0.5); + transition: transform 0.45s ease-in-out 0s, opacity 0.3s ease-in-out 0s; } } @@ -69,7 +68,7 @@ svg { :global { - animation: pulse 1.4s ease-in-out 0.45s infinite; + animation: pulse 1.2s ease-in-out 0.6s infinite; } } } -- cgit v1.2.3