add Checkbox UI

add Checkbox UI

local/routers/radio.vue

@@ -74,12 +74,41 @@
         <Radio value="爪哇犀牛"></Radio>
         <Radio value="印度黑羚"></Radio>
     </Radio-group>
+    <br><br><br><br>
+    <Checkbox :checked.sync="radio">Checkbox</Checkbox>
+    <br><br>
+    <Checkbox-group :model="social">
+        <Checkbox value="twitter">
+            <Icon type="social-twitter"></Icon>
+            <span>Twitter</span>
+        </Checkbox>
+        <Checkbox value="facebook">
+            <Icon type="social-facebook"></Icon>
+            <span>Facebook</span>
+        </Checkbox>
+        <Checkbox value="github">
+            <Icon type="social-github"></Icon>
+            <span>Github</span>
+        </Checkbox>
+        <Checkbox value="snapchat">
+            <Icon type="social-snapchat"></Icon>
+            <span>Snapchat</span>
+        </Checkbox>
+    </Checkbox-group>
+    <br><br>
+    <Checkbox :checked.sync="disabledSingle" disabled>Checkbox</Checkbox>
+    <Checkbox-group :model="disabledGroup">
+        <Checkbox value="香蕉" disabled></Checkbox>
+        <Checkbox value="苹果" disabled></Checkbox>
+        <Checkbox value="西瓜"></Checkbox>
+    </Checkbox-group>
 </template>
 <script>
-    import { Radio, Alert, Icon, Collapse, Button } from 'iview';
+    import { Radio, Alert, Icon, Collapse, Button, Checkbox } from 'iview';
 
     const RadioGroup = Radio.Group;
     const Panel = Collapse.Panel;
+    const CheckboxGroup = Checkbox.Group;
 
     export default {
         components: {
@@ -89,7 +118,9 @@
             Icon,
             Collapse,
             Panel,
-            Button
+            Button,
+            Checkbox,
+            CheckboxGroup
         },
         props: {
         
@@ -100,7 +131,10 @@
                 radioGroup: '段模',
                 activeKey: [1,2],
                 phone: 'apple',
-                animal: '爪哇犀牛'
+                animal: '爪哇犀牛',
+                social: ['facebook', 'github'],
+                disabledSingle: true,
+                disabledGroup: ['苹果']
             }
         },
         computed: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iview",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "title": "iView",
   "description": "A high quality  UI components Library with Vue.js",
   "homepage": "http://www.iviewui.com",

styles/common/base.less

@@ -46,7 +46,7 @@ a {
     text-decoration: none;
     outline: none;
     cursor: pointer;
-    transition: color @transition-time ease;
+    .transition(color @transition-time ease);
 
     &:hover {
         color: @link-hover-color;

styles/components/button.less

@@ -54,7 +54,7 @@
         content: '';
         border-radius: inherit;
         z-index: 1;
-        .transition(opacity @animation-time);
+        .transition(opacity @transition-time);
         pointer-events: none;
         display: none;
     }

styles/components/checkbox.less

@@ -0,0 +1 @@
+.checkboxFn();

styles/components/index.less

@@ -10,3 +10,4 @@
 @import "message";
 @import "notice";
 @import "radio";
+@import "checkbox";

styles/components/radio.less

@@ -41,7 +41,7 @@
         background-color: #fff;
         border: 1px solid @border-color-base;
         border-radius: 50%;
-        .transition(all @animation-time @ease-in-out);
+        .transition(all @transition-time @ease-in-out);
 
         &:after {
             position: absolute;
@@ -56,7 +56,7 @@
             content: ' ';
             background-color: @primary-color;
             opacity: 0;
-            .transition(all @animation-time @ease-in-out);
+            .transition(all @transition-time @ease-in-out);
             .transform(scale(0));
         }
     }
@@ -80,7 +80,7 @@
         &:after {
             opacity: 1;
             .transform(scale(1));
-            .transition(all @animation-time @ease-in-out);
+            .transition(all @transition-time @ease-in-out);
         }
     }
 }
@@ -126,7 +126,7 @@ span.@{radio-prefix-cls} + * {
         line-height: 26px;
         color: @btn-default-color;
         display: inline-block;
-        .transition(all @animation-time ease-in-out);
+        .transition(all @transition-time ease-in-out);
         cursor: pointer;
         border: 1px solid @border-color-base;
         border-left: 0;
@@ -145,7 +145,7 @@ span.@{radio-prefix-cls} + * {
             left: -1px;
             background: @border-color-base;
             visibility: hidden;
-            .transition(all @animation-time ease-in-out);
+            .transition(all @transition-time ease-in-out);
         }
 
         &:first-child {

styles/mixins/button.less

@@ -93,7 +93,7 @@
     user-select: none;
     .button-size(@btn-padding-base; @btn-font-size; @btn-border-radius);
     .transform(translate3d(0, 0, 0));
-    .transition(all @animation-time linear);
+    .transition(all @transition-time linear);
 
     > .@{css-prefix-iconfont} {
         line-height: 1;

styles/mixins/checkbox.less

@@ -0,0 +1,158 @@
+.checkboxFn(@checkbox-prefix-cls: ~"@{css-prefix}checkbox") {
+    @checkbox-inner-prefix-cls: ~"@{checkbox-prefix-cls}-inner";
+
+    // 普通状态
+    .@{checkbox-prefix-cls} {
+        display: inline-block;
+        vertical-align: middle;
+        white-space: nowrap;
+        cursor: pointer;
+        outline: none;
+        line-height: 1;
+        position: relative;
+
+        &:hover {
+            .@{checkbox-inner-prefix-cls} {
+                border-color: #bcbcbc;
+            }
+        }
+
+        &-inner {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            position: relative;
+            top: 0;
+            left: 0;
+            border: 1px solid @border-color-base;
+            border-radius: 3px;
+            background-color: #fff;
+            .transition2(border-color @transition-time @ease-in-out,background-color @transition-time @ease-in-out);
+
+            &:after {
+                content: '';
+                display: table;
+                width: 5px;
+                height: 8px;
+                position: absolute;
+                top: 2px;
+                left: 4px;
+                border: 2px solid #fff;
+                border-top: 0;
+                border-left: 0;
+                .transform(rotate(45deg) scale(0));
+                .transition(all @transition-time @ease-in-out);
+            }
+        }
+
+        &-input {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            z-index: 1;
+            cursor: pointer;
+            opacity: 0;
+        }
+    }
+
+    // 选中状态
+    .@{checkbox-prefix-cls}-checked {
+
+        &:hover {
+            .@{checkbox-inner-prefix-cls} {
+                border-color: @primary-color;
+            }
+        }
+
+        .@{checkbox-inner-prefix-cls} {
+            border-color: @primary-color;
+            background-color: @primary-color;
+
+            &:after {
+                content: '';
+                display: table;
+                width: 5px;
+                height: 8px;
+                position: absolute;
+                top: 2px;
+                left: 4px;
+                border: 2px solid #fff;
+                border-top: 0;
+                border-left: 0;
+                .transform(rotate(45deg) scale(1));
+                .transition(all @transition-time @ease-in-out .1s);
+            }
+        }
+    }
+
+    // 禁用
+    .@{checkbox-prefix-cls}-disabled {
+        &.@{checkbox-prefix-cls}-checked {
+            &:hover {
+                .@{checkbox-inner-prefix-cls} {
+                    border-color: @border-color-base;
+                }
+            }
+
+            .@{checkbox-inner-prefix-cls} {
+                background-color: #f3f3f3;
+                border-color: @border-color-base;
+
+                &:after {
+                    animation-name: none;
+                    border-color: #ccc;
+                }
+            }
+        }
+
+        &:hover {
+            .@{checkbox-inner-prefix-cls} {
+                border-color: @border-color-base;
+            }
+        }
+
+        .@{checkbox-inner-prefix-cls} {
+            border-color: @border-color-base;
+            background-color: #f3f3f3;
+            &:after {
+                animation-name: none;
+                border-color: #f3f3f3;
+            }
+        }
+
+        .@{checkbox-inner-prefix-cls}-input {
+            cursor: default;
+        }
+
+        & + span {
+            color: #ccc;
+            cursor: @cursor-disabled;
+        }
+    }
+
+    .@{checkbox-prefix-cls}-wrapper {
+        cursor: pointer;
+        font-size: @font-size-base;
+        display: inline-block;
+        & + & {
+            margin-left: 8px;
+        }
+    }
+
+    .@{checkbox-prefix-cls}-wrapper + span,
+    .@{checkbox-prefix-cls} + span {
+        margin-left: 8px;
+        margin-right: 8px;
+    }
+
+    .@{checkbox-prefix-cls}-group {
+        font-size: @font-size-base;
+        &-item {
+            display: inline-block;
+        }
+    }
+}

styles/mixins/index.less

@@ -8,3 +8,4 @@
 @import "size";
 @import "loading";
 @import "close";
+@import "checkbox";

styles/mixins/transition.less

@@ -3,3 +3,8 @@
     -moz-transition:    @string;
     transition:         @string;
 }
+.transition2 (@string1, @string2) {
+    -webkit-transition: @string1 , @string2;
+    -moz-transition:    @string1 , @string2;
+    transition:         @string1 , @string2;
+}