@fluentui/react-northstar
Version:
A themable React component library.
34 lines (33 loc) • 2.21 kB
JavaScript
import { pulse, wave } from './keyframes';
import { skeletonLineClassName } from '../../../../../components/Skeleton/SkeletonLine';
import { skeletonShapeClassName } from '../../../../../components/Skeleton/SkeletonShape';
import { skeletonButtonClassName } from '../../../../../components/Skeleton/SkeletonButton';
import { skeletonInputClassName } from '../../../../../components/Skeleton/SkeletonInput';
import { skeletonAvatarClassName } from '../../../../../components/Skeleton/SkeletonAvatar';
import { skeletonTextClassName } from '../../../../../components/Skeleton/SkeletonText';
var waveStyles = function waveStyles(primaryColor, secondoryColor) {
return {
position: 'static',
overflow: 'hidden',
animationDuration: '4.5s',
animationName: wave,
animationIterationCount: 'infinite',
backgroundColor: '#FFFFFF',
animationTimingFunction: 'linear',
backgroundImage: "linear-gradient(to right, " + secondoryColor + " 0%, " + primaryColor + " 20%, " + secondoryColor + " 40%)",
backgroundSize: '1200px 100%'
};
};
var pulseStyles = {
animationName: pulse,
animationDuration: '1.5s',
animationIterationCount: 'infinite'
};
export var getAnimations = function getAnimations(primaryColor, secondoryColor) {
var _pulse, _wave;
return {
pulse: (_pulse = {}, _pulse["& ." + skeletonLineClassName] = pulseStyles, _pulse["& ." + skeletonShapeClassName] = pulseStyles, _pulse["& ." + skeletonButtonClassName] = pulseStyles, _pulse["& ." + skeletonAvatarClassName] = pulseStyles, _pulse["& ." + skeletonInputClassName] = pulseStyles, _pulse["& ." + skeletonTextClassName] = pulseStyles, _pulse),
wave: (_wave = {}, _wave["& ." + skeletonLineClassName] = waveStyles(primaryColor, secondoryColor), _wave["& ." + skeletonShapeClassName] = waveStyles(primaryColor, secondoryColor), _wave["& ." + skeletonButtonClassName] = waveStyles(primaryColor, secondoryColor), _wave["& ." + skeletonAvatarClassName] = waveStyles(primaryColor, secondoryColor), _wave["& ." + skeletonInputClassName] = waveStyles(primaryColor, secondoryColor), _wave["& ." + skeletonTextClassName] = waveStyles(primaryColor, secondoryColor), _wave)
};
};
//# sourceMappingURL=animations.js.map