@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
72 lines • 2.9 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useReactionPickerStyles = void 0;
var tslib_1 = require("tslib");
var react_components_1 = require("@fluentui/react-components");
exports.useReactionPickerStyles = (0, react_components_1.makeStyles)({
emojiList: {
display: "grid",
gridTemplateColumns: "repeat(auto-fill, minmax(min(100%, 30px), 1fr))",
columnGap: "15px",
rowGap: "0.5em",
overflowY: "auto",
overflowX: "hidden",
marginTop: "20px",
maxHeight: "280px",
width: "100%",
"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.colorNeutralBackground3 }, react_components_1.shorthands.borderRadius("10px")), react_components_1.shorthands.borderWidth("1px")),
"::-webkit-scrollbar": {
width: "7px",
},
},
card: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_components_1.tokens.colorNeutralBackground2 }, react_components_1.shorthands.borderRadius("8px")), { width: "350px", height: "420px", position: "fixed", bottom: "10px", zIndex: 9000 }), react_components_1.shorthands.padding("20px")),
cardContent: tslib_1.__assign({ display: "flex", width: "100%", flexDirection: "column", justifyContent: "center", alignItems: "center" }, react_components_1.shorthands.gap("10px")),
searchBox: {
width: "100%",
},
emojiRoot: {
height: "fit-content",
/* ...shorthands.margin("10px"), */
cursor: "pointer",
},
emoji: {
fontSize: "30px",
},
emojiImage: {
width: "30px",
height: "30px",
cursor: "pointer",
},
emojiGroupContainer: {
position: "absolute",
display: "grid",
gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 30px), 1fr))",
width: "90%",
bottom: "10px",
paddingLeft: "10px",
paddingRight: "10px",
},
emojiImageGroup: {
width: "20px",
height: "20px",
display: "inline-block",
WebkitMaskSize: "20px",
WebkitMaskPositionY: "0%",
backgroundColor: react_components_1.tokens.colorNeutralForeground3,
"&:hover": {
backgroundColor: react_components_1.tokens.colorBrandBackground,
WebkitMaskPositionY: "100%",
},
},
emojiSelected: {
backgroundColor: react_components_1.tokens.colorBrandBackground,
WebkitMaskPositionY: "100%",
},
groupButton: {
paddingLeft: "10px",
paddingRight: "10px",
},
});
//# sourceMappingURL=useReactionPickerStyle.js.map