0.0.5 • Published 2 years ago
elr-scss-labels v0.0.5
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>