added toast notification that item is added to the cart

front-ui/app/css/toast.css

@@ -0,0 +1,71 @@
+#burnttoast {
+    width: auto;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    position: absolute;
+    visibility: hidden;
+    border-radius: 2px;
+    top: 1em;
+    left: 50vw;
+    opacity: 0;
+    filter: alpha(opacity=0);
+    z-index: 3000;
+    margin: 4px;
+    padding: 0.75em 1.25em;
+    cursor: pointer;
+    font-family: sans-serif;
+    font-size: 0.9em;
+    font-weight: 300;
+    transition-property: bottom, opacity;
+    transition: 0.4s cubic-bezier(0.44,0,0.2,0.8);
+    -webkit-justify-content: flex-start;
+        -ms-flex-pack: start;
+            justify-content: flex-start;
+    -webkit-transform: translateX(-50%);
+            transform: translateX(-50%);
+}
+
+#burnttoast.top {
+    bottom: auto;
+    top: -5em;
+}
+#burnttoast.left {
+    left: 0;
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+}
+#burnttoast.top.show {
+    bottom: auto;
+    top: 0;
+}
+
+#burnttoast.show {
+    transition-property: top, opacity;
+    visibility: visible;
+    opacity: 1;
+    filter: alpha(opacity=100);
+    top: 0;
+}
+
+.burnt-toast {
+    max-width: 100%;
+    width: 100%;
+    height: auto;
+    padding: 1em 2em;
+    color: rgb(240,240,240);
+    background: rgba(0,0,0,0.8);
+}
+.burnt-toast p {
+    margin: 0;
+}
+
+@media (max-width: 410px) {
+    #burnttoast {
+        width: 100%;
+        margin: 0;
+        left: 0;
+        -webkit-transform: translateX(0);
+                transform: translateX(0);
+    }
+}