Jump To:

  1. Variables
    1. $config
    2. $styles
  2. Mixins
    1. set()
    2. set-styles()
    3. styles()
  3. Functions
    1. get()

Tag

A small, lightweight label used to categorize, classify, or identify items within an interface

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "font-weight" : normal,
  "font-family" : true,
  "box-shadow" : none,
  "padding" : (0.4em 0.75em),
  "vertical-align" : baseline,
  "margin-between" : 0.5em,
  "margin-between-tags" : 0,
  "line-height" : 1,
  "type-size" : "small",
  "background-color" : #eaeaea,
  "border-radius" : 1.25em,
  "border-color" : transparent,
  "border-width" : 1px,
  "color": "type-tertiary",
);
File Information
  • File: _tag.scss
  • Group: tag
  • Type: variable
  • Lines (comments): 24-39
  • Lines (code): 41-56

Map Properties

Name Type Default Description
font-weight CssValue normal Font weight for the tag text.
font-family String true Font family for the tag text.
box-shadow CssValue none Box shadow for the tag.
padding Dimension (0.4em 0.75em) Inner padding for the tag.
vertical-align CssValue baseline Vertical alignment of tag text.
margin-between Dimension 0.5em Margin between tag and other elements.
margin-between-tags Dimension 0 Margin between tag and other tags.
line-height Number 1 Line height for the tag text.
type-size String "small" Font size for the tag text.
background-color Color #eaeaea Background color of the tag.
border-radius Dimension 1.25em Border radius of the tag.
border-color Color transparent Border color for the tag.
border-width Dimension 1px Border width of the tag.
color String "type-tertiary" Color of the tag text.

$styles

Variable

Style Map (alternate tag styles)

$styles: (
  "success" : (
    "color" : rgb(37, 73, 37),
    "background-color" : rgb(190, 220, 190),
  ),
  "danger" : (
    "color" : rgb(78, 24, 24),
    "background-color" : rgb(235, 179, 179),
  ),
  "outline" : (
    "background-color" : transparent,
    "border-color" : #ccc
  )
);
File Information
  • File: _tag.scss
  • Group: tag
  • Type: variable
  • Lines (comments): 58-58
  • Lines (code): 60-73

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _tag.scss
  • Group: tag
  • Type: mixin
  • Lines (comments): 76-79
  • Lines (code): 81-83

Examples

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

Parameters

Name Type Description
$changes Map Map of changes

Require

set-styles()

Mixin

Set tag styles

File Information
  • File: _tag.scss
  • Group: tag
  • Type: mixin
  • Lines (comments): 85-87
  • Lines (code): 89-91

Parameters

Name Type Description
$changes Map Map of changes
$merge-mode String Merge mode see utils.map-merge() [null

Require

styles()

Mixin

Output component stylesheet

File Information
  • File: _tag.scss
  • Group: tag
  • Type: mixin
  • Lines (comments): 103-105
  • Lines (code): 107-156

Examples

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

Require

Functions

get()

Function

Get a config option

File Information
  • File: _tag.scss
  • Group: tag
  • Type: function
  • Lines (comments): 93-96
  • Lines (code): 98-101

Examples

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

Parameters

Name Type Description
$name Map Name of property

Require