70 lines
1.3 KiB
JavaScript
70 lines
1.3 KiB
JavaScript
|
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
|
||
|
|
});
|