@elastic/eui
Version:
Elastic UI Component Library
59 lines (56 loc) • 4.22 kB
JavaScript
/*
* 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 { euiShadow, euiShadowFlat, euiShadowMedium } from '../../../themes/amsterdam/global_styling/mixins';
import { getShadowColor } from '../../../themes/amsterdam/global_styling/functions';
import { euiCanAnimate, logicalCSS } from '../../../global_styling';
export var openAnimationTiming = 'slow';
var translateDistance = 's';
/**
* 1. Can expand further, but it looks weird if it's smaller than the originating button.
* 2. Animation happens on the panel. But don't animate position when using the attached mode like for inputs
* 3. Make sure the panel stays within the window.
*/
export var euiPopoverPanelStyles = function euiPopoverPanelStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme,
colorMode = euiThemeContext.colorMode;
return {
// Base
euiPopover__panel: /*#__PURE__*/css("position:absolute;", logicalCSS('min-width', "".concat(euiTheme.base * 7, "px")), logicalCSS('max-width', "calc(100vw - ".concat(euiTheme.size.xl, ")")), "backface-visibility:hidden;pointer-events:none;opacity:0;transform:translateY(0) translateX(0) translateZ(0);", euiShadowMedium(euiThemeContext, {
property: 'filter'
}), " &:focus{outline-offset:0;};label:euiPopover__panel;"),
// Is visible / open
isOpen: /*#__PURE__*/css("opacity:1;pointer-events:auto;", euiCanAnimate, "{transition:opacity ", euiTheme.animation.bounce, " ", euiTheme.animation[openAnimationTiming], ",transform ", euiTheme.animation.bounce, " calc(", euiTheme.animation[openAnimationTiming], " + 100ms);};label:isOpen;"),
// Positions
top: /*#__PURE__*/css("transform:translateY(", euiTheme.size[translateDistance], ") translateZ(0);;label:top;"),
bottom: /*#__PURE__*/css("transform:translateY(-", euiTheme.size[translateDistance], ") translateZ(0);;label:bottom;"),
left: /*#__PURE__*/css("transform:translateX(", euiTheme.size[translateDistance], ") translateZ(0);;label:left;"),
right: /*#__PURE__*/css("transform:translateX(-", euiTheme.size[translateDistance], ") translateZ(0);;label:right;"),
// Attached version overrides
attached: {
isOpen: /*#__PURE__*/css("filter:none;", euiCanAnimate, "{transition:opacity ", euiTheme.animation.bounce, " ", euiTheme.animation[openAnimationTiming], ";};label:isOpen;"),
top: /*#__PURE__*/css(euiShadowFlat(euiThemeContext), ";;label:top;"),
bottom: /*#__PURE__*/css(euiShadow(euiThemeContext, 'm'), ";;label:bottom;"),
// Satisfies TS
left: /*#__PURE__*/css(";label:left;"),
right: /*#__PURE__*/css(";label:right;")
},
// Overrides for drag & drop contexts within popovers. This is required because
// the fixed positions of drag and drop don't work inside of transformed elements
hasDragDrop: {
hasDragDrop: /*#__PURE__*/css("transform:none;filter:none;", euiShadowMedium(euiThemeContext, {
property: 'box-shadow'
}), ";;label:hasDragDrop;"),
// The offset transforms must be recreated in margins
top: /*#__PURE__*/css("margin-block-start:", euiTheme.size[translateDistance], ";;label:top;"),
bottom: /*#__PURE__*/css("margin-block-start:-", euiTheme.size[translateDistance], ";.euiPopover__arrow{filter:drop-shadow(\n 0 -6px 6px ", getShadowColor(euiTheme.colors.shadow, 0.12, colorMode), "\n );};label:bottom;"),
left: /*#__PURE__*/css("margin-inline-start:", euiTheme.size[translateDistance], ";.euiPopover__arrow{filter:drop-shadow(\n 6px 0 6px ", getShadowColor(euiTheme.colors.shadow, 0.12, colorMode), "\n );};label:left;"),
right: /*#__PURE__*/css("margin-inline-start:-", euiTheme.size[translateDistance], ";.euiPopover__arrow{filter:drop-shadow(\n -6px 0 6px ", getShadowColor(euiTheme.colors.shadow, 0.12, colorMode), "\n );};label:right;")
}
};
};