UNPKG

react-simple-toasts

Version:

Instant, lightweight toast notifications for React. No providers or containers needed.

86 lines (82 loc) 1.99 kB
#toast__container * { -webkit-box-sizing: border-box; box-sizing: border-box; } .toast__message { opacity: 0; position: fixed; z-index: 1000; width: -webkit-max-content; width: -moz-max-content; width: max-content; max-width: 90%; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s; } .toast__message--top-center, .toast__message--bottom-center, .toast__message--center { left: 50%; } .toast__message--enter-active, .toast__message--appear-active { opacity: 1; } .toast__message--exit-active { opacity: 0; } .toast__message--loading .toast__spinner-wrap { visibility: visible; opacity: 1; width: 1.1em; margin-right: 12px; } .toast__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .toast__content--clickable { cursor: pointer; } .toast__theme-content { -webkit-transition: all 0.2s; transition: all 0.2s; } .toast__spinner-wrap { display: inline-block; visibility: hidden; opacity: 0; width: 0; margin-right: 0; } .toast__spinner { display: block; overflow: hidden; width: 1.1em; height: 1.1em; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; text-indent: -99999px; -webkit-animation: toast_spinner-spin 1s ease-in-out infinite; animation: toast_spinner-spin 1s ease-in-out infinite; } @-webkit-keyframes toast_spinner-spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes toast_spinner-spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /*# sourceMappingURL=style.css.map */