orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
13 lines (12 loc) • 1.8 kB
JavaScript
import { keyframes } from "styled-components";
export const crossFadeIn = /*#__PURE__*/keyframes(["0%{opacity:0;}75%{opacity:0;}100%{opacity:1;}"]);
export const crossFadeOut = /*#__PURE__*/keyframes(["0%{opacity:1;}75%{opacity:0;}100%{opacity:0;}"]);
const DOT_OFFSET = 7; // Match index.js DOT_OFFSET
export const beforeDotCollapsing = /*#__PURE__*/keyframes(["0%{transform:translateY(-", "px);}50%{transform:translateY(0);}100%{transform:translateY(0);}"], DOT_OFFSET);
export const beforeDotExpanding = /*#__PURE__*/keyframes(["0%{transform:translateY(0);}50%{transform:translateY(0);}100%{transform:translateY(-", "px);}"], DOT_OFFSET);
export const afterDotCollapsing = /*#__PURE__*/keyframes(["0%{transform:translateY(", "px);}50%{transform:translateY(0);}100%{transform:translateY(0);}"], DOT_OFFSET);
export const afterDotExpanding = /*#__PURE__*/keyframes(["0%{transform:translateY(0);}50%{transform:translateY(0);}100%{transform:translateY(", "px);}"], DOT_OFFSET);
export const beforeCrossExpanding = /*#__PURE__*/keyframes(["0%{height:4px;transform:rotate(-45deg);}50%{height:4px;transform:rotate(-45deg);}100%{height:18px;transform:translate(0,-7px) rotate(-45deg);}"]);
export const beforeCrossCollapsing = /*#__PURE__*/keyframes(["0%{height:18px;transform:translate(0,-7px) rotate(-45deg);}50%{height:4px;transform:rotate(-45deg);}100%{height:4px;transform:rotate(-45deg);}"]);
export const afterCrossExpanding = /*#__PURE__*/keyframes(["0%{height:4px;transform:rotate(45deg);}50%{height:4px;transform:rotate(45deg);}100%{height:18px;transform:translate(0,-7px) rotate(45deg);}"]);
export const afterCrossCollapsing = /*#__PURE__*/keyframes(["0%{height:18px;transform:translate(0,-7px) rotate(45deg);}50%{height:4px;transform:rotate(45deg);}100%{height:4px;transform:rotate(45deg);}"]);