68 lines
1.5 KiB
Plaintext
68 lines
1.5 KiB
Plaintext
class DevToolbarBadge extends HTMLElement {
|
|
size = "small";
|
|
badgeStyle = "purple";
|
|
shadowRoot;
|
|
constructor() {
|
|
super();
|
|
this.shadowRoot = this.attachShadow({ mode: "open" });
|
|
if (this.hasAttribute("size"))
|
|
this.size = this.getAttribute("size");
|
|
if (this.hasAttribute("badge-style"))
|
|
this.badgeStyle = this.getAttribute("badge-style");
|
|
const classes = [`badge--${this.size}`, `badge--${this.badgeStyle}`];
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
.badge {
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
border: 1px solid transparent;
|
|
padding: 8px;
|
|
font-size: 12px;
|
|
color: #fff;
|
|
height: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
}
|
|
|
|
.badge--large {
|
|
height: 24px;
|
|
}
|
|
|
|
.badge--gray {
|
|
color: rgba(191, 193, 201, 1);
|
|
border-color: rgba(191, 193, 201, 1);
|
|
}
|
|
|
|
.badge--purple {
|
|
color: rgba(224, 204, 250, 1);
|
|
border-color: rgba(113, 24, 226, 1);
|
|
}
|
|
|
|
.badge--red {
|
|
color: rgba(249, 196, 215, 1);
|
|
border-color: rgba(179, 62, 102, 1);
|
|
}
|
|
|
|
.badge--green {
|
|
color: rgba(213, 249, 196, 1);
|
|
border-color: rgba(61, 125, 31, 1);
|
|
}
|
|
|
|
.badge--yellow {
|
|
color: rgba(249, 233, 196, 1);
|
|
border-color: rgba(181, 138, 45, 1);
|
|
}
|
|
</style>
|
|
|
|
<div class="badge ${classes.join(" ")}">
|
|
<slot></slot>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
export {
|
|
DevToolbarBadge
|
|
};
|