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>
 
<ol class="bux-list-ol">
	{% for item in list_items %}
		{% if item.level2_items %}
			<li>
				{{- item.text -}}
				<ol>
					{% for item in item.level2_items %}
						{% if item.level3_items %}
							<li>
								{{- item.text -}}
								<ol>
									{% for item in item.level3_items %}
										<li>{{- item.text -}}</li>
									{% endfor %}
								</ol>
							</li>
						{% else %}
							<li>{{- item.text -}}</li>
						{% endif %}
					{% endfor %}
				</ol>
			</li>
		{% else %}
			<li>{{- item.text -}}</li>
		{% endif %}
	{% 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
    level2_items:
      - text: List item 1A
      - text: List item 1B
  - text: List item 2
  - text: List item 3
    level2_items:
      - text: List item 3A
        level3_items:
          - 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
  • Content: 
    { // Shout out to Nick Kneer for this fix!
    const olElements = document.querySelectorAll("ol[start]");
    if (olElements) {
        Array.from(olElements).forEach((ol) => {
            let currentStyle = ol.getAttribute("style");
            if (
                currentStyle &&
                currentStyle.charAt(currentStyle.length - 1) !== ";"
            ) {
                currentStyle += "; ";
            }
            const startValue = parseInt(ol.getAttribute("start")) - 1;
            const counterStyle = `counter-reset: bux-ol ${startValue}`;
            ol.setAttribute("style", `${currentStyle ?? ""}${counterStyle}`);
        });
    }
}
  • URL: /components/raw/list-ordered/list-ordered.js
  • Filesystem Path: src/components/list-ordered/list-ordered.js
  • Size: 661 Bytes

No notes defined.