diff --git a/components/lib/themes/primeone/base/toast/index.js b/components/lib/themes/primeone/base/toast/index.js index cd8e4f28c..d2bd5f6ef 100644 --- a/components/lib/themes/primeone/base/toast/index.js +++ b/components/lib/themes/primeone/base/toast/index.js @@ -38,7 +38,7 @@ export default { font-size: 0.875rem; } -.p-toast-icon-close { +.p-toast-close-button { display: flex; align-items: center; justify-content: center; @@ -52,11 +52,14 @@ export default { color: inherit; width: 1.75rem; height: 1.75rem; - margin-top: -25%; + margin: -25% 0 0 0; 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-style: ${dt('focus.ring.style')}; outline-offset: ${dt('focus.ring.offset')}; @@ -73,11 +76,11 @@ export default { 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')}; } -.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')}; } @@ -92,11 +95,11 @@ export default { 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')}; } -.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')}; } @@ -111,11 +114,11 @@ export default { 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')}; } -.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')}; } @@ -130,11 +133,11 @@ export default { 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')}; } -.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')}; } @@ -149,11 +152,11 @@ export default { 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')}; } -.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')}; } @@ -168,11 +171,11 @@ export default { 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')}; } -.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')}; } diff --git a/components/lib/toast/style/ToastStyle.js b/components/lib/toast/style/ToastStyle.js index 6e2831c2f..bd8e78e39 100644 --- a/components/lib/toast/style/ToastStyle.js +++ b/components/lib/toast/style/ToastStyle.js @@ -42,8 +42,8 @@ const classes = { text: 'p-toast-message-text', summary: 'p-toast-summary', detail: 'p-toast-detail', - closeButton: 'p-toast-icon-close p-link', - closeIcon: 'p-toast-icon-close-icon' + closeButton: 'p-toast-close-button', + closeIcon: 'p-toast-close-icon' }; export default BaseStyle.extend({