@razorpay/blade
Version:
The Design System that powers Razorpay
37 lines (33 loc) • 2.1 kB
JavaScript
import styled, { keyframes, css } from 'styled-components';
import '../Box/BaseBox/index.js';
import '../../utils/index.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { castWebType } from '../../utils/platform/castUtils.js';
import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.web.js';
/* eslint-disable @typescript-eslint/restrict-plus-operands */
var pulseKeyframes = function pulseKeyframes(_ref) {
var theme = _ref.theme;
return keyframes(["0%{background-color:", ";}25%{background-color:", ";}100%{background-color:", ";}"], theme.colors.interactive.background.gray["default"], theme.colors.interactive.background.gray["default"], theme.colors.interactive.background.gray.highlighted);
};
var fadeInKeyframes = function fadeInKeyframes() {
return keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
};
var PulseAnimation = /*#__PURE__*/styled(BaseBox).withConfig({
displayName: "PulseAnimationweb__PulseAnimation",
componentId: "sc-184soy3-0"
})(function (_ref2) {
var theme = _ref2.theme;
// We need to delay the animation in between keyframes
// Since we also offset the animation to have 300ms delay in 25% keyframe
// https://css-tricks.com/css-keyframe-animation-delay-iterations/
var durationPluseOff = theme.motion.duration.xmoderate;
var durationPulseOn = theme.motion.duration['2xgentle'];
var totalDuration = castWebType(makeMotionTime(durationPulseOn + durationPluseOff));
var duration = castWebType(makeMotionTime(theme.motion.duration['2xgentle']));
var easing = castWebType(theme.motion.easing.standard);
return css(["opacity:0;background-color:", ";animation-name:", ",", ";animation-duration:", ",", ";animation-delay:0ms,", ";animation-timing-function:", ",", ";animation-iteration-count:1,infinite;animation-direction:normal,alternate;animation-fill-mode:forwards;"], theme.colors.interactive.background.gray["default"], fadeInKeyframes(), pulseKeyframes({
theme: theme
}), duration, totalDuration, duration, easing, easing);
});
export { PulseAnimation };
//# sourceMappingURL=PulseAnimation.web.js.map