@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
41 lines • 2.49 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useImagePickerStyles = void 0;
var tslib_1 = require("tslib");
var react_components_1 = require("@fluentui/react-components");
exports.useImagePickerStyles = (0, react_components_1.makeStyles)({
root: {
marginTop: "20px",
display: "flex",
flexDirection: "column",
justifyContent: "start",
alignItems: "start",
},
grid: tslib_1.__assign(tslib_1.__assign({ display: "grid", marginTop: "20px", gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))" }, react_components_1.shorthands.gap("10px")), { maxHeight: "500px", overflowY: "auto", scrollbarWidth: "thin" }),
image: {
height: "100px",
objectPosition: "0px 0px",
":hover": tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, react_components_1.shorthands.border("2px", "solid", react_components_1.tokens.colorBrandBackground)), react_components_1.shorthands.padding("3px")), { cursor: "pointer" }),
},
toolbarContainer: {
display: "flex",
justifyContent: "start",
alignItems: "stretch",
paddingTop: "15px",
gap: "10px",
},
buttonContainer: tslib_1.__assign({ display: "flex", justifyContent: "start", alignItems: "stretch", paddingTop: "15px", paddingBottom: "15px" }, react_components_1.shorthands.gap("10px")),
selectedImage: tslib_1.__assign(tslib_1.__assign({}, react_components_1.shorthands.border("3px", "solid", react_components_1.tokens.colorBrandBackground)), react_components_1.shorthands.padding("3px")),
stockImagesPicker: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ width: "100%", height: "100%", backgroundColor: "transparent" }, react_components_1.shorthands.border("0px none transparent")), react_components_1.shorthands.padding("0px")), { overflow: "hidden" }),
stockImageContainer: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ paddingTop: "10px", borderTopWidth: "0px", borderLeftWidth: "0px", borderRightWidth: "0px", width: "100%" }, react_components_1.shorthands.border("0px none transparent")), { height: "500px" }), react_components_1.shorthands.overflow("hidden")),
renderImageContainer: {
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%",
maxHeight: "200px",
maxWidth: "350px",
paddingBottom: "10px",
},
});
//# sourceMappingURL=useImagePickerStyles.js.map