No notes defined.
<!-- Default -->
<span class="badge">7</span>
<!-- With Large Number -->
<span class="badge">9999</span>
<!-- Compact -->
<span class="badge is-compact" tabindex="0"></span>
<!-- Large Number Compact -->
<span class="badge is-compact" tabindex="0">9999</span>
<!-- Doc Only -->
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Default</h2>
<div class="doc-variant-configuration">
</div>
</header>
<span class="badge">7</span>
<span class="badge">9999</span>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Compact</h2>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-compact</li>
</ul>
</div>
<div class="doc-variant-notes">Inhalt wird bei Hover oder Focus angezeigt.</div>
</header>
<span class="badge is-compact" tabindex="0">7</span>
<span class="badge is-compact" tabindex="0">9999</span>
</section>
<!-- Default -->
<span class="badge{{#modifier}} {{.}}{{/modifier}}{{#if is-compact}} is-compact{{/if}}"{{#if is-compact}} tabindex="0"{{/if}}>{{label}}</span>
<!-- With Large Number -->
<span class="badge{{#modifier}} {{.}}{{/modifier}}{{#if is-compact}} is-compact{{/if}}"{{#if is-compact}} tabindex="0"{{/if}}>{{label}}</span>
<!-- Compact -->
<span class="badge{{#modifier}} {{.}}{{/modifier}}{{#if is-compact}} is-compact{{/if}}"{{#if is-compact}} tabindex="0"{{/if}}>{{label}}</span>
<!-- Large Number Compact -->
<span class="badge{{#modifier}} {{.}}{{/modifier}}{{#if is-compact}} is-compact{{/if}}"{{#if is-compact}} tabindex="0"{{/if}}>{{label}}</span>
<!-- Doc Only -->
{{#variants}}
<section class="doc-variant">
<header class="doc-variant-header">
{{#title}}
<h2 class="doc-variant-title">{{{.}}}</h2>
{{/title}}
<div class="doc-variant-configuration">
{{#if modifiers}}
<ul data-label="Modifier">
{{#modifiers}}
<li>{{{.}}}</li>
{{/modifiers}}
</ul>
{{/if}}
</div>
{{#annotations}}
<div class="doc-variant-notes">{{{.}}}</div>
{{/annotations}}
</header>
{{#samples}}
{{render '@badge' (contextData '@badge' this) merge=true}}
{{/samples}}
</section>
{{/variants}}
/* Default */
{
"label": 7
}
/* With Large Number */
{
"label": 9999
}
/* Compact */
{
"is-compact": true
}
/* Large Number Compact */
{
"label": 9999,
"is-compact": true
}
/* Doc Only */
{
"variants": [
{
"title": "Default",
"samples": [
{
"label": 7
},
{
"label": 9999
}
]
},
{
"title": "Compact",
"modifiers": "is-compact",
"annotations": "Inhalt wird bei Hover oder Focus angezeigt.",
"samples": [
{
"is-compact": true
},
{
"label": 9999,
"is-compact": true
}
]
}
]
}
@import "_badge.settings";
@import "_badge.styles";
$badge_min-size: 12px !default;
$badge_padding: .2em .4em .3em !default;
$badge_styles: (
background-color: $_action-background-color,
color: $_action-foreground-color,
border-radius: 100vmax,
font-size: smallest,
font-weight: $_font-weight--bold,
) !default;
%badge {
@include styles($badge_styles);
display: inline-flex;
justify-content: center;
align-items: center;
min-width: 1em + nth($badge_padding, 1) + nth($badge_padding, 3);
padding: $badge_padding;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 1;
user-select: none;
}
%badge--compact {
transition: $_transition-duration--out;
transition-property: color;
outline: transparent;
&:not(:hover, :focus, :focus-visible) {
min-width: 0;
padding: 0;
width: $badge_min-size;
height: $badge_min-size;
color: transparent;
transition-duration: $_transition-duration--in;
}
@supports (clip-path: circle()) {
transition-property: color, clip-path;
clip-path: circle(100% at center center);
&:not(:hover, :focus, :focus-visible) {
min-width: 1em + nth($badge_padding, 1) + nth($badge_padding, 3);
padding: $badge_padding;
width: initial;
height: initial;
clip-path: circle(#{.5 * $badge_min-size} at center center);
}
}
}
.badge {
@extend %badge;
&.is-compact {
@extend %badge--compact;
}
}