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

Refactored Toast

pull/5677/head
Cagatay Civici 2024-04-09 12:05:34 +03:00
parent 3359396be9
commit da246c614a
2 changed files with 20 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
components/lib/themes/primeone/base/toast/index.js
View File

@ -38,7 +38,7 @@ export default {
font-size: 0.875rem; font-size: 0.875rem;
} }
.p-toast-icon-close { .p-toast-close-button {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -52,11 +52,14 @@ export default {
color: inherit; color: inherit;
width: 1.75rem; width: 1.75rem;
height: 1.75rem; height: 1.75rem;
margin-top: -25%; margin: -25% 0 0 0;
right: -25%; right: -25%;
padding: 0;
border: none
user-select: none;
} }
.p-toast-icon-close:focus-visible { .p-toast-close-button:focus-visible {
outline-width: ${dt('focus.ring.width')}; outline-width: ${dt('focus.ring.width')};
outline-style: ${dt('focus.ring.style')}; outline-style: ${dt('focus.ring.style')};
outline-offset: ${dt('focus.ring.offset')}; outline-offset: ${dt('focus.ring.offset')};
@ -73,11 +76,11 @@ export default {
color: ${dt('toast.info.detail.color')}; color: ${dt('toast.info.detail.color')};
} }
.p-toast-message-info .p-toast-icon-close:focus-visible { .p-toast-message-info .p-toast-close-button:focus-visible {
color: ${dt('toast.info.color')}; color: ${dt('toast.info.color')};
} }
.p-toast-message-info .p-toast-icon-close:hover { .p-toast-message-info .p-toast-close-button:hover {
background: ${dt('toast.info.close.hover.background')}; background: ${dt('toast.info.close.hover.background')};
} }
@ -92,11 +95,11 @@ export default {
color: ${dt('toast.success.detail.color')}; color: ${dt('toast.success.detail.color')};
} }
.p-toast-message-success .p-toast-icon-close:focus-visible { .p-toast-message-success .p-toast-close-button:focus-visible {
color: ${dt('toast.success.color')}; color: ${dt('toast.success.color')};
} }
.p-toast-message-success .p-toast-icon-close:hover { .p-toast-message-success .p-toast-close-button:hover {
background: ${dt('toast.success.close.hover.background')}; background: ${dt('toast.success.close.hover.background')};
} }
@ -111,11 +114,11 @@ export default {
color: ${dt('toast.warn.detail.color')}; color: ${dt('toast.warn.detail.color')};
} }
.p-toast-message-warn .p-toast-icon-close:focus-visible { .p-toast-message-warn .p-toast-close-button:focus-visible {
color: ${dt('toast.warn.color')}; color: ${dt('toast.warn.color')};
} }
.p-toast-message-warn .p-toast-icon-close:hover { .p-toast-message-warn .p-toast-close-button:hover {
background: ${dt('toast.warn.close.hover.background')}; background: ${dt('toast.warn.close.hover.background')};
} }
@ -130,11 +133,11 @@ export default {
color: ${dt('toast.error.detail.color')}; color: ${dt('toast.error.detail.color')};
} }
.p-toast-message-error .p-toast-icon-close:focus-visible { .p-toast-message-error .p-toast-close-button:focus-visible {
color: ${dt('toast.error.color')}; color: ${dt('toast.error.color')};
} }
.p-toast-message-error .p-toast-icon-close:hover { .p-toast-message-error .p-toast-close-button:hover {
background: ${dt('toast.error.close.hover.background')}; background: ${dt('toast.error.close.hover.background')};
} }
@ -149,11 +152,11 @@ export default {
color: ${dt('toast.secondary.detail.color')}; color: ${dt('toast.secondary.detail.color')};
} }
.p-toast-message-secondary .p-toast-icon-close:focus-visible { .p-toast-message-secondary .p-toast-close-button:focus-visible {
color: ${dt('toast.secondary.color')}; color: ${dt('toast.secondary.color')};
} }
.p-toast-message-secondary .p-toast-icon-close:hover { .p-toast-message-secondary .p-toast-close-button:hover {
background: ${dt('toast.secondary.close.hover.background')}; background: ${dt('toast.secondary.close.hover.background')};
} }
@ -168,11 +171,11 @@ export default {
color: ${dt('toast.contrast.detail.color')}; color: ${dt('toast.contrast.detail.color')};
} }
.p-toast-message-contrast .p-toast-icon-close:focus-visible { .p-toast-message-contrast .p-toast-close-button:focus-visible {
color: ${dt('toast.contrast.color')}; color: ${dt('toast.contrast.color')};
} }
.p-toast-message-contrast .p-toast-icon-close:hover { .p-toast-message-contrast .p-toast-close-button:hover {
background: ${dt('toast.contrast.close.hover.background')}; background: ${dt('toast.contrast.close.hover.background')};
} }

4
components/lib/toast/style/ToastStyle.js
View File

@ -42,8 +42,8 @@ const classes = {
text: 'p-toast-message-text', text: 'p-toast-message-text',
summary: 'p-toast-summary', summary: 'p-toast-summary',
detail: 'p-toast-detail', detail: 'p-toast-detail',
closeButton: 'p-toast-icon-close p-link', closeButton: 'p-toast-close-button',
closeIcon: 'p-toast-icon-close-icon' closeIcon: 'p-toast-close-icon'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({