add: ui-switch style

add: virtual mode in Dropdown
2024-05-27 17:06:00 +08:00
parent 190e43c814
commit ea7f4f538a
7 changed files with 277 additions and 139 deletions
--- a/lib/ui/css/checkbox.scss
+++ b/lib/ui/css/checkbox.scss
@ -48,4 +48,62 @@
            color: var(--color);
        }
    }
+}
+
+.ui-switch {
+    position: relative;
+    line-height: 1rem;
+    user-select: none;
+    cursor: pointer;
+
+    >span:first-of-type {
+        display: inline-flex;
+        align-items: center;
+
+        &::before {
+            content: '';
+            width: 30px;
+            min-width: 30px;
+            max-width: 30px;
+            height: 16px;
+            margin-right: 4px;
+            background-color: var(--switch-bg-color);
+            border-radius: 8px;
+            transition: background-color .08s ease;
+        }
+
+        &::after {
+            content: '';
+            position: absolute;
+            left: 1px;
+            width: 14px;
+            height: 14px;
+            background-color: white;
+            border-radius: 7px;
+            box-shadow: 1px 1px 8px rgb(0 0 0 / 20%);
+            transition: left .08s ease;
+        }
+    }
+
+    >input[type="checkbox"] {
+        display: none;
+
+        &:checked+span:first-of-type {
+
+            &::before {
+                background-color: var(--switch-active-bg-color);
+            }
+
+            &::after {
+                left: 15px;
+            }
+        }
+
+        &:disabled+span:first-of-type {
+
+            &::before {
+                opacity: .5;
+            }
+        }
+    }
 }