@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
45 lines • 3.23 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useUserPickerStyles = void 0;
var tslib_1 = require("tslib");
var react_components_1 = require("@fluentui/react-components");
exports.useUserPickerStyles = (0, react_components_1.makeStyles)({
container: tslib_1.__assign(tslib_1.__assign({ display: "flex", flexDirection: "row", justifyContent: "start", alignItems: "center" }, react_components_1.shorthands.gap("20px")), { ":hover": {
cursor: "pointer",
backgroundColor: react_components_1.tokens.colorNeutralBackground3,
} }),
image: {
width: "32px",
},
imageButton: {
width: "28px",
},
userItem: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, react_components_1.shorthands.padding("3px")), { minWidth: "200px", maxWidth: "fit-content", width: "100%", display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center" }), react_components_1.shorthands.gap("20px")), { backgroundColor: react_components_1.tokens.colorNeutralBackground3 }), react_components_1.shorthands.border("1px solid", react_components_1.tokens.colorNeutralStroke1)), react_components_1.shorthands.borderRadius(react_components_1.tokens.borderRadiusCircular)), react_components_1.shorthands.overflow("hidden")),
userItemCloseButton: {
":hover": {
backgroundColor: react_components_1.tokens.colorNeutralBackground3Selected,
cursor: "pointer",
},
},
selectUserMainContainer: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ display: "flex", flexDirection: "column", rowGap: "5px" }, react_components_1.shorthands.borderWidth("1px")), react_components_1.shorthands.borderStyle("solid")), react_components_1.shorthands.borderColor(react_components_1.tokens.colorNeutralStroke1)),
selectedUserContainer: tslib_1.__assign(tslib_1.__assign({ display: "flex", flexDirection: "row", flexWrap: "wrap" }, react_components_1.shorthands.padding("2px")), { columnGap: "2px", rowGap: "5px", marginTop: "3px", marginBottom: "3px" }),
inputContainer: {
width: "inherit",
},
userCardStyles: tslib_1.__assign({}, react_components_1.shorthands.padding("5px")),
popupContainer: tslib_1.__assign(tslib_1.__assign({ position: "fixed", zIndex: 99999, minWidth: "250px" }, react_components_1.shorthands.padding("10px")), react_components_1.shorthands.gap("5px")),
usersContainer: {
overflowY: "auto",
overflowX: "hidden",
"scrollbar-color": react_components_1.tokens.colorNeutralBackground1,
"scrollbar-width": "thin",
"::-webkit-scrollbar-thumb": tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_components_1.tokens === null || react_components_1.tokens === void 0 ? void 0 : react_components_1.tokens.colorBrandStroke2 }, react_components_1.shorthands.borderRadius("10px")), react_components_1.shorthands.borderWidth("1px")),
"::-webkit-scrollbar": {
height: "10px",
width: "7px",
},
width: "100%",
maxHeight: "450px",
},
});
//# sourceMappingURL=useUserPickerStyles.js.map