@elastic/eui
Version:
Elastic UI Component Library
80 lines (78 loc) • 5.78 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.euiBannerStyles = void 0;
var _react = require("@emotion/react");
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
* 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 CONTAINER_NAME = 'euiBanner';
var CQC_LAYOUTS = ['narrow', 'wide'];
var CQC_BREAKPOINTS = {
s: {
narrow: '(min-width: 401px)',
wide: '(min-width: 800px)'
},
m: {
narrow: '(min-width: 601px)',
wide: '(min-width: 1000px)'
}
};
var CQC_BREAKPOINT_NARROWEST = '(max-width: 400px)';
/** Maximum reading width for `text` and `children` slots. */
var TEXT_MAX_WIDTH = 1200;
var withContainerQuery = function withContainerQuery(_ref2) {
var layout = _ref2.layout,
styles = _ref2.styles;
return Object.keys(CQC_BREAKPOINTS).map(function (sizeKey) {
return "\n @container ".concat(CONTAINER_NAME, "--").concat(sizeKey, " ").concat(CQC_BREAKPOINTS[sizeKey][layout], " {\n ").concat(styles, "\n }\n ");
}).join('\n');
};
var _ref = process.env.NODE_ENV === "production" ? {
name: "qd171g-title",
styles: "[data-size='s'] &{display:inline;};label:title;"
} : {
name: "qd171g-title",
styles: "[data-size='s'] &{display:inline;};label:title;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var euiBannerStyles = exports.euiBannerStyles = function euiBannerStyles(_ref3) {
var euiTheme = _ref3.euiTheme;
return {
euiBanner: /*#__PURE__*/(0, _react.css)("container-name:", CONTAINER_NAME, ";container-type:inline-size;position:relative;border:", euiTheme.border.thin, ";border-radius:", euiTheme.border.radius.medium, ";&[data-size='s']{container-name:", CONTAINER_NAME, " ", CONTAINER_NAME, "--s;}&[data-size='m']{container-name:", CONTAINER_NAME, " ", CONTAINER_NAME, "--m;};label:euiBanner;"),
container: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;align-items:stretch;gap:", euiTheme.size.m, ";padding-inline-start:", euiTheme.size.base, ";padding-inline-end:", euiTheme.size.base, ";[data-size='m'] &{padding-block:", euiTheme.size.base, ";}[data-size='s'] &{padding-block:", euiTheme.size.m, ";}", withContainerQuery({
layout: 'narrow',
styles: "\n flex-direction: row;\n align-items: flex-start;\n gap: ".concat(euiTheme.size.base, ";\n ")
}), ";;label:container;"),
media: /*#__PURE__*/(0, _react.css)("--euiBannerMediaSize:", "calc(".concat(euiTheme.size.base, " * 5)"), ";flex-shrink:0;inline-size:var(--euiBannerMediaSize);block-size:var(--euiBannerMediaSize);aspect-ratio:1/1;[data-size='s'] &{--euiBannerMediaSize:", "calc(".concat(euiTheme.size.base, " * 2)"), ";}", withContainerQuery({
layout: 'wide',
styles: "\n align-self: center;\n "
}), " img,svg{block-size:100%;inline-size:100%;};label:media;"),
body: /*#__PURE__*/(0, _react.css)("flex:1 1 auto;min-inline-size:0;display:flex;flex-direction:column;align-self:flex-start;inline-size:100%;gap:", euiTheme.size.m, ";", withContainerQuery({
layout: 'narrow',
styles: "\n align-self: center;\n inline-size: auto;\n "
}), " ", withContainerQuery({
layout: 'wide',
styles: "\n flex-direction: row;\n align-items: center;\n /* stretch to match the media's height so align-items has space to work */\n align-self: stretch;\n justify-content: space-between;\n gap: ".concat(euiTheme.size.xxl, ";\n ")
}), ";;label:body;"),
// At size `s` the content slot becomes a block container so the title and
// text flow inline. Other sizes keep the flex column with a fixed gap.
content: /*#__PURE__*/(0, _react.css)("flex:1 1 auto;min-inline-size:0;max-inline-size:", TEXT_MAX_WIDTH, "px;display:flex;flex-direction:column;gap:", euiTheme.size.xs, ";[data-size='s'] &{display:block;>*+*:not(.euiButtonIcon){margin-block-start:", euiTheme.size.s, ";}}[data-size='m'] &{>.euiText+*{margin-block-start:", euiTheme.size.s, ";}};label:content;"),
title: _ref,
text: /*#__PURE__*/(0, _react.css)("[data-size='s'] &{display:inline;&::before{content:'\xB7';display:inline-block;inline-size:calc(", euiTheme.size.s, " + ", euiTheme.size.xxs, ");text-align:center;color:", euiTheme.colors.textHeading, ";}};label:text;"),
actions: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:", euiTheme.size.s, ";@container ", CONTAINER_NAME, " ", CQC_BREAKPOINT_NARROWEST, "{flex-wrap:wrap;>*{inline-size:100%;}}", withContainerQuery({
layout: 'wide',
styles: "\n /* Reverses source order so primary appears last (rightmost). */\n flex-direction: row-reverse;\n flex-shrink: 0;\n align-self: center;\n "
}), ";;label:actions;"),
hasDismiss: /*#__PURE__*/(0, _react.css)(withContainerQuery({
layout: 'narrow',
styles: "\n padding-inline-end: calc(".concat(euiTheme.size.s, " * 5);\n ")
}), ";;label:hasDismiss;"),
dismiss: /*#__PURE__*/(0, _react.css)("position:absolute;inset-block-start:", euiTheme.size.s, ";inset-inline-end:", euiTheme.size.s, ";color:", euiTheme.colors.textSubdued, ";;label:dismiss;")
};
};