blob: 1d156f891b9ca53348ce133a872e5c5e6f2c9945 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
@use "@styles/abstracts/functions" as fun;
@use "@styles/abstracts/mixins" as mix;
.wrapper {
display: flex;
flex-flow: column wrap;
gap: var(--spacing-xs);
place-items: center;
place-content: center;
padding: var(--spacing-md) 0 calc(var(--toolbar-size) + var(--spacing-md));
border-top: fun.convert-px(3) solid var(--color-border-light);
@include mix.media("screen") {
@include mix.dimensions("sm") {
flex-flow: row wrap;
font-size: var(--font-size-sm);
}
}
}
.back-to-top {
--button-size: #{fun.convert-px(55)};
--icon-size: #{fun.convert-px(32)};
position: fixed;
bottom: calc(var(--toolbar-size) + var(--spacing-md));
right: var(--spacing-md);
transition: all 0.4s ease-in 0s;
&--hidden {
opacity: 0;
transform: translateY(calc(var(--button-size) + var(--spacing-md)));
}
&--visible {
opacity: 1;
transform: translateY(0);
}
a {
display: flex;
place-content: center;
padding: 0;
width: var(--button-size);
height: var(--button-size);
svg {
height: 85%;
}
:global {
.arrow-head {
transform: translateY(30%);
transition: all 0.45s ease-in-out 0s;
}
.arrow-bar {
opacity: 0;
transform: translateY(30%) translateX(25%) scale(0.5);
transition: transform 0.45s ease-in-out 0s, opacity 0.3s ease-in-out 0s;
}
}
&:hover,
&:focus {
:global {
.arrow-head {
transform: translateY(0);
}
.arrow-bar {
opacity: 1;
transform: translateY(0) translateX(0) scale(1);
}
}
svg {
:global {
animation: pulse 1.2s ease-in-out 0.6s infinite;
}
}
}
&:active {
svg {
animation-play-state: paused;
}
}
}
}
|
