@gits-id/badge/dist/style.css

GITS Badge Component

:root{--badge-bg-color: #f3f4f6;--badge-color: #1f2937;--badge-border-style: solid;--badge-border-width: 1px;--badge-border-color: transparent;--badge-border-radius: .25rem;--badge-padding-x: .5rem;--badge-padding-y: .25rem;--badge-font-size: .75rem;--badge-font-weight: 600;--badge-icon-size: 1rem;--badge-gap: 1rem}.badge{display:inline-flex;align-items:center;gap:var(--badge-gap);background-color:var(--badge-bg-color);color:var(--badge-color);border-radius:var(--badge-border-radius);border-width:var(--badge-border-width);border-style:var(--badge-border-style);border-color:var(--badge-border-color);padding:var(--badge-padding-y) var(--badge-padding-x);font-size:var(--badge-font-size);font-weight:var(--badge-font-weight);flex-shrink:0}.badge-dismiss-button{background-color:transparent;border-radius:.125rem;padding:0}.badge-icon{width:var(--badge-icon-size)!important;height:var(--badge-icon-size)!important}.badge--outlined{border-style:var(--badge-border-style);border-width:var(--badge-border-width);border-color:var(--badge-border-color);background-color:transparent}.badge--sm{--badge-padding-x: .25rem;--badge-padding-y: 2px;--badge-font-size: 10px}.badge--lg{--badge-padding-x: .5rem;--badge-padding-y: .25rem;--badge-font-size: .875rem;--badge-icon-size: 1.25rem}.badge--rounded{--badge-border-radius: .25rem}.badge--rounded-sm{--badge-border-radius: .125rem}.badge--rounded-md{--badge-border-radius: .375rem}.badge--rounded-lg{--badge-border-radius: .5rem}.badge--rounded-xl{--badge-border-radius: .75rem}.badge--rounded-2xl{--badge-border-radius: 1rem}.badge--rounded-3xl{--badge-border-radius: 1.5rem}.badge--rounded-none{--badge-border-radius: 0px}.badge--rounded-full{--badge-border-radius: 9999px}.badge-primary{--badge-bg-color: #28A0F6;--badge-color: #fff;--badge-border-color: #28A0F6}.badge-secondary{--badge-bg-color: #FF8B49;--badge-color: #fff;--badge-border-color: #FF8B49}.badge-info{--badge-bg-color: #0ea5e9;--badge-color: #fff;--badge-border-color: #0ea5e9}.badge-warning{--badge-bg-color: #eab308;--badge-color: #fff;--badge-border-color: #eab308}.badge-success{--badge-bg-color: #10b981;--badge-color: #fff;--badge-border-color: #10b981}.badge-error{--badge-bg-color: #f43f5e;--badge-color: #fff;--badge-border-color: #f43f5e}.badge-dark{--badge-bg-color: #1f2937;--badge-color: #fff;--badge-border-color: #1f2937}.badge--outlined.badge-default{--badge-color: #1f2937;--badge-border-color: #1f2937}.badge--outlined.badge-primary{--badge-color: #28A0F6;--badge-border-color: #28A0F6}.badge--outlined.badge-secondary{--badge-color: #FF8B49;--badge-border-color: #FF8B49}.badge--outlined.badge-info{--badge-color: #0ea5e9;--badge-border-color: #0ea5e9}.badge--outlined.badge-warning{--badge-color: #eab308;--badge-border-color: #eab308}.badge--outlined.badge-success{--badge-color: #10b981;--badge-border-color: #10b981}.badge--outlined.badge-error{--badge-color: #f43f5e;--badge-border-color: #f43f5e}.badge--outlined.badge-dark{--badge-color: #1f2937;--badge-border-color: #1f2937}.dark .badge-default{--badge-bg-color: #262626;--badge-color: #e5e5e5;--badge-border-color: #262626}.dark .badge--outlined.badge-default{--badge-color: #e5e5e5;--badge-border-color: #525252}.dark .badge--outlined.badge-dark{--badge-color: #e5e7eb;--badge-border-color: #4b5563}