feat: checkbox

src/packages/checkbox/checkbox.scss

@@ -10,7 +10,7 @@
     position: relative;
     -webkit-appearance: none;
     border: 1px solid $border-color-base;
-    border-radius: 1%;
+    border-radius: 50%;
     background-size: cover;
     outline: 0;
     opacity: 1;
@@ -25,7 +25,7 @@
       height: 0;
       transform: translate(-50%, -50%);
       background: $primary-color;
-      border-radius: 1%;
+      border-radius: 50%;
       opacity: 0;
       pointer-events: none;
     }
@@ -36,18 +36,19 @@
       background-position: center;
       border-color: $primary-color;
       background-size: 60%;
+      // border-radius: 50%;
       box-shadow: 0 4px 6px 0 rgba($primary-color, 0.15);
       &:not(:disabled).nut-checkbox-ani::after {
         animation: nutPulse $animation-duration;
       }
     }
     &:disabled {
-      background-color: $disabled-bg;
-      border-color: $disabled-color;
+      background-color: $disabled-bg-1;
+      border-color: $disabled-border;
       box-shadow: none;
       &:checked {
         @include nut-checkbox-bg('999999');
-        background-color: $disabled-bg;
+        background-color: $disabled-bg-1;
       }
     }
   }

src/packages/checkbox/demo.vue

@@ -143,7 +143,7 @@ export default {
 <style lang="scss">
 .nut-checkbox.my-checkbox {
   input:checked {
-    background-image: radial-gradient(circle, #fff 0%, #fff 100%, $primary-color 60%);
+    background-image: radial-gradient(circle, #fff 0%, #fff 50%, $primary-color 60%);
     background-size: 50% 50%;
     border: none;
   }

src/styles/mixins/nut-checkbox-bg.scss

@@ -1,4 +1,5 @@
 @mixin nut-checkbox-bg($color) {
   background-color: #fff;
   background-image: url("data:image/svg+xml, %3Csvg width='20' height='15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 8l2.5-2.5 5 4.5 10-9.5L20 3 8 15H7z' fill='%23#{$color}' fill-rule='evenodd'/%3E%3C/svg%3E");
+
 }

src/styles/variable.scss

@@ -40,6 +40,9 @@ $font-size-display-large: 14px; // 常用于辅助说明文字
 $font-size-display-normal: 13px; // 常用字号，用于解释信息
 $font-size-display-small: 12px; // 常用于标签信息展示
 
+$disabled-bg-1: #f1f1f1;
+$disabled-border: #dedede;
+
 
 // ---- base ----
 $body-background: #f6f6f6 !default;