Custom theme (replace with client name)

Pager: Pager X 15 

<nav class="pager" aria-label="Pagination">
    <div class="pager__prev-container">
        <div class="pager__prev pager__prev--inactive" aria-hidden="true">
            <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
        </div>
    </div>
    <ul class="pager__pages">
        <li class="pager__page">
            <span class="pager__page-current">1</span>
        </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">
            <a href="#" class="pager__page-link">4</a>
        </li>
        <li class="pager__page">
            <a href="#" class="pager__page-link">5</a>
        </li>
        <li class="pager__page">
            <a href="#" class="pager__page-link">6</a>
        </li>
        <li class="pager__page">
            <a href="#" class="pager__page-link">7</a>
        </li>
        <li class="pager__page">
            <a href="#" class="pager__page-link">8</a>
        </li>
        <li class="pager__page">
            <a href="#" class="pager__page-link">9</a>
        </li>
        <li class="pager__page">
            <a href="#" class="pager__page-link">10</a>
        </li>
        <li class="pager__page">
            <a href="#" class="pager__page-link">11</a>
        </li>
        <li class="pager__page">
            <a href="#" class="pager__page-link">12</a>
        </li>
        <li class="pager__page">
            <a href="#" class="pager__page-link">13</a>
        </li>
        <li class="pager__page">
            <a href="#" class="pager__page-link">14</a>
        </li>
    </ul>
    <div class="pager__next-container">
        <a href="#" class="pager__next" aria-label="next page">
            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-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>
        </a>
    </div>
</nav>
 
<nav class="pager" aria-label="Pagination">
    <div class="pager__prev-container">
    {%  if pagination.prev.link|length %}
        <a href="{{pagination.prev.link}}" class="pager__prev" aria-label="previous page">
            <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" aria-label="next page">
        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>
 
{
  "pagination": {
    "pages": [
      {
        "title": 1,
        "current": true
      },
      {
        "title": 2,
        "link": "#"
      },
      {
        "title": 3,
        "link": "#"
      },
      {
        "title": 4,
        "link": "#"
      },
      {
        "title": 5,
        "link": "#"
      },
      {
        "title": 6,
        "link": "#"
      },
      {
        "title": 7,
        "link": "#"
      },
      {
        "title": 8,
        "link": "#"
      },
      {
        "title": 9,
        "link": "#"
      },
      {
        "title": 10,
        "link": "#"
      },
      {
        "title": 11,
        "link": "#"
      },
      {
        "title": 12,
        "link": "#"
      },
      {
        "title": 13,
        "link": "#"
      },
      {
        "title": 14,
        "link": "#"
      }
    ],
    "next": {
      "link": "#"
    }
  }
}
  • Content: 
    breakpoint = 700px

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

    color charcoal
    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
        background-color var(--currentBackgroundColor)
        color var(--currentTextColor)

    &__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 8px
        display flex
        justify-content center
        line-height 2em
        min-width 2.2em

    &__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)
            color var(--pageTextColorFocused)

    &__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: patterns/partials/navigation/pager/pager.styl
  • Size: 3.7 KB

No notes defined.