diff options
Diffstat (limited to 'src/components/molecules/buttons')
| -rw-r--r-- | src/components/molecules/buttons/back-to-top.module.scss | 10 | ||||
| -rw-r--r-- | src/components/molecules/buttons/back-to-top.tsx | 7 | 
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> | 
