_toast.scss 980 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. #toast-container {
  2. display:block;
  3. position: fixed;
  4. z-index: 10000;
  5. @media #{$small-and-down} {
  6. min-width: 100%;
  7. bottom: 0%;
  8. }
  9. @media #{$medium-only} {
  10. left: 5%;
  11. bottom: 7%;
  12. max-width: 90%;
  13. }
  14. @media #{$large-and-up} {
  15. top: 10%;
  16. right: 7%;
  17. max-width: 86%;
  18. }
  19. }
  20. .toast {
  21. @extend .z-depth-1;
  22. border-radius: 2px;
  23. top: 35px;
  24. width: auto;
  25. margin-top: 10px;
  26. position: relative;
  27. max-width:100%;
  28. height: auto;
  29. min-height: $toast-height;
  30. line-height: 1.5em;
  31. background-color: $toast-color;
  32. padding: 10px 25px;
  33. font-size: 1.1rem;
  34. font-weight: 300;
  35. color: $toast-text-color;
  36. display: flex;
  37. align-items: center;
  38. justify-content: space-between;
  39. cursor: default;
  40. .toast-action {
  41. color: $toast-action-color;
  42. font-weight: 500;
  43. margin-right: -25px;
  44. margin-left: 3rem;
  45. }
  46. &.rounded{
  47. border-radius: 24px;
  48. }
  49. @media #{$small-and-down} {
  50. width: 100%;
  51. border-radius: 0;
  52. }
  53. }