@elastic/eui
Version:
Elastic UI Component Library
58 lines (57 loc) • 4.74 kB
JavaScript
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
var _templateObject;
/*
* 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, euiShadowLarge, mathWithUnits } from '@elastic/eui-theme-common';
import { euiTextBreakWord, logicalCSS } from '../../global_styling';
import { preventForcedColors } from '../../global_styling/functions/high_contrast';
import { euiTitle } from '../title/title.styles';
import { euiPanelBorderStyles } from '../panel/panel.styles';
var TEXT_MAX_WIDTH = 1200;
var CONTAINER_NAME = 'euiToast';
var CQC_BREAKPOINT_NARROWEST = '(max-width: 320px)';
var euiToastAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n from {\n transform: scaleX(1);\n }\n to {\n transform: scaleX(0);\n }\n"])));
export var euiToastStyles = function euiToastStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme;
var highlightSize = mathWithUnits([euiTheme.border.width.thin, euiTheme.border.width.thick], function (x, y) {
return x + y;
});
var paddingTop = mathWithUnits([euiTheme.size.base, highlightSize], function (x, y) {
return x + y;
});
var offsetTop = mathWithUnits([euiTheme.size.s, highlightSize], function (x, y) {
return x + y;
});
return {
// Base
euiToast: /*#__PURE__*/css("container-type:inline-size;container-name:", CONTAINER_NAME, ";position:relative;overflow:hidden;border-radius:", euiTheme.border.radius.medium, ";", euiShadowLarge(euiThemeContext, {
borderAllInHighContrastMode: true
}), " ", logicalCSS('padding-top', paddingTop), " ", logicalCSS('padding-bottom', euiTheme.size.base), " ", logicalCSS('padding-horizontal', euiTheme.size.base), " background-color:", euiTheme.colors.backgroundBasePlain, ";", logicalCSS('width', '100%'), " ", euiTextBreakWord(), euiPanelBorderStyles(euiThemeContext), ";;label:euiToast;"),
decor: /*#__PURE__*/css("position:absolute;inset-block-start:0;inset-inline:0;", logicalCSS('height', highlightSize), " background-color:var(--euiToastTypeBackgroundColor);", preventForcedColors(euiThemeContext), " &::before{content:'';position:absolute;z-index:", euiTheme.levels.content, ";inset-block-start:0;inset-inline:0;", logicalCSS('height', '100%'), " background-color:var(--euiToastTypeColor);pointer-events:none;", preventForcedColors(euiThemeContext), " transform-origin:left center;[dir='rtl'] &{transform-origin:right center;}};label:decor;"),
// handles content + actions layout
wrapper: /*#__PURE__*/css("display:flex;flex-direction:column;gap:", euiTheme.size.m, ";inline-size:100%;;label:wrapper;"),
// handles icon + text layout
body: /*#__PURE__*/css("display:flex;flex-direction:row;align-self:center;gap:", euiTheme.size.m, ";inline-size:100%;;label:body;"),
// handles text layout
content: /*#__PURE__*/css("display:flex;flex-direction:column;gap:", euiTheme.size.xs, ";align-self:center;inline-size:100%;max-inline-size:", TEXT_MAX_WIDTH, "px;.euiToast__text+.euiToast__additionalContent{", logicalCSS('margin-top', euiTheme.size.s), ";};label:content;"),
text: /*#__PURE__*/css("display:flex;flex-direction:column;gap:", euiTheme.size.xs, ";;label:text;"),
icon: /*#__PURE__*/css("grid-area:icon;position:relative;", logicalCSS('margin-vertical', euiTheme.size.xxs), ";;label:icon;"),
actions: /*#__PURE__*/css("grid-area:actions;display:flex;gap:", euiTheme.size.s, ";", logicalCSS('margin-left', euiTheme.size.xl), "@container ", CONTAINER_NAME, " ", CQC_BREAKPOINT_NARROWEST, "{flex-wrap:wrap;>*{inline-size:100%;}};label:actions;"),
dismissButton: /*#__PURE__*/css("position:absolute;", logicalCSS('top', offsetTop), ";", logicalCSS('right', euiTheme.size.s), ";;label:dismissButton;"),
hasAnimation: /*#__PURE__*/css("&::before{", euiCanAnimate, "{animation:", euiToastAnimation, " var(--euiToastAnimationMs) linear forwards;}};label:hasAnimation;")
};
};
export var euiToastHeaderStyles = function euiToastHeaderStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme;
return {
// Base
euiToastHeader: /*#__PURE__*/css("display:flex;align-items:baseline;", euiTitle(euiThemeContext, 'xs'), " font-weight:", euiTheme.font.weight.bold, ";;label:euiToastHeader;"),
hasDismissButton: /*#__PURE__*/css("padding-inline-end:", euiTheme.size.l, ";;label:hasDismissButton;")
};
};