Website/public/assets/scss/components/_scroll-top.scss
2025-04-08 14:37:17 +07:00

52 lines
1.1 KiB
SCSS

@use '../utils' as *;
/*=============================
00. Scroll Top
===============================*/
.scroll__top {
@include square-box(40px);
position: fixed;
bottom: -10%;
right: 50px;
font-size: 16px;
border-radius: 4px;
z-index: 5;
color: var(--tg-color-white-default);
text-align: center;
cursor: pointer;
background: var(--tg-theme-primary);
transition: 1s ease;
border: none;
@media #{$lg} {
right: 25px;
bottom: 25px;
}
@media #{$md} {
right: 30px;
}
@media #{$xs} {
right: 15px;
@include square-box(30px);
}
&.open {
bottom: 30px;
@media #{$xs} {
bottom: 15px;
}
}
&::after {
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 1;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%);
}
&:hover {
background: var(--tg-theme-secondary);
color: var(--tg-color-white-default);
}
}