Badge

Variables

Module Settings

$config: (
  "background-color":    gray,
  "border-radius":       50%,
  "color":               black,
  "font-size":           1.3rem,
  "font-weight":         bold,
  "width":               10rem,
  "sizes" : (
    "large" : (
      "font-size" : 2.75rem,
      "width" :  6rem
    )
  )
);

File Information

• File: _badge.scss
• Group: badge
• Type: variable
• Lines (comments): 11-19
• Lines (code): 21-34

Map Properties

Name	Type	Default	Description
background-color	Number	gray	Background color (if no image)
border-radius	Number	50%	Border radius of badge
color	Number	black	Type color
font-size	Number	1.3rem	Font size (basic ie. 1.3rem) for badge
font-weight	Number	bold	Font weight
sizes	List	Object	List of other sizes (large by default), each size is a map of (width, font-size)
width	Number	10rem	Width of badge (default size)

Mixins

Change modules $config

File Information

• File: _badge.scss
• Group: badge
• Type: mixin
• Lines (comments): 36-39
• Lines (code): 41-43

Examples

@include ulu.component-badge-set(( "property" : value ));

Parameters

Name	Type	Description
$changes	Map	Map of changes

Require

• $config

Output badge component styles

File Information

• File: _badge.scss
• Group: badge
• Type: mixin
• Lines (comments): 54-68
• Lines (code): 70-130

Examples

@include ulu.component-badge-styles();

<div class="badge">
  <div class="badge__inner">
    <img src="..." alt="...">
  </div>
</div>

<div class="badge">
  <div class="badge__inner">
    <span>JS</span>
  </div>
</div>

Preview

Require

• get()

Functions

Get a config option

File Information

• File: _badge.scss
• Group: badge
• Type: function
• Lines (comments): 45-48
• Lines (code): 50-52

Examples

@include ulu.component-badge-get("property");

Parameters

Name	Type	Description
$name	Map	Name of property

Require

• $config