BUX Component Development Platform

Unordered List 

<ul class='bux-list-ul'>
    <li>List item 1 <ul>
            <li>List item 1A </li>
            <li>List item 1B </li>
        </ul>

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

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

    </li>
</ul>
 
{#

Unordered 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.
    - children:         A nested array of list items.

#}

{% macro recursive_list(items) %}
    {% if items %}
        <ul>
            {% for item in items %}
                <li>
                    {{- item.text -}}
                    {% if item.children %}
                        {{ _self.recursive_list(item.children) }}
                    {% endif %}
                </li>
            {% endfor %}
        </ul>
    {% endif %}
{% endmacro %}

{% import _self as macros %}

<ul class='bux-list-ul'>
    {% for item in list_items %}
        <li>
            {{- item.text -}}
            {% if item.children %}
                {{ macros.recursive_list(item.children) }}
            {% endif %}
        </li>
    {% endfor %}
</ul>
 
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: 
    // First level.
ul.bux-list-ul {
	list-style: none;
	margin-left: 0;
	margin-top: 0;
	padding-left: calc(#{$sp-64} - #{$sp-16});
	font-family: $serif;
	font-size: $ts-base;
	line-height: 1.5;
	li {
		list-style-type: none;
		margin-bottom: $sp-8;
        padding-left: 24px;
		&::before {
			color: $scarlet;
			content: "\f001";
			font-family: $icon;
			font-size: rem-calc(7);
			display: inline-block;
			width: $sp-32;
			vertical-align: middle;
            margin-left: calc($sp-32 * -1);
		}
	}

    ol {
        @extend .bux-list-ol;
        li:before {
            display: none;
        }
         li ul {
             @extend .bux-list-ul;
         }
    }
}
// Second level.
ul.bux-list-ul ul {
	padding-left: $sp-24;
	margin-top: $sp-8;
	li {
		&::before {
			content: "\f002";
		}
	}
}
// Third level.
ul.bux-list-ul ul ul {
	padding-left: $sp-24;
	li {
		&::before {
			content: "\f003";
		}
	}
}
  • URL: /components/raw/list-unordered/_list-unordered.scss
  • Filesystem Path: src/components/list-unordered/_list-unordered.scss
  • Size: 912 Bytes

No notes defined.