toast.css 570 B

12345678910111213141516171819202122232425262728293031323334353637
  1. :host {
  2. position: fixed;
  3. bottom: 20px;
  4. left: 0;
  5. right: 0;
  6. display: flex;
  7. opacity: 0;
  8. }
  9. :host(.in) {
  10. transition: opacity 300ms;
  11. opacity: 1;
  12. }
  13. :host(.out) {
  14. transition: opacity 1s;
  15. opacity: 0;
  16. }
  17. .wrapper {
  18. flex: 1;
  19. display: flex;
  20. align-items: center;
  21. justify-content: center;
  22. }
  23. .toast {
  24. font-family: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
  25. background-color: #eee;
  26. color: black;
  27. border-radius: 5px;
  28. padding: 10px 15px;
  29. font-size: 14px;
  30. font-weight: 500;
  31. box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20);
  32. }