pagination.sass 3.37 KiB
.pagination
// font-family: $font-family-sans-serif
font-size: px2rem(14)
justify-content: center
margin: #{$grid-gutter * 2.5} 0 0
li
@include list-reset
// @extend .page-item
a
// @extend .page-link
.disabled
a::before
opacity: .3
&:not(&-between-pages)
li
&:first-child,
&:nth-child(2),
&:nth-last-child(2),
&:last-child
a
// @extend .icon
&:first-child
a
@include icon(arrow-first)
&:nth-child(2)
a
@include icon(arrow-left)
&:nth-last-child(2)
a
@include icon(arrow-right)
&:last-child
a
@include icon(arrow-last)
a::before
font-size: px2rem(12)
&-between-pages
@include list-reset
display: flex
justify-content: space-between
margin-top: $spacing3
li
flex: 1
a
background-color: transparent
border: 0
text-decoration: none
&:hover
background-color: transparent
text-decoration: underline
span
text-decoration: none
span
// color: $gray-600
&::before, &::after
font-size: px2rem(12)
.previous
padding-left: 0
span
@include icon(arrow-left, before)
&::before
margin-right: px2rem(5)
.next
padding-right: 0
text-align: right
span
@include icon(arrow-right, after)
&::after
margin-left: px2rem(5)
@include media-breakpoint-down(md)
flex-direction: column-reverse
margin-left: 0
margin-right: 0
li.previous,
li.next
// border-top: 1px solid $gray-500
text-align: left
a
padding: px2rem(20) px2rem(40) px2rem(20) 0
&::after
@include icon
font-size: px2rem(12)
opacity: 0.5
position: absolute
right: 0
top: 50%
transform: translateY(-50%)
span
&::after,
&::before
content: none
li.previous
border-bottom: 1px solid $main-border-color
a
@include icon(arrow-left)
li.next
a
@include icon(arrow-right)
.posts
+ nav
.pagination
align-items: center
display: flex
margin: auto
li
a
line-height: 140%
padding: $spacing0/2 $spacing0
text-decoration: none
transition: background-color .15s ease-in-out
&.disabled
pointer-events: none
&:not(.disabled)
a:hover
background-color: #e9ecef