@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
46 lines • 2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useShowErrorStyles = void 0;
var css_1 = require("@emotion/css");
var react_components_1 = require("@fluentui/react-components");
var react_1 = require("react");
var useShowErrorStyles = function () {
return (0, react_1.useMemo)(function () { return ({
container: (0, css_1.css)({
display: "flex",
alignItems: "center",
justifyContent: "center",
minHeight: "200px",
textAlign: "center",
backgroundColor: react_components_1.tokens.colorNeutralBackground1,
border: "1px solid ".concat(react_components_1.tokens.colorNeutralStroke2),
borderRadius: react_components_1.tokens.borderRadiusLarge,
padding: "".concat(react_components_1.tokens.spacingVerticalXXL, " ").concat(react_components_1.tokens.spacingHorizontalXXL),
boxShadow: react_components_1.tokens.shadow4,
maxWidth: "500px",
margin: "20px auto",
}),
icon: (0, css_1.css)({
fontSize: "48px",
color: react_components_1.tokens.colorPaletteRedForeground1,
animation: "pulse 2s infinite",
"@keyframes pulse": {
"0%": { transform: "scale(1)" },
"50%": { transform: "scale(1.05)" },
"100%": { transform: "scale(1)" },
},
}),
title: (0, css_1.css)({
color: react_components_1.tokens.colorNeutralForeground1,
fontWeight: react_components_1.tokens.fontWeightSemibold,
textAlign: "center",
}),
message: (0, css_1.css)({
color: react_components_1.tokens.colorNeutralForeground2,
textAlign: "center",
lineHeight: react_components_1.tokens.lineHeightBase400,
}),
}); }, []);
};
exports.useShowErrorStyles = useShowErrorStyles;
//# sourceMappingURL=useShowErrorStyles.js.map