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