aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/molecules
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/molecules')
-rw-r--r--src/components/molecules/buttons/back-to-top.module.scss10
-rw-r--r--src/components/molecules/buttons/back-to-top.tsx7
2 files changed, 12 insertions, 5 deletions
diff --git a/src/components/molecules/buttons/back-to-top.module.scss b/src/components/molecules/buttons/back-to-top.module.scss
index 1abf1f6..9721bff 100644
--- a/src/components/molecules/buttons/back-to-top.module.scss
+++ b/src/components/molecules/buttons/back-to-top.module.scss
@@ -1,21 +1,24 @@
@use "@styles/abstracts/functions" as fun;
.wrapper {
- a {
+ .link {
+ width: clamp(#{fun.convert-px(44)}, 6vw, #{fun.convert-px(55)});
+ height: clamp(#{fun.convert-px(44)}, 6vw, #{fun.convert-px(55)});
+
svg {
width: 100%;
}
:global {
.arrow-head {
- transform: translateY(30%) scale(1.1);
+ transform: translateY(30%) scale(1.2);
transition: all 0.45s ease-in-out 0s;
}
.arrow-bar {
opacity: 0;
transform: translateY(30%) scaleY(0);
- transition: transform 0.4s ease-in-out 0s, opacity 0.1s linear 0.4s;
+ transition: transform 0.45s ease-in-out 0s, opacity 0.1s linear 0.2s;
}
}
@@ -29,7 +32,6 @@
.arrow-bar {
opacity: 1;
transform: translateY(0) scaleY(1);
- transition: transform 0.45s ease-in-out 0s;
}
}
diff --git a/src/components/molecules/buttons/back-to-top.tsx b/src/components/molecules/buttons/back-to-top.tsx
index 56c5247..8a52231 100644
--- a/src/components/molecules/buttons/back-to-top.tsx
+++ b/src/components/molecules/buttons/back-to-top.tsx
@@ -30,7 +30,12 @@ const BackToTop: VFC<BackToTopProps> = ({ className = '', target }) => {
return (
<div className={`${styles.wrapper} ${className}`}>
- <ButtonLink shape="square" target={`#${target}`} aria-label={linkName}>
+ <ButtonLink
+ shape="square"
+ target={`#${target}`}
+ aria-label={linkName}
+ className={styles.link}
+ >
<Arrow direction="top" />
</ButtonLink>
</div>