Jump To:

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

Adaptive-spacing

Creates adaptive (changing at breakpoints) in between items (vertical/horizontal layout)

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "outputMargin": false,
  "outputPadding": true,
  "outputX": true,
  "outputY": true,
  "selectorX": "sides",
  "selectorY": "ends"
);
File Information
  • File: _adaptive-spacing.scss
  • Group: adaptive-spacing
  • Type: variable
  • Lines (comments): 12-19
  • Lines (code): 21-29

Map Properties

Name Type Default Description
outputMargin Boolean false Toggles the output of margin classes.
outputPadding Boolean true This is the background color of the accordion before it is expanded.
outputX Boolean true This is the background color of the accordion before it is expanded.
outputY Boolean true This is the background color of the accordion before it is expanded.
selectorX Boolean "sides" This is the background color of the accordion before it is expanded.
selectorY Boolean "ends" This is the background color of the accordion before it is expanded.

$sizes

Variable Type: Map

Sizes Map

$sizes: (
  "small" : (
    "initial" : (
      "size" : 2rem
    ),
    "medium" : (
      "direction" : "min",
      "size": 4rem
    )
  ),
  "large" : (
    "initial" : (
      "size" : 4rem
    ),
    "medium" : (
      "direction" : "min",
      "size" : 8rem
    ),
  )
);
File Information
  • File: _adaptive-spacing.scss
  • Group: adaptive-spacing
  • Type: variable
  • Lines (comments): 31-32
  • Lines (code): 34-53

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _adaptive-spacing.scss
  • Group: adaptive-spacing
  • Type: mixin
  • Lines (comments): 55-58
  • Lines (code): 60-62

Examples

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

Parameters

Name Type Description
$changes Map Map of changes

Require

set-sizes()

Mixin

Set sizes map

File Information
  • File: _adaptive-spacing.scss
  • Group: adaptive-spacing
  • Type: mixin
  • Lines (comments): 64-66
  • Lines (code): 68-70

Parameters

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

Require

styles()

Mixin

Outputs adaptive spacing component styles

File Information
  • File: _adaptive-spacing.scss
  • Group: adaptive-spacing
  • Type: mixin
  • Lines (comments): 81-83
  • Lines (code): 85-117

Examples

@include ulu.component-adaptive-spacing-styles();

Require

Functions

get()

Function

Get a config option

File Information
  • File: _adaptive-spacing.scss
  • Group: adaptive-spacing
  • Type: function
  • Lines (comments): 72-75
  • Lines (code): 77-79

Examples

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

Parameters

Name Type Description
$name Map Name of property

Require