diff --git a/docs/css/components.js b/docs/css/components.js index 981accb..0052889 100644 --- a/docs/css/components.js +++ b/docs/css/components.js @@ -690,150 +690,150 @@ customElements.define('sm-input', const smNotifications = document.createElement('template') smNotifications.innerHTML = ` - -
- `; + .hide{ + opacity: 0 !important; + pointer-events: none !important; + } + .notification-panel{ + display: grid; + width: 100%; + gap: 0.5rem; + position: fixed; + left: 0; + top: 0; + z-index: 100; + max-height: 100%; + padding: 1rem; + overflow: hidden auto; + -ms-scroll-chaining: none; + overscroll-behavior: contain; + touch-action: none; + } + .notification-panel:empty{ + display:none; + } + .notification{ + display: -webkit-box; + display: -ms-flexbox; + display: flex; + position: relative; + border-radius: 0.3rem; + background: rgba(var(--foreground-color, (255,255,255)), 1); + overflow: hidden; + overflow-wrap: break-word; + word-wrap: break-word; + -ms-word-break: break-all; + word-break: break-all; + word-break: break-word; + -ms-hyphens: auto; + -webkit-hyphens: auto; + hyphens: auto; + max-width: 100%; + padding: 1rem; + align-items: center; + touch-action: none; + } + .icon-container:not(:empty){ + margin-right: 0.5rem; + height: var(--icon-height); + width: var(--icon-width); + } + h4:first-letter, + p:first-letter{ + text-transform: uppercase; + } + h4{ + font-weight: 400; + } + p{ + line-height: 1.6; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + color: rgba(var(--text-color, (17,17,17)), 0.9); + overflow-wrap: break-word; + overflow-wrap: break-word; + word-wrap: break-word; + -ms-word-break: break-all; + word-break: break-all; + word-break: break-word; + -ms-hyphens: auto; + -webkit-hyphens: auto; + hyphens: auto; + max-width: 100%; + } + .notification:last-of-type{ + margin-bottom: 0; + } + .icon { + height: 100%; + width: 100%; + fill: rgba(var(--text-color, (17,17,17)), 0.7); + } + .icon--success { + fill: var(--green); + } + .icon--failure, + .icon--error { + fill: var(--danger-color); + } + .close{ + height: 2rem; + width: 2rem; + border: none; + cursor: pointer; + margin-left: 1rem; + border-radius: 50%; + padding: 0.3rem; + transition: background-color 0.3s, transform 0.3s; + background-color: transparent; + } + .close:active{ + transform: scale(0.9); + } + @media screen and (min-width: 640px){ + .notification-panel{ + max-width: 28rem; + width: max-content; + top: auto; + bottom: 0; + } + .notification{ + width: auto; + border: solid 1px rgba(var(--text-color, (17,17,17)), 0.2); + } + } + @media (any-hover: hover){ + ::-webkit-scrollbar{ + width: 0.5rem; + } + + ::-webkit-scrollbar-thumb{ + background: rgba(var(--text-color, (17,17,17)), 0.3); + border-radius: 1rem; + &:hover{ + background: rgba(var(--text-color, (17,17,17)), 0.5); + } + } + .close:hover{ + background-color: rgba(var(--text-color, (17,17,17)), 0.1); + } + } + +
+ `; customElements.define('sm-notifications', class extends HTMLElement { constructor() { super(); @@ -886,16 +886,16 @@ customElements.define('sm-notifications', class extends HTMLElement { notification.classList.add('notification'); let composition = ``; composition += ` -
${icon}
-

${message}

- `; +
${icon}
+

${message}

+ `; if (pinned) { notification.classList.add('pinned'); composition += ` - - `; + + `; } notification.innerHTML = composition; return notification; @@ -941,7 +941,7 @@ customElements.define('sm-notifications', class extends HTMLElement { opacity: '1' }, { - transform: `translateX(calc(${sign}${this.currentX}px ${sign} 1rem))`, + transform: `translateX(calc(${sign}${Math.abs(this.currentX)}px ${sign} 1rem))`, opacity: '0' } ], this.animationOptions).onfinish = () => { diff --git a/docs/index.html b/docs/index.html index 4c86273..f7d3576 100644 --- a/docs/index.html +++ b/docs/index.html @@ -226,9 +226,9 @@ d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.25 2.52.77-1.28-3.52-2.09V8z" />

- No orders placed yet. + No orders placed yet

-

My orders will only show completed orders.

+

My orders will only show completed orders

@@ -402,7 +402,7 @@

Add password lock

- Adding a password lock allows to authenticate transactions with custom a password instead of + Adding a password lock allows to authenticate transactions with a custom password instead of private key.