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   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 /*
  17   @at-root a#{&} {
  18     @include hover-focus {
  19       text-decoration: none;
  20     }
  21   }
  22 */
  23   // Empty badges collapse automatically
  24   &:empty {
  25     display: none;
  26   }
  27 }
  28
  29 // Quick fix for badges in buttons
  30 .btn .badge {
  31   position: relative;
  32   top: -1px;
  33 }
  34
  35 // Pill badges
  36 //
  37 // Make them extra rounded with a modifier to replace v3's badges.
  38
  39 .badge-pill {
  40   padding-right: $badge-pill-padding-x;
  41   padding-left: $badge-pill-padding-x;
  42   @include border-radius($badge-pill-border-radius);
  43 }
  44
  45 // Colors
  46 //
  47 // Contextual variations (linked badges get darker on :hover).
  48
  49 @each $color, $value in $theme-colors {
  50   .badge-#{$color} {
  51     @include badge-variant($value);
  52   }
  53 }