add Message component

add Message component

styles/animation/fade.less

@@ -0,0 +1,30 @@
+.fade-motion(@className, @keyframeName) {
+    .make-motion(@className, @keyframeName);
+    .@{className}-enter, .@{className}-appear {
+        opacity: 0;
+        animation-timing-function: linear;
+    }
+    .@{className}-leave {
+        animation-timing-function: linear;
+    }
+}
+
+.fade-motion(fade, ivuFade);
+
+@keyframes ivuFadeIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes ivuFadeOut {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}

styles/animation/index.less

@@ -0,0 +1,26 @@
+.motion-common() {
+    animation-duration: @animation-time;
+    animation-fill-mode: both;
+}
+
+.make-motion(@className, @keyframeName) {
+    .@{className}-enter, .@{className}-appear {
+        .motion-common();
+        animation-play-state: paused;
+    }
+    .@{className}-leave {
+        .motion-common();
+        animation-play-state: paused;
+    }
+    .@{className}-enter, .@{className}-appear {
+        animation-name: ~"@{keyframeName}In";
+        animation-play-state: running;
+    }
+    .@{className}-leave {
+        animation-name: ~"@{keyframeName}Out";
+        animation-play-state: running;
+    }
+}
+
+@import "fade";
+@import "move";

styles/animation/move.less

@@ -0,0 +1,119 @@
+.move-motion(@className, @keyframeName) {
+    .make-motion(@className, @keyframeName);
+    .@{className}-enter, .@{className}-appear {
+        opacity: 0;
+        animation-timing-function: @ease-in-out;
+    }
+    .@{className}-leave {
+        animation-timing-function: @ease-in-out;
+    }
+}
+
+.move-motion(move-up, ivuMoveUp);
+.move-motion(move-down, ivuMoveDown);
+.move-motion(move-left, ivuMoveLeft);
+.move-motion(move-right, ivuMoveRight);
+
+@keyframes ivuMoveDownIn {
+    0% {
+        transform-origin: 0 0;
+        transform: translateY(100%);
+        opacity: 0;
+    }
+    100% {
+        transform-origin: 0 0;
+        transform: translateY(0%);
+        opacity: 1;
+    }
+}
+
+@keyframes ivuMoveDownOut {
+    0% {
+        transform-origin: 0 0;
+        transform: translateY(0%);
+        opacity: 1;
+    }
+    100% {
+        transform-origin: 0 0;
+        transform: translateY(100%);
+        opacity: 0;
+    }
+}
+
+@keyframes ivuMoveLeftIn {
+    0% {
+        transform-origin: 0 0;
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+    100% {
+        transform-origin: 0 0;
+        transform: translateX(0%);
+        opacity: 1;
+    }
+}
+
+@keyframes ivuMoveLeftOut {
+    0% {
+        transform-origin: 0 0;
+        transform: translateX(0%);
+        opacity: 1;
+    }
+    100% {
+        transform-origin: 0 0;
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+}
+
+@keyframes ivuMoveRightIn {
+    0% {
+        opacity: 0;
+        transform-origin: 0 0;
+        transform: translateX(100%);
+    }
+    100% {
+        opacity: 1;
+        transform-origin: 0 0;
+        transform: translateX(0%);
+    }
+}
+
+@keyframes ivuMoveRightOut {
+    0% {
+        transform-origin: 0 0;
+        transform: translateX(0%);
+        opacity: 1;
+    }
+    100% {
+        transform-origin: 0 0;
+        transform: translateX(100%);
+        opacity: 0;
+    }
+}
+
+@keyframes ivuMoveUpIn {
+    0% {
+        transform-origin: 0 0;
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+    100% {
+        transform-origin: 0 0;
+        transform: translateY(0%);
+        opacity: 1;
+    }
+}
+
+@keyframes ivuMoveUpOut {
+    0% {
+        transform-origin: 0 0;
+        transform: translateY(0%);
+        opacity: 1;
+    }
+    100% {
+        transform-origin: 0 0;
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+}

styles/common/index.less

@@ -1,4 +1,3 @@
 @import "base";
 @import "iconfont/ionicons";
-@import "layout";
-@import "transition";
+@import "layout";

styles/common/transition.less

@@ -1,16 +0,0 @@
-// Vue transition
-
-.fade-transition {
-    .transition(opacity @transition-time @ease-in-out);
-}
-.fade-enter, .fade-leave {
-    opacity: 0;
-}
-
-.height-transition{
-    .transition(all @transition-time @ease-in-out);
-}
-
-.height-enter, .height-leave {
-    height: 0;
-}

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;
+    }
+}

styles/copyright.less

@@ -1,6 +1,6 @@
 /*!
 * iView
-* Web: http://www.iviewui.com
-* Github: https://github.com/iviewui/iview
+* Web: https://www.iviewui.com
+* Github: https://github.com/iview/iview
 * Author: Aresn
 */

styles/index.less

@@ -1,4 +1,5 @@
 @import "./themes/default/index";
 @import "./mixins/index";
 @import "./common/index";
+@import "./animation/index";
 @import "./components/index";

styles/mixins/animation.less

@@ -2,4 +2,28 @@
     -webkit-animation:  @string;
     -moz-animation:     @string;
     animation:          @string;
+}
+
+.animation-duration(@string) {
+    -webkit-animation-duration    : @string;
+    -moz-animation-duration       : @string;
+    animation-duration            : @string;
+}
+
+.animation-fill-mode(@string) {
+    -webkit-animation-fill-mode    : @string;
+    -moz-animation-fill-mode       : @string;
+    animation-fill-mode            : @string;
+}
+
+.animation-play-state(@string) {
+    -webkit-animation-play-state    : @string;
+    -moz-animation-play-state       : @string;
+    animation-play-state            : @string;
+}
+
+.animation-name(@string) {
+    -webkit-animation-name    : @string;
+    -moz-animation-name       : @string;
+    animation-name            : @string;
 }

styles/mixins/index.less

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

styles/mixins/loading.less

@@ -0,0 +1,10 @@
+// Loading for loop
+.ivu-load-loop{
+    .animation(ani-load-loop 1s linear infinite);
+}
+
+@keyframes ani-load-loop {
+    from { transform: rotate(0deg);}
+    50%  { transform: rotate(180deg);}
+    to   { transform: rotate(360deg);}
+}

styles/themes/default/custom.less

@@ -49,7 +49,9 @@
 @zindex-affix           : 10;
 @zindex-back-top        : 10;
 @zindex-spin            : 8;
+@zindex-message         : 1010;
 
 // Animation
+@animation-time         : .3s;
 @transition-time        : .2s;
-@ease-in-out            : ease-in-out;
+@ease-in-out            : ease-in-out;