@elastic/eui
Version:
Elastic UI Component Library
105 lines (103 loc) • 7.32 kB
JavaScript
var _templateObject;
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
/*
* 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, keyframes } from '@emotion/react';
import { euiBorderStyles, euiShadow } from '@elastic/eui-theme-common';
import { euiCanAnimate, highContrastModeStyles, logicalCSS, mathWithUnits } from '../../global_styling';
import { cssSupportsHasWithNextSibling } from '../../global_styling/functions/supports';
import { euiTableVariables } from './table.styles';
export var euiTableRowStyles = function euiTableRowStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme;
var rowColors = _rowColorVariables(euiThemeContext);
var expandedAnimationCss = _expandedRowAnimation(euiThemeContext);
var _euiTableVariables = euiTableVariables(euiThemeContext),
cellContentPadding = _euiTableVariables.cellContentPadding,
mobileSizes = _euiTableVariables.mobileSizes,
checkboxSize = _euiTableVariables.checkboxSize;
var markedStyles = "\n :where(&.euiTableRow--marked):hover {\n background-color: ".concat(rowColors.marked.hover, ";\n }\n ");
return {
euiTableRow: /*#__PURE__*/css(":where(&.euiTableRow--marked){background-color:", rowColors.marked.background, ";};label:euiTableRow;"),
desktop: {
desktop: /*#__PURE__*/css("&:hover{background-color:", rowColors.hover, ";}", markedStyles, ";;label:desktop;"),
expanded: {
expanded: /*#__PURE__*/css(expandedAnimationCss, ";;label:expanded;"),
// skipping adding a css class as it's a default style when expanded
hasBackground: "\n background-color: ".concat(rowColors.hover, ";\n ")
},
clickable: /*#__PURE__*/css("&:hover{background-color:", rowColors.clickable.hover, ";cursor:pointer;}", markedStyles, " &:focus{background-color:", rowColors.clickable.focus, ";};label:clickable;"),
selected: /*#__PURE__*/css("&,&+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.background, ";}&:hover,&:hover+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.hover, ";};label:selected;"),
// Offset expanded & selectable rows by the checkbox width to line up content with the 2nd column
// Set on the `<td>` because padding can't be applied to `<tr>` elements directly
checkboxOffset: /*#__PURE__*/css("&>.euiTableRowCell:first-child{", logicalCSS('padding-left', checkboxSize), ";};label:checkboxOffset;")
},
mobile: {
mobile: /*#__PURE__*/css("position:relative;display:flex;flex-wrap:wrap;padding:", cellContentPadding, ";", logicalCSS('margin-bottom', cellContentPadding), " border-radius:", euiTheme.border.radius.medium, ";", cssSupportsHasWithNextSibling("\n &:has(+ .euiTableRow-isExpandedRow) {\n ".concat(logicalCSS('border-bottom-left-radius', 0), "\n ").concat(logicalCSS('border-bottom-right-radius', 0), "\n }\n ")), ";;label:mobile;"),
/* Omitting adding a class via css here as it's a default style on mobile, not a standalone prop-related style.
Adding it separate allows better appliance control via props without the need to override the styles. */
hasBorder: "\n ".concat(highContrastModeStyles(euiThemeContext, {
// uses pseudo-border to align dimensions with shadows applied by `hasBackground`
none: "\n ".concat(euiBorderStyles(euiThemeContext, {
side: 'all'
}), "\n transform: translateZ(0);\n "),
preferred: "\n border: ".concat(euiTheme.border.thin, "\n ")
}), "\n "),
hasBackground: /*#__PURE__*/css(euiShadow(euiThemeContext, 's', {
borderAllInHighContrastMode: true
}), " background-color:", euiTheme.colors.backgroundBasePlain, ";", highContrastModeStyles(euiThemeContext, {
none: "\n border: none;\n "
}), ";;label:hasBackground;"),
selected: /*#__PURE__*/css("&,&+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.background, ";};label:selected;"),
/**
* Left column offset (no border)
* Used for selection checkbox, which will be absolutely positioned
*/
hasLeftColumn: /*#__PURE__*/css(logicalCSS('padding-left', mobileSizes.checkbox.width), ";;label:hasLeftColumn;"),
/**
* Right column styles + border
* Used for cell actions and row expander arrow
*/
hasRightColumn: /*#__PURE__*/css(logicalCSS('padding-right', mobileSizes.actions.width), " &::before{content:'';position:absolute;", logicalCSS('vertical', 0), " ", logicalCSS('right', mobileSizes.actions.width), " ", logicalCSS('border-right', euiTheme.border.thin), ";};label:hasRightColumn;"),
/**
* Bottom of card - expanded rows
*/
expanded: /*#__PURE__*/css(logicalCSS(
// On mobile, visually move the expanded row to join up with the
// preceding table row via negative margins
'margin-top', mathWithUnits([cellContentPadding, euiTheme.border.width.thin], function (x, y) {
return (x + y) * -1;
})), logicalCSS('padding-left', cellContentPadding), " ", logicalCSS('border-top', euiTheme.border.thin), " ", logicalCSS('border-top-left-radius', 0), " ", logicalCSS('border-top-right-radius', 0), " &:after{", logicalCSS('border-top', 'none'), ";}clip-path:polygon(-50% 0, 150% 0, 150% 150%, -50% 150%);>.euiTableRowCell{", logicalCSS('width', '100%'), ";}", expandedAnimationCss, ";;label:expanded;")
}
};
};
var _expandedRowAnimation = function _expandedRowAnimation(_ref) {
var euiTheme = _ref.euiTheme;
// Do not attempt to animate to height auto - down that road dragons lie
// @see https://github.com/elastic/eui/pull/6826
var expandRow = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0% {\n opacity: 0;\n transform: translateY(-", ");\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n "])), euiTheme.size.m);
// Animation must be on the contents div inside, not the row itself
return /*#__PURE__*/css(euiCanAnimate, "{.euiTableCellContent{animation:", euiTheme.animation.fast, " ", euiTheme.animation.resistance, " 1 normal none ", expandRow, ";}}");
};
var _rowColorVariables = function _rowColorVariables(_ref2) {
var euiTheme = _ref2.euiTheme;
return {
hover: euiTheme.components.tableRowBackgroundHover,
selected: {
background: euiTheme.components.tableRowBackgroundSelected,
hover: euiTheme.components.tableRowBackgroundSelectedHover
},
clickable: {
hover: euiTheme.components.tableRowInteractiveBackgroundHover,
focus: euiTheme.components.tableRowInteractiveBackgroundFocus
},
marked: {
background: euiTheme.components.tableRowBackgroundMarked,
hover: euiTheme.components.tableRowBackgroundMarkedHover
}
};
};