Initiated Toast

public/themes/luna-amber/theme.css

@@ -2943,42 +2943,60 @@ body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-image,
 body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message {
+body .p-toast {
+  top: 70px;
+  opacity: 0.9;
+  filter: alpha(opacity=90);
+}
+body .p-toast .p-toast-item-container {
+  margin: 0 0 1em 0;
   -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  margin: 0 0 1em 0;
 }
-body .p-toast .p-toast-message.p-toast-message-info {
+body .p-toast .p-toast-item-container .p-toast-item {
+  padding: 1em;
+}
+body .p-toast .p-toast-item-container .p-toast-item .p-toast-message {
+  margin: 0 0 0 4em;
+}
+body .p-toast .p-toast-item-container .p-toast-item .p-toast-image {
+  font-size: 2.571em;
+}
+body .p-toast .p-toast-item-container.p-toast-message-info {
   background-color: #7fbcec;
   border: 0 none;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-info .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-success {
+body .p-toast .p-toast-item-container.p-toast-message-success {
   background-color: #b7d8b7;
   border: 0 none;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-success .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-warn {
+body .p-toast .p-toast-item-container.p-toast-message-warn {
   background-color: #ffe399;
   border: 0 none;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-warn .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-error {
+body .p-toast .p-toast-item-container.p-toast-message-error {
   background-color: #f8b7bd;
   border: 0 none;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-error .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-icon-close {
   color: #212121;
 }
 

public/themes/luna-blue/theme.css

@@ -2943,42 +2943,60 @@ body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-image,
 body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message {
+body .p-toast {
+  top: 70px;
+  opacity: 0.9;
+  filter: alpha(opacity=90);
+}
+body .p-toast .p-toast-item-container {
+  margin: 0 0 1em 0;
   -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  margin: 0 0 1em 0;
 }
-body .p-toast .p-toast-message.p-toast-message-info {
+body .p-toast .p-toast-item-container .p-toast-item {
+  padding: 1em;
+}
+body .p-toast .p-toast-item-container .p-toast-item .p-toast-message {
+  margin: 0 0 0 4em;
+}
+body .p-toast .p-toast-item-container .p-toast-item .p-toast-image {
+  font-size: 2.571em;
+}
+body .p-toast .p-toast-item-container.p-toast-message-info {
   background-color: #7fbcec;
   border: 0 none;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-info .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-success {
+body .p-toast .p-toast-item-container.p-toast-message-success {
   background-color: #b7d8b7;
   border: 0 none;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-success .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-warn {
+body .p-toast .p-toast-item-container.p-toast-message-warn {
   background-color: #ffe399;
   border: 0 none;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-warn .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-error {
+body .p-toast .p-toast-item-container.p-toast-message-error {
   background-color: #f8b7bd;
   border: 0 none;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-error .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-icon-close {
   color: #212121;
 }
 

public/themes/luna-green/theme.css

@@ -2943,42 +2943,60 @@ body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-image,
 body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message {
+body .p-toast {
+  top: 70px;
+  opacity: 0.9;
+  filter: alpha(opacity=90);
+}
+body .p-toast .p-toast-item-container {
+  margin: 0 0 1em 0;
   -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  margin: 0 0 1em 0;
 }
-body .p-toast .p-toast-message.p-toast-message-info {
+body .p-toast .p-toast-item-container .p-toast-item {
+  padding: 1em;
+}
+body .p-toast .p-toast-item-container .p-toast-item .p-toast-message {
+  margin: 0 0 0 4em;
+}
+body .p-toast .p-toast-item-container .p-toast-item .p-toast-image {
+  font-size: 2.571em;
+}
+body .p-toast .p-toast-item-container.p-toast-message-info {
   background-color: #7fbcec;
   border: 0 none;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-info .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-success {
+body .p-toast .p-toast-item-container.p-toast-message-success {
   background-color: #b7d8b7;
   border: 0 none;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-success .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-warn {
+body .p-toast .p-toast-item-container.p-toast-message-warn {
   background-color: #ffe399;
   border: 0 none;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-warn .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-error {
+body .p-toast .p-toast-item-container.p-toast-message-error {
   background-color: #f8b7bd;
   border: 0 none;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-error .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-icon-close {
   color: #212121;
 }
 

public/themes/luna-pink/theme.css

@@ -2943,42 +2943,60 @@ body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-image,
 body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message {
+body .p-toast {
+  top: 70px;
+  opacity: 0.9;
+  filter: alpha(opacity=90);
+}
+body .p-toast .p-toast-item-container {
+  margin: 0 0 1em 0;
   -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  margin: 0 0 1em 0;
 }
-body .p-toast .p-toast-message.p-toast-message-info {
+body .p-toast .p-toast-item-container .p-toast-item {
+  padding: 1em;
+}
+body .p-toast .p-toast-item-container .p-toast-item .p-toast-message {
+  margin: 0 0 0 4em;
+}
+body .p-toast .p-toast-item-container .p-toast-item .p-toast-image {
+  font-size: 2.571em;
+}
+body .p-toast .p-toast-item-container.p-toast-message-info {
   background-color: #7fbcec;
   border: 0 none;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-info .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-success {
+body .p-toast .p-toast-item-container.p-toast-message-success {
   background-color: #b7d8b7;
   border: 0 none;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-success .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-warn {
+body .p-toast .p-toast-item-container.p-toast-message-warn {
   background-color: #ffe399;
   border: 0 none;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-warn .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-error {
+body .p-toast .p-toast-item-container.p-toast-message-error {
   background-color: #f8b7bd;
   border: 0 none;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-error .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-icon-close {
   color: #212121;
 }
 

public/themes/nova-colored/theme.css

@@ -2943,42 +2943,60 @@ body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-image,
 body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message {
+body .p-toast {
+  top: 70px;
+  opacity: 0.9;
+  filter: alpha(opacity=90);
+}
+body .p-toast .p-toast-item-container {
+  margin: 0 0 1em 0;
   -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  margin: 0 0 1em 0;
 }
-body .p-toast .p-toast-message.p-toast-message-info {
+body .p-toast .p-toast-item-container .p-toast-item {
+  padding: 1em;
+}
+body .p-toast .p-toast-item-container .p-toast-item .p-toast-message {
+  margin: 0 0 0 4em;
+}
+body .p-toast .p-toast-item-container .p-toast-item .p-toast-image {
+  font-size: 2.571em;
+}
+body .p-toast .p-toast-item-container.p-toast-message-info {
   background-color: #7fbcec;
   border: 0 none;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-info .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-success {
+body .p-toast .p-toast-item-container.p-toast-message-success {
   background-color: #b7d8b7;
   border: 0 none;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-success .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-warn {
+body .p-toast .p-toast-item-container.p-toast-message-warn {
   background-color: #ffe399;
   border: 0 none;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-warn .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-error {
+body .p-toast .p-toast-item-container.p-toast-message-error {
   background-color: #f8b7bd;
   border: 0 none;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-error .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-icon-close {
   color: #212121;
 }
 

public/themes/nova-dark/theme.css

@@ -2943,42 +2943,60 @@ body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-image,
 body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message {
+body .p-toast {
+  top: 70px;
+  opacity: 0.9;
+  filter: alpha(opacity=90);
+}
+body .p-toast .p-toast-item-container {
+  margin: 0 0 1em 0;
   -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  margin: 0 0 1em 0;
 }
-body .p-toast .p-toast-message.p-toast-message-info {
+body .p-toast .p-toast-item-container .p-toast-item {
+  padding: 1em;
+}
+body .p-toast .p-toast-item-container .p-toast-item .p-toast-message {
+  margin: 0 0 0 4em;
+}
+body .p-toast .p-toast-item-container .p-toast-item .p-toast-image {
+  font-size: 2.571em;
+}
+body .p-toast .p-toast-item-container.p-toast-message-info {
   background-color: #7fbcec;
   border: 0 none;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-info .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-success {
+body .p-toast .p-toast-item-container.p-toast-message-success {
   background-color: #b7d8b7;
   border: 0 none;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-success .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-warn {
+body .p-toast .p-toast-item-container.p-toast-message-warn {
   background-color: #ffe399;
   border: 0 none;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-warn .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-error {
+body .p-toast .p-toast-item-container.p-toast-message-error {
   background-color: #f8b7bd;
   border: 0 none;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-error .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-icon-close {
   color: #212121;
 }
 

public/themes/nova-light/theme.css

@@ -2943,42 +2943,60 @@ body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-image,
 body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message {
+body .p-toast {
+  top: 70px;
+  opacity: 0.9;
+  filter: alpha(opacity=90);
+}
+body .p-toast .p-toast-item-container {
+  margin: 0 0 1em 0;
   -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  margin: 0 0 1em 0;
 }
-body .p-toast .p-toast-message.p-toast-message-info {
+body .p-toast .p-toast-item-container .p-toast-item {
+  padding: 1em;
+}
+body .p-toast .p-toast-item-container .p-toast-item .p-toast-message {
+  margin: 0 0 0 4em;
+}
+body .p-toast .p-toast-item-container .p-toast-item .p-toast-image {
+  font-size: 2.571em;
+}
+body .p-toast .p-toast-item-container.p-toast-message-info {
   background-color: #7fbcec;
   border: 0 none;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-info .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-success {
+body .p-toast .p-toast-item-container.p-toast-message-success {
   background-color: #b7d8b7;
   border: 0 none;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-success .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-warn {
+body .p-toast .p-toast-item-container.p-toast-message-warn {
   background-color: #ffe399;
   border: 0 none;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-warn .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-error {
+body .p-toast .p-toast-item-container.p-toast-message-error {
   background-color: #f8b7bd;
   border: 0 none;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-error .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-icon-close {
   color: #212121;
 }
 

public/themes/rhea/theme.css

@@ -2943,42 +2943,60 @@ body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-image,
 body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message {
+body .p-toast {
-  -webkit-box-shadow: 0 3px 0.429em 0 rgba(0, 0, 0, 0.16);
+  top: 120px;
-  -moz-box-shadow: 0 3px 0.429em 0 rgba(0, 0, 0, 0.16);
+  opacity: 0.9;
-  box-shadow: 0 3px 0.429em 0 rgba(0, 0, 0, 0.16);
+  filter: alpha(opacity=90);
-  margin: 0 0 1em 0;
 }
-body .p-toast .p-toast-message.p-toast-message-info {
+body .p-toast .p-toast-item-container {
+  margin: 0 0 1em 0;
+  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+}
+body .p-toast .p-toast-item-container .p-toast-item {
+  padding: 1em;
+}
+body .p-toast .p-toast-item-container .p-toast-item .p-toast-message {
+  margin: 0 0 0 4em;
+}
+body .p-toast .p-toast-item-container .p-toast-item .p-toast-image {
+  font-size: 3.429em;
+}
+body .p-toast .p-toast-item-container.p-toast-message-info {
   background-color: #A3DEF8;
   border: 1px solid #79C8EB;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-info .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-success {
+body .p-toast .p-toast-item-container.p-toast-message-success {
   background-color: #A3E2C6;
   border: 1px solid #A3E2C6;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-success .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-warn {
+body .p-toast .p-toast-item-container.p-toast-message-warn {
   background-color: #ffe277;
   border: 1px solid #ffe277;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-warn .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-icon-close {
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-error {
+body .p-toast .p-toast-item-container.p-toast-message-error {
   background-color: #ff8b8b;
   border: 1px solid #ff8b8b;
   color: #212121;
 }
-body .p-toast .p-toast-message.p-toast-message-error .p-toast-close-icon {
+body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-image,
+body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-icon-close {
   color: #212121;
 }
 

src/App.vue

@@ -7,6 +7,7 @@
             <router-view/>
             <app-footer />
         </div>
+        <Toast />
     </div>
 </template>
 

src/AppMenu.vue

@@ -135,22 +135,11 @@
             </div>
 
             <a @click="toggleMenu($event, 9)" :class="{'active-menuitem': activeMenuIndex === 9}">
-                <img alt="dragdrop" class="layout-menu-icon-inactive" src="./assets/images/menu/dragdrop.svg" />
-                <img alt="dragdrop" class="layout-menu-icon-active" src="./assets/images/menu/dragdrop-active.svg" />
-                <span>DragDrop</span>
-            </a>
-            <div :class="{'submenuhide': activeMenuIndex !== 9, 'submenushow': activeMenuIndex === 9}">
-                <div>
-                    <router-link to="/">&#9679; Link</router-link>
-                </div>
-            </div>
-
-            <a @click="toggleMenu($event, 10)" :class="{'active-menuitem': activeMenuIndex === 10}">
                 <img alt="misc" class="layout-menu-icon-inactive" src="./assets/images/menu/misc.svg" />
                 <img alt="misc" class="layout-menu-icon-active" src="./assets/images/menu/misc-active.svg" />
                 <span>Misc</span>
             </a>
-            <div :class="{'submenuhide': activeMenuIndex !== 10, 'submenushow': activeMenuIndex === 10}">
+            <div :class="{'submenuhide': activeMenuIndex !== 9, 'submenushow': activeMenuIndex === 9}">
                 <div>
                     <router-link to="/progressbar">&#9679; ProgressBar</router-link>
                 </div>

src/assets/styles/app.scss

@@ -405,6 +405,7 @@ body {
             background: url('./assets/images/component-intro-bg.jpg');
             border-bottom: 1px solid #dadada;
             color: #484848;
+            background-size: cover;
             
             .feature-intro {
                 h1 {

src/assets/styles/primevue.css

@@ -24,5 +24,6 @@
 @import '../../components/spinner/Spinner.css';
 @import '../../components/tabview/TabView.css';
 @import '../../components/textarea/Textarea.css';
+@import '../../components/toast/Toast.css';
 @import '../../components/toolbar/Toolbar.css';
 @import '../../components/validationmessage/ValidationMessage.css';

src/components/toast/Toast.css

@@ -0,0 +1,96 @@
+.p-toast {
+    position: fixed;
+    width: 20em;
+}
+
+.p-toast-topright {
+	top: 20px;
+	right: 20px;
+}
+
+.p-toast-topleft {
+	top: 20px;
+	left: 20px;
+}
+
+.p-toast-bottomleft {
+	bottom: 20px;
+	left: 20px;
+}
+
+.p-toast-bottomright {
+	bottom: 20px;
+	right: 20px;
+}
+
+.p-toast-item-container {
+	position:relative;
+	margin:0 0 10px 0;
+}
+
+.p-toast-item {
+	position: relative;
+	display: block;
+    padding: .5em 1em;
+    overflow: hidden;
+}
+
+.p-toast-item .p-toast-detail {
+	padding: 0;
+	margin: 0;
+}
+
+.p-toast-icon-close {
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	cursor: pointer;
+}
+
+.p-toast-title {
+	font-weight: bold;
+	padding: 0 0 .5em 0;
+	display: block;
+}
+
+.p-toast-image {
+    position: absolute;
+    display: inline-block;
+    left: .5em;
+    top: .25em;
+    padding: 0;
+	font-size: 2em;
+}
+
+.p-toast-message {
+	padding: 0 0 .25em 0;
+    margin-left: 2.5em;
+}
+
+.p-toast-message p {
+	font-weight: normal;
+}
+
+/* Animations */
+.p-toast-message-enter {
+    opacity: 0;
+    -webkit-transform: translateY(50%);
+    -ms-transform: translateY(50%);
+    transform: translateY(50%);
+}
+
+.p-toast-message-leave {
+    max-height: 1000px;
+}
+
+.p-toast-message-leave-to {
+    max-height: 0;
+    opacity: 0;
+    overflow: hidden;
+}
+
+.p-toast-message-enter-active,
+.p-toast-message-leave-active {
+    -webkit-transition: all .3s;
+    transition: all .3s;
+}

src/components/toast/Toast.vue

@@ -0,0 +1,61 @@
+<template>
+    <div :class="containerClass">
+        <ToastMessage v-for="msg of messages" :key="msg.id" :message="msg" @close="remove($event)"/>
+    </div>
+</template>
+
+<script>
+import ToastEventBus from './ToastEventBus';
+import ToastMessage from './ToastMessage';
+
+var messageIdx = 0;
+
+export default {
+    props: {
+        position: {
+            type: String,
+            default: 'topright'
+        }
+    },
+    data() {
+        return {
+            messages: []
+        }
+    },
+    mounted() {
+        ToastEventBus.$on('add', (message) => this.add(message));
+    },
+    methods: {
+        add(message) {
+            if (message.id == null) {
+                message.id = messageIdx++;
+            } 
+            
+            this.messages = [...this.messages, message];
+        },
+        remove(message) {
+            let index = -1;
+            for (let i = 0; i < this.messages.length; i++) {
+                if (this.messages[i] === message) {
+                    index = i;
+                    break;
+                }
+            }
+
+            this.messages.splice(index, 1);
+        }
+    },
+    components: {
+        'ToastMessage': ToastMessage
+    },
+    computed: {
+        containerClass() {
+            return 'p-toast p-component p-toast-' + this.position;
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>

src/components/toast/ToastEventBus.js

@@ -0,0 +1,4 @@
+import Vue from 'vue';
+
+const EventBus = new Vue();
+export default EventBus;

src/components/toast/ToastMessage.vue

@@ -0,0 +1,50 @@
+<template>
+    <transition name="p-toast-message">
+        <div :class="containerClass">
+            <div class="p-toast-item">
+                <button class="p-toast-icon-close p-link" @click="close">
+                    <span class="p-toast-icon-close-icon pi pi-times"></span>
+                </button>
+                <span :class="iconClass"></span>
+                <div class="p-toast-message">
+                    <span class="p-toast-title">{{message.summary}}</span>
+                    <div class="p-toast-detail">{{message.detail}}</div>
+                </div>
+            </div>
+        </div>
+    </transition>
+</template>
+
+<script>
+export default {
+    props: {
+        message: null
+    },
+    mounted() {
+        
+    },
+    methods: {
+        close() {
+            this.$emit('close', this.message);
+        }
+    },
+    computed: {
+        containerClass() {
+            return ['p-toast-item-container p-highlight', {
+                'p-toast-message-info': this.message.severity === 'info',
+                'p-toast-message-warn': this.message.severity === 'warn',
+                'p-toast-message-error': this.message.severity === 'error',
+                'p-toast-message-success': this.message.severity === 'success'
+            }];
+        },
+        iconClass() {
+            return ['p-toast-image pi', {
+                'pi-info-circle': this.message.severity === 'info',
+                'pi-exclamation-triangle': this.message.severity === 'warn',
+                'pi-times': this.message.severity === 'error',
+                'pi-check': this.message.severity === 'success'
+            }];
+        }
+    }
+}
+</script>

src/components/toast/ToastService.js

@@ -0,0 +1,15 @@
+import ToastEventBus from './ToastEventBus';
+
+const ToastService = {
+
+    install: (Vue) => {
+        Vue.prototype.$toast = {
+            add: (message) => {
+                ToastEventBus.$emit('add', message);
+            }
+        }
+    }
+    
+};
+
+export default ToastService;

src/main.js

@@ -30,6 +30,8 @@ import Slider from './components/slider/Slider';
 import Sidebar from './components/sidebar/Sidebar';
 import Spinner from './components/spinner/Spinner';
 import Textarea from './components/textarea/Textarea';
+import Toast from './components/toast/Toast';
+import ToastService from './components/toast/ToastService';
 import Toolbar from './components/toolbar/Toolbar';
 import TabView from './components/tabview/TabView';
 import TabPanel from './components/tabview/TabPanel';
@@ -41,6 +43,8 @@ import './assets/styles/primevue.css';
 import 'primeflex/primeflex.css';
 import 'primeicons/primeicons.css';
 
+Vue.use(ToastService);
+
 Vue.config.productionTip = false;
 
 Vue.component('Accordion', Accordion);
@@ -74,6 +78,7 @@ Vue.component('Spinner', Spinner);
 Vue.component('TabView', TabView);
 Vue.component('TabPanel', TabPanel);
 Vue.component('Textarea', Textarea);
+Vue.component('Toast', Toast);
 Vue.component('Toolbar', Toolbar);
 Vue.component('ToggleButton', ToggleButton);
 Vue.component('TriStateCheckbox', TriStateCheckbox);

src/router.js

@@ -201,6 +201,11 @@ export default new Router({
         name: 'tabview',
         component: () => import('./views/tabview/TabViewDemo.vue')
     },
+    {
+        path: '/toast',
+        name: 'toast',
+        component: () => import('./views/toast/ToastDemo.vue')
+    },
     {
         path: '/togglebutton',
         name: 'togglebutton',

src/views/toast/ToastDemo.vue

@@ -0,0 +1,64 @@
+ <template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Toast</h1>
+                <p>Toast is used to display messages in an overlay.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation p-fluid">
+            <h3>Severities</h3>
+            <div class="p-grid">
+                <div class="p-col-12 p-md-3">
+                    <Button label="Success" class="p-button-success" @click="showSuccess" />
+                </div>
+                <div class="p-col-12 p-md-3">
+                    <Button label="Info" class="p-button-info" @click="showInfo" />
+                </div>
+                <div class="p-col-12 p-md-3">
+                    <Button label="Warn" class="p-button-warning" @click="showWarn" />
+                </div>
+                <div class="p-col-12 p-md-3">
+                    <Button label="Error" class="p-button-danger" @click="showError" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            messages: [],
+            count: 0
+        }
+    },
+    methods: {
+        showSuccess() {
+            this.$toast.add({severity:'success', summary: 'Success Message', detail:'Order submitted'});
+        },
+        showInfo() {
+            this.$toast.add({severity:'info', summary: 'Info Message', detail:'PrimeNG rocks'});
+        },
+        showWarn() {
+            this.$toast.add({severity:'warn', summary: 'Warn Message', detail:'There are unsaved changes'});
+        },
+        showError() {
+            this.$toast.add({severity:'error', summary: 'Error Message', detail:'Validation failed'});
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+button.p-button {
+    margin-right: .5em;
+}
+
+.p-toast.p-toast-topright,
+.p-toast.p-toast-left {
+    top: 100px;
+}
+</style>