public/less/labels-badges.less

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