static/scss/bootstrap-4.0.0-alpha.6/scss/_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   color: $badge-color;
  13   text-align: center;
  14   white-space: nowrap;
  15   vertical-align: baseline;
  16   @include border-radius();
  17
  18   // Empty badges collapse automatically
  19   &:empty {
  20     display: none;
  21   }
  22 }
  23
  24 // Quick fix for badges in buttons
  25 .btn .badge {
  26   position: relative;
  27   top: -1px;
  28 }
  29
  30 // scss-lint:disable QualifyingElement
  31 // Add hover effects, but only for links
  32 a.badge {
  33   @include hover-focus {
  34     color: $badge-link-hover-color;
  35     text-decoration: none;
  36     cursor: pointer;
  37   }
  38 }
  39 // scss-lint:enable QualifyingElement
  40
  41 // Pill badges
  42 //
  43 // Make them extra rounded with a modifier to replace v3's badges.
  44
  45 .badge-pill {
  46   padding-right: $badge-pill-padding-x;
  47   padding-left: $badge-pill-padding-x;
  48   @include border-radius($badge-pill-border-radius);
  49 }
  50
  51 // Colors
  52 //
  53 // Contextual variations (linked badges get darker on :hover).
  54
  55 .badge-default {
  56   @include badge-variant($badge-default-bg);
  57 }
  58
  59 .badge-primary {
  60   @include badge-variant($badge-primary-bg);
  61 }
  62
  63 .badge-success {
  64   @include badge-variant($badge-success-bg);
  65 }
  66
  67 .badge-info {
  68   @include badge-variant($badge-info-bg);
  69 }
  70
  71 .badge-warning {
  72   @include badge-variant($badge-warning-bg);
  73 }
  74
  75 .badge-danger {
  76   @include badge-variant($badge-danger-bg);
  77 }