diff options
| author | 裸奔狂甩丁丁 <30397306+StreakingMan@users.noreply.github.com> | 2022-04-05 22:51:38 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-04-05 22:51:38 +0800 |
| commit | ffb0e94ff53d3585efd7acad7560dd11a153f5e6 (patch) | |
| tree | f537f5827810c902830da5cc33255abaa47d792a /_sass/misc/click-to-top.scss | |
| parent | ad83aa4302f035ab2f76f2f239e8748fa3e9f0c7 (diff) | |
feat: click to top (#84)
Diffstat (limited to '_sass/misc/click-to-top.scss')
| -rw-r--r-- | _sass/misc/click-to-top.scss | 46 |
1 files changed, 46 insertions, 0 deletions
diff --git a/_sass/misc/click-to-top.scss b/_sass/misc/click-to-top.scss new file mode 100644 index 0000000..00f543c --- /dev/null +++ b/_sass/misc/click-to-top.scss @@ -0,0 +1,46 @@ +.click-to-top { + transition: 0.3s; + display: flex; + align-items: center; + justify-content: center; + position: fixed; + width: 64px; + height: 64px; + border-radius: 32px; + right: 60px; + bottom: 48px; + background: white; + cursor: pointer; + opacity: 0; + transform: translateY(10px); + box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15); + font-size: 24px; + user-select: none; + + @include media-query(1024px) { + width: 48px; + height: 48px; + border-radius: 24px; + right: 35px; + font-size: 20px; + } + + @include media-query($on-palm) { + width: 36px; + height: 36px; + border-radius: 18px; + right: 20px; + font-size: 16px; + } +} + +.click-to-top.show { + opacity: 1; + transform: translateY(0); +} + +html[data-theme="dark"] { + .click-to-top { + background: #34323D; + } +} |