vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #302 - Refactor Messages css naming

pull/310/head
cagataycivici 2020-05-04 16:31:06 +03:00
parent efbc70ade4
commit 07c35728f8
1 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/message/Message.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<transition name="p-messages"> <transition name="p-message">
<div :class="containerClass" v-if="visible" role="alert"> <div :class="containerClass" v-if="visible" role="alert">
<div class="p-messages-wrapper"> <div class="p-message-wrapper">
<span :class="iconClass"></span> <span :class="iconClass"></span>
<div class="p-messages-text"> <div class="p-message-text">
<slot></slot> <slot></slot>
</div> </div>
<button class="p-messages-close p-link" @click="visible = false" v-if="closable" type="button"> <button class="p-message-close p-link" @click="visible = false" v-if="closable" type="button">
<i class="p-messages-close-icon pi pi-times"></i> <i class="p-message-close-icon pi pi-times"></i>
</button> </button>
</div> </div>
</div> </div>
@ -49,10 +49,10 @@ export default {
}, },
computed: { computed: {
containerClass() { containerClass() {
return 'p-messages p-component p-messages-' + this.severity; return 'p-message p-component p-message-' + this.severity;
}, },
iconClass() { iconClass() {
return ['p-messages-icon pi', { return ['p-message-icon pi', {
'pi-info-circle': this.severity === 'info', 'pi-info-circle': this.severity === 'info',
'pi-check': this.severity === 'success', 'pi-check': this.severity === 'success',
'pi-exclamation-triangle': this.severity === 'warn', 'pi-exclamation-triangle': this.severity === 'warn',
@ -64,47 +64,47 @@ export default {
</script> </script>
<style> <style>
.p-messages-wrapper { .p-message-wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.p-messages-close { .p-message-close {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.p-messages-close.p-link { .p-message-close.p-link {
margin-left: auto margin-left: auto
} }
.p-messages-enter { .p-message-enter {
opacity: 0; opacity: 0;
} }
.p-messages-enter-active { .p-message-enter-active {
-webkit-transition: opacity .3s; -webkit-transition: opacity .3s;
transition: opacity .3s; transition: opacity .3s;
} }
.p-messages.p-messages-leave { .p-message.p-message-leave {
max-height: 1000px; max-height: 1000px;
} }
.p-messages.p-messages-leave-to { .p-message.p-message-leave-to {
max-height: 0; max-height: 0;
opacity: 0; opacity: 0;
margin: 0 !important; margin: 0 !important;
} }
.p-messages-leave-active { .p-message-leave-active {
overflow: hidden; overflow: hidden;
-webkit-transition: max-height .3s cubic-bezier(0, 1, 0, 1), opacity .3s, margin .3s; -webkit-transition: max-height .3s cubic-bezier(0, 1, 0, 1), opacity .3s, margin .3s;
transition: max-height .3 cubic-bezier(0, 1, 0, 1), opacity .3s, margin .3s; transition: max-height .3 cubic-bezier(0, 1, 0, 1), opacity .3s, margin .3s;
} }
.p-messages-leave-active .p-messages-close { .p-message-leave-active .p-message-close {
display: none; display: none;
} }
</style> </style>