Button add ghost prop

src/components/button/button.vue

@@ -35,8 +35,9 @@
         props: {
             type: {
                 validator (value) {
-                    return oneOf(value, ['primary', 'ghost', 'dashed', 'text', 'info', 'success', 'warning', 'error', 'default']);
-                }
+                    return oneOf(value, ['default', 'primary', 'dashed', 'text', 'info', 'success', 'warning', 'error']);
+                },
+                default: 'default'
             },
             shape: {
                 validator (value) {
@@ -68,6 +69,10 @@
                 type: Boolean,
                 default: false
             },
+            ghost: {
+                type: Boolean,
+                default: false
+            }
         },
         data () {
             return {
@@ -84,7 +89,8 @@
                         [`${prefixCls}-${this.shape}`]: !!this.shape,
                         [`${prefixCls}-${this.size}`]: !!this.size,
                         [`${prefixCls}-loading`]: this.loading != null && this.loading,
-                        [`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || !!this.customIcon || this.loading)
+                        [`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || !!this.customIcon || this.loading),
+                        [`${prefixCls}-ghost`]: this.ghost
                     }
                 ];
             }

src/styles/components/button.less

@@ -60,9 +60,9 @@
         }
     }
 
-    &-ghost {
-        .btn-ghost;
-    }
+    //&-ghost {
+    //    .btn-ghost;
+    //}
 
     &-dashed{
         .btn-dashed;
@@ -125,4 +125,56 @@
     &-group-vertical {
         .btn-group-vertical(@btn-prefix-cls);
     }
+
+    // The new ghost in 3.0
+    &-ghost{
+        color: #fff;
+        background: transparent;
+        &:hover{
+            background: transparent;
+        }
+    }
+    &-ghost&-dashed, &-ghost&-default{
+        color: #fff;
+        border-color: #fff;
+        &:hover{
+            color: tint(@primary-color, 20%);
+            border-color: tint(@primary-color, 20%);
+        }
+    }
+    &-ghost&-primary{
+        color: @primary-color;
+        &:hover{
+            color: tint(@primary-color, 20%);
+            background: fade(tint(@primary-color, 95%), 50%);
+        }
+    }
+    &-ghost&-info{
+        color: @info-color;
+        &:hover{
+            color: tint(@info-color, 20%);
+            background: fade(tint(@info-color, 95%), 50%);
+        }
+    }
+    &-ghost&-success{
+        color: @success-color;
+        &:hover{
+            color: tint(@success-color, 20%);
+            background: fade(tint(@success-color, 95%), 50%);
+        }
+    }
+    &-ghost&-warning{
+        color: @warning-color;
+        &:hover{
+            color: tint(@warning-color, 20%);
+            background: fade(tint(@warning-color, 95%), 50%);
+        }
+    }
+    &-ghost&-error{
+        color: @error-color;
+        &:hover{
+            color: tint(@error-color, 20%);
+            background: fade(tint(@error-color, 95%), 50%);
+        }
+    }
 }

src/styles/custom.less

@@ -81,14 +81,14 @@
 @btn-disable-border     : @border-color-base;
 
 @btn-default-color      : @text-color;
-@btn-default-bg         : @background-color-base;
+@btn-default-bg         : #fff;
 @btn-default-border     : @border-color-base;
 
 @btn-primary-color      : #fff;
 @btn-primary-bg         : @primary-color;
 
 @btn-ghost-color        : @text-color;
-@btn-ghost-bg           : transparent;
+@btn-ghost-bg           : #fff;
 @btn-ghost-border       : @border-color-base;
 
 @btn-circle-size        : 32px;

src/styles/mixins/button.less

@@ -246,7 +246,7 @@
 
 // Text
 .btn-text() {
-    .button-variant(@btn-ghost-color, @btn-ghost-bg, transparent);
+    .button-variant(@btn-ghost-color, transparent, transparent);
 
     // for disabled
     &.disabled,