elr-scss-labels

a library of sass mixins

Installation

Download node at nodejs.org and install it, if you haven't already.

npm install elr-scss-labels --save
yarn add elr-scss-labels

Documentation

@import "elr-scss-labels/src/main";

Basic Label

.elr-label {
  @include elr-label;
  margin: 10px 5px;
}

<div class="elr-label">
  <span class="elr-label-icon"><i class="fa fa-heart"></i></span>
  <span class="elr-label-title">Label</span>
  <span class="elr-label-value">10</span>
</div>

Pill Label

.elr-pill-label {
  @include elr-label(
    $config: (
      border-radius: 30px,
    )
  );
}

<div class="elr-pill-label">
  <span class="elr-label-title">Pill Label</span>
</div>

Context Labels

.elr-label-info {
  @include elr-label-context(
    $config: (
      type: "info",
    )
  );
}

<div class="elr-label elr-label-info"><span>Information</span></div>

.elr-label-danger {
  @include elr-label-context(
    $config: (
      type: "danger",
    )
  );
}

<div class="elr-label elr-label-danger"><span>Danger</span></div>

.elr-label-warning {
  @include elr-label-context(
    $config: (
      type: "warning",
    )
  );
}

<div class="elr-label elr-label-warning"><span>Warning</span></div>

.elr-label-success {
  @include elr-label-context(
    $config: (
      type: "success",
    )
  );
}

<div class="elr-label elr-label-success"><span>Success</span></div>

.elr-label-muted {
  @include elr-label-context(
    $config: (
      type: "muted",
    )
  );
}

<div class="elr-label elr-label-muted"><span>Muted</span></div>

Dismissible Labels

Just add a button with an icon

<div class="elr-label">
  <span class="elr-label-title">Click Here</span>
  <button>
    <span class="fa fa-times elr-label-close" />
  </button>
</div>

Corner Labels

Labels have a position: absolute style rule so make sure you add position: relative to the label container.

.corner-label-box {
  position: relative;
  background-color: #fff;
  border: 1px solid #333;
  width: 300px;
  height: 300px;
}

.elr-label-corner-top-left {
  @include elr-label-corner(
    $config: (
      position-y: "top",
      position-x: "left",
    )
  );
}

.elr-label-corner-top-right {
  @include elr-label-corner(
    $config: (
      position-y: "top",
      position-x: "right",
    )
  );
}

.elr-label-corner-bottom-left {
  @include elr-label-corner(
    $config: (
      position-y: "bottom",
      position-x: "left",
    )
  );
}

.elr-label-corner-bottom-right {
  @include elr-label-corner(
    $config: (
      position-y: "bottom",
      position-x: "right",
    )
  );
}

<div class="corner-label-box">
  <div class="elr-label-corner-top-left">
    <div class="elr-label-triangle"></div>
    <span class="elr-label-icon fa fa-heart"></span>
  </div>
  <div class="elr-label-corner-top-right">
    <div class="elr-label-triangle"></div>
    <span class="elr-label-icon fa fa-heart"></span>
  </div>
  <div class="elr-label-corner-bottom-left">
    <div class="elr-label-triangle"></div>
    <span class="elr-label-icon fa fa-heart"></span>
  </div>
  <div class="elr-label-corner-bottom-right">
    <div class="elr-label-triangle"></div>
    <span class="elr-label-icon fa fa-heart"></span>
  </div>
</div>

Ribbon Labels

Ribbon labels have a position: absolute style rule so make sure you add position: relative to the label container.

.label-ribbon {
  @include elr-label-ribbon;
}

<div class="corner-label-box">
  <div class="label-ribbon">
    <span class="elr-label-ribbon-title">Updated!</span>
  </div>
</div>

License SEE LICENSE IN LICENSE.md