add Message component

add Message component

styles/components/alert.less

@@ -1,5 +1,5 @@
 @alert-prefix-cls: ~"@{css-prefix}alert";
-@icon--prefix-cls: ~"@{css-prefix}icon";
+@icon-prefix-cls: ~"@{css-prefix}icon";
 
 .@{alert-prefix-cls}{
     position: relative;
@@ -68,7 +68,7 @@
         overflow: hidden;
         cursor: pointer;
 
-        .@{icon--prefix-cls}-ios-close-empty {
+        .@{icon-prefix-cls}-ios-close-empty {
             font-size: 22px;
             color: @legend-color;
             transition: color @transition-time ease;

styles/components/index.less

@@ -6,4 +6,5 @@
 @import "spin";
 @import "alert";
 @import "collapse";
-@import "card";
+@import "card";
+@import "message";

styles/components/message.less

@@ -0,0 +1,53 @@
+@message-prefix-cls: ~"@{css-prefix}message";
+@icon-prefix-cls: ~"@{css-prefix}icon";
+
+.@{message-prefix-cls} {
+    font-size: 12px;
+    position: fixed;
+    z-index: @zindex-message;
+    width: 100%;
+    top: 16px;
+    left: 0;
+
+    &-notice {
+        width: auto;
+        vertical-align: middle;
+        position: absolute;
+        left: 50%;
+    }
+
+    &-notice-content {
+        position: relative;
+        right: 50%;
+        padding: 8px 16px;
+        border-radius: @border-radius-base;
+        border: 1px solid @border-color-base;
+        box-shadow: @shadow-base;
+        background: #fff;
+        display: block;
+    }
+
+    &-success .@{icon-prefix-cls} {
+        color: @success-color;
+    }
+
+    &-error .@{icon-prefix-cls} {
+        color: @error-color;
+    }
+
+    &-warning .@{icon-prefix-cls} {
+        color: @warning-color;
+    }
+
+    &-info .@{icon-prefix-cls},
+    &-loading .@{icon-prefix-cls} {
+        color: @primary-color;
+    }
+
+    .@{icon-prefix-cls} {
+        margin-right: 8px;
+        font-size: 14px;
+        top: 1px;
+        position: relative;
+    }
+}