Jump To:

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

Counter-list

Outputs a styled list with counters

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "margin" : (2rem 0),
  "item-margin" : (0 0 1rem 0),
  "align-items" : baseline, 
  "counter-width" : 2.4em,
  "counter-height" : null,
  "counter-gap" : 1em,
  "counter-style" : numeric,
  "counter-border-radius" : 50%,
  "counter-font-size" : 1.2em,
  "counter-font-weight" : null,
  "counter-font-family" : null,
  "counter-color" : white,
  "counter-background-color" : "accent",
  "extra-selector" : null
);
File Information
  • File: _counter-list.scss
  • Group: counter-list
  • Type: variable
  • Lines (comments): 13-26
  • Lines (code): 28-43

Map Properties

Name Type Default Description
margin List CssUnit (2rem 0)
item-margin List CssUnit ((0 0 1rem 0))
align-items Keyword baseline How to align the counter (flexbox align-items values)
counter-width CssUnit 2.4em The width and height (if height is falsy)
counter-height CssUnit null The height (optional)
counter-gap CssUnit 1em The gap between the counter and the list item content.
counter-style String numeric The list-style-type used for the counter.
counter-border-radius Keyword Percentage 50%
counter-font-size CssUnit 1.2em The font-size of the counter text.
counter-color Color String white
counter-background-color Color String "accent"
extra-selector String null Additional selectors to include table styling.

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _counter-list.scss
  • Group: counter-list
  • Type: mixin
  • Lines (comments): 45-48
  • Lines (code): 50-52

Examples

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

Parameters

Name Type Description
$changes Map Map of changes

Require

styles()

Mixin

Output counter-list component styles

File Information
  • File: _counter-list.scss
  • Group: counter-list
  • Type: mixin
  • Lines (comments): 63-70
  • Lines (code): 72-151

Demo

View

Examples

<ol class="counter-list">
  <li class="counter-list__item">This is a item that will get counted</li>
  <li class="counter-list__item">Another item that has more content to show line wrapping. Lorem ipsum et depsi anu. Dolor et anu.</li>
  <li class="counter-list__item">Small Amount of Text</li>
</ol>
Preview
  1. This is a item that will get counted
  2. Another item that has more content to show line wrapping. Lorem ipsum et depsi anu. Dolor et anu.
  3. Small Amount of Text

Require

Functions

get()

Function

Get a config option

File Information
  • File: _counter-list.scss
  • Group: counter-list
  • Type: function
  • Lines (comments): 54-57
  • Lines (code): 59-61

Examples

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

Parameters

Name Type Description
$name Map Name of property

Require