bootstrap/scss/_badge.scss

// 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;
}
clean out comments that aren't all that helpful 2015-08-18 09:33:34 +08:00			`// Base class`
Bring back the label, make it scale somewhat with the font-size of the parent using percentages and ems 2013-02-18 14:20:49 +08:00			`//`
clean out comments that aren't all that helpful 2015-08-18 09:33:34 +08:00			// Requires one of the contextual, color modifier classes for `color` and
			// `background-color`.
more comments and formatting clean up 2015-04-19 02:38:47 +08:00
Rename .tag to .badge to avoid conflicting with WordPress 2016-10-27 09:33:58 +08:00			`.badge {`
Convert .badge to CSS variables 2021-11-17 11:01:30 +08:00			`// scss-docs-start badge-css-vars`
Add additional root variables, rename `$variable-prefix` to `$prefix` (#35981) * Add additional root variables, rename $variable-prefix to $prefix - Adds new root CSS variables for border-radius, border-width, border-color, and border-style - Adds new root CSS variables for heading-color, link-colors, code color, and highlight color - Replaces most instances of Sass variables (for border-radius, border-color, border-style, and border-width) for CSS variables inside _variables.scss - Updates $mark-padding to be an even pixel number - Renames $variable-prefix to $prefix throughout * Bundlewatch 2022-03-14 01:13:09 +08:00			`--#{$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};`
Convert .badge to CSS variables 2021-11-17 11:01:30 +08:00			`// scss-docs-end badge-css-vars`

inline-block on labels now instead of inline 2014-12-06 16:33:36 +08:00			`display: inline-block;`
Add additional root variables, rename `$variable-prefix` to `$prefix` (#35981) * Add additional root variables, rename $variable-prefix to $prefix - Adds new root CSS variables for border-radius, border-width, border-color, and border-style - Adds new root CSS variables for heading-color, link-colors, code color, and highlight color - Replaces most instances of Sass variables (for border-radius, border-color, border-style, and border-width) for CSS variables inside _variables.scss - Updates $mark-padding to be an even pixel number - Renames $variable-prefix to $prefix throughout * Bundlewatch 2022-03-14 01:13:09 +08:00			`padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);`
Adding @include everytime it's not the case 2022-04-01 00:12:52 +08:00			`@include font-size(var(--#{$prefix}badge-font-size));`
Add additional root variables, rename `$variable-prefix` to `$prefix` (#35981) * Add additional root variables, rename $variable-prefix to $prefix - Adds new root CSS variables for border-radius, border-width, border-color, and border-style - Adds new root CSS variables for heading-color, link-colors, code color, and highlight color - Replaces most instances of Sass variables (for border-radius, border-color, border-style, and border-width) for CSS variables inside _variables.scss - Updates $mark-padding to be an even pixel number - Renames $variable-prefix to $prefix throughout * Bundlewatch 2022-03-14 01:13:09 +08:00			`font-weight: var(--#{$prefix}badge-font-weight);`
Bring back the label, make it scale somewhat with the font-size of the parent using percentages and ems 2013-02-18 14:20:49 +08:00			`line-height: 1;`
Add additional root variables, rename `$variable-prefix` to `$prefix` (#35981) * Add additional root variables, rename $variable-prefix to $prefix - Adds new root CSS variables for border-radius, border-width, border-color, and border-style - Adds new root CSS variables for heading-color, link-colors, code color, and highlight color - Replaces most instances of Sass variables (for border-radius, border-color, border-style, and border-width) for CSS variables inside _variables.scss - Updates $mark-padding to be an even pixel number - Renames $variable-prefix to $prefix throughout * Bundlewatch 2022-03-14 01:13:09 +08:00			`color: var(--#{$prefix}badge-color);`
Bring back the label, make it scale somewhat with the font-size of the parent using percentages and ems 2013-02-18 14:20:49 +08:00			`text-align: center;`
- changed comments - added hover and focus state for [href] color variations 2013-04-24 19:54:17 +08:00			`white-space: nowrap;`
Improves label and badge alignment so text aligns with baseline 2013-07-30 23:23:25 +08:00			`vertical-align: baseline;`
Fix tooltip/badge border radius when rounded disabled 2022-06-30 04:14:49 +08:00			`@include border-radius(var(--#{$prefix}badge-border-radius));`
Improve gradients - Use a semitransparent gradient from light to dark which works on any background-color - Store the gradient as a custom property (--bs-gradient) - Remove `.bg-gradient-*` variants in favour of `.bg-gradient` which works even when `$enable-gradients` are enabled - Add gradients to navbar, active page links and badges when gradients are enabled 2020-04-14 22:28:20 +08:00			`@include gradient-bg();`
Move CSS of hover underline to base from color variants 2018-08-30 01:48:41 +08:00
Rename tags to badges in comments 2016-12-27 01:56:22 +08:00			`// Empty badges collapse automatically`
fixes #9241: enable collapsing for labels, in addition to badges, when empty 2013-08-12 03:43:43 +08:00			`&:empty {`
			`display: none;`
			`}`
Remove all uses of `selector &` If we want to support namespaced import: ```scss .twbs { @import 'bootstrap'; } ``` We cannot use `selector &`, see sass/sass#1817. `fieldset[disabled] &` is not needed as we no longer support IE8. 2015-08-27 20:10:32 +08:00			`}`
Add quick fix to labels and badges in buttons 2013-10-24 04:14:34 +08:00
Rename tags to badges in comments 2016-12-27 01:56:22 +08:00			`// Quick fix for badges in buttons`
Rename .tag to .badge to avoid conflicting with WordPress 2016-10-27 09:33:58 +08:00			`.btn .badge {`
Remove all uses of `selector &` If we want to support namespaced import: ```scss .twbs { @import 'bootstrap'; } ``` We cannot use `selector &`, see sass/sass#1817. `fieldset[disabled] &` is not needed as we no longer support IE8. 2015-08-27 20:10:32 +08:00			`position: relative;`
			`top: -1px;`
more nested labels component 2013-04-20 03:31:55 +08:00			`}`