@jengaui/utils
Version:
Jenga UI Utils component in React
41 lines (37 loc) • 2.09 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var o={initial:"top center",top:"bottom center",right:"center left",left:"center right",bottom:"top center"},n={initial:"translate(0px, calc(-1 * var(--overlay-offset)))",top:"translate(0px, calc(1 * var(--overlay-offset)))",right:"translate(calc(-1 * var(--overlay-offset)), 0px)",left:"translate(calc(1 * var(--overlay-offset)), 0px)",bottom:"translate(0px, calc(-1 * var(--overlay-offset)))"},i=({suffix:r="",placement:a="initial",minScale:e=.8,minOffset:t="8px"}={})=>`
&${r} {
transform: var(--overlay-position);
transform-origin: ${o[a]};
--overlay-offset: ${t};
--overlay-hidden-x-scale: ${a==="top"||a==="bottom"||a==="initial"?"1":e};
--overlay-hidden-y-scale: ${a==="left"||a==="right"?"1":e};
--overlay-translate-visible: translate(0px, 0px);
--overlay-translate-hidden: ${n[a]};
--overlay-transition: 180ms;
--overlay-hidden-scale: scale(var(--overlay-hidden-x-scale), var(--overlay-hidden-y-scale));
--overlay-normal-scale: scale(1, 1);
}
&.jenga-overlay-transition-enter${r} {
opacity: 0;
transform: var(--overlay-translate-hidden) var(--overlay-hidden-scale);
}
&.jenga-overlay-transition-enter-active${r} {
opacity: 1;
transform: var(--overlay-translate-visible) var(--overlay-normal-scale);
transition: transform var(--overlay-transition) cubic-bezier(0, .66, 0, .66), opacity var(--overlay-transition) cubic-bezier(0, .66, 0, .66);
pointer-events: none;
}
&.jenga-overlay-transition-exit${r} {
opacity: 1;
transform: var(--overlay-translate-visible) var(--overlay-normal-scale);
}
&.jenga-overlay-transition-exit-active${r} {
opacity: 0;
transform: var(--overlay-translate-hidden) var(--overlay-hidden-scale);
pointer-events: none;
transition: transform var(--overlay-transition) cubic-bezier(.66, 0, .66, 0), opacity var(--overlay-transition) cubic-bezier(.66, 0, .66, 0);
}
`;
exports.getOverlayTransitionCSS = i;