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>
 
<ul class='bux-list-ul'>
	{% for item in list_items %}
		{% if item.level2_items %}
			<li>
				{{- item.text -}}
				<ul>
					{% for item in item.level2_items %}
						{% if item.level3_items %}
							<li>
								{{- item.text -}}
								<ul>
									{% for item in item.level3_items %}
										<li>{{- item.text -}}</li>
									{% endfor %}
								</ul>
							</li>
						{% else %}
							<li>{{- item.text -}}</li>
						{% endif %}
					{% endfor %}
				</ul>
			</li>
		{% else %}
			<li>{{- item.text -}}</li>
		{% endif %}
	{% 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
    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: 
    // 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.