@elastic/eui
Version:
Elastic UI Component Library
97 lines (95 loc) • 7.06 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.euiListItemVariables = exports.euiListItemLayoutWrapperStyles = exports.euiListItemLayoutStyles = void 0;
var _react = require("@emotion/react");
var _euiThemeCommon = require("@elastic/eui-theme-common");
var _global_styling = require("../../global_styling");
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 euiListItemVariables = exports.euiListItemVariables = function euiListItemVariables(_ref3) {
var euiTheme = _ref3.euiTheme;
var spacing = {
horizontal: euiTheme.size.s,
vertical: euiTheme.size.xs
};
var textPadding = {
horizontal: euiTheme.size.xs,
vertical: (0, _euiThemeCommon.mathWithUnits)([spacing.vertical, euiTheme.size.xxs], function (x, y) {
return x + y;
})
};
return {
spacing: spacing,
textPadding: textPadding
};
};
var listItemCommonStyles = function listItemCommonStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme;
return "\n display: inline-flex; /* Necessary to make sure it doesn't force the whole popover to be too wide */\n align-items: center;\n ".concat((0, _global_styling.logicalCSS)('width', '100%'), "\n border-radius: ").concat(euiTheme.border.radius.small, ";\n line-height: ").concat((0, _global_styling.euiFontSize)(euiThemeContext, 's').lineHeight, ";\n font-size: ").concat((0, _global_styling.euiFontSize)(euiThemeContext, 's').fontSize, ";\n color: ").concat(euiTheme.colors.textParagraph, ";\n overflow: hidden;\n ");
};
var _ref = process.env.NODE_ENV === "production" ? {
name: "8595p9-isDisabled",
styles: "cursor:not-allowed;label:isDisabled;"
} : {
name: "8595p9-isDisabled",
styles: "cursor:not-allowed;label:isDisabled;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var _ref2 = process.env.NODE_ENV === "production" ? {
name: "2nxums-buttonIsDisabled",
styles: "&[aria-disabled='true']{pointer-events:none;>*{pointer-events:none;}};label:buttonIsDisabled;"
} : {
name: "2nxums-buttonIsDisabled",
styles: "&[aria-disabled='true']{pointer-events:none;>*{pointer-events:none;}};label:buttonIsDisabled;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var euiListItemLayoutStyles = exports.euiListItemLayoutStyles = function euiListItemLayoutStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme;
var _euiListItemVariables = euiListItemVariables(euiThemeContext),
spacing = _euiListItemVariables.spacing,
textPadding = _euiListItemVariables.textPadding;
// uses `aria-disabled` only as not all variants can have a native `:disabled` state
var notDisabledSelector = "&:not([aria-disabled=\"true\"])";
var sharedFlexStyles = "\n display: flex;\n align-items: center;\n flex-shrink: 0;\n ";
var highlightedStyles = "\n ".concat(notDisabledSelector, " {\n background-color: ").concat(euiTheme.colors.backgroundBaseInteractiveHover, ";\n\n ").concat((0, _global_styling.highContrastModeStyles)(euiThemeContext, {
preferred: "\n text-decoration: underline;\n "
}), "\n }\n ");
return {
euiListItemLayout: /*#__PURE__*/(0, _react.css)(listItemCommonStyles(euiThemeContext), " ", (0, _global_styling.logicalCSS)('padding-horizontal', spacing.horizontal), ";;label:euiListItemLayout;"),
euiListItemLayout__action: /*#__PURE__*/(0, _react.css)("display:flex;flex-grow:1;", (0, _global_styling.logicalCSS)('width', '100%'), " color:inherit;overflow:hidden;;label:euiListItemLayout__action;"),
euiListItemLayout__content: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), " display:flex;align-items:center;gap:", spacing.horizontal, ";;label:euiListItemLayout__content;"),
euiListItemLayout__text: /*#__PURE__*/(0, _react.css)("flex-grow:1;", (0, _global_styling.logicalCSS)('padding-vertical', textPadding.vertical), " ", (0, _global_styling.euiFontSize)(euiThemeContext, 's'), " text-align:start;.euiHealth{vertical-align:middle;}>*+*{", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.xxs), ";};label:euiListItemLayout__text;"),
textWrap: {
truncate: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)(), ";label:truncate;"),
wrap: /*#__PURE__*/(0, _react.css)(";label:wrap;")
},
euiListItemLayout__prepend: /*#__PURE__*/(0, _react.css)(sharedFlexStyles, " gap:", spacing.horizontal, ";;label:euiListItemLayout__prepend;"),
euiListItemLayout__append: /*#__PURE__*/(0, _react.css)(sharedFlexStyles, " gap:", spacing.horizontal, ";;label:euiListItemLayout__append;"),
euiListItemLayout__icon: /*#__PURE__*/(0, _react.css)(sharedFlexStyles, ";;label:euiListItemLayout__icon;"),
isInteractive: /*#__PURE__*/(0, _react.css)("cursor:pointer;&:hover{", highlightedStyles, ";};label:isInteractive;"),
isDisabled: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textDisabled, ";cursor:not-allowed;background-color:transparent;;label:isDisabled;"),
buttonIsDisabled: _ref2,
isFocused: /*#__PURE__*/(0, _react.css)(highlightedStyles, ";;label:isFocused;"),
isSelected: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textPrimary, ";background-color:", euiTheme.colors.backgroundBaseInteractiveSelect, ";", notDisabledSelector, "{&:hover{background-color:", euiTheme.colors.backgroundBaseInteractiveSelectHover, ";}}.euiIcon,.euiButtonIcon{color:inherit;}.euiListItemLayout__prepend,.euiListItemLayout__append{.euiIcon{color:", euiTheme.colors.textPrimary, ";}};label:isSelected;"),
isSelectedFocused: /*#__PURE__*/(0, _react.css)(notDisabledSelector, "{background-color:", euiTheme.colors.backgroundBaseInteractiveSelectHover, ";};label:isSelectedFocused;"),
tooltip: {
isDisabled: _ref
},
externalIcon: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textDisabled, ";;label:externalIcon;")
};
};
var euiListItemLayoutWrapperStyles = exports.euiListItemLayoutWrapperStyles = function euiListItemLayoutWrapperStyles(euiThemeContext) {
var _euiListItemVariables2 = euiListItemVariables(euiThemeContext),
spacing = _euiListItemVariables2.spacing;
return {
euiListItemLayout__wrapper: /*#__PURE__*/(0, _react.css)(listItemCommonStyles(euiThemeContext), "flex-shrink:0;list-style:none;;label:euiListItemLayout__wrapper;"),
hasExtraAction: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-right', spacing.horizontal), ";;label:hasExtraAction;")
};
};