From 794cb17eade67efbac328becc6a88836f84b72d2 Mon Sep 17 00:00:00 2001
From: Ryo Hilmawan <54142180+CloudHill@users.noreply.github.com>
Date: Wed, 2 Dec 2020 19:05:14 +0700
Subject: [PATCH] Modify the enhancer menu's toggle styles to follow notion's
 toggles (#283)

* notion-enhancer#261 modify toggle styles to look similiar to notion's toggle

* remove `dot` spans from toggles
---
 mods/core/enhancerMenu.js |  4 ++--
 mods/core/menu.css        | 46 +++++++++++----------------------------
 2 files changed, 15 insertions(+), 35 deletions(-)

diff --git a/mods/core/enhancerMenu.js b/mods/core/enhancerMenu.js
index caa6380..909c251 100644
--- a/mods/core/enhancerMenu.js
+++ b/mods/core/enhancerMenu.js
@@ -422,7 +422,7 @@ window['__start'] = async () => {
           ${store(id, { [opt.key]: opt.value })[opt.key] ? 'checked' : ''}/>
           <label for="${opt.type}_${id}--${opt.key}">
             <span class="name">${opt.label}${desc}</span>
-            <span class="switch"><span class="dot"></span></span>
+            <span class="switch"></span>
           </label>
         `;
         break;
@@ -539,7 +539,7 @@ window['__start'] = async () => {
             ${enabled ? 'checked' : ''} />
             <label for="enable_${mod.id}">
             <span class="name">${mod.name}</span>
-              <span class="switch"><span class="dot"></span></span>
+              <span class="switch"></span>
               </label>`
         }</h3>
             <p class="tags">${mod.tags
diff --git a/mods/core/menu.css b/mods/core/menu.css
index e691979..f549c64 100644
--- a/mods/core/menu.css
+++ b/mods/core/menu.css
@@ -422,6 +422,7 @@ svg[data-tooltip] {
 
 .toggle input[type='checkbox'] + label {
   display: flex;
+  --menu--toggle_bg: rgba(135, 131, 120, 0.3);
 }
 .toggle input[type='checkbox'] + label .name {
   flex-basis: calc(100% - 2.25em);
@@ -429,51 +430,30 @@ svg[data-tooltip] {
 }
 .toggle input[type='checkbox'] + label .switch {
   position: relative;
-  margin-top: 0.5em;
+  top: 0.2em;
   float: right;
-  height: 0.65em;
-  width: 2em;
-  background: var(--theme--main);
-  border-radius: 5px;
+  height: 1em;
+  width: 1.85em;
+  padding: 0.1em;
+  background: var(--menu--toggle_bg);
+  border-radius: 3.14em;
   transition: background 300ms;
 }
 .toggle input[type='checkbox'] + label .switch::before {
   content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: inherit;
-  background: linear-gradient(
-    90deg,
-    var(--theme--primary),
-    var(--theme--primary_click)
-  );
-  opacity: var(--menu--toggle_opacity, 0);
-  transition: opacity 300ms;
-}
-.toggle input[type='checkbox'] + label .switch .dot {
-  position: absolute;
-  width: 1em;
-  height: 1em;
-  top: -0.15em;
+  display: block;
+  width: 0.8em;
+  height: 0.8em;
   border-radius: 50%;
   transform: translateX(var(--menu--toggle_offset, 0));
   transition: transform 350ms, box-shadow 350ms;
   background: var(--theme--option_active-color);
   /* box-shadow: 2px 1px 4px var(--theme--table-border); */
 }
-.toggle input[type='checkbox']:checked:focus + label .switch {
-  background: none !important;
-}
-.toggle input[type='checkbox']:focus + label .switch::before,
-.toggle input[type='checkbox']:focus + label .switch .dot {
-  border: 1px solid var(--theme--table-border);
-}
+
 .toggle input[type='checkbox']:checked + label {
-  --menu--toggle_offset: 1em;
-  --menu--toggle_opacity: 1;
+  --menu--toggle_offset: 0.8em;
+  --menu--toggle_bg: var(--theme--primary);
 }
 
 .color {