_objects.list-ui.scss

View source
Demo

The list-ui object is a quasi extension of the list-block object. It is as blocky as .list-block but introduces a visual division between the list-items via a border between them.

Markup

<ul class="list-ui">
    <li class="list-ui__item">Foo</li>
    <li class="list-ui__item">Bar</li>
    <li class="list-ui__item">Baz</li>
</ul>

Settings

You can alter the padding of each .list-ui__item with the $inuit-list-ui-padding variable:

$inuit-list-ui-padding:    $inuit-base-spacing-unit*2;

Furthermore you can modify the style of the border between the list-items:

$inuit-list-ui-border-width:    1px !default;
$inuit-list-ui-border-style:    solid !default;
$inuit-list-ui-border-color:    #ccc !default;

Modifiers

The list-ui object provides the following modifiers:

  • .list-ui--tiny
  • .list-ui--small
  • .list-ui--large
  • .list-ui--huge

.list-ui--tiny, .list-ui--small, .list-ui--large, .list-ui--huge all vary the padding for .list-ui__item. Each one has its own dedicated variable to control that spacing:

$inuit-list-ui-padding--tiny: quarter($inuit-list-ui-padding) !default;
$inuit-list-ui-padding--small: halve($inuit-list-ui-padding) !default;
$inuit-list-ui-padding--large: double($inuit-list-ui-padding) !default;
$inuit-list-ui-padding--huge: quadruple($inuit-flag-gutter) !default;

Demo