// 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; }