cheatsheet/src/styles/components/labels.less

Cheatsheet boilerplate. Created for the new lesscss.org website, based on Shopify Cheat Sheet by Mark Dunkley.

//
// Labels
// -----------------------------------------------------------


// Base classes
.label {
  display: inline-block;
  margin-top: 1px;
  padding: 3px 6px 2px;
  font-size: @font-size-small;
  line-height: 14px; // ensure proper line-height if floated
  color: @white;
  vertical-align: baseline;
  white-space: nowrap;
  background-color: @grayLight;
  .border-radius(3px);
}
.label:hover,
:hover .label {
  font-weight: normal;
}

// Empty labels/badges collapse
.label:empty {
  display: none;
}

// Colors
.label {
  // Important (red)
  &-important         { background-color: @state-error-text; }
  // Warnings (orange)
  &-warning           { background-color: @orange; }
  // Success (green)
  &-success           { background-color: #378d0e; }
  // Info (turquoise)
  &-info              { background-color: @state-info-text; }
  // Inverse (black)
  &-inverse           { background-color: @grayDark; }
}