Badge

Variables

Module Settings

$config: (
  "background-color":    gray,
  "border-radius":       50%,
  "color":               black,
  "font-size":           1.5rem,
  "font-weight":         bold,
  "font-family":         true,
  "width":               7rem,
  "sizes" : (
    "small" : (
      "font-size" : 1.2rem,
      "width" :  5rem
    ),
    "large" : (
      "font-size" : 2.75rem,
      "width" :  9rem
    )
  )
);

File Information

• File: _badge.scss
• Group: badge
• Type: variable
• Lines (comments): 21-30
• Lines (code): 32-50

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
font-family	Number	true	Specify font family, defaults to typography font-family-sans
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): 52-55
• Lines (code): 57-59

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): 71-85
• Lines (code): 87-149

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): 61-64
• Lines (code): 66-69

Examples

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

Parameters

Name	Type	Description
$name	Map	Name of property

Require

• $config