public/components/ButtonToTop.vue

35 lines
622 B
Vue
Raw Normal View History

2022-08-09 19:13:22 -04:00
<template>
2022-08-10 11:40:02 -04:00
<a href="#" class="go-top" />
2022-08-09 19:13:22 -04:00
</template>
<style scoped>
.go-top {
--offset: 20rem;
position: sticky;
bottom: 1rem;
left: 1rem;
2022-08-10 11:40:02 -04:00
margin-right: 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;
2022-08-10 11:11:40 -04:00
z-index: 2;
2022-08-09 19:13:22 -04:00
}
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>