libs/bootstrap/less/labels-badges.less

   1 //
   2 // Labels and badges
   3 // --------------------------------------------------
   4
   5
   6 // Base classes
   7 .label,
   8 .badge {
   9   display: inline-block;
  10   padding: 2px 4px;
  11   font-size: @baseFontSize * .846;
  12   font-weight: bold;
  13   line-height: 14px; // ensure proper line-height if floated
  14   color: @white;
  15   vertical-align: baseline;
  16   white-space: nowrap;
  17   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  18   background-color: @grayLight;
  19 }
  20 // Set unique padding and border-radii
  21 .label {
  22   .border-radius(3px);
  23 }
  24 .badge {
  25   padding-left: 9px;
  26   padding-right: 9px;
  27   .border-radius(9px);
  28 }
  29
  30 // Empty labels/badges collapse
  31 .label,
  32 .badge {
  33   &:empty {
  34     display: none;
  35   }
  36 }
  37
  38 // Hover/focus state, but only for links
  39 a {
  40   &.label:hover,
  41   &.label:focus,
  42   &.badge:hover,
  43   &.badge:focus {
  44     color: @white;
  45     text-decoration: none;
  46     cursor: pointer;
  47   }
  48 }
  49
  50 // Colors
  51 // Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
  52 .label,
  53 .badge {
  54   // Important (red)
  55   &-important         { background-color: @errorText; }
  56   &-important[href]   { background-color: darken(@errorText, 10%); }
  57   // Warnings (orange)
  58   &-warning           { background-color: @orange; }
  59   &-warning[href]     { background-color: darken(@orange, 10%); }
  60   // Success (green)
  61   &-success           { background-color: @successText; }
  62   &-success[href]     { background-color: darken(@successText, 10%); }
  63   // Info (turquoise)
  64   &-info              { background-color: @infoText; }
  65   &-info[href]        { background-color: darken(@infoText, 10%); }
  66   // Inverse (black)
  67   &-inverse           { background-color: @grayDark; }
  68   &-inverse[href]     { background-color: darken(@grayDark, 10%); }
  69 }
  70
  71 // Quick fix for labels/badges in buttons
  72 .btn {
  73   .label,
  74   .badge {
  75     position: relative;
  76     top: -1px;
  77   }
  78 }
  79 .btn-mini {
  80   .label,
  81   .badge {
  82     top: 0;
  83   }
  84 }