add Notice component

add Notice component

styles/components/alert.less

@@ -26,6 +26,7 @@
         color: @legend-color;
         line-height: 21px;
         display: none;
+        text-align: justify;
     }
 
     &-success {
@@ -69,14 +70,7 @@
         cursor: pointer;
 
         .@{icon-prefix-cls}-ios-close-empty {
-            font-size: 22px;
-            color: @legend-color;
-            transition: color @transition-time ease;
-            position: relative;
-            top: -3px;
-            &:hover {
-                color: #444;
-            }
+            .close-base(-3px);
         }
     }
 

styles/components/index.less

@@ -7,4 +7,5 @@
 @import "alert";
 @import "collapse";
 @import "card";
-@import "message";
+@import "message";
+@import "notice";

styles/components/notice.less

@@ -0,0 +1,79 @@
+@notice-prefix-cls: ~"@{css-prefix}notice";
+@icon-prefix-cls: ~"@{css-prefix}icon";
+
+@notice-width: 335px;
+@notice-padding: 16px;
+@notice-margin-bottom: 10px;
+
+.@{notice-prefix-cls} {
+    position: fixed;
+    z-index: @zindex-notification;
+    width: @notice-width;
+    margin-right: 24px;
+
+    &-notice {
+        padding: @notice-padding;
+        border-radius: @border-radius-base;
+        box-shadow: @shadow-base;
+        border: 1px solid @border-color-base;
+        background: #fff;
+        line-height: 1.5;
+        position: relative;
+        margin-bottom: @notice-margin-bottom;
+        overflow: hidden;
+
+        &-close {
+            position: absolute;
+            right: 16px;
+            top: 10px;
+            color: #999;
+            outline: none;
+
+            i{
+                .close-base(-3px);
+            }
+        }
+    }
+
+    &-title {
+        font-size: 14px;
+        color: @text-color;
+        margin-bottom: 4px;
+    }
+
+    &-desc {
+        font-size: @font-size-base;
+        color: @legend-color;
+        text-align: justify;
+    }
+
+    &-with-icon &-title{
+        margin-left: 51px;
+        margin-bottom: 4px;
+    }
+
+    &-with-icon  &-desc {
+        margin-left: 51px;
+    }
+
+    &-icon {
+        position: absolute;
+        left: 21px;
+        top: 50%;
+        margin-top: -21px;
+        font-size: 28px;
+
+        &-success {
+            color: @success-color;
+        }
+        &-info {
+            color: @primary-color;
+        }
+        &-warning {
+            color: @warning-color;
+        }
+        &-error {
+            color: @error-color;
+        }
+    }
+}

styles/mixins/close.less

@@ -0,0 +1,10 @@
+.close-base(@top: 0) {
+    font-size: 22px;
+    color: @legend-color;
+    transition: color @transition-time ease;
+    position: relative;
+    top: @top;
+    &:hover {
+        color: #444;
+    }
+}

styles/mixins/index.less

@@ -6,4 +6,5 @@
 @import "button";
 @import "layout";
 @import "size";
-@import "loading";
+@import "loading";
+@import "close";

styles/themes/default/custom.less

@@ -50,6 +50,7 @@
 @zindex-back-top        : 10;
 @zindex-spin            : 8;
 @zindex-message         : 1010;
+@zindex-notification    : 1010;
 
 // Animation
 @animation-time         : .3s;