From 0a36764e78ffc31a5bcf02802ed99f0dac350e98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Sun, 15 Sep 2019 10:32:40 +0800
Subject: [PATCH] update Checkbox style

---
 examples/routers/checkbox.vue   | 18 ++++++++++++++
 src/styles/mixins/checkbox.less | 42 ++++++++++++++++-----------------
 2 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/examples/routers/checkbox.vue b/examples/routers/checkbox.vue
index 79f3e8b5..1bdec4eb 100644
--- a/examples/routers/checkbox.vue
+++ b/examples/routers/checkbox.vue
@@ -26,6 +26,24 @@
             <Checkbox v-for="item in tags" :label="item.label" :key="item.label" true-value="true"></Checkbox>
         </Checkbox-group>
         <div>{{ fruit }}</div>
+        <Divider></Divider>
+        <CheckboxGroup v-model="fruit" size="small">
+            <Checkbox label="香蕉"></Checkbox>
+            <Checkbox label="苹果"></Checkbox>
+            <Checkbox label="西瓜"></Checkbox>
+        </CheckboxGroup>
+        <br>
+        <CheckboxGroup v-model="fruit" size="default">
+            <Checkbox label="香蕉"></Checkbox>
+            <Checkbox label="苹果"></Checkbox>
+            <Checkbox label="西瓜"></Checkbox>
+        </CheckboxGroup>
+        <br>
+        <CheckboxGroup v-model="fruit" size="large">
+            <Checkbox label="香蕉"></Checkbox>
+            <Checkbox label="苹果"></Checkbox>
+            <Checkbox label="西瓜"></Checkbox>
+        </CheckboxGroup>
     </div>
 </template>
 <script>
diff --git a/src/styles/mixins/checkbox.less b/src/styles/mixins/checkbox.less
index c4420678..2c3d0837 100644
--- a/src/styles/mixins/checkbox.less
+++ b/src/styles/mixins/checkbox.less
@@ -28,8 +28,8 @@
 
         &-inner {
             display: inline-block;
-            width: 14px;
-            height: 14px;
+            width: 16px;
+            height: 16px;
             position: relative;
             top: 0;
             left: 0;
@@ -55,8 +55,8 @@
         }
         &-large{
             & .@{checkbox-inner-prefix-cls} {
-                width: 16px;
-                height: 16px;
+                width: 18px;
+                height: 18px;
                 &:after{
                     width: 5px;
                     height: 9px;
@@ -64,10 +64,10 @@
             }
         }
         &-small{
-            font-size: 12px;
+            font-size: @font-size-base;
             & .@{checkbox-inner-prefix-cls} {
-                width: 12px;
-                height: 12px;
+                width: 14px;
+                height: 14px;
                 &:after{
                     top: 0;
                     left: 3px;
@@ -112,8 +112,8 @@
                 width: 4px;
                 height: 8px;
                 position: absolute;
-                top: 1px;
-                left: 4px;
+                top: 2px;
+                left: 5px;
                 border: 2px solid #fff;
                 border-top: 0;
                 border-left: 0;
@@ -126,8 +126,8 @@
         .@{checkbox-prefix-cls}-checked{
             .@{checkbox-inner-prefix-cls} {
                 &:after{
-                    width: 5px;
-                    height: 9px;
+                    width: 6px;
+                    height: 10px;
                 }
             }
         }
@@ -136,8 +136,8 @@
         .@{checkbox-prefix-cls}-checked{
             .@{checkbox-inner-prefix-cls} {
                 &:after{
-                    top: 0;
-                    left: 3px;
+                    top: 1px;
+                    left: 4px;
                 }
             }
         }
@@ -192,12 +192,12 @@
     .@{checkbox-prefix-cls}-indeterminate{
         .@{checkbox-inner-prefix-cls}:after{
             content: '';
-            width: 8px;
+            width: 10px;
             height: 1px;
             transform: scale(1);
             position: absolute;
             left: 2px;
-            top: 5px;
+            top: 6px;
         }
 
         &:hover {
@@ -222,23 +222,23 @@
     .@{checkbox-prefix-cls}-large {
         .@{checkbox-prefix-cls}-indeterminate{
             .@{checkbox-inner-prefix-cls}:after{
-                width: 10px;
-                top: 6px;
+                width: 12px;
+                top: 7px;
             }
         }
     }
     .@{checkbox-prefix-cls}-small {
         .@{checkbox-prefix-cls}-indeterminate{
             .@{checkbox-inner-prefix-cls}:after{
-                width: 6px;
-                top: 4px;
+                width: 8px;
+                top: 5px;
             }
         }
     }
 
     .@{checkbox-prefix-cls}-wrapper {
         cursor: pointer;
-        font-size: @font-size-small;
+        font-size: @font-size-base;
         display: inline-block;
         margin-right: 8px;
         //outline: none;
@@ -248,7 +248,7 @@
         }
 
         &.@{checkbox-prefix-cls}-large{
-            font-size: @font-size-base;
+            font-size: @font-size-large;
         }
     }