@digdir/designsystemet-css/dist/src/badge.css

CSS for Designsystemet

.ds-badge{--dsc-badge-background:var(--ds-color-base-default);--dsc-badge-color:var(--ds-color-base-contrast-default);--dsc-badge-padding:0 calc(var(--ds-size-1) + var(--ds-size-1)/2);--dsc-badge-size:calc(var(--ds-size-3) + var(--ds-size-1)/2);-webkit-print-color-adjust:exact;print-color-adjust:exact}.ds-badge:before{background:var(--dsc-badge-background);border-radius:var(--ds-border-radius-full);box-sizing:border-box;color:var(--dsc-badge-color);content:attr(data-count);display:inline-grid;font-size:var(--ds-font-size-minus-1);line-height:var(--ds-line-height-sm);min-height:var(--dsc-badge-size);min-width:var(--dsc-badge-size);padding:var(--dsc-badge-padding);place-items:center;width:-moz-fit-content;width:fit-content}@supports (content:attr(data-count,"")){.ds-badge:before{content:attr(data-count,"")}}.ds-badge[data-variant=base]{--dsc-badge-background:var(--ds-color-base-default);--dsc-badge-color:var(--ds-color-base-contrast-default)}.ds-badge[data-variant=tinted]{--dsc-badge-background:var(--ds-color-surface-tinted);--dsc-badge-color:var(--ds-color-text-default)}.ds-badge--position{box-sizing:border-box;height:-moz-fit-content;height:fit-content;position:relative;width:-moz-fit-content;width:fit-content}.ds-badge--position:not([hidden]){display:inline-flex}.ds-badge--position .ds-badge:before{position:absolute}.ds-badge--position :where(img,svg){flex-shrink:0;font-size:1.25em}.ds-badge--position[data-placement=top-right] .ds-badge:before{right:0;top:0;translate:50% -50%}.ds-badge--position[data-placement=top-left] .ds-badge:before{left:0;top:0;translate:-50% -50%}.ds-badge--position[data-placement=bottom-right] .ds-badge:before{bottom:0;right:0;translate:50% 50%}.ds-badge--position[data-placement=bottom-left] .ds-badge:before{bottom:0;left:0;translate:-50% 50%}.ds-badge--position[data-placement=top-right][data-overlap=circle] .ds-badge:before{right:14%;top:14%;translate:50% -50%}.ds-badge--position[data-placement=top-left][data-overlap=circle] .ds-badge:before{left:14%;top:14%;translate:-50% -50%}.ds-badge--position[data-placement=bottom-right][data-overlap=circle] .ds-badge:before{bottom:14%;right:14%;translate:50% 50%}.ds-badge--position[data-placement=bottom-left][data-overlap=circle] .ds-badge:before{bottom:14%;left:14%;translate:-50% 50%}