placement.js 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.default = void 0;
  6. var _cssinjs = require("../../_util/cssinjs");
  7. const genNotificationPlacementStyle = token => {
  8. const {
  9. componentCls,
  10. width,
  11. notificationMarginEdge
  12. } = token;
  13. const notificationTopFadeIn = new _cssinjs.Keyframes('antNotificationTopFadeIn', {
  14. '0%': {
  15. marginTop: '-100%',
  16. opacity: 0
  17. },
  18. '100%': {
  19. marginTop: 0,
  20. opacity: 1
  21. }
  22. });
  23. const notificationBottomFadeIn = new _cssinjs.Keyframes('antNotificationBottomFadeIn', {
  24. '0%': {
  25. marginBottom: '-100%',
  26. opacity: 0
  27. },
  28. '100%': {
  29. marginBottom: 0,
  30. opacity: 1
  31. }
  32. });
  33. const notificationLeftFadeIn = new _cssinjs.Keyframes('antNotificationLeftFadeIn', {
  34. '0%': {
  35. right: {
  36. _skip_check_: true,
  37. value: width
  38. },
  39. opacity: 0
  40. },
  41. '100%': {
  42. right: {
  43. _skip_check_: true,
  44. value: 0
  45. },
  46. opacity: 1
  47. }
  48. });
  49. return {
  50. [`&${componentCls}-top, &${componentCls}-bottom`]: {
  51. marginInline: 0
  52. },
  53. [`&${componentCls}-top`]: {
  54. [`${componentCls}-fade-enter${componentCls}-fade-enter-active, ${componentCls}-fade-appear${componentCls}-fade-appear-active`]: {
  55. animationName: notificationTopFadeIn
  56. }
  57. },
  58. [`&${componentCls}-bottom`]: {
  59. [`${componentCls}-fade-enter${componentCls}-fade-enter-active, ${componentCls}-fade-appear${componentCls}-fade-appear-active`]: {
  60. animationName: notificationBottomFadeIn
  61. }
  62. },
  63. [`&${componentCls}-topLeft, &${componentCls}-bottomLeft`]: {
  64. marginInlineEnd: 0,
  65. marginInlineStart: notificationMarginEdge,
  66. [`${componentCls}-fade-enter${componentCls}-fade-enter-active, ${componentCls}-fade-appear${componentCls}-fade-appear-active`]: {
  67. animationName: notificationLeftFadeIn
  68. }
  69. }
  70. };
  71. };
  72. var _default = exports.default = genNotificationPlacementStyle;