# elr-scss-labels

> a scss mixin for styled labels

Latest version **0.0.5** (published 2021-11-14) · SEE LICENSE IN LICENSE.md license · 0 weekly downloads

## Install

```sh
npm install elr-scss-labels
pnpm add elr-scss-labels
yarn add elr-scss-labels
bun add elr-scss-labels
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2021-11-14 |
| First published | 2019-02-16 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE.md |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 30.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Elizabeth Rogers |
| Maintainers | beth_rogers465 |
| Keywords | sass, css, mixins, labels |

## Links

- npm: https://www.npmjs.com/package/elr-scss-labels
- Repository: https://github.com/Beth3346/elr-scss-labels
- Issues: https://github.com/Beth3346/elr-scss-labels
- npm.io page: https://npm.io/package/elr-scss-labels

## Dependencies (3)

- [elr-scss-reset](https://npm.io/package/elr-scss-reset.md) ^0.0.6
- [elr-scss-functions](https://npm.io/package/elr-scss-functions.md) 1.1.6
- [elr-scss-animations](https://npm.io/package/elr-scss-animations.md) 0.0.11

## Recent versions

- 0.0.5 (latest) — 2021-11-14
- 0.0.4 — 2021-11-13
- 0.0.3 — 2021-11-04
- 0.0.2 — 2021-10-31
- 0.0.1 — 2019-02-16

## README

# elr-scss-labels

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![npm](https://img.shields.io/npm/dm/elr-scss-labels.svg?style=flat)](https://npmjs.com/package/elr-scss-labels)

a library of sass mixins

## Installation

Download node at [nodejs.org](http://nodejs.org) and install it, if you haven't already.

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

## Documentation

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

### Basic Label

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

```html
<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

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

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

### Context Labels

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

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

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

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

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

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

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

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

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

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

### Dismissible Labels

Just add a button with an icon

```html
<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.

```scss
.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",
    )
  );
}
```

```html
<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.

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

```html
<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

---
_Source: https://npm.io/package/elr-scss-labels · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._