mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
123 lines
2.5 KiB
SCSS
123 lines
2.5 KiB
SCSS
@use '../config' as *;
|
|
|
|
.badge {
|
|
// scss-docs-start badge-css-vars
|
|
--badge-padding-x: #{$badge-padding-x};
|
|
--badge-padding-y: #{$badge-padding-y};
|
|
--badge-font-size: #{$badge-font-size};
|
|
--badge-font-weight: #{$badge-font-weight};
|
|
--badge-color: #{$badge-color};
|
|
--badge-border-radius: #{$badge-border-radius};
|
|
--badge-icon-size: 1em;
|
|
--badge-line-height: 1;
|
|
--badge-gap: #{$badge-gap};
|
|
// scss-docs-end badge-css-vars
|
|
display: inline-flex;
|
|
gap: var(--badge-gap);
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: calc(1em + var(--badge-padding-y) * 2 + 2px);
|
|
padding: var(--badge-padding-y) var(--badge-padding-x);
|
|
overflow: hidden;
|
|
font-size: var(--badge-font-size);
|
|
font-weight: var(--badge-font-weight);
|
|
line-height: var(--badge-line-height);
|
|
color: var(--badge-color);
|
|
text-align: center;
|
|
letter-spacing: 0.04em;
|
|
white-space: nowrap;
|
|
vertical-align: bottom;
|
|
user-select: none;
|
|
background: $badge-bg-color;
|
|
border: var(--border-width) var(--border-style) transparent;
|
|
@include border-radius(var(--badge-border-radius));
|
|
|
|
@at-root a#{&} {
|
|
background: var(--bg-surface-secondary);
|
|
}
|
|
|
|
.icon {
|
|
width: 1em;
|
|
height: 1em;
|
|
font-size: var(--badge-icon-size);
|
|
stroke-width: 2;
|
|
}
|
|
}
|
|
|
|
.badge:empty,
|
|
.badge-dot {
|
|
display: inline-block;
|
|
width: $badge-empty-size;
|
|
min-width: 0;
|
|
height: $badge-empty-size;
|
|
min-height: auto;
|
|
padding: 0;
|
|
vertical-align: baseline;
|
|
@include border-radius(var(--border-radius-pill));
|
|
}
|
|
|
|
//
|
|
// Outline badge
|
|
//
|
|
.badge-outline {
|
|
background-color: transparent;
|
|
border: var(--border-width) var(--border-style) currentColor;
|
|
}
|
|
|
|
//
|
|
// Pill badge
|
|
//
|
|
.badge-pill {
|
|
@include border-radius(var(--border-radius-pill));
|
|
}
|
|
|
|
//
|
|
// Badge list
|
|
//
|
|
.badge-list,
|
|
.badges-list {
|
|
// `.badges-list` is deprecated, use `.badge-list` instead
|
|
@include elements-list();
|
|
}
|
|
|
|
//
|
|
// Notification badge
|
|
//
|
|
.badge-notification {
|
|
position: absolute !important;
|
|
inset-inline-end: 0 !important;
|
|
top: 0 !important;
|
|
z-index: 1;
|
|
|
|
/* rtl:ignore */
|
|
transform: translate(calc(var(--dir) * 50%), -50%);
|
|
}
|
|
|
|
.badge-blink {
|
|
animation: blink 2s infinite;
|
|
}
|
|
|
|
//
|
|
// Badge sizes
|
|
//
|
|
.badge-sm {
|
|
--badge-font-size: #{$badge-font-size-sm};
|
|
--badge-icon-size: 1em;
|
|
--badge-padding-y: 2px;
|
|
--badge-padding-x: #{$badge-padding-x-sm};
|
|
}
|
|
|
|
.badge-lg {
|
|
--badge-font-size: #{$badge-font-size-lg};
|
|
--badge-icon-size: 1em;
|
|
--badge-padding-y: #{$badge-padding-y-lg};
|
|
--badge-padding-x: #{$badge-padding-x-lg};
|
|
}
|
|
|
|
//
|
|
// Badge with only icon
|
|
//
|
|
.badge-icononly {
|
|
--badge-padding-x: 0;
|
|
}
|