@elastic/eui
Version:
Elastic UI Component Library
51 lines (50 loc) • 4.16 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.euiContextMenuPanelStyles = void 0;
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _react = require("@emotion/react");
var _global_styling = require("../../global_styling");
var _title = require("../title/title.styles");
var _list_item_layout = require("../list_item_layout/_list_item_layout.styles");
var _context_menu = require("./context_menu.styles");
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
/*
* 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.
*/
var euiContextMenuPanelStyles = exports.euiContextMenuPanelStyles = function euiContextMenuPanelStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme;
var _euiContextMenuVariab = (0, _context_menu.euiContextMenuVariables)(euiThemeContext),
panelWidth = _euiContextMenuVariab.panelWidth;
var _euiListItemVariables = (0, _list_item_layout.euiListItemVariables)(euiThemeContext),
spacing = _euiListItemVariables.spacing,
textPadding = _euiListItemVariables.textPadding;
var animations = {
transitioning: /*#__PURE__*/(0, _react.css)("pointer-events:none;animation-fill-mode:forwards;animation-duration:", euiTheme.animation.normal, ";animation-timing-function:", euiTheme.animation.resistance, ";", _global_styling.euiCantAnimate, "{animation-duration:0s;};label:transitioning;"),
inLeft: (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n 0% { transform: translateX(", "); }\n 100% { transform: translateX(0); }\n "])), panelWidth),
outLeft: (0, _react.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n 0% { transform: translateX(0); }\n 100% { transform: translateX(-", "); }\n "])), panelWidth),
inRight: (0, _react.keyframes)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n 0% { transform: translateX(-", "); }\n 100% { transform: translateX(0); }\n "])), panelWidth),
outRight: (0, _react.keyframes)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n 0% { transform: translateX(0); }\n 100% { transform: translateX(", "); }\n "])), panelWidth)
};
return {
euiContextMenuPanel: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), " padding:", euiTheme.size.s, ";visibility:visible;outline-offset:-", euiTheme.focus.width, ";&:focus{outline:none;};label:euiContextMenuPanel;"),
// Panel animations
next: {
in: /*#__PURE__*/(0, _react.css)(animations.transitioning, " animation-name:", animations.inLeft, ";;label:in;"),
out: /*#__PURE__*/(0, _react.css)(animations.transitioning, " animation-name:", animations.outLeft, ";;label:out;")
},
previous: {
in: /*#__PURE__*/(0, _react.css)(animations.transitioning, " animation-name:", animations.inRight, ";;label:in;"),
out: /*#__PURE__*/(0, _react.css)(animations.transitioning, " animation-name:", animations.outRight, ";;label:out;")
},
// Children
euiContextMenuPanel__title: /*#__PURE__*/(0, _react.css)("display:flex;align-items:center;gap:", spacing.horizontal, ";", (0, _title.euiTitle)(euiThemeContext, 'xxs'), " ", (0, _global_styling.logicalCSS)('padding-horizontal', spacing.horizontal), ";;label:euiContextMenuPanel__title;"),
euiContextMenuPanel__label: /*#__PURE__*/(0, _react.css)("flex-grow:1;overflow:hidden;", (0, _global_styling.logicalCSS)('padding-horizontal', textPadding.horizontal), " ", (0, _global_styling.logicalCSS)('padding-vertical', textPadding.vertical), ";;label:euiContextMenuPanel__label;")
};
};