adjustment

lib/ui/css/functions/func.scss

@@ -42,4 +42,74 @@
         color: var(--disabled-color);
         background-color: var(--disabled-bg-color);
     }
+}
+
+@mixin ui-check() {
+    .ui-check-inner {
+        position: relative;
+        display: inline-block;
+        padding: 0;
+        width: 14px;
+        height: 14px;
+        background-color: #fff;
+        user-select: none;
+        cursor: pointer;
+
+        @include outborder();
+
+        >svg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            fill: #fff;
+            transform: scale(0);
+            opacity: 0;
+            transition: all .08s cubic-bezier(.78, .14, .15, .86);
+        }
+    }
+
+    &.ui-radio-wrapper {
+        .ui-check-inner {
+            box-sizing: border-box;
+            border-radius: 8px;
+            width: 16px;
+            height: 16px;
+        }
+    }
+
+    >input[type="checkbox"],
+    >input[type="radio"] {
+        display: none;
+
+        &:checked+.ui-check-inner {
+            border-color: var(--link-color);
+            background-color: var(--link-color);
+
+            >svg {
+                transform: scale(1);
+                opacity: 1;
+            }
+        }
+
+        &:disabled {
+
+            &:checked+.ui-check-inner {
+                border-color: var(--disabled-border-color);
+                background-color: var(--disabled-border-color);
+            }
+
+            +.ui-check-inner {
+                border-color: var(--disabled-border-color);
+                background-color: var(--disabled-bg-color);
+                cursor: default;
+            }
+
+            ~span {
+                color: var(--disabled-border-color);
+                cursor: default;
+            }
+        }
+    }
 }