_objects.list-ui.scss

Source code

View source

Author

Harry Roberts

Package Name

inuit-list-ui

Version

0.4.1

Dependences

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

Markup
Demo
Modifiers
Settings

                <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>

.list-ui

see HTML code

<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>

.list-ui--tiny

see HTML code

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

.list-ui--small

see HTML code

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

.list-ui--large

see HTML code

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

.list-ui--huge

see HTML code

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

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;

You can setup a ui namespace

                $inuit-list-ui-namespace:       $inuit-namespace !default;

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 !default;
                $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-list-ui-padding) !default;

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;

or enable/disable modifiers

                $inuit-enable-list-ui--tiny:    false !default;
                $inuit-enable-list-ui--small:   false !default;
                $inuit-enable-list-ui--large:   false !default;
                $inuit-enable-list-ui--huge:    false !default;