Jump To:

  1. Demos
    1. Tagged Icon Button
    2. Tagged Text Button
  2. Variables
    1. $config
  3. Mixins
    1. set()
    2. styles()
  4. Functions
    1. get()

Provides styles to tags that should appear as superscripts of their related content. Custom properties --ulu-tagged-y, --ulu-tagged-x, and --ulu-tagged-transform can be adjusted if needed (inline style, in a specific styling for something, etc)

Demos

Tagged Icon Button

Positioning a notification counter tag over an icon button.

HTML 
<button class="button button--icon tagged">
  <span class="button__icon" aria-hidden="true">🔔</span>
  <span class="tagged__tag tag tag--danger tag--small tag--counter">3</span>
</button>

Tagged Text Button

Positioning a tag over a standard text-based button.

HTML 
<button class="button tagged">
  <span>Messages</span>
  <span class="tagged__tag tag tag--danger tag--small tag--counter">12</span>
</button>

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "position-x": 0,
  "position-y": 0,
  "transform":  translate(50%, -50%)
);
File Information
  • File: _tagged.scss
  • Group: tagged
  • Type: variable
  • Lines (comments): 11-15
  • Lines (code): 17-21

Map Properties

Name Type Default Description
position-x Dimension -0.75em Horizontal absolute position of the tag.
position-y Dimension -0.75em Vertical absolute position of the tag.
icon-opacity CssValue null Adds a transform styling to the tag.

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _tagged.scss
  • Group: tagged
  • Type: mixin
  • Lines (comments): 23-26
  • Lines (code): 28-30

Examples

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

Parameters

Name Type Description
$changes Map Map of changes

Require

styles()

Mixin

Output component styles

File Information
  • File: _tagged.scss
  • Group: tagged
  • Type: mixin
  • Lines (comments): 41-43
  • Lines (code): 45-59

Examples

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

Require

Functions

get()

Function

Get a config option

File Information
  • File: _tagged.scss
  • Group: tagged
  • Type: function
  • Lines (comments): 32-35
  • Lines (code): 37-39

Examples

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

Parameters

Name Type Description
$name Map Name of property

Require