artistic-elements
Version:
artistic web components
71 lines (68 loc) • 1.46 kB
JavaScript
import {
__decorateClass,
e,
e2,
i,
s,
y
} from "./chunk.FMUK5F65.js";
// src/artistic/circular-gradient.ts
var ArtisticCircularGradient = class extends s {
constructor() {
super(...arguments);
this.width = "10rem";
this.height = "10rem";
this.angle = "0deg";
this.color = "#f0f";
this.color2 = "#0f0";
}
render() {
const style = `
width: ${this.width};
height: ${this.height};
background: linear-gradient(
${this.angle},
${this.color} 0%,
${this.color} 50%,
${this.color2} 50%,
${this.color2} 100%
);
`;
return y`<div style="${style}">
<slot></slot>
</div>`;
}
};
ArtisticCircularGradient.styles = i`
:host {
display: contents;
}
div {
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
`;
__decorateClass([
e2()
], ArtisticCircularGradient.prototype, "width", 2);
__decorateClass([
e2()
], ArtisticCircularGradient.prototype, "height", 2);
__decorateClass([
e2()
], ArtisticCircularGradient.prototype, "angle", 2);
__decorateClass([
e2()
], ArtisticCircularGradient.prototype, "color", 2);
__decorateClass([
e2()
], ArtisticCircularGradient.prototype, "color2", 2);
ArtisticCircularGradient = __decorateClass([
e("artistic-circular-gradient")
], ArtisticCircularGradient);
export {
ArtisticCircularGradient
};