Refactor #1484 - Improve Growl implementation

primefaces · Aug 12, 2020 · 28ab026 · 28ab026
1 parent cb4e3f5
commit 28ab026
Showing 1 changed file with 59 additions and 41 deletions.
diff --git a/src/components/growl/Growl.css b/src/components/growl/Growl.css
@@ -1,80 +1,98 @@
-.p-growl {
-    position:fixed;
-	width: 20em;
+.p-toast {
+    position: fixed;
+    width: 25rem;
 }
 
-.p-growl.p-growl-topright {
+.p-toast-message-content {
+    display: flex;
+    align-items: flex-start;
+}
+
+.p-toast-message-text {
+    flex: 1 1 auto;
+}
+
+.p-toast-top-right {
 	top: 20px;
-	bottom: auto;
 	right: 20px;
 }
 
-.p-growl.p-growl-topleft {
+.p-toast-top-left {
 	top: 20px;
-	bottom: auto;
 	left: 20px;
 }
 
-.p-growl.p-growl-bottomleft {
-	top: auto;
+.p-toast-bottom-left {
 	bottom: 20px;
 	left: 20px;
 }
 
-.p-growl.p-growl-bottomright {
-	top: auto;
+.p-toast-bottom-right {
 	bottom: 20px;
 	right: 20px;
 }
 
-.p-growl-item-container {
-	position:relative;
-	margin:0 0 10px 0;
+.p-toast-top-center {
+	top: 20px;
+    left: 50%;
+    margin-left: -10em;
 }
 
-.p-growl-item {
-	position: relative;
-    padding: .5em 1em;
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
+.p-toast-bottom-center {
+	bottom: 20px;
+	left: 50%;
+    margin-left: -10em;
 }
 
-.p-growl-item p {
-	padding: 0;
-	margin: 0;
+.p-toast-center {
+	left: 50%;
+	top: 50%;
+    min-width: 20vw;
+    transform: translate(-50%, -50%);
 }
 
-.p-growl-icon-close {
-	position: absolute;
-	top: 4px;
-	right: 4px;
+.p-toast-icon-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-toast-icon-close.p-link {
 	cursor: pointer;
 }
 
-.p-growl-title {
-	font-weight: bold;
-	display: block;
+/* Animations */
+.p-toast-message-enter {
+    opacity: 0;
+    transform: translateY(50%);
 }
 
-.p-growl-details {
-    margin-top: .5em;
+.p-toast-message-enter-active {
+    opacity: 1;
+    transform: translateY(0);
+    transition: transform .3s, opacity .3s;
 }
 
-.p-growl-image {
-	font-size: 2em;
+.p-toast-message-enter-done {
+    transform: none;
 }
 
-.p-growl-message {
-    margin-left: 1em;
-    align-self: center;
+.p-toast-message-exit {
+    opacity: 1;
+    max-height: 1000px;
 }
 
-.p-growl-message p {
-	font-weight: normal;
+.p-toast-message-exit-active {
+    opacity: 0;
+    max-height: 0;
+    margin-bottom: 0;
+    overflow: hidden;
+    transition: max-height .45s cubic-bezier(0, 1, 0, 1), opacity .3s, margin-bottom .3s;
 }
 
-/* Animations */
+/* Animations
 .p-growl-enter {
     opacity: 0.01;
 }
@@ -93,4 +111,4 @@
 	overflow: hidden;
 	margin-bottom: 0;
 	transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), margin-bottom 0.5s cubic-bezier(0, 1, 0, 1);
-}
+}*/