Sticky-list

Variables

Module Settings

$config: (
  "margin" : true,
  "mask-offset-bottom" : 55vh,
  "mask-offset-top" : 5rem,
  "sticky-top" : 45vh,
  "breakpoint" : "medium",
  "type-size" : "large",
  "title-width" : 40%,
  "title-min-width" : 8em,
  "title-text-align" : right,
  "item-padding-x" : 0,
  "gap" : 2rem,
  "background-color" : white,
  "background-contexts" : (
    (
      "selector" : ".background-dark",
      "background-color" : black,
      "item-padding-x" : 1em
    ),
  )
);

File Information

• File: _sticky-list.scss
• Group: sticky-list
• Type: variable
• Lines (comments): 26-41
• Lines (code): 43-63

Map Properties

Name	Type	Default	Description
background-color	Color	transparent	Background color for the entire slider section.
margin	Number	true	Margin on ends of component (defaults to element margin)
mask-offset-bottom	Number	55vh	The offset for the mask (on bottom)
mask-offset-top	Number	5rem	The offset for the mask (on top)
sticky-top	Number	45vh	When to stick
breakpoint	String	"medium"	The upward breakpoint that this is allowed to be sticky
type-size	String	"medium"	The typography size to use for title
title-width	Number	40%	The width of the title when this is displayed in columns
title-min-width	Number	8em	The min width for title when displayed in columns
title-text-align	CssValue	right	Text alignment for title when displayed in columns
item-padding-x	Number	0	Optional padding on the left/right for items
gap	Number	2rem	The gap between title and items when displayed in columns
background-color	Color	white	The background color used for the mask
background-contexts	List		Adjust the background mask color by contextual selectors. Pass List of Maps with ("selector" [parent/contextual selector], "background-color", "item-padding-x" [optional])

Mixins

Change modules $config

File Information

• File: _sticky-list.scss
• Group: sticky-list
• Type: mixin
• Lines (comments): 65-68
• Lines (code): 70-72

Examples

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

Parameters

Name	Type	Description
$changes	Map	Map of changes

Require

• $config

Set sizes map

File Information

• File: _sticky-list.scss
• Group: sticky-list
• Type: mixin
• Lines (comments): 74-76
• Lines (code): 78-80

Parameters

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

Require

• $sizes

Prints component styles

File Information

• File: _sticky-list.scss
• Group: sticky-list
• Type: mixin
• Lines (comments): 92-116
• Lines (code): 118-196

Examples

@include ulu.component-sticky-list-styles();

<div class="sticky-list">
  <strong class="sticky-list__title">Example:</strong>
  <ul class="sticky-list__list">
    <li class="sticky-list__item">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec nisl magna
    </li>
    <li class="sticky-list__item">
      Aenean sollicitudin mauris lectus, blandit suscipit lectus fringilla sed
    </li>
    <li class="sticky-list__item">
      Suspendisse sollicitudin, justo sed efficitur tempor, risus
    </li>
    <li class="sticky-list__item">
      Suspendisse sollicitudin, justo sed efficitur tempor, risus
    </li>
    <li class="sticky-list__item">
      Suspendisse sollicitudin, justo sed efficitur tempor, risus
    </li>
  </ul>
</div>

Preview

Require

• set-background()
• get()

Outputs background color mask CSS (gradient from transparent to original color)

File Information

• File: _sticky-list.scss
• Group: sticky-list
• Type: mixin
• Lines (comments): 198-199
• Lines (code): 201-206

Parameters

Name	Type	Description
$color	Color	The color to create the CSS for

Require

• get()

Functions

Get a config option

File Information

• File: _sticky-list.scss
• Group: sticky-list
• Type: function
• Lines (comments): 82-85
• Lines (code): 87-90

Examples

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

Parameters

Name	Type	Description
$name	Map	Name of property

Require

• $config