<nav class="pager pager--light pager--music" 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>
</ul>
<div class="pager__next-container">
<a href="#" class="pager__next">
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>
</a>
</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": "#",
"current": true
},
{
"title": 2,
"link": "#"
},
{
"title": 3,
"link": "#"
},
{
"title": 4,
"link": "#"
}
],
"next": {
"link": "#"
}
}
}
.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
There are no notes for this item.