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

Better animations

pull/5880/head
Cagatay Civici 2024-06-13 10:49:49 +03:00
parent 6ceb6f35fa
commit 3a3a6f09ea
1 changed files with 11 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/primevue/src/message/style/MessageStyle.js
View File

@ -3,8 +3,8 @@ import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => ` const theme = ({ dt }) => `
.p-message { .p-message {
border-radius: ${dt('message.border.radius')}; border-radius: ${dt('message.border.radius')};
border-width: ${dt('message.border.width')}; outline-width: ${dt('message.border.width')};
border-style: solid; outline-style: solid;
} }
.p-message-content { .p-message-content {
@ -31,7 +31,7 @@ const theme = ({ dt }) => `
height: ${dt('message.close.button.height')}; height: ${dt('message.close.button.height')};
border-radius: ${dt('message.close.button.border.radius')}; border-radius: ${dt('message.close.button.border.radius')};
background: transparent; background: transparent;
transition: background ${dt('message.transition.duration')}, color ${dt('message.transition.duration')}, outline-color ${dt('message.transition.duration')}, box-shadow ${dt('message.transition.duration')}; transition: background ${dt('message.transition.duration')}, color ${dt('message.transition.duration')}, outline-color ${dt('message.transition.duration')}, box-shadow ${dt('message.transition.duration')}, opacity 0.3s;
outline-color: transparent; outline-color: transparent;
color: inherit; color: inherit;
padding: 0; padding: 0;
@ -54,7 +54,7 @@ const theme = ({ dt }) => `
.p-message-info { .p-message-info {
background: ${dt('message.info.background')}; background: ${dt('message.info.background')};
border-color: ${dt('message.info.border.color')}; outline-color: ${dt('message.info.border.color')};
color: ${dt('message.info.color')}; color: ${dt('message.info.color')};
box-shadow: ${dt('message.info.shadow')}; box-shadow: ${dt('message.info.shadow')};
} }
@ -70,7 +70,7 @@ const theme = ({ dt }) => `
.p-message-success { .p-message-success {
background: ${dt('message.success.background')}; background: ${dt('message.success.background')};
border-color: ${dt('message.success.border.color')}; outline-color: ${dt('message.success.border.color')};
color: ${dt('message.success.color')}; color: ${dt('message.success.color')};
box-shadow: ${dt('message.success.shadow')}; box-shadow: ${dt('message.success.shadow')};
} }
@ -86,7 +86,7 @@ const theme = ({ dt }) => `
.p-message-warn { .p-message-warn {
background: ${dt('message.warn.background')}; background: ${dt('message.warn.background')};
border-color: ${dt('message.warn.border.color')}; outline-color: ${dt('message.warn.border.color')};
color: ${dt('message.warn.color')}; color: ${dt('message.warn.color')};
box-shadow: ${dt('message.warn.shadow')}; box-shadow: ${dt('message.warn.shadow')};
} }
@ -102,7 +102,7 @@ const theme = ({ dt }) => `
.p-message-error { .p-message-error {
background: ${dt('message.error.background')}; background: ${dt('message.error.background')};
border-color: ${dt('message.error.border.color')}; outline-color: ${dt('message.error.border.color')};
color: ${dt('message.error.color')}; color: ${dt('message.error.color')};
box-shadow: ${dt('message.error.shadow')}; box-shadow: ${dt('message.error.shadow')};
} }
@ -118,7 +118,7 @@ const theme = ({ dt }) => `
.p-message-secondary { .p-message-secondary {
background: ${dt('message.secondary.background')}; background: ${dt('message.secondary.background')};
border-color: ${dt('message.secondary.border.color')}; outline-color: ${dt('message.secondary.border.color')};
color: ${dt('message.secondary.color')}; color: ${dt('message.secondary.color')};
box-shadow: ${dt('message.secondary.shadow')}; box-shadow: ${dt('message.secondary.shadow')};
} }
@ -134,7 +134,7 @@ const theme = ({ dt }) => `
.p-message-contrast { .p-message-contrast {
background: ${dt('message.contrast.background')}; background: ${dt('message.contrast.background')};
border-color: ${dt('message.contrast.border.color')}; outline-color: ${dt('message.contrast.border.color')};
color: ${dt('message.contrast.color')}; color: ${dt('message.contrast.color')};
box-shadow: ${dt('message.contrast.shadow')}; box-shadow: ${dt('message.contrast.shadow')};
} }
@ -174,16 +174,15 @@ const theme = ({ dt }) => `
.p-message.p-message-leave-to { .p-message.p-message-leave-to {
max-height: 0; max-height: 0;
opacity: 0; opacity: 0;
margin: 0;
} }
.p-message-leave-active { .p-message-leave-active {
overflow: hidden; overflow: hidden;
transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s;
} }
.p-message-leave-active .p-message-close-button { .p-message-leave-active .p-message-close-button {
display: none; opacity: 0;
} }
`; `;