Jump To:

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

Progress-bar

Groups a set of buttons

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "margin" : (0 0 0.5em 0),
  "header-gap" : 0.25em,
  "line-height" : true,
  "value-color" : "type-tertiary",
  "value-margin" : 0.5em,
  "value-font-weight" : true,
  "value-margin-deficit" : 0.3em,
  "value-color-deficit" : "danger",
  "bar-height" : 12px,
  "bar-color" : "indicator",
  "bar-color-deficit" : "danger",
  "icon-color" : "type-tertiary",
  "icon-color-deficit" : "danger",
  "track-color" : "placeholder-background-alt",
  "track-margin" : (0.1em 0),
  "animation-duration" : 200ms,
  "animation-timing" : ease,
  "animation-initial-duration" : 500ms,
  "animation-initial-timing" : ease-in,
  "animation-indeterminate-duration" : 2.5s
);
File Information
  • File: _progress-bar.scss
  • Group: progress-bar
  • Type: variable
  • Lines (comments): 28-49
  • Lines (code): 51-72

Map Properties

Name Type Default Description
header-gap Dimension 0.25em Margin/gap for the icon/value
margin List (0 0 0.5em 0) Margin for the progress bar.
line-height Boolean true Line height for the progress bar. If true, falls back to typography's line-height-dense.
value-color Color "type-tertiary" Color of the value text.
value-margin Dimension 0.5em Margin for the value text.
value-font-weight Boolean true Font weight for the value text. If true, falls back to typography's font-weight-light.
value-margin-deficit Dimension 0.3em Margin for the deficit value text.
value-color-deficit Color "danger" Color of the deficit value text.
bar-height Dimension 12px Height of the progress bar.
bar-color Color rgb(80, 80, 171) Color of the progress bar.
bar-color-deficit Color "danger" Color of the deficit portion of the progress bar.
icon-color Color "type-tertiary" Color of the icon.
icon-color-deficit Color "danger" Color of the icon in a deficit state.
track-color Color #ccc Color of the progress bar track.
track-margin List (0.1em 0) Margin for the progress bar track.
animation-duration Time 200ms Duration of the width transition animation.
animation-timing CssValue ease Timing function for the width transition animation.
animation-initial-duration Time 500ms Duration of the initial fill animation.
animation-initial-timing CssValue ease-in Timing function for the initial fill animation.
animation-indeterminate-duration Time 2.5s Duration of the indeterminate loading animation.

$styles

Variable Type: Map This is the map of styles (variations in progress bar types) - Each style becomes the modifier and accepts ("bar-color", "bar-height", "track-color") - Use this to match whatever progress system(s) your creating 
$styles: (
  "positive" : (
    "bar-color" : "success",
    "icon-color" : "success"
  ),
  "negative" : (
    "bar-color" : "danger",
    "icon-color" : "danger"
  ),
  "small" : (
    "bar-height" : 8px
  ),
  "loader" : (
    "bar-height" : 4px,
    "track-color" : transparent
  )
);
File Information
  • File: _progress-bar.scss
  • Group: progress-bar
  • Type: variable
  • Lines (comments): 74-77
  • Lines (code): 78-94

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _progress-bar.scss
  • Group: progress-bar
  • Type: mixin
  • Lines (comments): 96-99
  • Lines (code): 101-103

Examples

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

Parameters

Name Type Description
$changes Map Map of changes

Require

set-styles()

Mixin

Change modules $config

File Information
  • File: _progress-bar.scss
  • Group: progress-bar
  • Type: mixin
  • Lines (comments): 105-108
  • Lines (code): 110-112

Examples

@include ulu.component-progress-bar-set-styles(( "small" : ( "bar-height" : 8px ) ));

Parameters

Name Type Description
$changes Map Map of changes

Require

styles()

Mixin

Prints component styles

File Information
  • File: _progress-bar.scss
  • Group: progress-bar
  • Type: mixin
  • Lines (comments): 124-127
  • Lines (code): 129-260

Demo

View

Examples

@include ulu.component-progress-bar-styles();

Require

Functions

get()

Function

Get a config option

File Information
  • File: _progress-bar.scss
  • Group: progress-bar
  • Type: function
  • Lines (comments): 114-117
  • Lines (code): 119-122

Examples

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

Parameters

Name Type Description
$name Map Name of property

Require