acl-1.0.10

Notification Badge

Default notification badge

Use the class notif-badge in order to display a notification badge.

1
16
20+
Discussion20+
Discussion<span class="notif-badge">20+</span>
Notification badge with icon

Add the class .-with-icon to add an icon to the badge.

1
16
20+
<i class="icon -bell"></i>
<span class="notif-badge -with-icon">16</span>
Notification badge without number

Add the class .-without-number to remove numbers from badges.

Counsel Confidential
<span class="label">
  Counsel Confidential
  <span class="notif-badge -without-number"></span>
</span>
<i class="icon -bell bell-notif">
  <span class="notif-badge -without-number"></span>
</i>
Color variants

Use the following classes .-primary, .-success or .-warning to color notification badges.

1
16
20+
<span class="notif-badge -primary">1</span>
<span class="notif-badge -success">16</span>
<span class="notif-badge -warning">20+</span>
1
16
20+
<i class="icon -bell"></i>
<span class="notif-badge -with-icon -primary">1</span>
<i class="icon -bell"></i>
<span class="notif-badge -with-icon -success">16</span>
<i class="icon -bell"></i>
<span class="notif-badge -with-icon -warning">20+</span>
Counsel Confidential
Investor Confidential
<span class="label">
  Counsel Confidential
  <span class="notif-badge -without-number -primary"></span>
</span>
<span class="label">
  Investor Confidential
  <span class="notif-badge -without-number -success"></span>
</span>
<i class="icon -bell bell-notif">
  <span class="notif-badge -without-number -warning"></span>
</i>
Related mixin
@mixin notif-badge-color($gradient-color-top, $gradient-color-bottom, $border-color) {
    background-image: linear-gradient($gradient-color-top 0, $gradient-color-bottom 100%);
    border: 1px solid $border-color;
}

Example

Usage:

@include notif-badge-color($danger-color, $danger-color-dark-20, $danger-color-dark-40);

CSS Output:

background-image: linear-gradient(#c46345 0, #ab5136 100%);
border: 1px solid #8c422c;