@elastic/eui
Version:
Elastic UI Component Library
59 lines (57 loc) • 5.38 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.euiCallOutStyles = exports.euiCallOutHeaderStyles = void 0;
var _react = require("@emotion/react");
var _global_styling = require("../../global_styling");
/*
* 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.
*/
/** Maximum reading width for `text` and `children` slots. */
var TEXT_MAX_WIDTH = 1200;
var euiCallOutStyles = exports.euiCallOutStyles = function euiCallOutStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme;
var paddingSizes = {
s: euiTheme.size.m,
m: euiTheme.size.base
};
var borderRadius = euiTheme.border.radius.small;
var highlightSize = (0, _global_styling.mathWithUnits)([euiTheme.border.width.thin, euiTheme.border.width.thick], function (x, y) {
return x + y;
});
var highlightOffset = euiTheme.border.width.thin;
var highlightSizeOffset = (0, _global_styling.mathWithUnits)([highlightOffset], function (x) {
return x * 2;
});
var separatorSize = (0, _global_styling.mathWithUnits)([euiTheme.size.s, euiTheme.size.xxs], function (x, y) {
return x + y;
});
return {
euiCallOut: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;max-inline-size:100%;align-items:center;border:", euiTheme.border.width.thin, " solid;border-radius:", borderRadius, ";&:focus{outline-offset:2px;}&::before{content:'';position:absolute;inset-block-start:-", euiTheme.border.width.thin, ";inset-inline-start:-", euiTheme.border.width.thin, ";block-size:calc(100% + ", highlightSizeOffset, ");border-inline-start:", highlightSize, " solid var(--euiCallOutTypeColor);border-start-start-radius:", borderRadius, ";border-end-start-radius:", borderRadius, ";pointer-events:none;", (0, _global_styling.preventForcedColors)(euiThemeContext), ";}&:where([data-size='s']){", (0, _global_styling.logicalShorthandCSS)('padding', "".concat(paddingSizes.s, " ").concat(paddingSizes.m)), ";}&:where([data-size='m']){padding:", paddingSizes.m, ";};label:euiCallOut;"),
// handles content + actions layout
wrapper: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;inline-size:100%;&:where([data-size='s'] &){gap:", euiTheme.size.s, ";}&:where([data-size='m'] &){gap:", euiTheme.size.m, ";}&:where([data-layout='wide'] &){flex-direction:row;gap:", euiTheme.size.xxl, ";};label:wrapper;"),
// handles icon + text layout
body: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:row;align-self:center;inline-size:100%;&:where([data-size='s'] &){gap:", euiTheme.size.s, ";}&:where([data-size='m'] &){gap:", euiTheme.size.m, ";};label:body;"),
// handles text layout
content: /*#__PURE__*/(0, _react.css)("align-self:center;inline-size:100%;max-inline-size:", TEXT_MAX_WIDTH, "px;&:where([data-size='s'] &){gap:", euiTheme.size.s, ";block-size:min-content;>.euiTitle{display:inline;", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.xxs), ";}>.euiCallOut__text{display:inline;*{display:inline;}&:where(:not(:first-child)){&::before{content:'\xB7';display:inline-block;inline-size:", separatorSize, ";text-align:center;color:", euiTheme.colors.textHeading, ";}}}.euiCallOut__additionalContent:not(:first-child){", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.xs), ";}}&:where([data-size='m'] &){display:flex;flex-direction:column;gap:", euiTheme.size.xs, ";.euiCallOut__text+.euiCallOut__additionalContent{", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.s), ";}};label:content;"),
hasDismissButton: /*#__PURE__*/(0, _react.css)("&:where([data-size]){padding-inline-end:", euiTheme.size.xxl, ";};label:hasDismissButton;"),
dismissButton: {
euiCallOut__dismissButton: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('top', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('right', euiTheme.size.s), ";;label:euiCallOut__dismissButton;")
},
icon: /*#__PURE__*/(0, _react.css)("position:relative;", (0, _global_styling.logicalCSS)('margin-vertical', euiTheme.size.xxs), ";;label:icon;"),
actions: /*#__PURE__*/(0, _react.css)("display:flex;gap:", euiTheme.size.s, ";&:where([data-size='s'] &){", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.l), ";}&:where([data-size='m'] &){", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xl), ";}&:where([data-layout='superNarrow'] &){flex-wrap:wrap;*:has(.euiCallOutAction),.euiCallOutAction{inline-size:100%;}}&:where([data-layout='wide'] &){", (0, _global_styling.logicalCSS)('margin-left', '0'), " align-self:center;flex-shrink:0;flex-direction:row-reverse;};label:actions;")
};
};
var euiCallOutHeaderStyles = exports.euiCallOutHeaderStyles = function euiCallOutHeaderStyles(_ref) {
var euiTheme = _ref.euiTheme;
return {
euiCallOutHeader: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.bold, ";", (0, _global_styling.logicalCSS)('margin-bottom', '0 !important'
// In case it's nested inside EuiText
), "&&{color:", euiTheme.colors.textHeading, ";};label:euiCallOutHeader;")
};
};