diff options
| author | Armand Philippot <git@armandphilippot.com> | 2023-10-04 18:17:35 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2023-11-11 18:14:41 +0100 |
| commit | be61ffb6fe500cdbfa83b9cd131b8e72779f23c2 (patch) | |
| tree | 9ac57f4fac173e13c0a461d75a206819be4f3c6f /src/components/molecules/buttons/back-to-top.module.scss | |
| parent | a724b4b38bacc631410627395b0d1190a0e8de0d (diff) | |
refactor(components): rewrite BackToTop component
* replace `link` prop with `anchor` prop
* add a `label` prop to let consumer handle the accessible name
Diffstat (limited to 'src/components/molecules/buttons/back-to-top.module.scss')
| -rw-r--r-- | src/components/molecules/buttons/back-to-top.module.scss | 50 |
1 files changed, 0 insertions, 50 deletions
diff --git a/src/components/molecules/buttons/back-to-top.module.scss b/src/components/molecules/buttons/back-to-top.module.scss deleted file mode 100644 index ba746df..0000000 --- a/src/components/molecules/buttons/back-to-top.module.scss +++ /dev/null @@ -1,50 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; - -.wrapper { - .link { - width: clamp(#{fun.convert-px(48)}, 8vw, #{fun.convert-px(55)}); - height: clamp(#{fun.convert-px(48)}, 8vw, #{fun.convert-px(55)}); - padding: 0; - - :global { - .arrow-head { - transform: translateX(-9%) 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.45s ease-in-out 0s, - opacity 0.1s linear 0.2s; - } - } - - &:hover, - &:focus { - :global { - .arrow-head { - transform: translateY(0) scale(1); - } - - .arrow-bar { - opacity: 1; - transform: translateY(0) scaleY(1); - } - } - - svg { - :global { - animation: pulse 1.2s ease-in-out 0.6s infinite; - } - } - } - - &:active { - svg { - animation-play-state: paused; - } - } - } -} |
