UNPKG

react-compact-toast

Version:

A tiny, compact, and fully customizable toast notification library.

github.com/m2na7/react-compact-toast

m2na7/react-compact-toast

1 lines • 3.51 kB
1
{"version":3,"file":"index.css","names":[],"sources":["../src/styles.css"],"sourcesContent":["@keyframes toastEnterFromBottom {\n 0% {\n opacity: 0;\n transform: translateY(100%) scale(0.96);\n }\n 100% {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n\n@keyframes toastExitToBottom {\n 0% {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n 100% {\n opacity: 0;\n transform: translateY(100%) scale(0.96);\n }\n}\n\n@keyframes toastEnterFromTop {\n 0% {\n opacity: 0;\n transform: translateY(-100%) scale(0.96);\n }\n 100% {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n\n@keyframes toastExitToTop {\n 0% {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n 100% {\n opacity: 0;\n transform: translateY(-100%) scale(0.96);\n }\n}\n\n.toast {\n position: relative;\n min-width: 280px;\n min-height: 44px;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n text-align: center;\n z-index: 9999;\n box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);\n\n cursor: pointer;\n pointer-events: auto;\n touch-action: auto;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.toast-default-style {\n background-color: rgb(40, 40, 40);\n color: rgb(250, 250, 250);\n border-radius: 16px;\n padding: 16px 24px;\n}\n\n.toast-content {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 4px;\n}\n\n.toast-text {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: pre-line;\n max-width: 320px;\n font-size: 14px;\n font-weight: 500;\n line-height: 1.4;\n}\n\n.toast-highlight-text {\n color: inherit;\n font-weight: 600;\n}\n\n.toast-enter-top {\n animation: toastEnterFromTop 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n}\n\n.toast-exit-top {\n animation: toastExitToTop 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;\n}\n\n.toast-enter-bottom {\n animation: toastEnterFromBottom 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n}\n\n.toast-exit-bottom {\n animation: toastExitToBottom 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;\n}\n\n.toast-container {\n display: flex;\n flex-direction: column;\n gap: 10px;\n width: 100vw;\n position: fixed;\n z-index: 1000;\n}\n\n/* Position variants */\n.toast-position-bottomCenter {\n align-items: center;\n bottom: 30px;\n left: 0;\n}\n\n.toast-position-bottomLeft {\n align-items: flex-start;\n bottom: 30px;\n left: 20px;\n}\n\n.toast-position-bottomRight {\n align-items: flex-end;\n bottom: 30px;\n right: 20px;\n}\n\n.toast-position-topCenter {\n align-items: center;\n left: 0;\n top: 30px;\n}\n\n.toast-position-topLeft {\n align-items: flex-start;\n left: 20px;\n top: 30px;\n}\n\n.toast-position-topRight {\n align-items: flex-end;\n right: 20px;\n top: 30px;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA"}