Update checkbox switch styles

样式

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);
+    }
+  }
+}