diff options
Diffstat (limited to '_sass/misc')
-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; + } +} |