_objects.list-block.scss

Source code

View source

Author

Harry Roberts

Package Name

inuit-list-block

Version

0.4.2

Dependences

The list-block object makes a simple list more blocky and gives its items the ability to take more space.

Markup
Demo
Modifiers
Settings

        <ul class="list-block">
            <li class="list-block__item">Foo</li>
            <li class="list-block__item">Bar</li>
            <li class="list-block__item">Baz</li>
        </ul>

.list-block

see HTML code

<ul class="list-block">
                <li class="list-block__item">Foo</li>
                <li class="list-block__item">Bar</li>
                <li class="list-block__item">Baz</li>
            </ul>

.list-block--tiny

see HTML code

<ul class=" list-block  list-block--tiny ">
                <li class="list-block__item">Foo</li>
                <li class="list-block__item">Bar</li>
                <li class="list-block__item">Baz</li>
            </ul>

.list-block--small

see HTML code

<ul class=" list-block  list-block--small ">
                <li class="list-block__item">Foo</li>
                <li class="list-block__item">Bar</li>
                <li class="list-block__item">Baz</li>
            </ul>

.list-block--large

see HTML code

<ul class=" list-block  list-block--large ">
                <li class="list-block__item">Foo</li>
                <li class="list-block__item">Bar</li>
                <li class="list-block__item">Baz</li>
            </ul>

.list-block--huge

see HTML code

<ul class=" list-block  list-block--huge ">
                <li class="list-block__item">Foo</li>
                <li class="list-block__item">Bar</li>
                <li class="list-block__item">Baz</li>
            </ul>

The list-block object provides the following modifiers:

list-block--tiny
list-block--small
list-block--large
list-block--huge

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

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

You can alter the padding of each list-block__itemwith the $inuit-list-block-paddingvariable:

                $inuit-list-block-namespace:        $inuit-namespace !default;
                
                $inuit-list-block-padding:          $inuit-base-spacing-unit !default;
                $inuit-list-block-padding--tiny:      quarter($inuit-list-block-padding) !default;
                $inuit-list-block-padding--small:       halve($inuit-list-block-padding) !default;
                $inuit-list-block-padding--large:      double($inuit-list-block-padding) !default;
                $inuit-list-block-padding--huge:    quadruple($inuit-list-block-padding) !default;
                
                $inuit-enable-list-block--tiny:     false !default;
                $inuit-enable-list-block--small:    false !default;
                $inuit-enable-list-block--large:    false !default;
                $inuit-enable-list-block--huge:     false !default;