@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
52 lines (51 loc) • 1.35 kB
JavaScript
import { outlineStyles } from "../../../utils/focusUtils.js";
import { theme } from "@hitachivantara/uikit-styles";
import { createClasses } from "@hitachivantara/uikit-react-utils";
//#region src/Header/Navigation/MenuItem/MenuItem.styles.tsx
var 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" }
}
};
var { staticClasses, useClasses } = createClasses("HvHeaderMenuItem", {
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" }
});
//#endregion
export { useClasses };