@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
126 lines (125 loc) • 3.69 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const uikitStyles = require("@hitachivantara/uikit-styles");
const BaseDropdown_styles = require("../BaseDropdown/BaseDropdown.styles.cjs");
require("../BaseDropdown/BaseDropdown.cjs");
const Input_styles = require("../Input/Input.styles.cjs");
const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvPagination", {
/** Styles applied to the component root class. */
root: {
position: "relative",
zIndex: 1,
display: "flex",
justifyContent: "center",
alignItems: "stretch",
flexWrap: "wrap",
marginTop: uikitStyles.theme.space.sm,
[`& $pageSizeInput`]: {
...uikitStyles.theme.typography.caption2,
"&:focus": {
padding: 0
}
},
[`& $pageSizeInputContainer`]: {
width: 24,
minWidth: 24,
maxWidth: uikitStyles.theme.spacing(8)
},
[`&& $pageSizeInputRoot`]: {
backgroundColor: "transparent",
height: "24px",
"&:focus, &:focus-within, &:hover": {
backgroundColor: uikitStyles.theme.colors.bgHover
}
}
},
/** Styles applied to the page size selector container. */
pageSizeOptions: {
display: "flex",
position: "absolute",
gap: uikitStyles.theme.space.xs,
height: 24,
top: "50%",
transform: "translateY(-50%)",
left: "0"
},
pageSizeHeader: {
height: 24,
display: "flex",
alignItems: "center",
[`& .${BaseDropdown_styles.staticClasses.arrowContainer}`]: {
marginTop: -2
}
},
pageSizeRoot: {
width: "auto"
},
/** Styles applied to the element that holds the labels for the page size selector */
pageSizeTextContainer: {
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "24px",
padding: "8px 0",
...uikitStyles.theme.typography.caption2
},
totalPagesTextContainer: {
...uikitStyles.theme.typography.caption2
},
/** Styles applied to the page size selector dropdown element. */
pageSizeOptionsSelect: {
display: "inline-block",
width: "auto",
...uikitStyles.theme.typography.caption2
},
/** Styles applied to the page navigation container. */
pageNavigator: {
display: "flex",
alignItems: "center",
height: "32px",
gap: 8
},
/** Styles applied to each navigation `HvButton` icon container. */
iconContainer: {
padding: 0
},
/** Styles applied to each navigation icon. */
icon: {},
/** Styles applied to the central page information container. */
pageInfo: {
display: "inline-block",
whiteSpace: "nowrap",
height: "32px",
lineHeight: "32px"
},
/** Styles applied to the page selector input container. */
pageJump: {
display: "inline-block",
marginRight: `4px`,
[`& .${Input_styles.staticClasses.inputRoot}`]: {
[`& $pageSizeInput`]: {
paddingLeft: `4px`,
paddingRight: `4px`,
margin: 0,
textAlign: "center",
borderRadius: uikitStyles.theme.radii.base,
MozAppearance: "textfield",
"&:focus": {
backgroundColor: uikitStyles.theme.colors.bgHover
},
"&:hover": {
cursor: "pointer"
}
}
}
},
/** Styles passed down to the page selector Input component as `input`. */
pageSizeInput: {},
/** Styles passed down to the page selector Input root. */
pageSizeInputRoot: {},
/** Styles passed down to the page selector Input component as `container`. */
pageSizeInputContainer: {}
});
exports.staticClasses = staticClasses;
exports.useClasses = useClasses;