public/components/ButtonToTop.vue

41 lines
696 B
Vue
Raw Normal View History

2022-08-09 19:13:22 -04:00
<template>
<Teleport to="body"> <a href="#" class="go-top" /></Teleport>
2022-08-09 19:13:22 -04:00
</template>
2022-08-10 11:05:20 -04:00
<style>
body {
display: grid;
grid-template-columns: 0 auto;
2022-08-10 11:05:20 -04:00
}
</style>
2022-08-09 19:13:22 -04:00
<style scoped>
.go-top {
--offset: 20rem;
position: sticky;
bottom: 1rem;
left: 1rem;
2022-08-09 19:13:22 -04:00
place-self: end;
margin-top: calc(100vh + var(--offset));
width: 2rem;
height: 2rem;
2022-08-09 19:13:22 -04:00
background: #ff8b24;
border-radius: 1rem;
box-shadow: 0 0.1rem 0.5rem 0 gray;
}
html.dark .go-top {
box-shadow: 0 0.1rem 0.5rem 0 black;
}
.go-top:before {
content: "";
position: absolute;
inset: 30%;
transform: translateY(20%) rotate(-45deg);
border-top: 0.35rem solid #fff;
border-right: 0.35rem solid #fff;
}
</style>