@vuesax-alpha/nightly/theme-chalk/vs-badge.css

A Component Library for Vue 3

.vs-badge{--vs-badge-bg-color:var(--vs-primary);--vs-badge-radius:10px;--vs-badge-font-size:12px;--vs-badge-padding:6px;--vs-badge-size:18px;--vs-badge-ripple-bezier:cubic-bezier(0, 0, 0.2, 1);--vs-badge-ripple-color:var(--vs-danger);position:relative;vertical-align:middle;display:inline-block;width:-moz-fit-content;width:fit-content}.vs-badge__content{background-color:var(--vs-badge-bg-color);border-radius:var(--vs-badge-radius);color:rgba(var(--vs-white),1);display:inline-flex;justify-content:center;align-items:center;font-size:var(--vs-badge-font-size);height:var(--vs-badge-size);padding:0 var(--vs-badge-padding);white-space:nowrap;border:1px solid rgba(var(--vs-bg-color),1)}.vs-badge__content.is-fixed{position:absolute;top:0;right:calc(1px + var(--vs-badge-size)/ 2);transform:translateY(-50%) translateX(100%);z-index:var(--vs-index-normal)}.vs-badge__content.is-fixed.is-dot{right:5px}.vs-badge__content.is-dot{height:8px;width:8px;padding:0;right:0;border-radius:50%}.vs-badge__content.is-process::before{content:" ";position:absolute;left:0;right:0;top:0;bottom:0;border-radius:inherit;animation:badge-wave-spread 2s var(--vs-badge-ripple-bezier) 1s infinite}.vs-badge__content--primary{background-color:rgba(var(--vs-primary),1);--vs-badge-ripple-color:rgba(var(--vs-primary), 1)}.vs-badge__content--success{background-color:rgba(var(--vs-success),1);--vs-badge-ripple-color:rgba(var(--vs-success), 1)}.vs-badge__content--warn{background-color:rgba(var(--vs-warn),1);--vs-badge-ripple-color:rgba(var(--vs-warn), 1)}.vs-badge__content--info{background-color:rgba(var(--vs-info),1);--vs-badge-ripple-color:rgba(var(--vs-info), 1)}.vs-badge__content--danger{background-color:rgba(var(--vs-danger),1);--vs-badge-ripple-color:rgba(var(--vs-danger), 1)}@keyframes badge-wave-spread{from{box-shadow:0 0 .5px 0 var(--vs-badge-ripple-color);opacity:.6}to{box-shadow:0 0 .5px 4.5px var(--vs-badge-ripple-color);opacity:0}}