BUX Component Development Platform

Tag 

<ul class='bux-tag'>
    <li>
        <a href="#">Tag title enabled</a>
    </li>
    <li>
        <a role="link" aria-disabled="true">Tag title disabled</a>
    </li>
</ul>
 
<ul class='bux-tag'>
	{% for item in tag_items %}
		<li>
			{% if item.disabled == 'true' %}
			<a role="link" aria-disabled="true">{{- item.text -}}</a>
			{% else %}
			<a href="{{- item.url -}}">{{- item.text -}}</a>
			{% 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
tag_items:
  - text: Tag title enabled
    url: '#'
  - text: Tag title disabled
    url: '#'
    disabled: 'true'
  • Content: 
    ul.bux-tag {
	li {
		display: inline-block;
	}
	a {
		background: $gray-light-90;
		color: $scarlet;
		display: block;
		font-size: $ts-sm;
		margin: 0 $sp-8 $sp-8 0;
		padding: 3px 6px;
		text-decoration: none;

		&:hover {
			background: $gray-dark-60;
			color: $white;
		}

		&:focus {
			outline: 2px solid $focus;
			outline-offset: 0px;
		}

		&[aria-disabled="true"] {
			background: $gray-light-80;
			color: $gray-dark-20;
		}
	}
}
  • URL: /components/raw/tag/_tag.scss
  • Filesystem Path: src/components/tag/_tag.scss
  • Size: 443 Bytes

No notes defined.