diff options
Diffstat (limited to 'src/components/molecules/buttons/back-to-top.module.scss')
| -rw-r--r-- | src/components/molecules/buttons/back-to-top.module.scss | 49 | 
1 files changed, 49 insertions, 0 deletions
| diff --git a/src/components/molecules/buttons/back-to-top.module.scss b/src/components/molecules/buttons/back-to-top.module.scss new file mode 100644 index 0000000..1abf1f6 --- /dev/null +++ b/src/components/molecules/buttons/back-to-top.module.scss @@ -0,0 +1,49 @@ +@use "@styles/abstracts/functions" as fun; + +.wrapper { +  a { +    svg { +      width: 100%; +    } + +    :global { +      .arrow-head { +        transform: translateY(30%) scale(1.1); +        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; +      } +    } + +    &:hover, +    &:focus { +      :global { +        .arrow-head { +          transform: translateY(0) scale(1); +        } + +        .arrow-bar { +          opacity: 1; +          transform: translateY(0) scaleY(1); +          transition: transform 0.45s ease-in-out 0s; +        } +      } + +      svg { +        :global { +          animation: pulse 1.2s ease-in-out 0.6s infinite; +        } +      } +    } + +    &:active { +      svg { +        animation-play-state: paused; +      } +    } +  } +} | 
