<ul class="footer-menu footer-menu--durp footer-menu footer-menu--dark">
    <li class="footer-menu__item">
        <a href="#" class="footer-menu__item-link
                                      ">
                Contact Us
            </a>
    </li>
    <li class="footer-menu__item">
        <a href="#" class="footer-menu__item-link
                                     footer-menu__item-link--active ">
                Alumni
            </a>
    </li>
    <li class="footer-menu__item">
        <a href="#" class="footer-menu__item-link
                                      ">
                Give a Gift
            </a>
    </li>
    <li class="footer-menu__item">
        <a href="#" class="footer-menu__item-link
                                      ">
                Resources for Current Students
            </a>
    </li>
</ul>
<ul class="footer-menu footer-menu--{{ siteUnit }} footer-menu footer-menu--{{ background }}">
    {% for item in footerMenu.items %}
        <li class="footer-menu__item">
            <a href="{{ item.url }}" class="footer-menu__item-link
                                     {{ item.isActive ? 'footer-menu__item-link--active' }} ">
                {{ item.title }}
            </a>
        </li>
    {% endfor %}
</ul>
{
  "siteUnit": "durp",
  "departmentName": "Department of Urban and Regional Planning",
  "background": "dark",
  "footerMenu": {
    "items": [
      {
        "title": "Contact Us",
        "url": "#"
      },
      {
        "title": "Alumni",
        "url": "#",
        "isActive": true
      },
      {
        "title": "Give a Gift",
        "url": "#"
      },
      {
        "title": "Resources for Current Students",
        "url": "#"
      }
    ]
  }
}
  • Content:
    .footer-menu
        --itemLinkActiveBackgroundColor charcoalLight
        --itemLinkActiveBorderColor illiniOrange
        --itemLinkActiveColor white
        --itemLinkBackgroundColor charcoalLight
        --itemLinkBorder 2px solid charcoalLight
        --itemLinkColor white
    
        &--arch
            --itemLinkActiveBackgroundColor industrialBlue
            --itemLinkActiveBorderColor none
            --itemLinkActiveColor charcoalLight
            --itemLinkBackgroundColor white
            --itemLinkBorder none
            --itemLinkColor charcoalLight
    
        &--art
            --itemLinkActiveBackgroundColor archesBlue
            --itemLinkActiveBorderColor none
            --itemLinkActiveColor black
            --itemLinkBackgroundColor charcoalLight
            --itemLinkBorder none
            --itemLinkColor white
    
        &--college
            --itemLinkActiveBackgroundColor illiniOrange
            --itemLinkActiveBorderColor none
            --itemLinkActiveColor illiniBlue
            --itemLinkBackgroundColor cloud
            --itemLinkBorder none
            --itemLinkColor illiniBlue
    
        &--dance
            --itemLinkActiveBackgroundColor archesBlue
            --itemLinkActiveBorderColor none
            --itemLinkActiveColor black
            --itemLinkBackgroundColor charcoalDarker
            --itemLinkBorder none
            --itemLinkColor white
    
        &__durp
            --itemLinkActiveBackgroundColor charcoalLight
            --itemLinkActiveBorderColor illiniOrange
            --itemLinkActiveColor white
            --itemLinkBackgroundColor charcoalLight
            --itemLinkBorder 2px solid charcoalLight
            --itemLinkColor white
    
        &--landarch
            --itemLinkActiveBackgroundColor illiniOrange
            --itemLinkActiveBorderColor none
            --itemLinkActiveColor black
            --itemLinkBackgroundColor cloud
            --itemLinkBorder none
            --itemLinkColor charcoalDarker
    
        &--theatre
            --itemLinkActiveBackgroundColor illiniOrange
            --itemLinkActiveBorderColor none
            --itemLinkActiveColor illiniBlue
            --itemLinkBackgroundColor illiniBlueDark
            --itemLinkBorder none
            --itemLinkColor white
    
        &--music
            --itemLinkActiveBackgroundColor illiniOrange
            --itemLinkActiveBorderColor none
            --itemLinkActiveColor illiniBlue
            --itemLinkBackgroundColor almaMaterDark
            --itemLinkBorder none
            --itemLinkColor white
    
        &__item
            margin-bottom 2px
    
        &__item-link
            @extends $tertiaryLink
            background-color var(--itemLinkBackgroundColor)
            border var(--itemLinkBorder)
            color var(--itemLinkColor)
            display block
            padding 12px 16px
            text-decoration none
            transition all 0.3s
    
            &--active
            &:focus
            &:hover
            &:active
                background-color var(--itemLinkActiveBackgroundColor)
                border-color var(--itemLinkActiveBorderColor)
                color var(--itemLinkActiveColor)
    
  • URL: /components/raw/footer-menu/footer-menu.styl
  • Filesystem Path: components/bits/footer-menu/footer-menu.styl
  • Size: 2.9 KB

There are no notes for this item.