{"html":"\n","css":"/* COMMON STYLES*/\n.popup {\n margin: 10px;\n box-shadow: 4px 4px 10px -10px rgba(0, 0, 0, 1);\n width: 300px;\n justify-content: space-around;\n align-items: center;\n display: flex;\n border-radius: 4px;\n padding: 5px 0;\n font-weight: 300;\n}\n.popup svg {\n width: 1.25rem;\n height: 1.25rem;\n}\n.popup-icon svg {\n margin: 5px;\n display: flex;\n align-items: center;\n}\n.close-icon {\n margin-left: auto;\n}\n.close-svg {\n cursor: pointer;\n}\n.close-path {\n fill: grey;\n}\n\n/*SEPERATE STYLES*/\n\n/* SUCCESS */\n.success-popup {\n background-color: #edfbd8;\n border: solid 1px #84d65a;\n}\n.success-icon path {\n fill: #84d65a;\n}\n.success-message {\n color: #2b641e;\n}\n\n/* ALERT */\n.alert-popup {\n background-color: #fefce8;\n border: solid 1px #facc15;\n}\n.alert-icon path {\n fill: #facc15;\n}\n.alert-message {\n color: #ca8a04;\n}\n\n/* ERROR */\n\n.error-popup {\n background-color: #fef2f2;\n border: solid 1px #f87171;\n}\n.error-icon path {\n fill: #f87171;\n}\n.error-message {\n color: #991b1b;\n}\n\n/* INFO */\n\n.info-popup {\n background-color: #eff6ff;\n border: solid 1px #1d4ed8;\n}\n.info-icon path {\n fill: #1d4ed8;\n}\n.info-message {\n color: #1d4ed8;\n}\n"}

gentle-grasshopper-79

👁 实时预览

📝 源代码