| // Base class |
| // |
| // Requires one of the contextual, color modifier classes for `color` and |
| // `background-color`. |
| |
| .badge { |
| // scss-docs-start badge-css-vars |
| --#{$prefix}badge-padding-x: #{$badge-padding-x}; |
| --#{$prefix}badge-padding-y: #{$badge-padding-y}; |
| @include rfs($badge-font-size, --#{$prefix}badge-font-size); |
| --#{$prefix}badge-font-weight: #{$badge-font-weight}; |
| --#{$prefix}badge-color: #{$badge-color}; |
| --#{$prefix}badge-border-radius: #{$badge-border-radius}; |
| // scss-docs-end badge-css-vars |
| |
| display: inline-block; |
| padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x); |
| @include font-size(var(--#{$prefix}badge-font-size)); |
| font-weight: var(--#{$prefix}badge-font-weight); |
| line-height: 1; |
| color: var(--#{$prefix}badge-color); |
| text-align: center; |
| white-space: nowrap; |
| vertical-align: baseline; |
| @include border-radius(var(--#{$prefix}badge-border-radius)); |
| @include gradient-bg(); |
| |
| // Empty badges collapse automatically |
| &:empty { |
| display: none; |
| } |
| } |
| |
| // Quick fix for badges in buttons |
| .btn .badge { |
| position: relative; |
| top: -1px; |
| } |
