|
|
|
// .@{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;
|
|
|
|
// }
|
|
|
|
// }
|