Files

• _lists.scss
• README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/elements/lists

Module Overview

Examples

<ul class="list">
   <li>Lorem ipsum dolor nunc eu</li>
</ul>

List - Clear

<ul class="list-clear">
   <li>Lorem ipsum dolor nunc eu</li>
</ul>

List - Reset

<ul class="list-reset">
   <li>Lorem ipsum dolor nunc eu</li>
</ul>

List - Small

<ul class="list-small">
   <li>Lorem ipsum dolor nunc eu</li>
</ul>

List - Inline (with reset)

<ul class="list-inline-reset">
   <li>Lorem ipsum dolor nunc eu</li>
</ul>

List - Divider (with reset)

<ul class="list-divider-reset">
   <li>Lorem ipsum dolor nunc eu</li>
</ul>

List - Arrow

<ul class="list-arrow">
   <li>Lorem ipsum dolor nunc eu</li>
</ul>

List - Tags

<ul class="list-tags">
   <li><span>Lorem</span></li>
</ul>

Customizing

The lists can be customized using the following options:

Read the Configuration page to learn more about a module's configuration.

Property Name	Default Value	Description
small-size	font-size('size-1')	The font-size for lists when using the small modifier.
inline-spacing	1em	The distance between each item when using the inline modifier.
arrow-icon	"\f138"	The content value for any Font Awesome icon to act as the bullet point when using the arrow modifier.
arrow-color	color('brand', 'primary')	The color of the arrow bullet point.
tag-bg-color	color('greyscale', 'grey-4')	The background color of list items when using the tags modifier.
tag-border-color	color('greyscale', 'grey-4')	The border color of tags.
tag-color	white	The text color of tags.
tag-radius	0	The border radius of tags.
tag-hover-bg-color	color('brand', 'primary')	The background color of tags when hovered.
tag-hover-color	white	The text color of tags when hovered.

To change one of the above values, pass your new value(s) to the lists() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

@include lists((
    'arrow-icon'  : "\f0a4",
    'arrow-color' : #2cd68f
));

@include lists((
    'tag-bg-color'     : transparent,
    'tag-border-color' : #9B58B5,
    'tag-color'        : #9B58B5,
    'tag-radius'       : 0.3em
));