FAA Pattern Library - Music

Footer Links 

<ul class="footer-links footer-links--music">
</ul>
 
<ul class="footer-links footer-links--{{ siteUnit }}">
    {% for item in items %}
        <li class="footer-links__item">
            <a href="{{ item.url }}" class="footer-links__item-link">
                {{ item.title }}
            </a>
        </li>
    {% endfor %}
</ul>
 
{
  "siteUnit": "music",
  "departmentName": "Music",
  "background": "light"
}
  • Content: 
    .footer-links
    --activeBackgroundColor illiniOrange
    --activeLinkTextColor white
    --borderBottom 1px solid illiniOrange
    --borderTop 2px solid charcoalLight
    --linkTextColor white

    &--arch
        --activeBackgroundColor transparent
        --activeLinkTextColor industrialBlue
        --borderBottom 1px solid industrialBlue
        --borderTop 2px solid cloudDarker
        --linkTextColor charcoalLight

    &--art
        --activeBackgroundColor archesBlue
        --activeLinkTextColor black
        --borderBottom 1px solid archesBlue
        --borderTop 2px solid charcoalLight
        --linkTextColor white

    &--college
        --activeBackgroundColor illiniOrange
        --activeLinkTextColor illiniBlue
        --borderBottom 1px solid illiniOrange
        --borderTop 2px solid cloud
        --linkTextColor illiniBlue

    &--dance
        --activeBackgroundColor archesBlue
        --activeLinkTextColor black
        --borderBottom 1px solid archesBlue
        --borderTop 2px solid charcoalLight
        --linkTextColor white

    &--durp
        --activeBackgroundColor illiniOrange
        --activeLinkTextColor white
        --borderBottom 1px solid illiniOrange
        --borderTop 2px solid charcoalLight
        --linkTextColor white

    &--landarch
        --activeBackgroundColor illiniOrange
        --activeLinkTextColor black
        --borderBottom 1px solid illiniOrange
        --borderTop 2px solid cloud
        --linkTextColor charcoalDarker

    &--theatre
        --activeBackgroundColor illiniOrange
        --activeLinkTextColor white
        --borderBottom 1px solid illiniOrange
        --borderTop 2px solid charcoalLight
        --linkTextColor white

    &--music
        --activeBackgroundColor illiniOrange
        --activeLinkTextColor white
        --borderBottom 1px solid illiniOrange
        --borderTop 2px solid almaMaterDark
        --linkTextColor white

    width 100%
    border-top var(--borderTop)
    padding-top 16px

    &__item:not(:last-child)
        margin-bottom 16px

    &__item-link
        @extends $secondaryParagraph
        @extends $hypertext
        border-bottom var(--borderBottom)
        color var(--linkTextColor)

        &:focus
        &:hover
        &:active
            background-color var(--activeBackgroundColor)
            color var(--activeLinkTextColor)
  • URL: /components/raw/footer-links/footer-links.styl
  • Filesystem Path: components/bits/footer-links/footer-links.styl
  • Size: 2.4 KB

There are no notes for this item.