1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 |
- "use strict";
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- exports.default = void 0;
- var _cssinjs = require("@ant-design/cssinjs");
- const genNotificationPlacementStyle = token => {
- const {
- componentCls,
- notificationMarginEdge,
- animationMaxHeight
- } = token;
- const noticeCls = `${componentCls}-notice`;
- const rightFadeIn = new _cssinjs.Keyframes('antNotificationFadeIn', {
- '0%': {
- transform: `translate3d(100%, 0, 0)`,
- opacity: 0
- },
- '100%': {
- transform: `translate3d(0, 0, 0)`,
- opacity: 1
- }
- });
- const topFadeIn = new _cssinjs.Keyframes('antNotificationTopFadeIn', {
- '0%': {
- top: -animationMaxHeight,
- opacity: 0
- },
- '100%': {
- top: 0,
- opacity: 1
- }
- });
- const bottomFadeIn = new _cssinjs.Keyframes('antNotificationBottomFadeIn', {
- '0%': {
- bottom: token.calc(animationMaxHeight).mul(-1).equal(),
- opacity: 0
- },
- '100%': {
- bottom: 0,
- opacity: 1
- }
- });
- const leftFadeIn = new _cssinjs.Keyframes('antNotificationLeftFadeIn', {
- '0%': {
- transform: `translate3d(-100%, 0, 0)`,
- opacity: 0
- },
- '100%': {
- transform: `translate3d(0, 0, 0)`,
- opacity: 1
- }
- });
- return {
- [componentCls]: {
- [`&${componentCls}-top, &${componentCls}-bottom`]: {
- marginInline: 0,
- [noticeCls]: {
- marginInline: 'auto auto'
- }
- },
- [`&${componentCls}-top`]: {
- [`${componentCls}-fade-enter${componentCls}-fade-enter-active, ${componentCls}-fade-appear${componentCls}-fade-appear-active`]: {
- animationName: topFadeIn
- }
- },
- [`&${componentCls}-bottom`]: {
- [`${componentCls}-fade-enter${componentCls}-fade-enter-active, ${componentCls}-fade-appear${componentCls}-fade-appear-active`]: {
- animationName: bottomFadeIn
- }
- },
- [`&${componentCls}-topRight, &${componentCls}-bottomRight`]: {
- [`${componentCls}-fade-enter${componentCls}-fade-enter-active, ${componentCls}-fade-appear${componentCls}-fade-appear-active`]: {
- animationName: rightFadeIn
- }
- },
- [`&${componentCls}-topLeft, &${componentCls}-bottomLeft`]: {
- marginRight: {
- value: 0,
- _skip_check_: true
- },
- marginLeft: {
- value: notificationMarginEdge,
- _skip_check_: true
- },
- [noticeCls]: {
- marginInlineEnd: 'auto',
- marginInlineStart: 0
- },
- [`${componentCls}-fade-enter${componentCls}-fade-enter-active, ${componentCls}-fade-appear${componentCls}-fade-appear-active`]: {
- animationName: leftFadeIn
- }
- }
- }
- };
- };
- var _default = exports.default = genNotificationPlacementStyle;
|