_toast.scss 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. /* purgecss start ignore */
  2. .c-toast--success {
  3. background-color: $color-green;
  4. }
  5. .c-toast--info {
  6. background-color: $color-primary;
  7. }
  8. .c-toast--warning {
  9. background-color: $color-yellow;
  10. }
  11. .c-toast--error {
  12. background-color: $color-red
  13. }
  14. .c-toast--default {
  15. background-color: $color-text;
  16. }
  17. .fadeOut {
  18. animation-name: fadeOut
  19. }
  20. .fadeInDown {
  21. animation-name: fadeInDown
  22. }
  23. .fadeInUp {
  24. animation-name: fadeInUp
  25. }
  26. .fade-enter-active {
  27. transition: opacity .3s ease-in
  28. }
  29. .fade-leave-active {
  30. transition: opacity .15s ease-out
  31. }
  32. .fade-enter, .fade-leave-to {
  33. opacity: 0
  34. }
  35. @-webkit-keyframes fadeOut {
  36. 0% {
  37. opacity: 1
  38. }
  39. to {
  40. opacity: 0
  41. }
  42. }
  43. @keyframes fadeOut {
  44. 0% {
  45. opacity: 1
  46. }
  47. to {
  48. opacity: 0
  49. }
  50. }
  51. @keyframes fadeInDown {
  52. 0% {
  53. opacity: .5;
  54. transform: translate3d(0, -100%, 0)
  55. }
  56. to {
  57. opacity: 1;
  58. transform: none
  59. }
  60. }
  61. @keyframes fadeInUp {
  62. 0% {
  63. opacity: .5;
  64. transform: translate3d(0, 100%, 0)
  65. }
  66. to {
  67. opacity: 1;
  68. transform: none
  69. }
  70. }
  71. .c-toast-container {
  72. position: fixed;
  73. display: flex;
  74. top: 0;
  75. bottom: 0;
  76. left: 0;
  77. right: 0;
  78. padding: 2em;
  79. overflow: hidden;
  80. z-index: 9999;
  81. pointer-events: none
  82. }
  83. .c-toast-container--top {
  84. flex-direction: column
  85. }
  86. .c-toast-container--bottom {
  87. flex-direction: column-reverse
  88. }
  89. @media screen and (max-width: 768px) {
  90. .c-toast-container {
  91. padding: 0;
  92. position: fixed !important
  93. }
  94. }
  95. .c-toast {
  96. display: flex;
  97. align-items: center;
  98. animation-duration: .15s;
  99. margin: .5em 0;
  100. border-radius: .5em;
  101. pointer-events: auto;
  102. color: #ffffff;
  103. min-height: 3em;
  104. cursor: pointer;
  105. padding: .5em 1rem;
  106. word-break: break-word;
  107. svg {
  108. width: 1.5rem;
  109. height: 1.5rem;
  110. margin-right: .5rem;
  111. stroke-width: 1.5;
  112. }
  113. }
  114. .c-toast--bottom,
  115. .c-toast--top {
  116. align-self: center
  117. }
  118. .c-toast--bottom-right,
  119. .c-toast--top-right {
  120. align-self: flex-end
  121. }
  122. .c-toast--bottom-left,
  123. .c-toast--top-left {
  124. align-self: flex-start
  125. }
  126. /* purgecss end ignore */