ndd-react/dist/style.css

A lightweight, customizable toast notification library for React applications

@keyframes slideIn{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes slideOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(20px) scale(.95)}}@keyframes progress{0%{width:100%}to{width:0}}.toast-container{display:flex;flex-direction:column;gap:.5rem;padding:.5rem;position:fixed;width:22rem;z-index:50}.toast-container.top-right{right:.5rem;top:.5rem}.toast-container.top-left{left:.5rem;top:.5rem}.toast-container.bottom-right{bottom:.5rem;right:.5rem}.toast-container.bottom-left{bottom:.5rem;left:.5rem}.toast-container.top-center{left:50%;top:.5rem;transform:translateX(-50%)}.toast-container.bottom-center{bottom:.5rem;left:50%;transform:translateX(-50%)}.toast{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:hsla(0,0%,100%,.65);border:1px solid;border-radius:.75rem;box-shadow:0 8px 32px rgba(0,0,0,.08);display:flex;flex-direction:column;overflow:hidden;position:relative}.toast.toast-success{border-color:#d1fae5}.toast.toast-error{border-color:#fee2e2}.toast.toast-warning{border-color:#fef3c7}.toast.toast-info{border-color:#dbeafe}.toast-content{align-items:flex-start;display:flex;gap:.75rem;padding:1rem}.icon-circle{align-items:center;border-radius:9999px;box-shadow:0 4px 12px -2px rgba(0,0,0,.1),inset 0 -1px 4px rgba(0,0,0,.05),inset 0 1px 4px hsla(0,0%,100%,.4);display:flex;flex-shrink:0;height:2.5rem;justify-content:center;width:2.5rem}.icon-circle.icon-success{background-color:rgba(16,185,129,.1);color:#059669}.icon-circle.icon-error{background-color:rgba(239,68,68,.1);color:#dc2626}.icon-circle.icon-warning{background-color:rgba(245,158,11,.1);color:#d97706}.icon-circle.icon-info{background-color:rgba(59,130,246,.1);color:#2563eb}.icon-core{align-items:center;display:flex;height:20px;justify-content:center;width:20px}.icon-core svg{height:100%;width:100%}.toast-text{flex:1}.toast-title{color:#1f2937;font-size:1rem;font-weight:600;line-height:1.5;margin:0}.toast-message{color:#4b5563;font-size:.875rem;line-height:1.5;margin-bottom:0;margin-top:.25rem}.toast-close{background:none;border:none;color:#9ca3af;cursor:pointer;padding:.25rem;transition:color .2s}.toast-close:hover{color:#4b5563}.toast-close svg{height:1.25rem;width:1.25rem}.progress-bar{animation:progress 3.5s linear forwards;height:3px;width:100%}.progress-bar.progress-success{background:linear-gradient(90deg,#34d399,#a7f3d0)}.progress-bar.progress-error{background:linear-gradient(90deg,#f87171,#fecaca)}.progress-bar.progress-warning{background:linear-gradient(90deg,#fbbf24,#fde68a)}.progress-bar.progress-info{background:linear-gradient(90deg,#60a5fa,#bfdbfe)}@media (prefers-color-scheme:dark){.toast{background:rgba(15,15,20,.85)}.toast-title{color:hsla(0,0%,100%,.9)}.toast-message{color:rgba(156,163,175,.9)}.toast-close:hover{color:#d1d5db}}.toast-enter{animation:slideIn .3s cubic-bezier(.175,.885,.32,1.275) forwards}.toast-exit{animation:slideOut .3s ease-out forwards}
/*# sourceMappingURL=index.css.map */