fixed close style

components/alert/demo/basic.md

@@ -2,7 +2,7 @@
 
 - order: 0
 
-最简单的用法。
+最简单的用法，适用于简短的警告提示。
 
 ---
 

components/alert/demo/close-type.md

@@ -1,20 +1,21 @@
-# 自定义关闭的文字
+# 自定义关闭
 
 - order: 3
 
-可以自定义关闭的文字，自定义的文字会替换原先的关闭 `Icon`，当警告提示含有标题时，关闭样式只能为默认值。
+可以自定义关闭，自定义的文字会替换原先的关闭 `Icon`，当警告提示含有标题时，关闭样式只能为默认值。
 
 ---
 
 ````jsx
 var Alert = require('antd/lib/alert');
+var link = <a href="javascript:;">不再提醒</a>
 
 React.render(
   <div>
     <Alert
       description="警告提示的文案"
       type="info"
-      closeText="自定义关闭文字"
+      closeText={link}
     />
   </div>,
 document.getElementById('components-alert-demo-close-type'));

components/alert/demo/onClose.md

@@ -9,7 +9,7 @@
 ````jsx
 var Alert = require('antd/lib/alert');
 
-var callback = function(){
+var onClose = function(){
   console.log('我要被关闭啦！');
 }
 
@@ -18,14 +18,14 @@ React.render(
     <Alert
       description="警告提示的文案"
       type="warn"
-      callback={callback}
+      onClose={onClose}
     />
     <Alert
       message="警告提示的标题"
       description="警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案"
       type="error"
-      callback={callback}
+      onClose={onClose}
     />
   </div>,
-document.getElementById('components-alert-demo-callback'));
+document.getElementById('components-alert-demo-onclose'));
 ````

components/alert/index.jsx

@@ -8,8 +8,8 @@ export default React.createClass({
     return {display: 'block'};
   },
   handleClose () {
-    if (this.props.callback) {
-      this.props.callback();
+    if (this.props.onClose) {
+      this.props.onClose();
     }
     this.setState({
       display: 'none'
@@ -37,7 +37,9 @@ export default React.createClass({
           <i className={'anticon ' + iconClass}></i>
           <p className={'ant-alert-with-message-message'}>{this.props.message}</p>
           <span className={'ant-alert-with-message-description'}>{this.props.description}</span>
-          <i onClick={this.handleClose} className={'anticon anticon-cross ant-alert-with-message-close-icon'}></i>
+          <a onClick={this.handleClose} className={'ant-alert-with-message-close-icon'}>
+            <span className='ant-alert-with-message-close-icon-x'></span>
+          </a>
         </div>
       );
     } else {
@@ -46,7 +48,7 @@ export default React.createClass({
           <div style={{display: this.state.display}} className={'ant-alert ant-alert-' + this.props.type}>
             <i className={'anticon ' + iconClass}></i>
             <span className={'ant-alert-description'}>{this.props.description}</span>
-            <a onClick={this.handleClose} className={'ant-alert-close-text'}>{this.props.closeText}</a>
+            <span onClick={this.handleClose} className={'ant-alert-close-text'}>{this.props.closeText}</span>
           </div>
         );
       } else {
@@ -54,7 +56,9 @@ export default React.createClass({
           <div style={{display: this.state.display}} className={'ant-alert ant-alert-' + this.props.type}>
             <i className={'anticon ' + iconClass}></i>
             <span className={'ant-alert-description'}>{this.props.description}</span>
-            <i onClick={this.handleClose} className={'anticon anticon-cross ant-alert-close-icon'}></i>
+            <a onClick={this.handleClose} className={'ant-alert-close-icon'}>
+              <span className='ant-alert-close-icon-x'></span>
+            </a>
           </div>
         );
       }

components/alert/index.md

@@ -16,7 +16,7 @@
 | 参数        | 说明                                                      | 类型        | 默认值 |
 |----------- |---------------------------------------------------------  | ---------- |-------|
 | type       | 必选参数，指定警告提示的样式，有四种选择`success`、`info`、`warn`、`error`   | String     | 无    |
-| closeText | 可选参数，关闭的文字                                       | String     | 无  |
+| closeText  | 可选参数，自定义关闭                                      | String     | 无  |
 | message    | 可选参数，标题                                           | String     | 无    |
 | description | 必选参数，内容                                           | String     | 无    |
-| callback   | 可选参数，关闭时触发的回调函数                             | Function    | 无    |
+| onClose     | 可选参数，关闭时触发的回调函数                             | Function    | 无    |

style/components/alert.less

@@ -28,16 +28,6 @@
     .anticon {
       color: @success-color;
     }
-    .anticon.ant-alert-close-icon {
-      color: @legend-color;
-
-      &:active {
-        color: shade(@primary-color, 5%);
-      }
-      &:hover {
-        color: tint(@primary-color, 5%);
-      }
-    }
   }
 
   &-info {
@@ -46,16 +36,6 @@
     .anticon {
       color: @primary-color;
     }
-    .anticon.ant-alert-close-icon {
-      color: @legend-color;
-
-      &:active {
-        color: shade(@primary-color, 5%);
-      }
-      &:hover {
-        color: tint(@primary-color, 5%);
-      }
-    }
   }
 
   &-warn {
@@ -64,16 +44,6 @@
     .anticon {
       color: @warning-color;
     }
-    .anticon.ant-alert-close-icon {
-      color: @legend-color;
-
-      &:active {
-        color: shade(@primary-color, 5%);
-      }
-      &:hover {
-        color: tint(@primary-color, 5%);
-      }
-    }
   }
 
   &-error {
@@ -82,34 +52,41 @@
     .anticon {
       color: @error-color;
     }
-    .anticon.ant-alert-close-icon {
-      color: @legend-color;
-
-      &:active {
-        color: shade(@primary-color, 5%);
-      }
-      &:hover {
-        color: tint(@primary-color, 5%);
-      }
-    }
   }
 
   &-close-icon {
     .iconfont-size-under-12px(10px);
-    cursor: pointer;
-    float: right;
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    margin-top: -6px;
+    filter: alpha(opacity=20);
+    opacity: .2;
+    transition: opacity .3s ease;
+    width: 12px;
+    height: 12px;
+    overflow: hidden;
+
+    &-x {
+      position: absolute;
+      top: -3px;
+      &:before {
+        font-weight: 700;
+        text-shadow: 0 1px 0 #fff;
+        color: #000;
+        content: "\e61e";
+        font-family: "anticon";
+      }
+    }
+
+    &:hover {
+      opacity: 1;
+      filter: alpha(opacity=100);
+    }
   }
 
   &-close-text {
-    cursor: pointer;
     float: right;
-    color: @legend-color;
-    &:active {
-      color: shade(@primary-color, 5%);
-    }
-    &:hover {
-      color: tint(@primary-color, 5%);
-    }
   }
 }
 
@@ -151,16 +128,6 @@
     .anticon {
       color: @success-color;
     }
-    .anticon.ant-alert-with-message-close-icon {
-      color: @legend-color;
-
-      &:active {
-        color: shade(@primary-color, 5%);
-      }
-      &:hover {
-        color: tint(@primary-color, 5%);
-      }
-    }
   }
 
   &-info {
@@ -169,16 +136,6 @@
     .anticon {
       color: @primary-color;
     }
-    .anticon.ant-alert-with-message-close-icon {
-      color: @legend-color;
-
-      &:active {
-        color: shade(@primary-color, 5%);
-      }
-      &:hover {
-        color: tint(@primary-color, 5%);
-      }
-    }
   }
 
   &-warn {
@@ -187,16 +144,6 @@
     .anticon {
       color: @warning-color;
     }
-    .anticon.ant-alert-with-message-close-icon {
-      color: @legend-color;
-
-      &:active {
-        color: shade(@primary-color, 5%);
-      }
-      &:hover {
-        color: tint(@primary-color, 5%);
-      }
-    }
   }
 
   &-error {
@@ -205,15 +152,40 @@
     .anticon {
       color: @error-color;
     }
-    .anticon.ant-alert-with-message-close-icon {
-      color: @legend-color;
+  }
 
-      &:active {
-        color: shade(@primary-color, 5%);
-      }
-      &:hover {
-        color: tint(@primary-color, 5%);
+  &-close-icon {
+    .iconfont-size-under-12px(10px);
+    float: right;
+    filter: alpha(opacity=20);
+    opacity: .2;
+    transition: opacity .3s ease;
+    width: 12px;
+    height: 12px;
+    overflow: hidden;
+    position: absolute;
+    right: 16px;
+    top: 12px;
+
+    &-x {
+      position: absolute;
+      top: -4px;
+      &:before {
+        font-weight: 700;
+        text-shadow: 0 1px 0 #fff;
+        color: #000;
+        content: "\e61e";
+        font-family: "anticon";
       }
     }
+
+    &:hover {
+      opacity: 1;
+      filter: alpha(opacity=100);
+    }
+  }
+
+  &-close-text {
+    float: right;
   }
 }