test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 03:29:39 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity

fix: show muliple messages in vertical direction, close #3543 (#4939)

Browse Source
This commit is contained in:
偏右 2017-02-20 10:30:24 +08:00 committed by Benjy Cui
parent 6eca407711
commit 1c2c93fa81
1 changed files with 26 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
components/message/style/index.less
View File

@ -9,22 +9,23 @@
width: 100%;
top: 16px;
left: 0;
pointer-events: none;
&-notice {
width: auto;
vertical-align: middle;
position: absolute;
left: 50%;
padding: 8px;
text-align: center;
&:first-child {
margin-top: -8px;
}
}
&-notice-content {
position: relative;
right: 50%;
padding: 8px 16px;
border-radius: @border-radius-base;
box-shadow: @shadow-2;
background: @component-background;
display: block;
display: inline-block;
pointer-events: all;
}
&-success .@{iconfont-css-prefix} {
@ -50,4 +51,22 @@
top: 1px;
position: relative;
}
&-notice.move-up-leave.move-up-leave-active {
animation-name: MessageMoveOut;
overflow: hidden;
}
}
@keyframes MessageMoveOut {
0% {
opacity: 1;
max-height: 60px;
padding: 8px;
}
100% {
opacity: 0;
max-height: 0;
padding: 0;
}
}