placement.less 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. .@{notification-prefix-cls} {
  2. &-top,
  3. &-bottom {
  4. margin-right: 0;
  5. margin-left: 0;
  6. }
  7. &-top {
  8. .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
  9. .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
  10. animation-name: NotificationTopFadeIn;
  11. }
  12. }
  13. &-bottom {
  14. .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
  15. .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
  16. animation-name: NotificationBottomFadeIn;
  17. }
  18. }
  19. &-topLeft,
  20. &-bottomLeft {
  21. margin-right: 0;
  22. margin-left: @notification-margin-edge;
  23. .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
  24. .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
  25. animation-name: NotificationLeftFadeIn;
  26. }
  27. }
  28. }
  29. @keyframes NotificationTopFadeIn {
  30. 0% {
  31. margin-top: -100%;
  32. opacity: 0;
  33. }
  34. 100% {
  35. margin-top: 0;
  36. opacity: 1;
  37. }
  38. }
  39. @keyframes NotificationBottomFadeIn {
  40. 0% {
  41. margin-bottom: -100%;
  42. opacity: 0;
  43. }
  44. 100% {
  45. margin-bottom: 0;
  46. opacity: 1;
  47. }
  48. }
  49. @keyframes NotificationLeftFadeIn {
  50. 0% {
  51. right: @notification-width;
  52. opacity: 0;
  53. }
  54. 100% {
  55. right: 0;
  56. opacity: 1;
  57. }
  58. }