@elastic/eui
Version:
Elastic UI Component Library
111 lines (108 loc) • 7.61 kB
JavaScript
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
var _templateObject, _templateObject2;
/*
* 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, keyframes } from '@emotion/react';
import { euiCanAnimate, euiMaxBreakpoint, euiMinBreakpoint, logicalCSS, mathWithUnits } from '../../global_styling';
import { euiShadowXLarge } from '../../themes/amsterdam/global_styling/mixins';
import { transparentize } from '../../services/color';
import { euiFormVariables } from '../form/form.styles';
export var euiFlyoutSlideInRight = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0% {\n opacity: 0;\n transform: translateX(100%);\n }\n 75% {\n opacity: 1;\n transform: translateX(0%);\n }\n"])));
export var euiFlyoutSlideInLeft = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n 0% {\n opacity: 0;\n transform: translateX(-100%);\n }\n 75% {\n opacity: 1;\n transform: translateX(0%);\n }\n"])));
export var euiFlyoutCloseButtonStyles = function euiFlyoutCloseButtonStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme;
return {
euiFlyout__closeButton: /*#__PURE__*/css("position:absolute;", logicalCSS('right', euiTheme.size.s), " ", logicalCSS('top', euiTheme.size.s), " z-index:3;;label:euiFlyout__closeButton;"),
inside: /*#__PURE__*/css("background-color:", transparentize(euiTheme.colors.emptyShade, 0.9), ";;label:inside;"),
outside: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext), "animation:none!important;;label:outside;"),
outsideSide: {
// `transforms` pull in close buttons a little
// `!important` is necessary here to override the hover/focus transitions of buttons
right: /*#__PURE__*/css(logicalCSS('left', 0), " ", euiMaxBreakpoint(euiThemeContext, 'm'), "{transform:translateX(calc(-100% - ", euiTheme.size.xs, "))!important;}", euiMinBreakpoint(euiThemeContext, 'm'), "{transform:translateX(calc(-100% - ", euiTheme.size.l, "))!important;};label:right;"),
left: /*#__PURE__*/css(logicalCSS('right', 0), " ", euiMaxBreakpoint(euiThemeContext, 'm'), "{transform:translateX(calc(100% + ", euiTheme.size.xs, "))!important;}", euiMinBreakpoint(euiThemeContext, 'm'), "{transform:translateX(calc(100% + ", euiTheme.size.l, "))!important;};label:left;")
}
};
};
export var euiFlyoutStyles = function euiFlyoutStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme;
return {
euiFlyout: /*#__PURE__*/css("position:fixed;", logicalCSS('top', 0), " ", logicalCSS('bottom', 0), " ", logicalCSS('height', '100%'), " z-index:", euiTheme.levels.flyout, ";background:", euiTheme.colors.emptyShade, ";display:flex;flex-direction:column;align-items:stretch;&:focus{outline:none;}", euiMaxBreakpoint(euiThemeContext, 'm'), "{", logicalCSS('max-width', '90vw !important'), ";};label:euiFlyout;"),
// Flyout sizes
s: /*#__PURE__*/css(composeFlyoutSizing(euiThemeContext, 's'), ";;label:s;"),
m: /*#__PURE__*/css(composeFlyoutSizing(euiThemeContext, 'm'), ";;label:m;"),
l: /*#__PURE__*/css(composeFlyoutSizing(euiThemeContext, 'l'), ";;label:l;"),
noMaxWidth: /*#__PURE__*/css(logicalCSS('max-width', 'none'), ";;label:noMaxWidth;"),
// Side
right: /*#__PURE__*/css("clip-path:polygon(-50% 0, 100% 0, 100% 100%, -50% 100%);", logicalCSS('right', 0), " ", euiCanAnimate, "{animation:", euiFlyoutSlideInRight, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";};label:right;"),
// Left-side flyouts should only be used for navigation
left: /*#__PURE__*/css(logicalCSS('left', 0), " clip-path:polygon(0 0, 150% 0, 150% 100%, 0 100%);", euiCanAnimate, "{animation:", euiFlyoutSlideInLeft, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";};label:left;"),
// Type
overlay: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext), ";;label:overlay;"),
push: /*#__PURE__*/css("clip-path:none;animation-duration:0s!important;z-index:", Number(euiTheme.levels.flyout) - 1, ";;label:push;"),
pushSide: {
right: /*#__PURE__*/css(logicalCSS('border-left', euiTheme.border.thick), ";;label:right;"),
left: /*#__PURE__*/css(logicalCSS('border-right', euiTheme.border.thick), ";;label:left;")
},
// Padding
paddingSizes: {
none: /*#__PURE__*/css(composeFlyoutPadding(euiThemeContext, 'none'), ";;label:none;"),
s: /*#__PURE__*/css(composeFlyoutPadding(euiThemeContext, 's'), ";;label:s;"),
m: /*#__PURE__*/css(composeFlyoutPadding(euiThemeContext, 'm'), ";;label:m;"),
l: /*#__PURE__*/css(composeFlyoutPadding(euiThemeContext, 'l'), ";;label:l;")
}
};
};
var composeFlyoutSizing = function composeFlyoutSizing(euiThemeContext, size) {
var euiTheme = euiThemeContext.euiTheme;
var form = euiFormVariables(euiThemeContext);
// 1. Calculating the minimum width based on the screen takeover breakpoint
var flyoutSizes = {
s: {
min: "".concat(Math.round(euiTheme.breakpoint.m * 0.5), "px"),
// 1.
width: '25vw',
max: "".concat(Math.round(euiTheme.breakpoint.s * 0.7), "px")
},
m: {
// Calculated for forms plus padding
min: "".concat(mathWithUnits(form.maxWidth, function (x) {
return x + 24;
})),
width: '50vw',
max: "".concat(euiTheme.breakpoint.m, "px")
},
l: {
min: "".concat(Math.round(euiTheme.breakpoint.m * 0.9), "px"),
// 1.
width: '75vw',
max: "".concat(euiTheme.breakpoint.l, "px")
}
};
return "\n ".concat(logicalCSS('max-width', flyoutSizes[size].max), "\n\n ").concat(euiMaxBreakpoint(euiThemeContext, 'm'), " {\n ").concat(logicalCSS('min-width', 0), "\n ").concat(logicalCSS('width', flyoutSizes[size].min), "\n }\n ").concat(euiMinBreakpoint(euiThemeContext, 'm'), " {\n ").concat(logicalCSS('min-width', flyoutSizes[size].min), "\n ").concat(logicalCSS('width', flyoutSizes[size].width), "\n }\n ");
};
var composeFlyoutPadding = function composeFlyoutPadding(euiThemeContext, paddingSize) {
var euiTheme = euiThemeContext.euiTheme;
var paddingModifierMap = {
none: 0,
s: euiTheme.size.s,
m: euiTheme.size.base,
l: euiTheme.size.l
};
// Footer padding
var footerPaddingSizes = {
none: 0,
s: euiTheme.size.s,
m: "".concat(mathWithUnits(euiTheme.size.base, function (x) {
return x * 0.75;
}), " ").concat(euiTheme.size.base, ";"),
l: "".concat(mathWithUnits(euiTheme.size.l, function (x) {
return x / 1.5;
}), " ").concat(euiTheme.size.l, ";")
};
return "\n .euiFlyoutHeader {\n ".concat(logicalCSS('padding-horizontal', paddingModifierMap[paddingSize]), "\n ").concat(logicalCSS('padding-top', paddingModifierMap[paddingSize]), "\n }\n\n [class*='euiFlyoutHeader-hasBorder'] {\n ").concat(logicalCSS('padding-bottom', paddingModifierMap[paddingSize]), "\n }\n\n .euiFlyoutBody__overflowContent {\n padding: ").concat(paddingModifierMap[paddingSize], ";\n }\n\n .euiFlyoutBody__banner .euiCallOut {\n ").concat(logicalCSS('padding-horizontal', paddingModifierMap[paddingSize]), "\n }\n\n .euiFlyoutFooter {\n padding: ").concat(footerPaddingSizes[paddingSize], ";\n }\n ");
};