diff --git a/src/wc-toast-icon.js b/src/wc-toast-icon.js index b1e2bdd..3cafc48 100644 --- a/src/wc-toast-icon.js +++ b/src/wc-toast-icon.js @@ -28,6 +28,7 @@ export default class WCToastIcon extends HTMLElement { case 'error': const errorIcon = document.createElement('div'); errorIcon.classList.add('error-icon'); + errorIcon.innerHTML = ``; return errorIcon; case 'loading': const loadingIcon = document.createElement('div'); @@ -119,19 +120,7 @@ export default class WCToastIcon extends HTMLElement { width: 6px; } - .error-icon { - width: 20px; - opacity: 0; - height: 20px; - border-radius: 10px; - background: #ff4b4b; - position: relative; - transform: rotate(45deg); - animation: circle-animation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; - animation-delay: 100ms; - } - - @keyframes first-line-animation { + @keyframes slide-in { from { transform: scale(0); opacity: 0; @@ -142,37 +131,24 @@ export default class WCToastIcon extends HTMLElement { } } - .error-icon::after, - .error-icon::before { - content: ''; - animation: first-line-animation 0.15s ease-out forwards; - animation-delay: 150ms; - position: absolute; - border-radius: 2px; - opacity: 0; - background: #fff; - bottom: 9.32px; - left: 4px; - right: -1px; - height: 1.5px; - width: 12px; - } - - @keyframes secondLineAnimation { - from { - transform: scale(0) rotate(90deg); - opacity: 0; - } - to { - transform: scale(1) rotate(90deg); - opacity: 1; - } + .error-icon { + width: 20px; + height: 20px; + border-radius: 10px; + background: #ff4b4b; + display: flex; + justify-content: center; + align-items: center; + animation: slide-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } - .error-icon::before { - animation: secondLineAnimation 0.15s ease-out forwards; - animation-delay: 180ms; - transform: rotate(90deg); + .error-icon svg{ + width: 16px; + padding-left: 1px; + height: 20px; + stroke: #fff; + animation: slide-in .2s ease-out; + animation-delay: 100ms; } @keyframes rotate { diff --git a/src/wc-toast-item.js b/src/wc-toast-item.js index 8ca41d7..154ac74 100644 --- a/src/wc-toast-item.js +++ b/src/wc-toast-item.js @@ -79,7 +79,7 @@ export default class WCToastItem extends HTMLElement { --wc-toast-max-width: 350px; --wc-toast-stroke: #2a2a32; --wc-toast-color: #000; - --wc-toast-font-family: 'Roboto', sans-serif; + --wc-toast-font-family: 'Roboto', 'Amiri', sans-serif; --wc-toast-font-size: 16px; --wc-toast-border-radius: 8px; --wc-toast-content-margin: 4px 10px; @@ -148,7 +148,7 @@ export default class WCToastItem extends HTMLElement { line-height: 1.3; will-change: transform; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05); - animation: enter-animation 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards; + animation: enter-animation 0.3s cubic-bezier(0.21, 1.02, 0.73, 1) forwards; max-width: var(--wc-toast-max-width); pointer-events: auto; padding: 8px 10px; @@ -156,7 +156,7 @@ export default class WCToastItem extends HTMLElement { } .wc-toast-bar.dismiss { - animation: exit-animation 0.4s forwards cubic-bezier(0.06, 0.71, 0.55, 1); + animation: exit-animation 0.3s forwards cubic-bezier(0.06, 0.71, 0.55, 1); } @media (prefers-reduced-motion: reduce) {