@edinelsonslima/toast-notification
Version:
- 🔗 [Apresentação do toast notification](https://edinelsonslima.github.io/lp-toast-notification/) - 🔗 [NPM](https://www.npmjs.com/package/@edinelsonslima/toast-notification)
2 lines (1 loc) • 2.33 kB
CSS
._toast-container_1ojrm_1{position:fixed;display:flex;flex-direction:column-reverse;gap:1rem;z-index:999}._animation-message-right-top_1ojrm_9,._animation-message-right-center_1ojrm_10,._animation-message-right-bottom_1ojrm_11{animation:_screenRightIn_1ojrm_1 .5s ease-in-out}._right-top_1ojrm_15,._right-center_1ojrm_16,._right-bottom_1ojrm_17{align-items:end;right:1rem}._right-top_1ojrm_15{top:1rem}._right-center_1ojrm_16{align-items:end;top:50%;transform:translateY(-50%)}._right-bottom_1ojrm_17{align-items:end;bottom:1rem}._animation-message-center-top_1ojrm_37,._animation-message-center-bottom_1ojrm_38,._animation-message-center-center_1ojrm_39{animation:_screenCenterIn_1ojrm_1 .5s ease-in-out}._center-top_1ojrm_43,._center-center_1ojrm_44,._center-bottom_1ojrm_45{left:50%;align-items:center;transform:translate(-50%)}._center-top_1ojrm_43{top:1rem}._center-center_1ojrm_44{top:50%;transform:translate(-50%,-50%)}._center-bottom_1ojrm_45{bottom:1rem}._animation-message-left-top_1ojrm_64,._animation-message-left-center_1ojrm_65,._animation-message-left-bottom_1ojrm_66{animation:_screenLeftIn_1ojrm_1 .5s ease-in-out}._left-top_1ojrm_70,._left-center_1ojrm_71,._left-bottom_1ojrm_72{align-items:start;left:1rem}._left-top_1ojrm_70{top:1rem}._left-center_1ojrm_71{top:50%;transform:translateY(-50%)}._left-bottom_1ojrm_72{bottom:1rem}._toast-message_1ojrm_90{display:flex;gap:.5rem;align-items:center;justify-content:center;border-radius:.2rem;padding:.5rem;background:#c2c2c2;box-shadow:0 3px 10px #0000001a;border:none;outline:none;cursor:pointer;transition:all .5s ease-in-out;font-size:.875rem}._toast-message_1ojrm_90:hover{filter:brightness(.9)}._toast-message_1ojrm_90:active{filter:brightness(1.1)}._success_1ojrm_114{background:#61d345}._info_1ojrm_118{background:#4b8aff;color:#fff}._warn_1ojrm_123{background:#fc0}._error_1ojrm_127{background:#ff4b4b;color:#fff}._ghost_1ojrm_132{background:#fff}._animation-unmount_1ojrm_136{animation:_screenOut_1ojrm_1 .5s ease-in-out forwards}@keyframes _screenRightIn_1ojrm_1{0%{transform:translate(150%)}to{transform:translate(0)}}@keyframes _screenLeftIn_1ojrm_1{0%{transform:translate(-150%)}to{transform:translate(0)}}@keyframes _screenCenterIn_1ojrm_1{0%{transform:translateY(-150%)}to{transform:translate(0)}}@keyframes _screenOut_1ojrm_1{0%{opacity:1}to{opacity:0}}