placement.js 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.default = void 0;
  6. var _cssinjs = require("@ant-design/cssinjs");
  7. const genNotificationPlacementStyle = token => {
  8. const {
  9. componentCls,
  10. notificationMarginEdge,
  11. animationMaxHeight
  12. } = token;
  13. const noticeCls = `${componentCls}-notice`;
  14. const rightFadeIn = new _cssinjs.Keyframes('antNotificationFadeIn', {
  15. '0%': {
  16. transform: `translate3d(100%, 0, 0)`,
  17. opacity: 0
  18. },
  19. '100%': {
  20. transform: `translate3d(0, 0, 0)`,
  21. opacity: 1
  22. }
  23. });
  24. const topFadeIn = new _cssinjs.Keyframes('antNotificationTopFadeIn', {
  25. '0%': {
  26. top: -animationMaxHeight,
  27. opacity: 0
  28. },
  29. '100%': {
  30. top: 0,
  31. opacity: 1
  32. }
  33. });
  34. const bottomFadeIn = new _cssinjs.Keyframes('antNotificationBottomFadeIn', {
  35. '0%': {
  36. bottom: token.calc(animationMaxHeight).mul(-1).equal(),
  37. opacity: 0
  38. },
  39. '100%': {
  40. bottom: 0,
  41. opacity: 1
  42. }
  43. });
  44. const leftFadeIn = new _cssinjs.Keyframes('antNotificationLeftFadeIn', {
  45. '0%': {
  46. transform: `translate3d(-100%, 0, 0)`,
  47. opacity: 0
  48. },
  49. '100%': {
  50. transform: `translate3d(0, 0, 0)`,
  51. opacity: 1
  52. }
  53. });
  54. return {
  55. [componentCls]: {
  56. [`&${componentCls}-top, &${componentCls}-bottom`]: {
  57. marginInline: 0,
  58. [noticeCls]: {
  59. marginInline: 'auto auto'
  60. }
  61. },
  62. [`&${componentCls}-top`]: {
  63. [`${componentCls}-fade-enter${componentCls}-fade-enter-active, ${componentCls}-fade-appear${componentCls}-fade-appear-active`]: {
  64. animationName: topFadeIn
  65. }
  66. },
  67. [`&${componentCls}-bottom`]: {
  68. [`${componentCls}-fade-enter${componentCls}-fade-enter-active, ${componentCls}-fade-appear${componentCls}-fade-appear-active`]: {
  69. animationName: bottomFadeIn
  70. }
  71. },
  72. [`&${componentCls}-topRight, &${componentCls}-bottomRight`]: {
  73. [`${componentCls}-fade-enter${componentCls}-fade-enter-active, ${componentCls}-fade-appear${componentCls}-fade-appear-active`]: {
  74. animationName: rightFadeIn
  75. }
  76. },
  77. [`&${componentCls}-topLeft, &${componentCls}-bottomLeft`]: {
  78. marginRight: {
  79. value: 0,
  80. _skip_check_: true
  81. },
  82. marginLeft: {
  83. value: notificationMarginEdge,
  84. _skip_check_: true
  85. },
  86. [noticeCls]: {
  87. marginInlineEnd: 'auto',
  88. marginInlineStart: 0
  89. },
  90. [`${componentCls}-fade-enter${componentCls}-fade-enter-active, ${componentCls}-fade-appear${componentCls}-fade-appear-active`]: {
  91. animationName: leftFadeIn
  92. }
  93. }
  94. }
  95. };
  96. };
  97. var _default = exports.default = genNotificationPlacementStyle;