t-fighting-design/theme/badge.css

Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.

.f-badge{position:relative;display:inline-block;vertical-align:middle;transition:.4s;cursor:default}.f-badge .f-badge__content{position:absolute;border-radius:10px;font-size:12px;padding:0 6px;height:18px;display:inline-flex;justify-content:center;align-items:center;top:0;right:0;transform:translateY(-50%) translate(50%)}.f-badge .f-badge__content.f-badge__default{color:var(--f-badge-text-color, #fff);background:var(--f-badge-background, #f0f0f0)}.f-badge .f-badge__content.f-badge__primary{color:var(--f-badge-text-color, #fff);background:var(--f-badge-background, #2d5af1)}.f-badge .f-badge__content.f-badge__success{color:var(--f-badge-text-color, #fff);background:var(--f-badge-background, #52b35e)}.f-badge .f-badge__content.f-badge__danger{color:var(--f-badge-text-color, #fff);background:var(--f-badge-background, #ff0200)}.f-badge .f-badge__content.f-badge__warning{color:var(--f-badge-text-color, #fff);background:var(--f-badge-background, #fcc202)}.f-badge .f-badge__content.f-badge__dot{border-radius:50%;width:8px;height:8px;padding:0}