import vitejs

css/functions/checkbox.scss

@@ -0,0 +1,84 @@
+@import './func.scss';
+
+$boxBorderColor: #999898;
+$boxCheckedColor: #1890ff;
+$boxDisabledColor: #d9d9d9;
+
+@mixin check-box() {
+    .check-box-inner {
+        position: relative;
+        display: inline-block;
+        margin-top: 2px;
+        padding: 0;
+        width: 14px;
+        height: 14px;
+        background-color: #fff;
+        border: 1px solid $boxBorderColor;
+        @include user-select(none);
+        @include border-radius(2px);
+        @include transition(all .2s);
+        cursor: pointer;
+
+        >svg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            fill: #fff;
+            transform: scale(0);
+            opacity: 0;
+            @include transition(all .08s cubic-bezier(.78, .14, .15, .86));
+        }
+    }
+
+    >input[type="checkbox"] {
+        display: none;
+
+        &:checked+.check-box-inner {
+            border-color: $boxCheckedColor;
+            background-color: $boxCheckedColor;
+
+            >svg {
+                transform: scale(1);
+                opacity: 1;
+            }
+        }
+
+        &:disabled {
+            &+.check-box-inner {
+                border-color: $boxDisabledColor;
+                cursor: default;
+            }
+
+            &:checked+.check-box-inner {
+                border-color: $boxDisabledColor;
+                background-color: $boxDisabledColor;
+            }
+
+            &~span {
+                color: $boxDisabledColor;
+                cursor: default;
+            }
+        }
+    }
+
+    /*
+    &.disabled {
+        .check-box-inner {
+            border-color: $boxDisabledColor;
+            cursor: default;
+        }
+
+        >input:checked+.check-box-inner {
+            border-color: $boxDisabledColor;
+            background-color: $boxDisabledColor;
+        }
+
+        >span {
+            color: $boxDisabledColor;
+            cursor: default;
+        }
+    }
+    */
+}

css/functions/func.scss

@@ -0,0 +1,54 @@
+@mixin user-select($prop) {
+    -moz-user-select: $prop;
+    -ms-user-select: $prop;
+    user-select: $prop;
+    -webkit-user-select: $prop;
+}
+
+@mixin border-radius($property) {
+    -moz-border-radius: $property;
+    -webkit-border-radius: $property;
+    border-radius: $property;
+}
+
+@mixin box-shadow($property) {
+    -webkit-box-shadow: $property;
+    box-shadow: $property;
+}
+
+@mixin box-shadow2($p1, $p2) {
+    -webkit-box-shadow: $p1, $p2;
+    box-shadow: $p1, $p2;
+}
+
+@mixin box-shadow3($p1, $p2, $p3) {
+    -webkit-box-shadow: $p1, $p2, $p3;
+    box-shadow: $p1, $p2, $p3;
+}
+
+@mixin transition($property) {
+    -webkit-transition: $property;
+    transition: $property;
+}
+
+@mixin transition2($p1, $p2) {
+    -webkit-transition: $p1, $p2;
+    transition: $p1, $p2;
+}
+
+@mixin transition3($p1, $p2, $p3) {
+    -webkit-transition: $p1, $p2, $p3;
+    transition: $p1, $p2, $p3;
+}
+
+@mixin scrollbar() {
+    &::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: rgba(168, 168, 168, 0.9);
+        border-radius: 4px;
+    }
+}