@elastic/eui
Version:
Elastic UI Component Library
53 lines (52 loc) • 4.82 kB
JavaScript
/*
* 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 } from '@emotion/react';
import { logicalCSS, logicalShorthandCSS, mathWithUnits, preventForcedColors } from '../../global_styling';
/** Maximum reading width for `text` and `children` slots. */
var TEXT_MAX_WIDTH = 1200;
export var 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 = mathWithUnits([euiTheme.border.width.thin, euiTheme.border.width.thick], function (x, y) {
return x + y;
});
var highlightOffset = euiTheme.border.width.thin;
var highlightSizeOffset = mathWithUnits([highlightOffset], function (x) {
return x * 2;
});
var separatorSize = mathWithUnits([euiTheme.size.s, euiTheme.size.xxs], function (x, y) {
return x + y;
});
return {
euiCallOut: /*#__PURE__*/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;", preventForcedColors(euiThemeContext), ";}&:where([data-size='s']){", logicalShorthandCSS('padding', "".concat(paddingSizes.s, " ").concat(paddingSizes.m)), ";}&:where([data-size='m']){padding:", paddingSizes.m, ";};label:euiCallOut;"),
// handles content + actions layout
wrapper: /*#__PURE__*/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__*/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__*/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;", 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){", logicalCSS('margin-top', euiTheme.size.xs), ";}}&:where([data-size='m'] &){display:flex;flex-direction:column;gap:", euiTheme.size.xs, ";.euiCallOut__text+.euiCallOut__additionalContent{", logicalCSS('margin-top', euiTheme.size.s), ";}};label:content;"),
hasDismissButton: /*#__PURE__*/css("&:where([data-size]){padding-inline-end:", euiTheme.size.xxl, ";};label:hasDismissButton;"),
dismissButton: {
euiCallOut__dismissButton: /*#__PURE__*/css("position:absolute;", logicalCSS('top', euiTheme.size.s), " ", logicalCSS('right', euiTheme.size.s), ";;label:euiCallOut__dismissButton;")
},
icon: /*#__PURE__*/css("position:relative;", logicalCSS('margin-vertical', euiTheme.size.xxs), ";;label:icon;"),
actions: /*#__PURE__*/css("display:flex;gap:", euiTheme.size.s, ";&:where([data-size='s'] &){", logicalCSS('margin-left', euiTheme.size.l), ";}&:where([data-size='m'] &){", logicalCSS('margin-left', euiTheme.size.xl), ";}&:where([data-layout='superNarrow'] &){flex-wrap:wrap;*:has(.euiCallOutAction),.euiCallOutAction{inline-size:100%;}}&:where([data-layout='wide'] &){", logicalCSS('margin-left', '0'), " align-self:center;flex-shrink:0;flex-direction:row-reverse;};label:actions;")
};
};
export var euiCallOutHeaderStyles = function euiCallOutHeaderStyles(_ref) {
var euiTheme = _ref.euiTheme;
return {
euiCallOutHeader: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.bold, ";", logicalCSS('margin-bottom', '0 !important'
// In case it's nested inside EuiText
), "&&{color:", euiTheme.colors.textHeading, ";};label:euiCallOutHeader;")
};
};