[Summary view] [Print] [Text view]

   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  }