@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
68 lines (67 loc) • 2.49 kB
JavaScript
import { theme } from "@hitachivantara/uikit-styles";
import { createClasses } from "@hitachivantara/uikit-react-utils";
//#region src/Table/TableRow/TableRow.styles.tsx
var getBorderStyles = (color, rowBorderRadius) => {
return {
"& td": {
borderTop: `1px solid ${color}`,
borderBottom: `1px solid ${color}`
},
"& td:first-of-type": {
borderLeft: `1px solid ${color}`,
borderRadius: `${rowBorderRadius} 0 0 ${rowBorderRadius}`
},
"& td:last-of-type": {
borderRight: `1px solid ${color}`,
borderRadius: `0 ${rowBorderRadius} ${rowBorderRadius} 0`
}
};
};
var { staticClasses, useClasses } = createClasses("HvTableRow", {
/** Styles applied to the component root class. */
root: {
color: "inherit",
backgroundColor: theme.colors.bgContainer,
verticalAlign: "middle",
alignContent: "center",
outline: 0,
":is($hover,$striped):hover": { backgroundColor: theme.colors.bgHover }
},
/** Styles applied to the component root when inside a `HvTableHead`. */
head: {},
/** Styles applied to the component root when inside a `HvTableBody`. */
body: {},
/** Styles applied to the component root when inside a `HvTableFooter`. */
footer: {},
/** Styles applied to the component root when selected. */
selected: { backgroundColor: theme.colors.bgPage },
/** Styles applied to the component root when expanded. */
expanded: {
backgroundColor: theme.colors.bgContainer,
"& > *[role=cell]": { borderBottom: "none" }
},
/** Styles applied to the component root when striped. */
striped: {
"&:nth-of-type(even)": { backgroundColor: theme.alpha("bgContainer", .6) },
"&:nth-of-type(odd)": { backgroundColor: "transparent" }
},
/** Styles applied to the component root on hover. */
hover: {},
/** Styles applied to the component root when its table variant is list. */
variantList: {
marginBottom: theme.space.xs,
borderRadius: theme.radii.round,
...getBorderStyles(theme.colors.border, theme.radii.round),
backgroundColor: theme.colors.bgContainer,
"&$selected": {
...getBorderStyles(theme.colors.text, theme.radii.round),
"&:hover": { ...getBorderStyles(theme.colors.border, theme.radii.round) }
},
"&:hover": { ...getBorderStyles(theme.colors.border, theme.radii.round) },
"&.HvIsFocused": { borderRadius: theme.radii.round }
},
/** Styles applied to the component root when its table variant is list. */
variantListHead: { backgroundColor: "transparent" }
});
//#endregion
export { staticClasses, useClasses };