vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 17:02:38 +00:00
Code Issues Projects Releases Packages Wiki Activity

Improved headless toasts

Browse source
This commit is contained in:
Cagatay Civici 2024-05-26 12:41:32 +03:00
parent def22fcc9f
commit c974cab367
3 changed files with 64 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

2
components/lib/toast/Toast.vue
View file

@ -1,7 +1,7 @@
<template>
<Portal>
<div ref="container" :class="cx('root')" :style="sx('root', true, { position })" v-bind="ptmi('root')">
<transition-group name="p-toast-message" tag="div" @enter="onEnter" @leave="onLeave" v-bind="{ ...ptm('message'), ...ptm('transition') }">
<transition-group name="p-toast-message" tag="div" @enter="onEnter" @leave="onLeave" v-bind="{ ...ptm('transition') }">
<ToastMessage
v-for="msg of messages"
:key="msg.id"

16
components/lib/toast/style/ToastStyle.js
View file

@ -8,11 +8,7 @@ const theme = ({ dt }) => `
}
.p-toast-message {
backdrop-filter: blur(${dt('toast.blur')});
margin: 0 0 1rem 0;
border-radius: ${dt('toast.border.radius')};
border-width: ${dt('toast.border.width')};
border-style: solid;
}
.p-toast-message-icon {
@ -67,6 +63,18 @@ const theme = ({ dt }) => `
user-select: none;
}
.p-toast-message-info,
.p-toast-message-success,
.p-toast-message-warn,
.p-toast-message-error,
.p-toast-message-secondary,
.p-toast-message-contrast {
border-width: ${dt('toast.border.width')};
border-style: solid;
backdrop-filter: blur(${dt('toast.blur')});
border-radius: ${dt('toast.border.radius')};
}
.p-toast-close-icon {
font-size: ${dt('toast.close.icon.size')};
width: ${dt('toast.close.icon.size')};