Fixed #4530 - Export styles of all components

components/lib/message/style/MessageStyle.js

@@ -0,0 +1,69 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-message-wrapper {
+        display: flex;
+        align-items: center;
+    }
+
+    .p-message-icon {
+        flex-shrink: 0;
+    }
+
+    .p-message-close {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+    }
+
+    .p-message-close.p-link {
+        margin-left: auto;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-message-enter-from {
+        opacity: 0;
+    }
+
+    .p-message-enter-active {
+        transition: opacity 0.3s;
+    }
+
+    .p-message.p-message-leave-from {
+        max-height: 1000px;
+    }
+
+    .p-message.p-message-leave-to {
+        max-height: 0;
+        opacity: 0;
+        margin: 0 !important;
+    }
+
+    .p-message-leave-active {
+        overflow: hidden;
+        transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s;
+    }
+
+    .p-message-leave-active .p-message-close {
+        display: none;
+    }
+}
+`;
+
+const classes = {
+    root: ({ props }) => 'p-message p-component p-message-' + props.severity,
+    wrapper: 'p-message-wrapper',
+    icon: 'p-message-icon',
+    text: 'p-message-text',
+    closeButton: 'p-message-close p-link',
+    closeIcon: 'p-message-close-icon'
+};
+
+export default BaseStyle.extend({
+    name: 'message',
+    css,
+    classes
+});