FAA Pattern Library - Music

Pager: Pager End 

<nav class="pager pager--light pager--music" aria-label="Pagination">
    <div class="pager__prev-container">
        <a href="#" class="pager__prev">
            <span class="pager__prev-icon">
                <svg class="left-chevron" xmlns="http://www.w3.org/2000/svg" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark left-chevron__shape" fill="#E84A27" fill-rule="nonzero" d="M7.768 1.65c.346-.419.3-1.05-.104-1.41a.937.937 0 0 0-1.356.11L0 8l6.308 7.65a.937.937 0 0 0 1.356.11c.403-.36.45-.991.104-1.41L2.534 8l5.234-6.35z"/>
</svg>
            </span>
            Previous
        </a>
    </div>
    <ul class="pager__pages">
        <li class="pager__page">
            <a href="#" class="pager__page-link">1</a>
        </li>
        <li class="pager__page">
            <a href="#" class="pager__page-link">2</a>
        </li>
        <li class="pager__page">
            <a href="#" class="pager__page-link">3</a>
        </li>
        <li class="pager__page">
            <span class="pager__page-current">4</span>
        </li>
    </ul>
    <div class="pager__next-container">
        <div class="pager__next pager__next--inactive" aria-hidden="true">
            Next
            <span class="pager__next-icon">
            <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

            </span>
        </div>
    </div>
</nav>
 
<nav class="pager pager--{{ background }} pager--{{ siteUnit }}" aria-label="Pagination">
    <div class="pager__prev-container">
    {%  if pagination.prev.link|length %}
        <a href="{{pagination.prev.link}}" class="pager__prev">
            <span class="pager__prev-icon">
                {% include 'bits/icons/left-chevron.twig' %}
            </span>
            Previous
        </a>
    {% else %}
        <div class="pager__prev pager__prev--inactive" aria-hidden="true">
            <span class="pager__prev-icon">
            {% include 'bits/icons/left-chevron.twig' %}
            </span>
            Previous
        </div>
    {% endif %}
    </div>
    <ul class="pager__pages">
        {% for page in pagination.pages %}
            <li class="pager__page">
                {% if not page.current and not page.link %}
                    <span class="pager__page-ellipses">{{page.title}}</span>
                {% elseif not page.current %}
                    <a href="{{page.link}}" class="pager__page-link">{{page.title}}</a>
                {% else %}
                    <span class="pager__page-current">{{page.title}}</span>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
    <div class="pager__next-container">
    {%  if pagination.next.link|length %}
    <a href="{{pagination.next.link}}" class="pager__next">
        Next
        <span class="pager__next-icon">
            {% include 'bits/icons/right-chevron.twig' %}
        </span>
    </a>
    {% else %}
        <div class="pager__next pager__next--inactive" aria-hidden="true">
            Next
            <span class="pager__next-icon">
            {% include 'bits/icons/right-chevron.twig' %}
            </span>
        </div>
    {% endif %}
    </div>
</nav>
 
{
  "siteUnit": "music",
  "departmentName": "Music",
  "background": "light",
  "pagination": {
    "pages": [
      {
        "title": 1,
        "link": "#"
      },
      {
        "title": 2,
        "link": "#"
      },
      {
        "title": 3,
        "link": "#"
      },
      {
        "title": 4,
        "link": "#",
        "current": true
      }
    ],
    "next": {
      "link": ""
    },
    "prev": {
      "link": "#"
    }
  }
}
  • Content: 
    .pager
    --buttonBackgroundColor transparent
    --buttonBackgroundColorFocused illiniOrange
    --buttonBackgroundColorDisabled transparent
    --buttonBorderColor illiniOrange
    --buttonBorderColorFocused illiniOrange
    --buttonBorderColorDisabled grey
    --buttonTextColor charcoalLight
    --buttonTextColorFocused white
    --buttonTextColorDisabled grey
    --buttonIconColor illiniOrange
    --buttonIconColorFocused white
    --buttonIconColorDisabled grey
    --pageBackgroundColor cloud
    --pageBackgroundColorFocused cloud
    --pageBorderColor cloud
    --pageBorderColorFocused illiniOrange
    --pageTextColor charcoalLight
    --pageTextColorFocused charcoalLight
    --currentBackgroundColor cloud
    --currentBorderColor illiniOrange
    --currentTextColor charcoalLight
    --ellipsisColor charcoalLight

    &--dark
        --buttonBackgroundColor transparent
        --buttonBackgroundColorFocused illiniOrange
        --buttonBackgroundColorDisabled transparent
        --buttonBorderColor illiniOrange
        --buttonBorderColorFocused illiniOrange
        --buttonBorderColorDisabled greyDarkest
        --buttonTextColor white
        --buttonTextColorFocused white
        --buttonTextColorDisabled greyDarkest
        --buttonIconColor illiniOrange
        --buttonIconColorFocused white
        --buttonIconColorDisabled greyDarkest
        --pageBackgroundColor charcoalLighter
        --pageBackgroundColorFocused charcoalLighter
        --pageBorderColor charcoalLighter
        --pageBorderColorFocused illiniOrange
        --pageTextColor white
        --pageTextColorFocused white
        --currentBackgroundColor charcoalLighter
        --currentBorderColor var(--pageBorderColorFocused)
        --currentTextColor white
        --ellipsisColor white

    &--arch
        --buttonBackgroundColor transparent
        --buttonBackgroundColorFocused industrialBlue
        --buttonBackgroundColorDisabled transparent
        --buttonBorderColor industrialBlue
        --buttonBorderColorFocused industrialBlue
        --buttonBorderColorDisabled grey
        --buttonTextColor charcoalLight
        --buttonTextColorFocused white
        --buttonTextColorDisabled grey
        --buttonIconColor industrialBlue
        --buttonIconColorFocused white
        --buttonIconColorDisabled grey
        --pageBackgroundColor cloud
        --pageBackgroundColorFocused cloud
        --pageBorderColor cloud
        --pageBorderColorFocused industrialBlue
        --pageTextColor charcoalLight
        --pageTextColorFocused charcoalLight
        --currentBackgroundColor cloud
        --currentBorderColor industrialBlue
        --currentTextColor charcoalLight
        --ellipsisColor charcoalLight

    &--art
        --buttonBackgroundColor transparent
        --buttonBackgroundColorFocused archesBlue
        --buttonBackgroundColorDisabled transparent
        --buttonBorderColor archesBlue
        --buttonBorderColorFocused archesBlue
        --buttonBorderColorDisabled grey
        --buttonTextColor charcoalLight
        --buttonTextColorFocused white
        --buttonTextColorDisabled grey
        --buttonIconColor archesBlue
        --buttonIconColorFocused white
        --buttonIconColorDisabled grey
        --pageBackgroundColor cloud
        --pageBackgroundColorFocused cloud
        --pageBorderColor cloud
        --pageBorderColorFocused archesBlue
        --pageTextColor charcoalLight
        --pageTextColorFocused charcoalLight
        --currentBackgroundColor cloud
        --currentBorderColor archesBlue
        --currentTextColor charcoalLight
        --ellipsisColor charcoalLight

    &--college
        --buttonBackgroundColor transparent
        --buttonBackgroundColorFocused illiniOrange
        --buttonBackgroundColorDisabled transparent
        --buttonBorderColor illiniOrange
        --buttonBorderColorFocused industrialBlue
        --buttonBorderColorDisabled grey
        --buttonTextColor charcoalLight
        --buttonTextColorFocused industrialBlue
        --buttonTextColorDisabled grey
        --buttonIconColor illiniOrange
        --buttonIconColorFocused industrialBlue
        --buttonIconColorDisabled grey
        --pageBackgroundColor cloud
        --pageBackgroundColorFocused illiniOrange
        --pageBorderColor cloud
        --pageBorderColorFocused illiniOrange
        --pageTextColor charcoalLight
        --pageTextColorFocused charcoalLight
        --currentBackgroundColor cloud
        --currentBorderColor industrialBlue
        --currentTextColor charcoalLight
        --ellipsisColor charcoalLight

    &--dance
        --buttonBackgroundColor transparent
        --buttonBackgroundColorFocused archesBlue
        --buttonBackgroundColorDisabled transparent
        --buttonBorderColor archesBlue
        --buttonBorderColorFocused archesBlue
        --buttonBorderColorDisabled grey
        --buttonTextColor charcoalLight
        --buttonTextColorFocused white
        --buttonTextColorDisabled grey
        --buttonIconColor archesBlue
        --buttonIconColorFocused white
        --buttonIconColorDisabled grey
        --pageBackgroundColor cloud
        --pageBackgroundColorFocused cloud
        --pageBorderColor cloud
        --pageBorderColorFocused archesBlue
        --pageTextColor charcoalLight
        --pageTextColorFocused charcoalLight
        --currentBackgroundColor cloud
        --currentBorderColor archesBlue
        --currentTextColor charcoalLight
        --ellipsisColor charcoalLight

    &--theatre
        --buttonBackgroundColor transparent
        --buttonBackgroundColorFocused illiniOrange
        --buttonBackgroundColorDisabled transparent
        --buttonBorderColor illiniOrange
        --buttonBorderColorFocused illiniOrange
        --buttonBorderColorDisabled grey
        --buttonTextColor charcoalLight
        --buttonTextColorFocused illiniBlue
        --buttonTextColorDisabled grey
        --buttonIconColor illiniOrange
        --buttonIconColorFocused illiniBlue
        --buttonIconColorDisabled grey
        --pageBackgroundColor cloud
        --pageBackgroundColorFocused illiniOrange
        --pageBorderColor cloud
        --pageBorderColorFocused illiniOrange
        --pageTextColor charcoalLight
        --pageTextColorFocused illiniBlue
        --currentBackgroundColor cloud
        --currentBorderColor illiniOrange
        --currentTextColor charcoalLight
        --ellipsisColor charcoalLight

    &--music
        --buttonBackgroundColor transparent
        --buttonBackgroundColorFocused illiniOrange
        --buttonBackgroundColorDisabled transparent
        --buttonBorderColor illiniOrange
        --buttonBorderColorFocused illiniOrange
        --buttonBorderColorDisabled grey
        --buttonTextColor illiniBlue
        --buttonTextColorFocused illiniBlue
        --buttonTextColorDisabled grey
        --buttonIconColor illiniOrange
        --buttonIconColorFocused illiniBlue
        --buttonIconColorDisabled grey
        --pageBackgroundColor cloud
        --pageBackgroundColorFocused illiniOrange
        --pageBorderColor cloud
        --pageBorderColorFocused illiniOrange
        --pageTextColor illiniBlue
        --pageTextColorFocused illiniBlue
        --currentBackgroundColor cloud
        --currentBorderColor illiniOrange
        --currentTextColor charcoalLight
        --ellipsisColor charcoalLight

    breakpoint = 700px
    color charcoalLight
    font-size 20px
    margin-top 48px
    display flex
    justify-content space-around
    +below(breakpoint)
        flex-wrap wrap
    &__prev-container
    &__next-container
        margin-bottom 16px
        flex-shrink 0
        +below(breakpoint)
            order 1
    &__page-current
    &__page-link
        background-color var(--pageBackgroundColor)
        color var(--pageTextColor)
    &__page-link
        border 2px solid var(--pageBorderColor)
    &__page-link
    &__page-current
        padding 0 8px
    &__page-ellipses
        color var(--ellipsisColor)
    &__prev
    &__next
    &__page-link
    &__page-current
        border-radius 50px
        display flex
        justify-content center
        line-height 2em
        min-width 2.2em

    &--music &__prev
    &--music &__next
        border-radius 8px

    &__prev
    &__next
    &__page-current
        border 2px solid var(--buttonBorderColor)
    a&__prev
    a&__next
    a&__page-link
        text-decoration none
        transition all 0.3s
        &:active
        &:focus
        &:hover
            background-color var(--pageBackgroundColorFocused)
            border 2px solid var(--pageBorderColorFocused)
    &__prev
    &__next
        padding 0 20px
        &-icon
            display inline-block
            transition all 0.3s
            transform translate(0, 2px)
    a&__prev
    a&__next
        background-color var(--buttonBackgroundColor)
        color var(--buttonTextColor)
        & ._mark
            fill var(--buttonIconColor)
        &:active
        &:focus
        &:hover
            background-color var(--buttonBackgroundColorFocused)
            color var(--buttonTextColorFocused)
            & .pager__next-icon
            & .pager__prev-icon
                & ._mark
                    fill var(--buttonIconColorFocused)
    &__next
        &-icon
            margin-left 8px
    a&__next
        &:active
        &:focus
        &:hover
            & .pager__next-icon
                transform translate(4px, 2px)
    &__prev
        &-icon
            margin-right 8px
    a&__prev
        &:active
        &:focus
        &:hover
            & .pager__prev-icon
                transform translate(-4px, 2px)
    &__prev--inactive
    &__next--inactive
        background-color var(--buttonBackgroundColorDisabled)
        border-color var(--buttonBorderColorDisabled)
        color var(--buttonTextColorDisabled)
        & ._mark
            fill var(--buttonIconColorDisabled)
    &__pages
        display flex
        flex-wrap wrap
        justify-content center
        +above(breakpoint)
            flex-grow 1
        +below(breakpoint)
            justify-content center
            width 100%
    &__page
        margin 0 8px 16px 8px
  • URL: /components/raw/pager/pager.styl
  • Filesystem Path: components/partials/pager/pager.styl
  • Size: 10.2 KB

There are no notes for this item.