swipeable-toasts
Version:
Swipeable Toasts for the Ionic-Framework
2 lines • 2.5 kB
JavaScript
export var CSS = ".toast {\n top: -100px;\n width: 100%;\n display: block;\n height: 80px;\n position: absolute;\n opacity: 0;\n box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08);\n border-radius: 15px;\n z-index: 9999;\n}\n\n.toast-content {\n padding: 20px;\n height: 100%;\n border-radius: 15px;\n font-weight: 500;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.default {\n color: #0b0b0b;\n background: #f5f5f5;\n}\n\n.info {\n color: #ffffff;\n background: #209cee;\n}\n\n.success {\n color: #ffffff;\n background: #23d160;\n}\n\n.warning {\n color: #ffffff;\n background: #ffdd57;\n}\n\n.error {\n color: #ffffff;\n background: #ff3860;\n}\n\n.show-toast {\n animation: bounceInDown 1500ms ease-in-out forwards;\n}\n\n.hide-toast {\n animation: bounceOutUp 1500ms ease-in-out forwards;\n opacity: 1;\n}\n\n@keyframes bounceInDown {\n 0%, 60%, 75%, 90%, 100% {\n -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n }\n\n 0% {\n opacity: 0;\n -webkit-transform: translate3d(0, -3000px, 0);\n transform: translate3d(0, -3000px, 0);\n margin-top: 100px;\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: translate3d(0, 25px, 0);\n transform: translate3d(0, 25px, 0);\n margin-top: 100px;\n }\n\n 75% {\n -webkit-transform: translate3d(0, -10px, 0);\n transform: translate3d(0, -10px, 0);\n margin-top: 100px;\n }\n\n 90% {\n -webkit-transform: translate3d(0, 5px, 0);\n transform: translate3d(0, 5px, 0);\n margin-top: 100px;\n }\n\n 100% {\n -webkit-transform: none;\n transform: none;\n opacity: 1;\n margin-top: 100px;\n }\n}\n\n@keyframes bounceOutUp {\n 100% {\n -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n }\n 0% {\n -webkit-transform: none;\n transform: none;\n opacity: 1;\n margin-top: 100px;\n }\n\n 100% {\n -webkit-transform: translate3d(0, -3000px, 0);\n transform: translate3d(0, -3000px, 0);\n margin-top: 100px;\n }\n}";
//# sourceMappingURL=swipeable-toast-component.css.js.map