69 lines
1.3 KiB
Plaintext
69 lines
1.3 KiB
Plaintext
.@{notification-prefix-cls} {
|
|
&-top,
|
|
&-bottom {
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
}
|
|
|
|
&-top {
|
|
.@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
|
|
.@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
|
|
animation-name: NotificationTopFadeIn;
|
|
}
|
|
}
|
|
|
|
&-bottom {
|
|
.@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
|
|
.@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
|
|
animation-name: NotificationBottomFadeIn;
|
|
}
|
|
}
|
|
|
|
&-topLeft,
|
|
&-bottomLeft {
|
|
margin-right: 0;
|
|
margin-left: @notification-margin-edge;
|
|
|
|
.@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
|
|
.@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
|
|
animation-name: NotificationLeftFadeIn;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes NotificationTopFadeIn {
|
|
0% {
|
|
margin-top: -100%;
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
margin-top: 0;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes NotificationBottomFadeIn {
|
|
0% {
|
|
margin-bottom: -100%;
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
margin-bottom: 0;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes NotificationLeftFadeIn {
|
|
0% {
|
|
right: @notification-width;
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
right: 0;
|
|
opacity: 1;
|
|
}
|
|
}
|