@elastic/eui
Version:
Elastic UI Component Library
57 lines (56 loc) • 3.02 kB
JavaScript
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import { css } from '@emotion/react';
import { euiCanAnimate, logicalCSS } from '../../../global_styling';
import { LEVEL_MAIN, STAGE_ACTIVE, STAGE_BACKGROUNDED, STAGE_BACKGROUNDING, STAGE_CLOSING, STAGE_INACTIVE, STAGE_OPENING, STAGE_RETURNING } from './const';
import { DEFAULT_SIDE } from '../const';
var _ref = process.env.NODE_ENV === "production" ? {
name: "hklg7q-managedFlyout",
styles: "perspective:1000px;transform-style:preserve-3d;label:managedFlyout;"
} : {
name: "hklg7q-managedFlyout",
styles: "perspective:1000px;transform-style:preserve-3d;label:managedFlyout;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
/**
* Emotion styles for managed flyouts.
* Provides base 3D context and animations tied to managed flyout stages
* via data attributes.
*/
export var euiManagedFlyoutStyles = function euiManagedFlyoutStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme;
return {
stage: function stage(activeStage) {
var side = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_SIDE;
var level = arguments.length > 2 ? arguments[2] : undefined;
var noTransition = /*#__PURE__*/css(euiCanAnimate, "{animation:none;opacity:1;};label:noTransition;");
var activeFlyout = /*#__PURE__*/css("z-index:", parseInt(euiTheme.levels.flyout) + 1, ";pointer-events:auto;;label:activeFlyout;");
var inactiveFlyout = /*#__PURE__*/css(side === 'left' ? logicalCSS('right', '100vw') : logicalCSS('left', '100vw'), " transform:translateX(", side === 'left' ? 'calc(-100vw - 100%)' : 'calc(100vw + 100%)', ");;label:inactiveFlyout;");
switch (activeStage) {
case STAGE_OPENING:
// Apply a higher z-index to opening main flyouts for seamless
// transitions from previously active main flyouts
return [level === LEVEL_MAIN && activeFlyout];
case STAGE_ACTIVE:
return [activeFlyout, noTransition];
case STAGE_BACKGROUNDING:
return [inactiveFlyout, noTransition];
case STAGE_BACKGROUNDED:
return [inactiveFlyout, noTransition];
case STAGE_RETURNING:
return [activeFlyout, noTransition];
case STAGE_INACTIVE:
return [inactiveFlyout, noTransition];
case STAGE_CLOSING:
return [inactiveFlyout, noTransition];
}
},
managedFlyout: _ref
};
};