@elastic/eui
Version:
Elastic UI Component Library
93 lines (91 loc) • 6.35 kB
JavaScript
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.
*/
import { css } from '@emotion/react';
import { mathWithUnits } from '@elastic/eui-theme-common';
import { euiFontSize, euiTextTruncate, highContrastModeStyles, logicalCSS } from '../../global_styling';
export var 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: 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(logicalCSS('width', '100%'), "\n border-radius: ").concat(euiTheme.border.radius.small, ";\n line-height: ").concat(euiFontSize(euiThemeContext, 's').lineHeight, ";\n font-size: ").concat(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__
};
export var 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(highContrastModeStyles(euiThemeContext, {
preferred: "\n text-decoration: underline;\n "
}), "\n }\n ");
return {
euiListItemLayout: /*#__PURE__*/css(listItemCommonStyles(euiThemeContext), " ", logicalCSS('padding-horizontal', spacing.horizontal), ";;label:euiListItemLayout;"),
euiListItemLayout__action: /*#__PURE__*/css("display:flex;flex-grow:1;", logicalCSS('width', '100%'), " color:inherit;overflow:hidden;;label:euiListItemLayout__action;"),
euiListItemLayout__content: /*#__PURE__*/css(logicalCSS('width', '100%'), " display:flex;align-items:center;gap:", spacing.horizontal, ";;label:euiListItemLayout__content;"),
euiListItemLayout__text: /*#__PURE__*/css("flex-grow:1;", logicalCSS('padding-vertical', textPadding.vertical), " ", euiFontSize(euiThemeContext, 's'), " text-align:start;.euiHealth{vertical-align:middle;}>*+*{", logicalCSS('margin-top', euiTheme.size.xxs), ";};label:euiListItemLayout__text;"),
textWrap: {
truncate: /*#__PURE__*/css(euiTextTruncate(), ";label:truncate;"),
wrap: /*#__PURE__*/css(";label:wrap;")
},
euiListItemLayout__prepend: /*#__PURE__*/css(sharedFlexStyles, " gap:", spacing.horizontal, ";;label:euiListItemLayout__prepend;"),
euiListItemLayout__append: /*#__PURE__*/css(sharedFlexStyles, " gap:", spacing.horizontal, ";;label:euiListItemLayout__append;"),
euiListItemLayout__icon: /*#__PURE__*/css(sharedFlexStyles, ";;label:euiListItemLayout__icon;"),
isInteractive: /*#__PURE__*/css("cursor:pointer;&:hover{", highlightedStyles, ";};label:isInteractive;"),
isDisabled: /*#__PURE__*/css("color:", euiTheme.colors.textDisabled, ";cursor:not-allowed;background-color:transparent;;label:isDisabled;"),
buttonIsDisabled: _ref2,
isFocused: /*#__PURE__*/css(highlightedStyles, ";;label:isFocused;"),
isSelected: /*#__PURE__*/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__*/css(notDisabledSelector, "{background-color:", euiTheme.colors.backgroundBaseInteractiveSelectHover, ";};label:isSelectedFocused;"),
tooltip: {
isDisabled: _ref
},
externalIcon: /*#__PURE__*/css("color:", euiTheme.colors.textDisabled, ";;label:externalIcon;")
};
};
export var euiListItemLayoutWrapperStyles = function euiListItemLayoutWrapperStyles(euiThemeContext) {
var _euiListItemVariables2 = euiListItemVariables(euiThemeContext),
spacing = _euiListItemVariables2.spacing;
return {
euiListItemLayout__wrapper: /*#__PURE__*/css(listItemCommonStyles(euiThemeContext), "flex-shrink:0;list-style:none;;label:euiListItemLayout__wrapper;"),
hasExtraAction: /*#__PURE__*/css(logicalCSS('padding-right', spacing.horizontal), ";;label:hasExtraAction;")
};
};