git.roojs.org Git - roojs1/blob - scss/bootstrap/_badge.scss

   1 // Base class
   2 //
   3 // Requires one of the contextual, color modifier classes for `color` and
   4 // `background-color`.
   5
   6 .badge {
   7   display: inline-block;
   8   padding: $badge-padding-y $badge-padding-x;
   9   @include font-size($badge-font-size);
  10   font-weight: $badge-font-weight;
  11   line-height: 1;
  12   text-align: center;
  13   white-space: nowrap;
  14   vertical-align: baseline;
  15   @include border-radius($badge-border-radius);
  16   @include transition($badge-transition);
  17
  18   @at-root a#{&} {
  19     @include hover-focus() {
  20       text-decoration: none;
  21     }
  22   }
  23
  24   // Empty badges collapse automatically
  25   &:empty {
  26     display: none;
  27   }
  28 }
  29
  30 // Quick fix for badges in buttons
  31 .btn .badge {
  32   position: relative;
  33   top: -1px;
  34 }
  35
  36 // Pill badges
  37 //
  38 // Make them extra rounded with a modifier to replace v3's badges.
  39
  40 .badge-pill {
  41   padding-right: $badge-pill-padding-x;
  42   padding-left: $badge-pill-padding-x;
  43   @include border-radius($badge-pill-border-radius);
  44 }
  45
  46 // Colors
  47 //
  48 // Contextual variations (linked badges get darker on :hover).
  49
  50 @each $color, $value in $theme-colors {
  51   .badge-#{$color} {
  52     @include badge-variant($value);
  53   }
  54 }