Add dashed button, ref #413

components/button/demo/basic.md

@@ -17,6 +17,7 @@ ReactDOM.render(<div>
   <Button type="primary">主按钮</Button>
   <Button>次按钮</Button>
   <Button type="ghost">幽灵按钮</Button>
+  <Button type="dashed">虚线按钮</Button>
 </div>,
 document.getElementById('components-button-demo-basic'));
 ````

components/button/demo/disabled.md

@@ -18,6 +18,9 @@ ReactDOM.render(<div>
   <br />
   <Button type="ghost">幽灵按钮</Button>
   <Button type="ghost" disabled>幽灵按钮(失效)</Button>
+  <br />
+  <Button type="dashed">虚线按钮</Button>
+  <Button type="dashed" disabled>虚线按钮(失效)</Button>
 </div>
 , document.getElementById('components-button-demo-disabled'));
 ````

style/components/button.less

@@ -34,6 +34,10 @@
     .btn-ghost;
   }
 
+  &-dashed {
+    .btn-dashed;
+  }
+
   &-circle,
   &-circle-outline {
     .btn-circle(@btn-prefix-cls);

style/mixins/button.less

@@ -160,6 +160,20 @@
   }
 }
 
+// ghost button style
+.btn-dashed() {
+  .button-variant(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
+  border-style: dashed;
+
+  &:hover {
+    .button-color(tint(@primary-color, 20%); white; tint(@primary-color, 20%));
+  }
+  &:active,
+  &.active {
+    .button-color(shade(@primary-color, 5%); white; shade(@primary-color, 5%));
+  }
+}
+
 // circle button: the content only contains icon
 .btn-circle(@btnClassName: btn) {
   .square(@btn-circle-size);