diff --git a/components.js b/components.js index dcef2cb..22b2c41 100644 --- a/components.js +++ b/components.js @@ -13,26 +13,23 @@ smButton.innerHTML = ` display: -ms-inline-flexbox; display: inline-flex; width: auto; - --accent-color: #4d2588; - --text-color: 17, 17, 17; - --background-color: 255, 255, 255; --padding: 0.6rem 1.2rem; --border-radius: 0.3rem; - --background: rgba(var(--text-color), 0.1); + --background: rgba(var(--text-color,(17,17,17)), 0.1); } :host([variant='primary']) .button{ - background: var(--accent-color); - color: rgba(var(--background-color), 1); + background: var(--accent-color,teal); + color: rgba(var(--background-color,(255,255,255)), 1); } :host([variant='outlined']) .button{ - -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset; - box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset; + -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color,(17,17,17)), 0.2) inset; + box-shadow: 0 0 0 1px rgba(var(--text-color,(17,17,17)), 0.2) inset; background: transparent; - color: var(--accent-color); + color: var(--accent-color,teal); } :host([variant='no-outline']) .button{ background: inherit; - color: var(--accent-color); + color: var(--accent-color,teal); } :host([disabled]){ pointer-events: none; @@ -70,8 +67,8 @@ smButton.innerHTML = ` pointer-events: none; cursor: not-allowed; opacity: 0.6; - color: rgba(var(--text-color), 1); - background-color: rgba(var(--text-color), 0.3); + color: rgba(var(--text-color,(17,17,17)), 1); + background-color: rgba(var(--text-color,(17,17,17)), 0.3); } @media (hover: hover){ :host(:not([disabled])) .button:hover, @@ -81,8 +78,8 @@ smButton.innerHTML = ` } :host([variant='outlined']:not([disabled])) .button:hover, :host(:focus-within[variant='outlined']:not([disabled])) .button:hover{ - -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12); - box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12); + -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color,(17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12); + box-shadow: 0 0 0 1px rgba(var(--text-color,(17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12); } } @media (hover: none){ @@ -91,8 +88,8 @@ smButton.innerHTML = ` box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2); } :host([variant='outlined']) .button:active{ - -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2); - box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color,(17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2); + box-shadow: 0 0 0 1px rgba(var(--text-color,(17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2); } } @@ -153,26 +150,26 @@ customElements.define('sm-button', }) const smForm = document.createElement('template'); smForm.innerHTML = ` - -
- -
-`; + +
+ +
+ `; customElements.define('sm-form', class extends HTMLElement { constructor() { @@ -214,9 +211,9 @@ customElements.define('sm-form', class extends HTMLElement { } } handleKeydown(e) { - if (e.key === 'Enter' && e.target.tagName !== 'SM-TEXTAREA') { + if (e.key === 'Enter' && !e.target.tagName.includes('TEXTAREA')) { if (this.allRequiredValid) { - if (this.submitButton && this.submitButton.tagName === 'SM-BUTTON') { + if (this.submitButton) { this.submitButton.click() } this.dispatchEvent(new CustomEvent('submit', { @@ -290,58 +287,53 @@ input:invalid{ border: none; } :host{ - display: -webkit-box; - display: -ms-flexbox; display: flex; - --accent-color: #4d2588; - --text-color: 17, 17, 17; - --background-color: 255, 255, 255; --success-color: #00C853; --danger-color: red; --width: 100%; --icon-gap: 0.5rem; --border-radius: 0.3rem; - --background: rgba(var(--text-color), 0.06); + --background: rgba(var(--text-color, (17,17,17)), 0.06); } .hide{ - opacity: 0 !important; - pointer-events: none !important; + display: none !important; } -.hide-completely{ - display: none; +button{ + display: flex; + border: none; + background: none; + padding: 0; + border-radius: 1rem; + min-width: 0; + cursor: pointer; +} +button:focus{ + outline: var(--accent-color, teal) solid medium; } .icon { - fill: rgba(var(--text-color), 0.6); height: 1.4rem; width: 1.4rem; - border-radius: 1rem; - cursor: pointer; - min-width: 0; + fill: rgba(var(--text-color, (17,17,17)), 0.6); } :host(.round) .input{ border-radius: 10rem; } .input { - display: -webkit-box; - display: -ms-flexbox; display: flex; cursor: text; min-width: 0; text-align: left; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; position: relative; gap: var(--icon-gap); padding: var(--padding, 0.6rem 0.8rem); border-radius: var(--border-radius); - -webkit-transition: opacity 0.3s; - -o-transition: opacity 0.3s; - transition: opacity 0.3s; + transition: opacity 0.3s, box-shadow 0.2s; background: var(--background); width: 100%; outline: none; + min-height: 3.5rem; } .input.readonly .clear{ opacity: 0 !important; @@ -352,31 +344,25 @@ border: none; pointer-events: none; } .input:focus-within:not(.readonly){ - box-shadow: 0 0 0 0.1rem var(--accent-color) inset !important; + box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset !important; } .disabled{ pointer-events: none; opacity: 0.6; } .label { + grid-area: 1/1/2/2; font-size: inherit; opacity: .7; font-weight: 400; - position: absolute; top: 0; - -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; - -o-transition: transform 0.3s; transition: transform 0.3s; - transition: transform 0.3s, -webkit-transform 0.3s; - -webkit-transform-origin: left; - -ms-transform-origin: left; + transition: transform 0.3s, -webkit-transform 0.3s, color .03; transform-origin: left; pointer-events: none; white-space: nowrap; overflow: hidden; - -o-text-overflow: ellipsis; - text-overflow: ellipsis; width: 100%; user-select: none; will-change: transform; @@ -387,56 +373,42 @@ border: none; } .container{ width: 100%; - display: -webkit-box; - display: -ms-flexbox; - display: flex; + display: grid; + grid-template-columns: 1fr auto; position: relative; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; + align-items: center; } input{ + grid-area: 1/1/2/2; font-size: inherit; border: none; background: transparent; outline: none; - color: rgba(var(--text-color), 1); + color: rgba(var(--text-color, (17,17,17)), 1); width: 100%; + caret-color: var(--accent-color, teal); } -:host(:not([variant="outlined"])) .animate-label .container input { +:host([animate]) .input:focus-within .container input, +.animate-label .container input { -webkit-transform: translateY(0.6rem); -ms-transform: translateY(0.6rem); transform: translateY(0.6rem); } -:host(:not([variant="outlined"])) .animate-label .label { + :host([animate]) .input:focus-within .label, + .animate-label .label { -webkit-transform: translateY(-0.7em) scale(0.8); -ms-transform: translateY(-0.7em) scale(0.8); transform: translateY(-0.7em) scale(0.8); opacity: 1; - color: var(--accent-color) + color: var(--accent-color,teal) } :host([variant="outlined"]) .input { - box-shadow: 0 0 0 0.1rem var(--border-color, rgba(var(--text-color), 0.4)) inset; - background: rgba(var(--background-color), 1); -} -:host([variant="outlined"]) .label { - width: max-content; - margin-left: -0.5rem; - padding: 0 0.5rem; -} -:host([variant="outlined"]) .animate-label .label { - -webkit-transform: translate(0.1rem, -1.5rem) scale(0.8); - -ms-transform: translate(0.1rem, -1.5rem) scale(0.8); - transform: translate(0.1rem, -1.5rem) scale(0.8); - opacity: 1; - background: rgba(var(--background-color), 1); + box-shadow: 0 0 0 1px var(--border-color, rgba(var(--text-color, (17,17,17)), 0.3)) inset; + background: rgba(var(--background-color, (255,255,255)), 1); } .animate-label:focus-within:not(.readonly) .label{ - color: var(--accent-color) + color: var(--accent-color,teal) } .feedback-text:not(:empty){ display: flex; @@ -445,7 +417,7 @@ input{ font-size: 0.9rem; align-items: center; padding: 0.8rem 0; - color: rgba(var(--text-color), 0.8); + color: rgba(var(--text-color, (17,17,17)), 0.8); } .success{ color: var(--success-color); @@ -464,7 +436,7 @@ input{ } @media (any-hover: hover){ .icon:hover{ - background: rgba(var(--text-color), 0.1); + background: rgba(var(--text-color, (17,17,17)), 0.1); } } @@ -474,8 +446,11 @@ input{
+
- +

@@ -502,6 +477,7 @@ customElements.define('sm-input', this.reflectedAttributes = ['value', 'required', 'disabled', 'type', 'inputmode', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step']; this.reset = this.reset.bind(this); + this.clear = this.clear.bind(this); this.focusIn = this.focusIn.bind(this); this.focusOut = this.focusOut.bind(this); this.fireEvent = this.fireEvent.bind(this); @@ -598,6 +574,10 @@ customElements.define('sm-input', reset() { this.value = ''; } + clear() { + this.value = ''; + this.input.focus(); + } focusIn() { this.input.focus(); @@ -635,6 +615,7 @@ customElements.define('sm-input', this.inputParent.classList.remove('animate-label'); else this.label.classList.remove('hide'); + this.feedbackText.textContent = ''; } } vibrate() { @@ -655,7 +636,7 @@ customElements.define('sm-input', this.animate = this.hasAttribute('animate'); this.setAttribute('role', 'textbox'); this.input.addEventListener('input', this.checkInput); - this.clearBtn.addEventListener('click', this.reset); + this.clearBtn.addEventListener('click', this.clear); } attributeChangedCallback(name, oldValue, newValue) { @@ -714,7 +695,7 @@ customElements.define('sm-input', } disconnectedCallback() { this.input.removeEventListener('input', this.checkInput); - this.clearBtn.removeEventListener('click', this.reset); + this.clearBtn.removeEventListener('click', this.clear); } }) const smNotifications = document.createElement('template') @@ -730,9 +711,6 @@ smNotifications.innerHTML = ` display: -webkit-box; display: -ms-flexbox; display: flex; - --accent-color: #4d2588; - --text-color: 17, 17, 17; - --background-color: 255, 255, 255; --danger-color: red; --icon-height: 1.5rem; --icon-width: 1.5rem; @@ -764,7 +742,7 @@ smNotifications.innerHTML = ` display: flex; position: relative; border-radius: 0.3rem; - background: rgba(var(--background-color), 1); + background: rgba(var(--background-color,(255,255,255)), 1); overflow: hidden; overflow-wrap: break-word; word-wrap: break-word; @@ -795,7 +773,7 @@ smNotifications.innerHTML = ` -webkit-box-flex: 1; -ms-flex: 1; flex: 1; - color: rgba(var(--text-color), 0.9); + color: rgba(var(--text-color,(17,17,17)), 0.9); overflow-wrap: break-word; overflow-wrap: break-word; word-wrap: break-word; @@ -813,7 +791,7 @@ smNotifications.innerHTML = ` .icon { height: 100%; width: 100%; - fill: rgba(var(--text-color), 0.7); + fill: rgba(var(--text-color,(17,17,17)), 0.7); } .icon--success { fill: var(--green); @@ -843,7 +821,7 @@ smNotifications.innerHTML = ` } .notification{ width: auto; - border: solid 1px rgba(var(--text-color), 0.2); + border: solid 1px rgba(var(--text-color,(17,17,17)), 0.2); } } @media (any-hover: hover){ @@ -852,14 +830,14 @@ smNotifications.innerHTML = ` } ::-webkit-scrollbar-thumb{ - background: rgba(var(--text-color), 0.3); + background: rgba(var(--text-color,(17,17,17)), 0.3); border-radius: 1rem; &:hover{ - background: rgba(var(--text-color), 0.5); + background: rgba(var(--text-color,(17,17,17)), 0.5); } } .close:hover{ - background-color: rgba(var(--text-color), 0.1); + background-color: rgba(var(--text-color,(17,17,17)), 0.1); } } @@ -1011,9 +989,6 @@ smPopup.innerHTML = ` display: -ms-grid; display: grid; z-index: 10; - --accent-color: #4d2588; - --text-color: 17, 17, 17; - --background-color: 255, 255, 255; --width: 100%; --height: auto; --min-width: auto; @@ -1068,7 +1043,7 @@ smPopup.innerHTML = ` min-height: var(--min-height); max-height: 90vh; border-radius: var(--border-radius); - background: rgba(var(--background-color), 1); + background: rgba(var(--background-color,(255,255,255)), 1); -webkit-box-shadow: 0 -1rem 2rem #00000020; box-shadow: 0 -1rem 2rem #00000020; } @@ -1128,7 +1103,7 @@ smPopup.innerHTML = ` .handle{ height: 0.3rem; width: 2rem; - background: rgba(var(--text-color), .4); + background: rgba(var(--text-color,(17,17,17)), .4); border-radius: 1rem; margin: 0.5rem 0; } @@ -1139,10 +1114,10 @@ smPopup.innerHTML = ` } ::-webkit-scrollbar-thumb{ - background: rgba(var(--text-color), 0.3); + background: rgba(var(--text-color,(17,17,17)), 0.3); border-radius: 1rem; &:hover{ - background: rgba(var(--text-color), 0.5); + background: rgba(var(--text-color,(17,17,17)), 0.5); } } } @@ -1456,7 +1431,6 @@ spinner.innerHTML = ` box-sizing: border-box; } :host{ - --accent-color: #4d2588; --size: 1.6rem; } .loader { @@ -1464,7 +1438,7 @@ spinner.innerHTML = ` width: var(--size); stroke-width: 8; overflow: visible; - stroke: var(--accent-color); + stroke: var(--accent-color,teal); fill: none; stroke-dashoffset: 180; stroke-dasharray: 180; @@ -1531,7 +1505,7 @@ themeToggle.innerHTML = ` pointer-events: none; transition: transform 0.3s, opacity 0.3s; transform: translate(-50%, -50%) scale(1.2); - background-color: rgba(var(--text-color), 0.12); + background-color: rgba(var(--text-color,(17,17,17)), 0.12); } :host(:focus-within) .theme-toggle{ outline: none; @@ -1544,7 +1518,7 @@ themeToggle.innerHTML = ` position: absolute; height: 100%; width: 100%; - fill: rgba(var(--text-color), 1); + fill: rgba(var(--text-color,(17,17,17)), 1); transition: transform 0.3s, opacity 0.1s; } @@ -1690,12 +1664,8 @@ smCopy.innerHTML = ` :host{ display: -webkit-box; display: flex; - --accent-color: #4d2588; - --text-color: 17, 17, 17; - --background-color: 255, 255, 255; --padding: 0; - --background-color: inherit; - --button-background-color: rgba(var(--text-color), 0.2); + --button-background-color: rgba(var(--text-color,(17,17,17)), 0.2); } .copy{ display: grid; @@ -1729,7 +1699,7 @@ smCopy.innerHTML = ` .icon{ height: 1.2rem; width: 1.2rem; - fill: rgba(var(--text-color), 0.8); + fill: rgba(var(--text-color,(17,17,17)), 0.8); } @media (any-hover: hover){ .copy:hover .copy-button{ @@ -1810,9 +1780,6 @@ stripSelect.innerHTML = ` box-sizing: border-box; } :host{ - --accent-color: #4d2588; - --text-color: 17, 17, 17; - --background-color: 255, 255, 255; padding: 1rem 0; } .hide{ @@ -1852,7 +1819,7 @@ stripSelect.innerHTML = ` cursor: pointer; position: absolute; align-items: center; - background: rgba(var(--background-color), 1); + background: rgba(var(--background-color,(255,255,255)), 1); transform: translateY(-50%); } .nav-button--right{ @@ -1871,7 +1838,7 @@ stripSelect.innerHTML = ` .icon{ height: 1.5rem; width: 1.5rem; - fill: rgba(var(--text-color), .8); + fill: rgba(var(--text-color,(17,17,17)), .8); } @media (hover: none){ ::-webkit-scrollbar { @@ -1887,11 +1854,11 @@ stripSelect.innerHTML = ` width: 2rem; } .cover--left{ - background: linear-gradient(90deg, rgba(var(--background-color), 1), transparent); + background: linear-gradient(90deg, rgba(var(--background-color,(255,255,255)), 1), transparent); } .cover--right{ right: 0; - background: linear-gradient(90deg, transparent, rgba(var(--background-color), 1)); + background: linear-gradient(90deg, transparent, rgba(var(--background-color,(255,255,255)), 1)); } } @media (hover: hover){ @@ -1906,11 +1873,11 @@ stripSelect.innerHTML = ` overflow: hidden; } .cover--left{ - background: linear-gradient(90deg, rgba(var(--background-color), 1) 60%, transparent); + background: linear-gradient(90deg, rgba(var(--background-color,(255,255,255)), 1) 60%, transparent); } .cover--right{ right: 0; - background: linear-gradient(90deg, transparent 0%, rgba(var(--background-color), 1) 40%); + background: linear-gradient(90deg, transparent 0%, rgba(var(--background-color,(255,255,255)), 1) 40%); } } @@ -2075,9 +2042,6 @@ stripOption.innerHTML = ` -webkit-box-sizing: border-box; box-sizing: border-box; } - :host{ - --background-color: inherit; - } .strip-option{ display: flex; flex-shrink: 0; @@ -2090,16 +2054,16 @@ stripOption.innerHTML = ` } :host([active]) .strip-option{ color: var(--active-option-color, inherit); - background-color: var(--active-background-color, rgba(var(--text-color), 0.06)); + background-color: var(--active-background-color, rgba(var(--text-color,(17,17,17)), 0.06)); } :host(:focus-within){ outline: none; } :host(:focus-within) .strip-option{ - box-shadow: 0 0 0 0.1rem var(--accent-color) inset; + box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset; } :host(:hover:not([active])) .strip-option{ - background-color: rgba(var(--text-color), 0.06); + background-color: rgba(var(--text-color,(17,17,17)), 0.06); }