From ffb0e94ff53d3585efd7acad7560dd11a153f5e6 Mon Sep 17 00:00:00 2001 From: 裸奔狂甩丁丁 <30397306+StreakingMan@users.noreply.github.com> Date: Tue, 5 Apr 2022 22:51:38 +0800 Subject: feat: click to top (#84) --- _sass/misc/click-to-top.scss | 46 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 _sass/misc/click-to-top.scss (limited to '_sass/misc') 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; + } +} -- cgit v1.2.3