@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
59 lines (58 loc) • 1.29 kB
JavaScript
import { theme } from "@hitachivantara/uikit-styles";
import { createClasses } from "@hitachivantara/uikit-react-utils";
//#region src/Header/Navigation/MenuBar/Bar.styles.tsx
var show = {
top: theme.header.height,
transitionProperty: "top",
boxShadow: theme.colors.shadow,
transitionDuration: "500ms",
backgroundColor: theme.colors.bgPage
};
var hide = {
top: 0,
transitionProperty: "top",
boxShadow: "none",
transitionDuration: "300ms"
};
var { staticClasses, useClasses } = createClasses("HvHeaderMenuBar", {
root: {
left: 0,
width: "100%",
height: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center"
},
menu: {
position: "absolute",
zIndex: -2,
height: theme.header.secondLevelHeight,
backgroundColor: theme.colors.bgPage,
"& li > div": { marginTop: 0 }
},
menubar: {
position: "relative",
backgroundColor: theme.colors.bgContainer
},
hidden: { ...hide },
active: { ...show },
list: {
margin: 0,
padding: 0,
display: "inherit",
alignItems: "center",
height: "100%",
"&:hover $active": { ...hide },
"& li:hover > $hidden": { ...show },
"&:focus-within $active": {
...hide,
zIndex: -2
},
"& li:focus-within > $hidden": {
...show,
zIndex: -1
}
}
});
//#endregion
export { useClasses };