add gutter to Row and Col

add gutter to Row and Col

src/components/layout/col.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="classes">
+    <div :class="classes" :style="styles">
         <slot></slot>
     </div>
 </template>
@@ -17,6 +17,11 @@
             pull: [Number, String],
             className: String
         },
+        data () {
+            return {
+                gutter: 0
+            }
+        },
         computed: {
             classes () {
                 return [
@@ -30,6 +35,17 @@
                         [`${this.className}`]: !!this.className
                     }
                 ]
+            },
+            styles () {
+                let style = {};
+                if (this.gutter !== 0) {
+                    style = {
+                        paddingLeft: this.gutter / 2 + 'px',
+                        paddingRight: this.gutter / 2 + 'px'
+                    }
+                }
+
+                return style;
             }
         }
     }

src/components/layout/row.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="classes">
+    <div :class="classes" :style="styles">
         <slot></slot>
     </div>
 </template>
@@ -25,6 +25,10 @@
                     return oneOf(value, ['start', 'end', 'center', 'space-around', 'space-between']);
                 }
             },
+            gutter: {
+                type: Number,
+                default: 0
+            },
             className: String
         },
         computed: {
@@ -38,7 +42,35 @@
                         [`${this.className}`]: !!this.className
                     }
                 ]
+            },
+            styles () {
+                let style = {};
+                if (this.gutter !== 0) {
+                    style = {
+                        marginLeft: this.gutter / -2 + 'px',
+                        marginRight: this.gutter / -2 + 'px'
                     }
                 }
+
+                return style;
+            }
+        },
+        methods: {
+            updateGutter (val) {
+                this.$children.forEach((child) => {
+                    if (val !== 0) {
+                        child.gutter = val;
+                    }
+                });
+            }
+        },
+        watch: {
+            gutter (val) {
+                this.updateGutter(val);
+            }
+        },
+        ready () {
+            this.updateGutter(this.gutter);
+        }
     }
 </script>

src/styles/themes/default/custom.less

@@ -2,12 +2,12 @@
 @css-prefix             : ivu-;
 @css-prefix-iconfont    : ivu-icon;
 // Color
-@primary-color          : #0099e5;
+@primary-color          : #3399ff;
 @info-color             : #2db7f5;
-@success-color          : #5cb85c;
+@success-color          : #00cc66;
+@warning-color          : #ff9900;
 @error-color            : #ff5500;
-@warning-color          : #f0ad4e;
+@link-color             : #3399ff;
-@link-color             : #0099e5;
 @link-hover-color       : tint(@link-color, 20%);
 @link-active-color      : shade(@link-color, 5%);
 @selected-color         : fade(@primary-color, 90%);
@@ -17,7 +17,7 @@
 @body-background        : #fff;
 @font-family            : "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
 @code-family            : Consolas,Menlo,Courier,monospace;
-@text-color             : #525558;
+@text-color             : #657180;
 @font-size-base         : 14px;
 @font-size-small        : 12px;
 @line-height-base       : 1.5;
@@ -27,8 +27,8 @@
 @cursor-disabled        : not-allowed;
 
 // Border color
-@border-color-base      : #d9d9d9;  // outside
+@border-color-base      : #d7dde4;  // outside
-@border-color-split     : #e9e9e9;  // inside
+@border-color-split     : #e3e8ee;  // inside
 
 // Background color
 @background-color-base        : #f7f7f7;  // base
@@ -55,7 +55,7 @@
 @btn-border-radius-small: 3px;
 @btn-group-border       : shade(@primary-color, 5%);
 
-@btn-disable-color      : #ccc;
+@btn-disable-color      : #c3cbd6;
 @btn-disable-bg         : @background-color-base;
 @btn-disable-border     : @border-color-base;
 

test/routers/layout.vue

@@ -1,23 +1,54 @@
+<style>
+    .example-demo .ivu-col div{
+        color: #fff;
+        padding: 10px 0;
+        text-align: center;
+        background: rgba(0, 153, 229, .9);
+    }
+    .example-demo  .ivu-col:nth-child(odd) div{
+        background: rgba(0, 153, 229, .7);
+    }
+</style>
 <template>
-    <Card :bordered="true" style="width:300px">
+    <div class="example-demo">
-        <template slot="title">
+        <Row :gutter="16">
-            <p>放寒假的发货会计师</p>
+            <i-col span="6">
-        </template>
+                <div>1 | order-4</div>
-        <a href="#" slot="extra">More</a>
+            </i-col>
-    </Card>
+            <i-col span="6">
-    <Card style="width:300px">
+                <div>1 | order-4</div>
-        <p>hello</p>
+            </i-col>
-        <p>hndshf</p>
+            <i-col span="6">
-        <h3>jfds</h3>
+                <div>1 | order-4</div>
-    </Card>
+            </i-col>
+            <i-col span="6">
+                <div>1 | order-4</div>
+            </i-col>
+        </Row>
+
+        <Row>
+            <i-col span="6">
+                <div>1 | order-4</div>
+            </i-col>
+            <i-col span="6">
+                <div>1 | order-4</div>
+            </i-col>
+            <i-col span="6">
+                <div>1 | order-4</div>
+            </i-col>
+            <i-col span="6">
+                <div>1 | order-4</div>
+            </i-col>
+        </Row>
+    </div>
 </template>
 <script>
-    import { Row, Col, Card } from 'iview';
+    import { Row, iCol, Card } from 'iview';
 
     export default {
         components: {
             Row,
-            iCol: Col,
+            iCol,
             Card
         },
         props: {

test/routers/more.vue

@@ -29,7 +29,7 @@
     <Timeline pending>
         <Timeline-item color="red">发布3.0版本</Timeline-item>
         <Timeline-item color="green">
-            <Icon type="time" slot="dot"></Icon>
+            <Icon type="cloak" slot="dot"></Icon>
             发布2.0版本
         </Timeline-item>
         <Timeline-item color="#ff6600">发布1.0版本</Timeline-item>