@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
70 lines (69 loc) • 1.46 kB
JavaScript
import { createClasses } from "@hitachivantara/uikit-react-utils";
import { theme } from "@hitachivantara/uikit-styles";
import { outlineStyles } from "../../../utils/focusUtils.js";
const item = {
border: "none",
cursor: "pointer",
padding: `${theme.space.xs} ${theme.space.sm}`,
height: "100%",
display: "flex",
alignItems: "center",
"&:active": {
outline: "none"
},
"&:focus": {
outline: "none"
},
"&:focus-visible": {
...outlineStyles
},
"& span": {
display: "inline-flex",
color: "inherit",
flexDirection: "column",
alignItems: "center",
justifyContent: "space-between"
},
"& span::after": {
content: "attr(data-text)",
height: 0,
visibility: "hidden",
overflow: "hidden",
userSelect: "none",
pointerEvents: "none",
fontWeight: theme.fontWeights.semibold,
"@media speech": {
display: "none"
}
}
};
const { staticClasses, useClasses } = createClasses(
"HvHeader-MenuItem",
{
root: {
display: "inline",
height: "100%",
borderBottom: "4px solid transparent",
":hover, :focus-within": {
backgroundColor: theme.colors.bgHover
}
},
menu: {},
menubar: {},
selected: {
color: theme.colors.text,
borderColor: "currentcolor"
},
item,
link: {
textDecoration: "none"
},
button: {
color: "inherit"
}
}
);
export {
staticClasses,
useClasses
};