react-bootstrap-sweetalert
Version:
A variant of sweetalert for use with React and Bootstrap
309 lines • 7.45 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.closeButton = exports.inputErrorIconAfter = exports.inputErrorIconBefore = exports.inputErrorIconBeforeAfter = exports.inputErrorIcon = exports.exclamationIcon = exports.validationMessage = exports.button = exports.iconCustom = exports.iconSuccessLineLong = exports.iconSuccessLineTip = exports.iconSuccessLine = exports.iconSuccessFix = exports.iconSuccessPlaceholder = exports.iconSuccessAfter = exports.iconSuccessBefore = exports.iconSuccessBeforeAfter = exports.iconSuccess = exports.iconInfoAfter = exports.iconInfoBefore = exports.iconInfo = exports.iconWarningDot = exports.iconWarningBody = exports.iconWarning = exports.iconErrorLineRight = exports.iconErrorLineLeft = exports.iconErrorLine = exports.iconErrorX = exports.iconError = exports.icon = exports.actions = exports.contentContainer = exports.title = exports.sweetAlert = exports.sweetAlertContainer = exports.overlay = void 0;
exports.overlay = {
backgroundColor: "rgba(0, 0, 0, 0.4)",
position: "fixed",
left: 0,
right: 0,
top: 0,
bottom: 0,
zIndex: 5000
};
exports.sweetAlertContainer = {
display: "flex",
position: "fixed",
top: 0,
right: 0,
left: 0,
bottom: 0,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
padding: ".625em",
overflowX: "hidden",
overflowY: "auto",
zIndex: 5400
};
exports.sweetAlert = {
display: "flex",
overflow: "hidden",
backgroundColor: "#fff",
outline: "none",
width: "32em",
padding: "1.25rem",
margin: "auto",
borderRadius: ".3125em",
textAlign: "center",
position: "relative",
flexDirection: "column",
justifyContent: "center",
maxWidth: "100%",
zIndex: 5600
};
exports.title = {
position: "relative",
maxWidth: "100%",
margin: "0 0 .4em",
padding: 0,
fontSize: "1.875em",
fontWeight: 600,
textAlign: "center",
textTransform: "none",
wordWrap: "break-word"
};
exports.contentContainer = {
zIndex: 1,
justifyContent: "center",
margin: 0,
padding: 0,
fontSize: "1.125em",
fontWeight: 300,
lineHeight: "normal",
textAlign: "center",
wordWrap: "break-word"
};
exports.actions = {
display: "flex",
zIndex: 1,
flexWrap: "wrap",
alignItems: "center",
justifyContent: "center",
width: "100%",
margin: "1.25em auto 0"
};
exports.icon = {
width: 80,
height: 80,
borderWidth: 4,
borderStyle: "solid",
borderColor: "gray",
borderRadius: "50%",
margin: "20px auto",
position: "relative",
boxSizing: "content-box"
};
exports.iconError = {
borderColor: "#d43f3a",
animation: "animateErrorIcon 0.5s"
};
exports.iconErrorX = {
position: "relative",
display: "block",
animation: "animateXMark 0.5s"
};
exports.iconErrorLine = {
position: "absolute",
height: 5,
width: 47,
backgroundColor: "#d9534f",
display: "block",
top: 37,
borderRadius: 2
};
exports.iconErrorLineLeft = {
transform: "rotate(45deg)",
left: 17
};
exports.iconErrorLineRight = {
transform: "rotate(-45deg)",
right: 16
};
exports.iconWarning = {
borderColor: "#eea236",
animation: "pulseWarning 0.75s infinite alternate"
};
exports.iconWarningBody = {
position: "absolute",
width: 5,
height: 47,
left: "50%",
top: 10,
borderRadius: 2,
marginLeft: -2,
backgroundColor: "#f0ad4e",
animation: "pulseWarningIns 0.75s infinite alternate"
};
exports.iconWarningDot = {
position: "absolute",
width: 7,
height: 7,
borderRadius: "50%",
marginLeft: -3,
left: "50%",
bottom: 10,
backgroundColor: "#f0ad4e",
animation: "pulseWarningIns 0.75s infinite alternate"
};
exports.iconInfo = {
borderColor: "#46b8da"
};
exports.iconInfoBefore = {
content: "",
position: "absolute",
width: 5,
height: 29,
left: "50%",
bottom: 17,
borderRadius: 2,
marginLeft: -2,
backgroundColor: "#5bc0de"
};
exports.iconInfoAfter = {
content: "",
position: "absolute",
width: 7,
height: 7,
borderRadius: "50%",
marginLeft: -3,
left: "50%",
top: 19,
backgroundColor: "#5bc0de"
};
exports.iconSuccess = {
borderColor: "#4cae4c"
};
exports.iconSuccessBeforeAfter = {
content: "",
borderRadius: "50%",
position: "absolute",
width: 60,
height: 120,
background: "white",
transform: "rotate(45deg)"
};
exports.iconSuccessBefore = {
borderRadius: "120px 0 0 120px",
height: 100,
top: -7,
left: -33,
transform: "rotate(-45deg)",
transformOrigin: "60px 60px"
};
exports.iconSuccessAfter = {
borderRadius: "0 120px 120px 0",
top: -11,
left: 30,
transform: "rotate(-45deg)",
transformOrigin: "0px 60px",
animation: "rotatePlaceholder 4.25s ease-in"
};
exports.iconSuccessPlaceholder = {
width: 80,
height: 80,
border: "4px solid rgba(92, 184, 92, 0.2)",
borderRadius: "50%",
boxSizing: "content-box",
position: "absolute",
left: -4,
top: -4,
zIndex: 2
};
exports.iconSuccessFix = {
width: 5,
height: 90,
backgroundColor: "#fff",
position: "absolute",
left: 28,
top: 8,
zIndex: 1,
transform: "rotate(-45deg)"
};
exports.iconSuccessLine = {
height: 5,
backgroundColor: "#5cb85c",
display: "block",
borderRadius: 2,
position: "absolute",
zIndex: 2
};
exports.iconSuccessLineTip = {
width: 25,
left: 14,
top: 46,
transform: "rotate(45deg)",
animation: "animateSuccessTip 0.75s"
};
exports.iconSuccessLineLong = {
width: 47,
right: 8,
top: 38,
transform: "rotate(-45deg)",
animation: "animateSuccessLong 0.75s"
};
exports.iconCustom = {
backgroundSize: "contain",
borderRadius: 0,
border: "none",
backgroundPosition: "center center",
backgroundRepeat: "no-repeat"
};
exports.button = {
marginRight: 8,
};
exports.validationMessage = {
display: "block",
backgroundColor: "#f1f1f1",
marginLeft: "-1.25rem",
marginRight: "-1.25rem",
marginTop: 20,
overflow: "hidden",
padding: 10,
maxHeight: 100,
transition: "padding 0.25s, max-height 0.25s",
color: "#797979",
fontSize: 16,
textAlign: "center",
fontWeight: 300
};
exports.exclamationIcon = {
display: "inline-block",
width: 24,
height: 24,
borderRadius: "50%",
backgroundColor: "#ea7d7d",
color: "white",
lineHeight: "24px",
textAlign: "center",
marginRight: 5
};
exports.inputErrorIcon = {
position: "absolute",
top: 8,
right: 8,
width: 20,
height: 20,
transformOrigin: "50% 50%",
transition: "all 0.1s",
opacity: 1,
transform: "scale(1)"
};
exports.inputErrorIconBeforeAfter = {
content: "",
width: 20,
height: 6,
backgroundColor: "#f06e57",
borderRadius: 3,
position: "absolute",
top: "50%",
marginTop: -4,
left: "50%",
marginLeft: -9
};
exports.inputErrorIconBefore = {
transform: "rotate(-45deg)"
};
exports.inputErrorIconAfter = {
transform: "rotate(45deg)"
};
exports.closeButton = {
position: "absolute",
right: 4,
top: -2,
fontSize: 25,
fontWeight: 900,
color: "rgb(113, 113, 113)",
zIndex: 1,
cursor: "pointer"
};
//# sourceMappingURL=SweetAlertStyles.js.map