Minor UI fixes

This commit is contained in:
sairaj mote 2022-09-13 04:11:11 +05:30
parent 019addd855
commit 29ded53d52
4 changed files with 5 additions and 6 deletions

View File

@ -11,7 +11,6 @@ smSelect.innerHTML = `
display: -webkit-box;
display: -ms-flexbox;
display: flex;
--min-width: max-content;
}
:host([disabled]) .select{
opacity: 0.6;
@ -83,7 +82,8 @@ smSelect.innerHTML = `
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-width: var(--min-width);
width: var(--options-width, 100%);
min-width: var(--min-width, auto);
max-height: var(--max-height, auto);
background: rgba(var(--foreground-color,(255,255,255)), 1);
border: solid 1px rgba(var(--text-color,(17,17,17)), 0.2);
@ -365,13 +365,11 @@ smOption.innerHTML = `
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-width: max-content;
width: 100%;
gap: 0.5rem;
grid-template-columns: max-content minmax(0, 1fr);
padding: var(--padding, 0.6rem 1rem);
cursor: pointer;
white-space: nowrap;
outline: none;
user-select: none;
border-radius: var(--border-radius, 0.3rem);

File diff suppressed because one or more lines are too long

View File

@ -8,6 +8,7 @@ spinner.innerHTML = `
box-sizing: border-box;
}
.loader {
display: flex;
height: var(--size, 1.5rem);
width: var(--size, 1.5rem);
stroke-width: 8;

View File

@ -1 +1 @@
const spinner=document.createElement("template");spinner.innerHTML='\n<style> \n*{\n padding: 0;\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n.loader {\n height: var(--size, 1.5rem);\n width: var(--size, 1.5rem);\n stroke-width: 8;\n overflow: visible;\n stroke: var(--accent-color, teal);\n fill: none;\n stroke-dashoffset: 180;\n stroke-dasharray: 180;\n animation: load 2s infinite, spin 1s linear infinite;\n}\n@keyframes load {\n 50% {\n stroke-dashoffset: 0;\n }\n 100%{\n stroke-dashoffset: -180;\n }\n}\n\n@keyframes spin {\n 100% {\n transform: rotate(360deg);\n }\n}\n</style>\n<svg viewBox="0 0 64 64" class="loader"><circle cx="32" cy="32" r="32" /></svg>\n\n';class SpinnerLoader extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(spinner.content.cloneNode(!0))}}window.customElements.define("sm-spinner",SpinnerLoader);
const spinner=document.createElement("template");spinner.innerHTML='\n<style> \n*{\n padding: 0;\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n.loader {\n display: flex;\n height: var(--size, 1.5rem);\n width: var(--size, 1.5rem);\n stroke-width: 8;\n overflow: visible;\n stroke: var(--accent-color, teal);\n fill: none;\n stroke-dashoffset: 180;\n stroke-dasharray: 180;\n animation: load 2s infinite, spin 1s linear infinite;\n}\n@keyframes load {\n 50% {\n stroke-dashoffset: 0;\n }\n 100%{\n stroke-dashoffset: -180;\n }\n}\n\n@keyframes spin {\n 100% {\n transform: rotate(360deg);\n }\n}\n</style>\n<svg viewBox="0 0 64 64" class="loader"><circle cx="32" cy="32" r="32" /></svg>\n\n';class SpinnerLoader extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(spinner.content.cloneNode(!0))}}window.customElements.define("sm-spinner",SpinnerLoader);