@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
75 lines (74 loc) • 1.85 kB
JavaScript
import { outlineStyles } from "../utils/focusUtils.js";
import { theme } from "@hitachivantara/uikit-styles";
import { createClasses } from "@hitachivantara/uikit-react-utils";
//#region src/BaseDropdown/BaseDropdown.styles.tsx
var { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
root: {
width: "100%",
position: "relative"
},
rootDisabled: {
cursor: "not-allowed",
"&:focus": { outline: "none" }
},
anchor: {
display: "inline-block",
width: "100%"
},
container: {},
header: {
cursor: "pointer",
userSelect: "none",
position: "relative",
backgroundColor: theme.colors.bgContainer,
boxSizing: "border-box",
border: `1px solid ${theme.colors.text}`,
borderRadius: theme.radii.round,
":hover,:focus-visible": { borderColor: theme.colors.primary },
":focus": { outline: "none" },
":focus-visible": { ...outlineStyles }
},
headerOpen: { "&,:hover": { borderColor: theme.colors.text } },
headerDisabled: {
cursor: "not-allowed",
pointerEvents: "none",
color: theme.colors.textDisabled,
backgroundColor: theme.colors.bgPage,
"&,:hover": { borderColor: "currentcolor" }
},
headerReadOnly: {
cursor: "not-allowed",
pointerEvents: "none",
color: theme.colors.textSubtle,
borderColor: "currentcolor",
backgroundColor: theme.colors.bgPage,
userSelect: "text",
":focus-visible": {
outline: "none",
borderColor: "currentcolor"
}
},
arrowContainer: {
position: "absolute",
pointerEvents: "none",
top: -1,
right: -1
},
arrow: {},
selection: {
display: "flex",
alignItems: "center",
height: "30px",
boxSizing: "border-box",
paddingLeft: theme.space.xs,
paddingRight: 32
},
selectionDisabled: {},
placeholder: {
display: "block",
color: theme.colors.textSubtle
},
panel: { padding: 0 }
});
//#endregion
export { staticClasses, useClasses };