From b2799cc6be4d6a298d2f955c1e25b86d1f4aa522 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=87=E8=B6=A3=E4=BF=9D=E7=BD=97?=
 <dreamer_paul@126.com>
Date: Thu, 25 Apr 2024 11:48:06 +0800
Subject: [PATCH] Update checkbox switch styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

样式
---
 assets/global.less | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/assets/global.less b/assets/global.less
index b0e5c60..16134ec 100644
--- a/assets/global.less
+++ b/assets/global.less
@@ -4,6 +4,11 @@
 
 body {
   margin: 0;
+
+  --primary: #28b9be;
+  --gray: #eee;
+  --lighter-gray: #eee;
+  --border-width: 1px;
 }
 
 h1, h2, h3, h4, h5, h6, p {
@@ -81,3 +86,37 @@ textarea {
     }
   }
 }
+
+input[type="checkbox"][role="switch"] {
+  padding: 0;
+  width: 4em;
+  height: 2em;
+  cursor: pointer;
+  appearance: none;
+  position: relative;
+  border-radius: 50em;
+  box-sizing: content-box;
+  border: var(--border-width) solid var(--gray);
+  background-color: var(--lighter-gray);
+  transition: border .3s, background-color .3s;
+
+  &::before{
+    width: 2em;
+    height: 2em;
+    content: '';
+    display: block;
+    background: #fff;
+    position: absolute;
+    border-radius: 100%;
+    transition: transform .3s;
+  }
+
+  &:checked {
+    border-color: var(--primary);
+    background-color: var(--primary);
+
+    &::before {
+      transform: translateX(2em);
+    }
+  }
+}