Merge pull request #3347 from dmitrylyzo/toast-stack

Stack toasts

src/components/toast/toast.js

@@ -1,5 +1,17 @@
 import './toast.scss';
 
+let toastContainer;
+
+function getToastContainer() {
+    if (!toastContainer) {
+        toastContainer = document.createElement('div');
+        toastContainer.classList.add('toastContainer');
+        document.body.appendChild(toastContainer);
+    }
+
+    return toastContainer;
+}
+
 function remove(elem) {
     setTimeout(function () {
         elem.parentNode.removeChild(elem);
@@ -8,7 +20,7 @@ function remove(elem) {
 
 function animateRemove(elem) {
     setTimeout(function () {
-        elem.classList.remove('toastVisible');
+        elem.classList.add('toastHide');
         remove(elem);
     }, 3300);
 }
@@ -24,7 +36,7 @@ export default function (options) {
     elem.classList.add('toast');
     elem.textContent = options.text;
 
-    document.body.appendChild(elem);
+    getToastContainer().appendChild(elem);
 
     setTimeout(function () {
         elem.classList.add('toastVisible');

src/components/toast/toast.scss

@@ -1,5 +1,15 @@
-.toast {
+.toastContainer {
     position: fixed;
+    left: 0;
+    bottom: 0;
+    pointer-events: none;
+    z-index: 9999999;
+    padding: 1em;
+    display: flex;
+    flex-direction: column;
+}
+
+.toast {
     min-width: 20em;
     box-sizing: border-box;
     box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
@@ -8,13 +18,26 @@
     transition: transform 0.3s ease-out;
     min-height: initial;
     padding: 1em 1.5em;
-    bottom: 1em;
-    left: 1em;
     font-size: 110%;
-    z-index: 9999999;
+    margin: 0.25em 0;
+    margin-right: auto;
+    pointer-events: initial;
+}
+
+.toast:first-child {
+    margin-top: 0;
+}
+
+.toast:last-child {
+    margin-bottom: 0;
     transform: translateY(16em);
 }
 
-.toastVisible {
+.toast.toastVisible {
     transform: none;
 }
+
+.toast.toastHide {
+    opacity: 0;
+    transition: opacity 0.3s ease-out;
+}