BUX Component Development Platform

Ordered List 

<ol class="bux-list-ol">
    <li>List item 1 <ol>
            <li>List item 1A </li>
            <li>List item 1B </li>
        </ol>

    </li>
    <li>List item 2 </li>
    <li>List item 3 <ol>
            <li>List item 3A <ol>
                    <li>List item 3Ai </li>
                    <li>List item 3Aii </li>
                </ol>

            </li>
            <li>List item 3B </li>
        </ol>

    </li>
</ol>
 
{#

Ordered List

Available variables:

- start_value:          Sets the ordered list start value, optional.
- list_items:           An array of list items.
    - text:             The text of the list item.
    - start_value       Sets the ordered list start value, optional.
    - children:         A nested array of list items.

#}

{% macro recursive_list(items, start_value) %}
    {% if items %}
        <ol {{ start_value ? ' start=' ~ start_value : '' }}>
            {% for item in items %}
                <li>
                    {{- item.text -}}
                    {% if item.children %}
                        {{ _self.recursive_list(item.children) }}
                    {% endif %}
                </li>
            {% endfor %}
        </ol>
    {% endif %}
{% endmacro %}

{% import _self as macros %}

<ol class="bux-list-ol"{{ start_value ? ' start=' ~ start_value : '' }}>
    {% for item in list_items %}
        <li>
            {{- item.text -}}
            {% if item.children %}
                {{ macros.recursive_list(item.children, item.start_value) }}
            {% endif %}
        </li>
    {% endfor %}
</ol>
 
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
list_items:
  - text: List item 1
    children:
      - text: List item 1A
      - text: List item 1B
  - text: List item 2
  - text: List item 3
    children:
      - text: List item 3A
        children:
          - text: List item 3Ai
          - text: List item 3Aii
      - text: List item 3B
  • Content: 
    ol.bux-list-ol {
    padding-left: 40px;
    font-family: $serif;
    li {
        list-style-type: decimal;
        margin-left: $sp-16;
        margin-bottom: $sp-8;
        padding-left: $sp-8;
        line-height: 1.5;
        font-size: $ts-base;

        ol {
            margin-top: $sp-8;
            padding-left: $sp-24;
            li {
                list-style: lower-alpha;

                ol li {
                    list-style: lower-roman;
                }
                ul {
                    @extend .bux-list-ul;
                    padding-left: $sp-24 !important;
                    margin-top: $sp-8 !important;
                    ol {
                        li {
                            padding-left: $sp-8;
                            &:before {
                                display: none;
                            }
                        }
                    }
                }
            }
        }
    }
    // Fix for nested ul in ol
    ul {
        @extend .bux-list-ul;
        padding-left: $sp-24 !important;
        margin-top: $sp-8 !important;
        ol {
            li {
                padding-left: $sp-8;
                &:before {
                    display: none;
                }
            }
        }
    }
}
  • URL: /components/raw/list-ordered/_list-ordered.scss
  • Filesystem Path: src/components/list-ordered/_list-ordered.scss
  • Size: 1.3 KB

No notes defined.