From eb53a4caf8aa9977d5db4969665c49a16efb2f39 Mon Sep 17 00:00:00 2001
From: weru <onewesh@gmail.com>
Date: Tue, 06 Oct 2020 09:55:35 +0000
Subject: [PATCH] enable user to toggle color mode
---
assets/sass/_components.sass | 47 ++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 46 insertions(+), 1 deletions(-)
diff --git a/assets/sass/_components.sass b/assets/sass/_components.sass
index 5d55f29..b790def 100644
--- a/assets/sass/_components.sass
+++ b/assets/sass/_components.sass
@@ -211,4 +211,49 @@
grid-template-columns: 1fr 1.5rem
&_meta
- margin: 0.5rem 0
\ No newline at end of file
+ margin: 0.5rem 0
+
+.color
+ &_mode
+ height: 1.5rem
+ display: grid
+ grid-template-columns: 1fr 3rem
+ align-items: center
+ margin: 0 1.5rem
+
+ &_choice
+ outline: none
+ border: none
+ -webkit-appearance: none
+ height: 1rem
+ position: relative
+ &::before, &::after
+ content: ""
+ top: 0
+ bottom: 0
+ left: 0
+ position: absolute
+ height: 1rem
+ background: var(--theme)
+
+ &, &::before
+ width: 2.75rem
+ border-radius: 1rem
+ cursor: pointer
+ transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1)
+ box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.15)
+
+ &::before
+ box-shadow: 0 1rem 2rem rgba(0,0,0,0.17)
+ z-index: 2
+ right: 0
+ filter: brightness(0.75)
+
+ &::after
+ width: 1rem
+ border-radius: 50%
+ z-index: 3
+ transform: scale(1.67)
+ transform-origin: 50% 50%
+ transition: transform 0.5s cubic-bezier(.19,1,.22,1)
+ will-change: transform
\ No newline at end of file
--
Gitblit v1.10.0