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