add: ui-switch style

add: virtual mode in Dropdown

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

lib/ui/css/dropdown.scss

@@ -152,21 +152,25 @@ $listMaxHeight: 210px;
     }
 
     >.ui-drop-list {
-        margin: 0;
-        padding: 0;
-        list-style: none;
         max-height: $listMaxHeight;
         overflow-y: auto;
+        position: relative;
         font-size: var(--font-size);
         @include scrollbar();
 
-        &.filtered>li:first-child {
+        &.filtered>.drop-content>.li:first-child {
             background-color: var(--hover-bg-color);
         }
 
-        >li {
+        >.drop-content {
+            position: absolute;
+            width: 100%;
+        }
+
+        li {
             // display: flex;
             // align-items: center;
+            list-style: none;
             line-height: $dropItemHeight;
             height: $dropItemHeight;
             padding: 0 10px;
@@ -186,4 +190,4 @@ $listMaxHeight: 210px;
             }
         }
     }
-}
+}

lib/ui/css/variables/definition.scss

@@ -21,6 +21,8 @@
     --disabled-color: #aaa;
     --disabled-bg-color: #e9e9e9;
     --disabled-border-color: #d9d9d9;
+    --switch-bg-color: #eae9eb;
+    --switch-active-bg-color: #33c559;
 
     --red-color: red;
     --title-color: #fff;