quarkd
Version:
Mobile UI Components built on Web Components.
2 lines (1 loc) • 4.64 kB
JavaScript
import{_ as r,a as t}from"../typeof.js";import{_ as n,a as o,b as a,c as e,P as g,H as i,d as l,N as c,B as s}from"../index2.js";import{_ as u}from"../defineProperty.js";function p(r){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(r){return!1}}();return function(){var a,e=n(r);if(t){var g=n(this).constructor;a=Reflect.construct(e,arguments,g)}else a=e.apply(this,arguments);return o(this,a)}}var d=function(n){a(l,i);var o=p(l);function l(){var t;r(this,l);for(var n=arguments.length,a=new Array(n),i=0;i<n;i++)a[i]=arguments[i];return t=o.call.apply(o,[this].concat(a)),u(e(t),"type",""),u(e(t),"color",""),u(e(t),"textcolor",""),u(e(t),"size",""),u(e(t),"plain",!1),u(e(t),"round",!1),u(e(t),"light",!1),u(e(t),"wrap",g()),t}return t(l,[{key:"render",value:function(){return i.h("span",{class:"quark-tag",style:{background:this.color,color:this.textcolor},part:"root"},i.h("slot",null))}}]),l}();l([c()],d.prototype,"type",void 0),l([c()],d.prototype,"color",void 0),l([c()],d.prototype,"textcolor",void 0),l([c()],d.prototype,"size",void 0),l([c({type:Boolean})],d.prototype,"plain",void 0),l([c({type:Boolean})],d.prototype,"round",void 0),l([c({type:Boolean})],d.prototype,"light",void 0);var v=d=l([s({tag:"quark-tag",style:':host {\n display: inline-flex;\n}\n\n:host .quark-tag {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--tag-border-radius, 1.06667vw);\n padding-left: var(--tag-hspacing, 1.06667vw);\n padding-right: var(--tag-hspacing, 1.06667vw);\n /* padding-top: var(--tag-vspacing, 2px); */\n /* padding-bottom: var(--tag-vspacing, 2px); */\n font-size: var(--tag-font-size, 2.93333vw);\n line-height: var(--tag-line-height, 4.26667vw);\n font-weight: var(--tag-font-weight, 400);\n font-family: var(--tag-font-family, PingFangSC-Regular, PingFang SC);\n color: var(--tag-text-color, #fff);\n background: var(--tag-background, #0088ff);\n width: auto;\n height: auto;\n}\n\n:host([round]) .quark-tag {\n border-radius: 266.4vw;\n}\n\n:host([size="large"]) .quark-tag {\n padding-left: var(--tag-hspacing, 1.6vw);\n padding-right: var(--tag-hspacing, 1.6vw);\n /* padding-top: var(--tag-vspacing, 2px); */\n /* padding-bottom: var(--tag-vspacing, 2px); */\n font-size: var(--tag-font-size, 3.73333vw);\n line-height: var(--tag-line-height, 6.4vw);\n font-weight: var(--tag-font-weight, 500);\n font-family: var(--tag-font-family, PingFangSC-Medium, PingFang SC);\n}\n\n:host([type="primary"]) .quark-tag {\n background: var(--quark-theme-color, #0088ff);\n}\n\n:host([type="warning"]) .quark-tag {\n background: var(--quark-warning-color, #FB990F);\n}\n\n:host([type="danger"]) .quark-tag {\n background: var(--quark-danger-color, #F72626);\n}\n\n:host([type="success"]) .quark-tag {\n background: var(--quark-success-color, #07C160);\n}\n\n:host([plain]) .quark-tag {\n background: white;\n /* border: 0.5px solid; */\n /* border-color: var(--tag-border-color, #0088ff); */\n outline: 0.5px solid;\n outline-color: var(--tag-border-color, --tag-text-color);\n color: var(--tag-text-color, #0088ff);\n}\n\n:host([plain][type="primary"]) .quark-tag {\n border-color: var(--tag-border-color, #b2dbff);\n color: var(--tag-text-color, #0088ff);\n}\n\n:host([plain][type="warning"]) .quark-tag {\n border-color: var(--tag-border-color, #fde0b7);\n color: var(--tag-text-color, #FB990F);\n}\n\n:host([plain][type="danger"]) .quark-tag {\n border-color: var(--tag-border-color, #fcbdbd);\n color: var(--tag-text-color, #F72626);\n}\n\n:host([plain][type="success"]) .quark-tag {\n border-color: var(--tag-border-color, #b4eccf);\n color: var(--tag-text-color, #07C160);\n}\n\n:host([light]) .quark-tag {\n color: var(--tag-text-color, #0088ff);\n background: var(--quark-primary-light-color, #E6F4FF);\n}\n\n:host([light][type="primary"]) .quark-tag {\n background: var(--quark-primary-light-color, #E6F4FF);\n color: var(--tag-text-color, #0088ff);\n}\n\n:host([light][type="warning"]) .quark-tag {\n background: var(--quark-warning-light-color, #FEF4E7);\n color: var(--tag-text-color, #FB990F);\n}\n\n:host([light][type="danger"]) .quark-tag {\n background: var(--quark-danger-light-color, #FEE9E9);\n color: var(--tag-text-color, #F72626);\n}\n\n:host([light][type="success"]) .quark-tag {\n background: var(--quark-success-light-color, #E6F8EF);\n color: var(--tag-text-color, #07C160);\n}\n'})],d);export{v as default};