Updated input and button
This commit is contained in:
sairaj mote
parent
eab4b25e80
commit
1d8fc1233e
36
components/dist/button.js
vendored
36
components/dist/button.js
vendored
@ -8,30 +8,25 @@ smButton.innerHTML = `
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:host{
|
||||
display: -webkit-inline-box;
|
||||
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;
|
||||
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;
|
||||
@ -39,19 +34,12 @@ smButton.innerHTML = `
|
||||
}
|
||||
.button {
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: var(--padding);
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
border-radius: var(--border-radius);
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
transition: box-shadow 0.3s, background-color 0.3s;
|
||||
font-family: inherit;
|
||||
@ -69,8 +57,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,
|
||||
@ -80,8 +68,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){
|
||||
@ -90,8 +78,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);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
2
components/dist/button.min.js
vendored
2
components/dist/button.min.js
vendored
@ -1 +1 @@
|
||||
const smButton=document.createElement("template");smButton.innerHTML="\n<style> \n*{\n padding: 0;\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n} \n:host{\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n --padding: 0.6rem 1.2rem;\n --border-radius: 0.3rem;\n --background: rgba(var(--text-color), 0.1);\n}\n:host([variant='primary']) .button{\n background: var(--accent-color);\n color: rgba(var(--background-color), 1);\n}\n:host([variant='outlined']) .button{\n -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;\n box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;\n background: transparent; \n color: var(--accent-color);\n}\n:host([variant='no-outline']) .button{\n background: inherit; \n color: var(--accent-color);\n}\n:host([disabled]){\n pointer-events: none;\n cursor: not-allowed;\n}\n.button {\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n padding: var(--padding);\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n border-radius: var(--border-radius); \n -webkit-box-pack: center; \n -ms-flex-pack: center; \n justify-content: center;\n transition: box-shadow 0.3s, background-color 0.3s;\n font-family: inherit;\n font-size: 0.9rem;\n font-weight: 500;\n background-color: var(--background); \n -webkit-tap-highlight-color: transparent;\n outline: none;\n overflow: hidden;\n border: none;\n color: inherit;\n align-items: center;\n}\n:host([disabled]) .button{\n pointer-events: none;\n cursor: not-allowed;\n opacity: 0.6;\n color: rgba(var(--text-color), 1);\n background-color: rgba(var(--text-color), 0.3);\n}\n@media (hover: hover){\n :host(:not([disabled])) .button:hover,\n :host(:focus-within:not([disabled])) .button{\n -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);\n box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);\n }\n :host([variant='outlined']:not([disabled])) .button:hover,\n :host(:focus-within[variant='outlined']:not([disabled])) .button:hover{\n -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);\n 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);\n }\n}\n@media (hover: none){\n :host(:not([disabled])) .button:active{\n -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);\n box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);\n }\n :host([variant='outlined']) .button:active{\n -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);\n 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);\n }\n}\n</style>\n<div part=\"button\" class=\"button\">\n <slot></slot> \n</div>",customElements.define("sm-button",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smButton.content.cloneNode(!0))}static get observedAttributes(){return["disabled"]}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}focusIn(){this.focus()}handleKeyDown(t){this.hasAttribute("disabled")||"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.click())}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","button"),this.addEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(t){"disabled"===t&&(this.hasAttribute("disabled")?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0"),this.setAttribute("aria-disabled",this.hasAttribute("disabled")))}});
|
||||
const smButton=document.createElement("template");smButton.innerHTML="\n<style> \n*{\n padding: 0;\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n} \n:host{\n display: inline-flex;\n width: auto;\n --background-color: 255, 255, 255;\n --padding: 0.6rem 1.2rem;\n --border-radius: 0.3rem;\n --background: rgba(var(--text-color, (17,17,17)), 0.1);\n}\n:host([variant='primary']) .button{\n background: var(--accent-color,teal);\n color: rgba(var(--background-color, (255,255,255)), 1);\n}\n:host([variant='outlined']) .button{\n box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset;\n background: transparent; \n color: var(--accent-color,teal);\n}\n:host([variant='no-outline']) .button{\n background: inherit; \n color: var(--accent-color,teal);\n}\n:host([disabled]){\n pointer-events: none;\n cursor: not-allowed;\n}\n.button {\n position: relative;\n display: flex;\n width: 100%;\n padding: var(--padding);\n cursor: pointer;\n user-select: none;\n border-radius: var(--border-radius); \n justify-content: center;\n transition: box-shadow 0.3s, background-color 0.3s;\n font-family: inherit;\n font-size: 0.9rem;\n font-weight: 500;\n background-color: var(--background); \n -webkit-tap-highlight-color: transparent;\n outline: none;\n overflow: hidden;\n border: none;\n color: inherit;\n align-items: center;\n}\n:host([disabled]) .button{\n pointer-events: none;\n cursor: not-allowed;\n opacity: 0.6;\n color: rgba(var(--text-color, (17,17,17)), 1);\n background-color: rgba(var(--text-color, (17,17,17)), 0.3);\n}\n@media (hover: hover){\n :host(:not([disabled])) .button:hover,\n :host(:focus-within:not([disabled])) .button{\n -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);\n box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);\n }\n :host([variant='outlined']:not([disabled])) .button:hover,\n :host(:focus-within[variant='outlined']:not([disabled])) .button:hover{\n -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);\n 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);\n }\n}\n@media (hover: none){\n :host(:not([disabled])) .button:active{\n -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);\n box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);\n }\n :host([variant='outlined']) .button:active{\n -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);\n 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);\n }\n}\n</style>\n<div part=\"button\" class=\"button\">\n <slot></slot> \n</div>",customElements.define("sm-button",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smButton.content.cloneNode(!0))}static get observedAttributes(){return["disabled"]}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}focusIn(){this.focus()}handleKeyDown(t){this.hasAttribute("disabled")||"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.click())}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","button"),this.addEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(t){"disabled"===t&&(this.hasAttribute("disabled")?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0"),this.setAttribute("aria-disabled",this.hasAttribute("disabled")))}});
|
||||
59
components/dist/input.js
vendored
59
components/dist/input.js
vendored
@ -34,18 +34,13 @@ 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;
|
||||
@ -55,7 +50,7 @@ border: none;
|
||||
display: none;
|
||||
}
|
||||
.icon {
|
||||
fill: rgba(var(--text-color), 0.6);
|
||||
fill: rgba(var(--text-color, (17,17,17)), 0.6);
|
||||
height: 1.4rem;
|
||||
width: 1.4rem;
|
||||
border-radius: 1rem;
|
||||
@ -67,22 +62,16 @@ border: none;
|
||||
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;
|
||||
@ -96,7 +85,7 @@ 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;
|
||||
@ -112,7 +101,7 @@ border: none;
|
||||
transition: -webkit-transform 0.3s;
|
||||
-o-transition: transform 0.3s;
|
||||
transition: transform 0.3s;
|
||||
transition: transform 0.3s, -webkit-transform 0.3s;
|
||||
transition: transform 0.3s, -webkit-transform 0.3s, color .03;
|
||||
-webkit-transform-origin: left;
|
||||
-ms-transform-origin: left;
|
||||
transform-origin: left;
|
||||
@ -131,15 +120,9 @@ border: none;
|
||||
}
|
||||
.container{
|
||||
width: 100%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
position: relative;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
input{
|
||||
@ -147,40 +130,30 @@ input{
|
||||
border: none;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
color: rgba(var(--text-color), 1);
|
||||
color: rgba(var(--text-color, (17,17,17)), 1);
|
||||
width: 100%;
|
||||
}
|
||||
: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;
|
||||
@ -189,7 +162,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);
|
||||
@ -208,7 +181,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);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
2
components/dist/input.min.js
vendored
2
components/dist/input.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user