UNPKG

4.93 kBJavaScriptView Raw
1import { r as registerInstance, h } from './index-d4feb066.js';
2
3const badgeCss = ".badge{background-color:#5851ff;border:2px solid transparent;border-radius:14px;-webkit-box-shadow:0 0 0 2px white;box-shadow:0 0 0 2px white;color:white;font-size:0.65rem;height:14px;line-height:calc(7px + 1px);min-width:14px;overflow:hidden;padding:0.05rem 0.15rem;position:absolute;right:0;text-overflow:ellipsis;top:0;-webkit-transform:translate(50%, -50%);-ms-transform:translate(50%, -50%);transform:translate(50%, -50%);white-space:nowrap}.badge.is-outlined{background-color:white;border-color:#5851ff;color:#5851ff}.badge.is-left{bottom:0;left:0;right:auto;top:50%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.badge.is-right{bottom:auto;left:auto;right:0;top:50%;-webkit-transform:translate(50%, -50%);-ms-transform:translate(50%, -50%);transform:translate(50%, -50%)}.badge.is-top{bottom:auto;left:50%;right:auto;top:0;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.badge.is-top-left{bottom:auto;left:0;right:auto;top:0;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.badge.is-top-right{bottom:auto;left:auto;right:0;top:0;-webkit-transform:translate(50%, -50%);-ms-transform:translate(50%, -50%);transform:translate(50%, -50%)}.badge.is-bottom{bottom:0;left:50%;right:auto;top:auto;-webkit-transform:translate(-50%, 50%);-ms-transform:translate(-50%, 50%);transform:translate(-50%, 50%)}.badge.is-bottom-left{bottom:0;left:0;right:auto;top:auto;-webkit-transform:translate(-50%, 50%);-ms-transform:translate(-50%, 50%);transform:translate(-50%, 50%)}.badge.is-bottom-right{bottom:0;left:auto;right:0;top:auto;-webkit-transform:translate(50%, 50%);-ms-transform:translate(50%, 50%);transform:translate(50%, 50%)}.badge.is-white:not(.is-outlined){background-color:white;color:#0a0a0a}.badge.is-white.is-outlined{border-color:white;color:white}.badge.is-black:not(.is-outlined){background-color:#0a0a0a;color:white}.badge.is-black.is-outlined{border-color:#0a0a0a;color:#0a0a0a}.badge.is-light:not(.is-outlined){background-color:whitesmoke;color:rgba(0, 0, 0, 0.7)}.badge.is-light.is-outlined{border-color:whitesmoke;color:whitesmoke}.badge.is-dark:not(.is-outlined){background-color:#363636;color:#fff}.badge.is-dark.is-outlined{border-color:#363636;color:#363636}.badge.is-primary:not(.is-outlined){background-color:#5851ff;color:#fff}.badge.is-primary.is-outlined{border-color:#5851ff;color:#5851ff}.badge.is-primary.is-light{color:#0a00f0}.badge.is-primary.is-light:not(.is-outlined){background-color:#ebebff}.badge.is-primary.is-light.is-outlined{border-color:#5851ff}.badge.is-link:not(.is-outlined){background-color:#5851ff;color:#fff}.badge.is-link.is-outlined{border-color:#5851ff;color:#5851ff}.badge.is-link.is-light{color:#0a00f0}.badge.is-link.is-light:not(.is-outlined){background-color:#ebebff}.badge.is-link.is-light.is-outlined{border-color:#5851ff}.badge.is-info:not(.is-outlined){background-color:#3298dc;color:#fff}.badge.is-info.is-outlined{border-color:#3298dc;color:#3298dc}.badge.is-info.is-light{color:#1d72aa}.badge.is-info.is-light:not(.is-outlined){background-color:#eef6fc}.badge.is-info.is-light.is-outlined{border-color:#3298dc}.badge.is-success:not(.is-outlined){background-color:#48c774;color:#fff}.badge.is-success.is-outlined{border-color:#48c774;color:#48c774}.badge.is-success.is-light{color:#257942}.badge.is-success.is-light:not(.is-outlined){background-color:#effaf3}.badge.is-success.is-light.is-outlined{border-color:#48c774}.badge.is-warning:not(.is-outlined){background-color:#ffdd57;color:rgba(0, 0, 0, 0.7)}.badge.is-warning.is-outlined{border-color:#ffdd57;color:#ffdd57}.badge.is-warning.is-light{color:#947600}.badge.is-warning.is-light:not(.is-outlined){background-color:#fffbeb}.badge.is-warning.is-light.is-outlined{border-color:#ffdd57}.badge.is-danger:not(.is-outlined){background-color:#f14668;color:#fff}.badge.is-danger.is-outlined{border-color:#f14668;color:#f14668}.badge.is-danger.is-light{color:#cc0f35}.badge.is-danger.is-light:not(.is-outlined){background-color:#feecf0}.badge.is-danger.is-light.is-outlined{border-color:#f14668}.tabs li{position:relative}";
4
5const Badge = class {
6 constructor(hostRef) {
7 registerInstance(this, hostRef);
8 /**
9 * Is outlined
10 */
11 this.isOutlined = false;
12 /**
13 * Is light
14 */
15 this.isLight = false;
16 }
17 render() {
18 return (h("span", { class: {
19 badge: true,
20 [this.color]: Boolean(this.color),
21 [this.position]: Boolean(this.position),
22 'is-light': this.isLight,
23 'is-outlined': this.isOutlined,
24 } }, h("slot", null)));
25 }
26};
27Badge.style = badgeCss;
28
29export { Badge as bm_badge };