update tag style

components/tag/demo/basic.md

@@ -2,16 +2,20 @@
 
 - order: 0
 
-标签。
+简单的标签展示，添加 closable 表示可关闭。
 
 ---
 
 ````jsx
 var Tag = antd.Tag;
 
+function onClose() {
+  console.log(this.props.children);
+}
+
 React.render(<div>
-  <Tag>标签一</Tag>
+  <Tag href="http://www.baidu.com">标签一</Tag>
-  <Tag closable>标签二</Tag>
+  <Tag closable onClose={onClose}>标签二</Tag>
   <Tag>标签三</Tag>
 </div>, document.getElementById('components-tag-demo-basic'));
 ````

components/tag/demo/colorful.md

@@ -0,0 +1,19 @@
+# 各种类型
+
+四种颜色的标签。
+
+- order: 1
+
+---
+
+````jsx
+var Tag = antd.Tag;
+
+React.render(<div>
+  <Tag closable color="blue">蓝色</Tag>
+  <Tag closable color="green">绿色</Tag>
+  <Tag closable color="yellow">黄色</Tag>
+  <Tag closable color="red">红色</Tag>
+</div>, document.getElementById('components-tag-demo-colorful'));
+````
+

components/tag/index.jsx

@@ -9,12 +9,12 @@ class AntTag extends React.Component {
     this.props.onClose.call(this);
   }
   render() {
-    var close = this.props.closable ?
+    let close = this.props.closable ?
       <i className="anticon anticon-cross" onClick={this.destroy.bind(this)}></i> : '';
-    return <div className={this.props.prefixCls}>
+    let colorClass = this.props.prefixCls + '-' + this.props.color;
-      <span className={this.props.prefixCls + '-text'}>
+
-        {this.props.children}
+    return <div className={this.props.prefixCls + ' ' + colorClass}>
-      </span>
+      <a className={this.props.prefixCls + '-text'} {...this.props} />
       {close}
     </div>;
   }

style/components/index.less

@@ -24,3 +24,4 @@
 @import "divider";
 @import "slider";
 @import "radio";
+@import "tag";

style/components/tag.less

@@ -0,0 +1,72 @@
+@import "../mixins/index";
+@tagPrefixClass: ~"@{css-prefix}tag";
+
+.@{tagPrefixClass} {
+  display: inline-block;
+  line-height: 22px;
+  height: 22px;
+  padding: 0 8px;
+  border-radius: 20px;
+  background: #f3f3f3;
+  font-size: @font-size-base;
+  margin-right: 4px;
+  margin-bottom: 8px;
+  transition: all 0.3s ease;
+  vertical-align: middle;
+  opacity: 0.85;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &,
+  a,
+  a:hover {
+    color: @text-color;
+  }
+
+  .anticon-cross {
+    .iconfont-size-under-12px(7px);
+    cursor: pointer;
+    font-weight: bold;
+    margin-left: 3px;
+    position: relative;
+    top: -1px;
+    color: #6666;
+    transition: all 0.3s ease;
+    opacity: 0.66;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  &-blue,
+  &-green,
+  &-yellow,
+  &-red {
+    &,
+    a,
+    a:hover,
+    .anticon-cross,
+    .anticon-cross:hover {
+      color: #fff;
+    }
+  }
+
+  &-blue {
+    background: @primary-color;
+  }
+
+  &-green {
+    background: @success-color;
+  }
+
+  &-yellow {
+    background: @warning-color;
+  }
+
+  &-red {
+    background: @error-color;
+  }
+}