@elastic/eui/test-env/components/toast/toast.styles.js

Elastic UI Component Library

"use strict";

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