Amadeus
/
blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: back-to-top button breaks layout 

https://github.com/saicaca/hexo-theme-vivia/issues/42
This commit is contained in:
saicaca 2023-11-23 23:24:05 +08:00
parent 4831f9f67f
commit 8c6c7c9364
1 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/control/BackToTop.astro
View File

@ -5,21 +5,19 @@ import Button from "./Button.astro";
<!-- There can't be a filter on parent element, or it will break `fixed` --> <!-- There can't be a filter on parent element, or it will break `fixed` -->
<div class="back-to-top-wrapper hidden lg:block" transition:persist> <div class="back-to-top-wrapper hidden lg:block" transition:persist>
<div id="back-to-top-btn" class="back-to-top-btn hide flex items-center rounded-2xl overflow-hidden transition active:scale-90" onclick="topFunction()"> <div id="back-to-top-btn" class="back-to-top-btn hide flex items-center rounded-2xl overflow-hidden transition" onclick="topFunction()">
<Button name="Back to Top" card height="60px" width="60px"> <Button name="Back to Top" card height="60px" width="60px">
<Icon name="material-symbols:keyboard-arrow-up-rounded" class="mx-auto"></Icon> <Icon name="material-symbols:keyboard-arrow-up-rounded" class="mx-auto"></Icon>
</Button> </Button>
</div> </div>
</div> </div>
<style lang="stylus"> <style lang="stylus">
.back-to-top-wrapper .back-to-top-wrapper
width: 60px width: 60px
height: 60px height: 60px
position: absolute position: absolute
right: -84px right: 0
top: 0 top: 0
.back-to-top-btn .back-to-top-btn
@ -31,12 +29,15 @@ import Button from "./Button.astro";
bottom: 240px bottom: 240px
opacity: 1 opacity: 1
cursor: pointer cursor: pointer
transform: translateX(80px)
i i
font-size: 28px font-size: 28px
&.hide &.hide
transform: scale(0.9) transform: translateX(80px) scale(0.9)
opacity: 0 opacity: 0
pointer-events: none pointer-events: none
&:active
transform: translateX(80px) scale(0.9)
</style> </style>