roadui/less/badge.less

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

// Name:                       Badge
//
// Description:                Define style for badges
//
// Component:                `.am-badge`
//
// Modifiers:                `.am-badge-primary`
//                           `.am-badge-secondary`
//                           `.am-badge-success`
//                           `.am-badge-warning`
//                           `.am-badge-danger`
//
// =============================================================================


/* ==========================================================================
   Component: Badge
 ============================================================================ */

.@{ns}badge {
  display: inline-block;
  min-width: 10px;
  padding: 0.25em 0.625em;
  font-size: @font-size-xs;
  font-weight: @badge-font-weight;
  color: @badge-color;
  line-height: @badge-line-height;
  vertical-align: baseline;
  white-space: nowrap;
  text-align: center;
  background-color: @badge-bg;
  border-radius: @badge-border-radius;

  &:empty {
    display: none;
  }

  &.@{ns}square {
     border-radius: 0;
  }

  &.@{ns}radius {
    border-radius: @radius-normal;
  }

  &.@{ns}round {
    border-radius: @global-rounded;
  }

  .hook-badge;
}

// link badge
a.@{ns}badge {
  &:hover,
  &:focus {
    color: @badge-link-hover-color;
    text-decoration: none;
    cursor: pointer;
  }
}


// Color modifier
// =============================================================================

.@{ns}badge-primary {
  background-color: @badge-primary-bg;
  .hook-badge-primary;
}

.@{ns}badge-secondary {
  background-color: @badge-secondary-bg;
  .hook-badge-secondary;
}

.@{ns}badge-success {
  background-color: @badge-success-bg;
  .hook-badge-success;
}

.@{ns}badge-warning {
  background-color: @badge-warning-bg;
  .hook-badge-warning;
}

.@{ns}badge-danger {
  background-color: @badge-danger-bg;
  .hook-badge-danger;
}


// Hooks
// =============================================================================

.hook-badge() {}
.hook-badge-primary() {}
.hook-badge-secondary() {}
.hook-badge-success() {}
.hook-badge-warning() {}
.hook-badge-danger() {}