vexip-ui/css/badge.css

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

.vxp-badge-vars{--vxp-badge-color:var(--vxp-color-white);--vxp-badge-bg-color:var(--vxp-color-error-base);--vxp-badge-b-color:var(--vxp-color-error-opacity-8);--vxp-badge-line-height:var(--vxp-line-height-secondary);--vxp-badge-height:16px;--vxp-badge-v-padding:0;--vxp-badge-h-padding:6px;--vxp-badge-family:Helvetica,Microsoft YaHei,SimSun,sans-serif;--vxp-badge-font-size:var(--vxp-font-size-secondary);--vxp-badge-dot-size:7px}.vxp-badge{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);position:relative;display:inline-flex}.vxp-badge,.vxp-badge *,.vxp-badge ::after,.vxp-badge ::before{box-sizing:border-box}.vxp-badge--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-badge--not-wrapper{line-height:1;vertical-align:middle}.vxp-badge--not-wrapper.vxp-badge--is-dot{display:inline-flex}.vxp-badge__content{position:relative;top:auto;display:inline-flex;align-items:center;justify-content:center;height:var(--vxp-badge-height);padding:var(--vxp-badge-v-padding) var(--vxp-badge-h-padding);font-family:var(--vxp-badge-family);font-size:var(--vxp-badge-font-size);line-height:var(--vxp-badge-line-height);color:var(--vxp-badge-color);white-space:nowrap;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--vxp-badge-bg-color);border-radius:calc(var(--vxp-badge-height) * .5);box-shadow:var(--vxp-shadow-border) var(--vxp-badge-b-color);transform-origin:center center}.vxp-badge__content--fixed{position:absolute;inset-inline-end:0;top:0;transform:translate(50%,-50%)}html.rtl .vxp-badge__content--fixed,html[dir=rtl] .vxp-badge__content--fixed{transform:translate(-50%,-50%)}.vxp-badge__content--primary{--vxp-badge-bg-color:var(--vxp-color-primary-base);--vxp-badge-b-color:var(--vxp-color-primary-opacity-8)}.vxp-badge__content--info{--vxp-badge-bg-color:var(--vxp-color-info-base);--vxp-badge-b-color:var(--vxp-color-info-opacity-8)}.vxp-badge__content--success{--vxp-badge-bg-color:var(--vxp-color-success-base);--vxp-badge-b-color:var(--vxp-color-success-opacity-8)}.vxp-badge__content--warning{--vxp-badge-bg-color:var(--vxp-color-warning-base);--vxp-badge-b-color:var(--vxp-color-warning-opacity-8)}.vxp-badge__content--disabled{--vxp-badge-bg-color:var(--vxp-content-color-disabled);--vxp-badge-b-color:var(--vxp-border-color-light-2)}.vxp-badge--is-dot .vxp-badge__content{width:var(--vxp-badge-dot-size);height:var(--vxp-badge-dot-size);padding:0;border-radius:50%}