@aqua-ds/web-components
Version:
AquaDS Web Components
35 lines (30 loc) • 4.49 kB
JavaScript
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
const aqButtonTestCss = ":host{display:block}.aq-button--primary{border:1px solid transparent;border-radius:4px;cursor:pointer;padding:6px 12px;color:var(--color-white);background-color:var(--color-primary-base);-webkit-transition:0.3s all ease;transition:0.3s all ease;font-weight:600;font-size:14px;line-height:20px}.aq-button--primary:hover{background-color:color-mix(in srgb, var(--color-primary-base) 70%, #000)}.aq-button--primary.aq-button__disabled{background-color:color-mix(in srgb, var(--color-primary-base) 55%, transparent);color:color-mix(in srgb, var(--color-white) 55%, transparent)}.aq-button--primary.aq-button__plain{color:var(--color-primary-base);background-color:var(--color-white)}.aq-button--primary.aq-button__outline{color:var(--color-primary-base);border:1px solid var(--color-primary-base);background-color:var(--color-white)}.aq-button--ink{border:1px solid transparent;border-radius:4px;cursor:pointer;padding:6px 12px;color:var(--color-ink-base);background-color:var(--color-white);-webkit-transition:0.3s all ease;transition:0.3s all ease;font-weight:600;font-size:14px;line-height:20px}.aq-button--ink:hover{background-color:color-mix(in srgb, var(--color-white) 70%, #000)}.aq-button--ink.aq-button__disabled{background-color:color-mix(in srgb, var(--color-white) 55%, transparent);color:color-mix(in srgb, var(--color-ink-base) 55%, transparent)}.aq-button--ink.aq-button__plain{color:var(--color-ink-base);background-color:var(--color-white)}.aq-button--ink.aq-button__outline{color:var(--color-ink-base);border:1px solid var(--color-ink-base);background-color:var(--color-white)}.aq-button--danger{border:1px solid transparent;border-radius:4px;cursor:pointer;padding:6px 12px;color:var(--color-white);background-color:var(--color-danger-base);-webkit-transition:0.3s all ease;transition:0.3s all ease;font-weight:600;font-size:14px;line-height:20px}.aq-button--danger:hover{background-color:color-mix(in srgb, var(--color-danger-base) 70%, #000)}.aq-button--danger.aq-button__disabled{background-color:color-mix(in srgb, var(--color-danger-base) 55%, transparent);color:color-mix(in srgb, var(--color-white) 55%, transparent)}.aq-button--danger.aq-button__plain{color:var(--color-white);background-color:var(--color-danger-base)}.aq-button--danger.aq-button__outline{color:var(--color-white);border:1px solid var(--color-white);background-color:var(--color-danger-base)}.aq-button--success{border:1px solid transparent;border-radius:4px;cursor:pointer;padding:6px 12px;color:var(--color-white);background-color:var(--color-success-base);-webkit-transition:0.3s all ease;transition:0.3s all ease;font-weight:600;font-size:14px;line-height:20px}.aq-button--success:hover{background-color:color-mix(in srgb, var(--color-success-base) 70%, #000)}.aq-button--success.aq-button__disabled{background-color:color-mix(in srgb, var(--color-success-base) 55%, transparent);color:color-mix(in srgb, var(--color-white) 55%, transparent)}.aq-button--success.aq-button__plain{color:var(--color-white);background-color:var(--color-success-base)}.aq-button--success.aq-button__outline{color:var(--color-white);border:1px solid var(--color-white);background-color:var(--color-danger-base)}";
const AqButtonTest$1 = /*@__PURE__*/ proxyCustomElement(class AqButtonTest extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
}
render() {
return (h(Host, { key: '51d38060044423c2bd2df31516347038d19b6f4c' }, h("button", { key: 'cb37754382918ea857413d312a85eadcd52750d8', class: "aq-button--success" }, "Button"), "\u00A0", h("button", { key: 'd734692ee71a3ddebb3acf0cb1db2209b6d0bf85', class: "aq-button--success aq-button__disabled" }, "Button")));
}
static get style() { return aqButtonTestCss; }
}, [256, "aq-button-test"]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-button-test"];
components.forEach(tagName => { switch (tagName) {
case "aq-button-test":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqButtonTest$1);
}
break;
} });
}
const AqButtonTest = AqButtonTest$1;
const defineCustomElement = defineCustomElement$1;
export { AqButtonTest, defineCustomElement };