2016-10-30 22:31:54 +00:00
|
|
|
// $size: 0.875rem
|
|
|
|
|
|
|
|
|
|
.pagination,
|
|
|
|
|
.pagination-list
|
2016-03-26 14:12:36 +00:00
|
|
|
align-items: center
|
|
|
|
|
display: flex
|
|
|
|
|
justify-content: center
|
|
|
|
|
text-align: center
|
2016-10-30 22:31:54 +00:00
|
|
|
|
|
|
|
|
.pagination-previous,
|
|
|
|
|
.pagination-next,
|
|
|
|
|
.pagination-link,
|
|
|
|
|
.pagination-ellipsis
|
|
|
|
|
+control
|
|
|
|
|
+unselectable
|
|
|
|
|
font-size: 0.875rem
|
|
|
|
|
padding-left: 0.5em
|
|
|
|
|
padding-right: 0.5em
|
|
|
|
|
justify-content: center
|
|
|
|
|
text-align: center
|
|
|
|
|
|
|
|
|
|
.pagination-previous,
|
|
|
|
|
.pagination-next,
|
|
|
|
|
.pagination-link
|
|
|
|
|
border: 1px solid $border
|
|
|
|
|
min-width: 2.5em
|
|
|
|
|
&:hover
|
|
|
|
|
border-color: $link
|
|
|
|
|
color: $text-strong
|
|
|
|
|
&:focus
|
|
|
|
|
border-color: $link
|
|
|
|
|
&:active
|
|
|
|
|
background-color: $background
|
|
|
|
|
box-shadow: inset 0 1px 2px rgba($black, 0.2)
|
|
|
|
|
&[disabled],
|
|
|
|
|
&.is-disabled
|
|
|
|
|
background: $border
|
2016-03-26 14:12:36 +00:00
|
|
|
color: $text-light
|
2016-10-30 22:31:54 +00:00
|
|
|
opacity: 0.5
|
|
|
|
|
pointer-events: none
|
|
|
|
|
|
|
|
|
|
.pagination-previous,
|
|
|
|
|
.pagination-next
|
|
|
|
|
padding-left: 0.75em
|
|
|
|
|
padding-right: 0.75em
|
|
|
|
|
|
|
|
|
|
.pagination-link
|
|
|
|
|
&.is-current
|
|
|
|
|
background-color: $link
|
|
|
|
|
border-color: $link
|
|
|
|
|
color: $link-invert
|
|
|
|
|
|
|
|
|
|
.pagination-ellipsis
|
|
|
|
|
color: $text-light
|
|
|
|
|
pointer-events: none
|
|
|
|
|
|
|
|
|
|
.pagination-list
|
2016-03-26 14:12:36 +00:00
|
|
|
li
|
2016-10-30 22:31:54 +00:00
|
|
|
&:not(:first-child)
|
|
|
|
|
margin-left: 0.375rem
|
|
|
|
|
|
|
|
|
|
+mobile
|
|
|
|
|
.pagination
|
2016-03-26 14:12:36 +00:00
|
|
|
flex-wrap: wrap
|
2016-10-30 22:31:54 +00:00
|
|
|
.pagination-previous,
|
|
|
|
|
.pagination-next
|
|
|
|
|
flex-grow: 1
|
|
|
|
|
flex-shrink: 1
|
|
|
|
|
width: calc(50% - 0.375rem)
|
|
|
|
|
.pagination-next
|
|
|
|
|
margin-left: 0.75rem
|
|
|
|
|
.pagination-list
|
|
|
|
|
margin-top: 0.75rem
|
2016-03-26 14:12:36 +00:00
|
|
|
li
|
2016-07-31 10:45:56 +00:00
|
|
|
flex-grow: 1
|
2016-10-30 22:31:54 +00:00
|
|
|
flex-shrink: 1
|
|
|
|
|
|
|
|
|
|
+tablet
|
|
|
|
|
.pagination-list
|
|
|
|
|
flex-grow: 1
|
|
|
|
|
flex-shrink: 1
|
|
|
|
|
justify-content: flex-start
|
|
|
|
|
order: 1
|
|
|
|
|
.pagination-previous,
|
|
|
|
|
.pagination-next
|
|
|
|
|
margin-left: 0.75rem
|
|
|
|
|
.pagination-previous
|
|
|
|
|
order: 2
|
|
|
|
|
.pagination-next
|
|
|
|
|
order: 3
|
|
|
|
|
.pagination
|
|
|
|
|
justify-content: space-between
|
|
|
|
|
&.is-centered
|
|
|
|
|
.pagination-previous
|
|
|
|
|
margin-left: 0
|
|
|
|
|
order: 1
|
|
|
|
|
.pagination-list
|
|
|
|
|
justify-content: center
|
|
|
|
|
order: 2
|
|
|
|
|
.pagination-next
|
|
|
|
|
order: 3
|
|
|
|
|
&.is-right
|
|
|
|
|
.pagination-previous
|
|
|
|
|
margin-left: 0
|
2016-03-26 14:12:36 +00:00
|
|
|
order: 1
|
2016-10-30 22:31:54 +00:00
|
|
|
.pagination-next
|
|
|
|
|
order: 2
|
|
|
|
|
margin-right: 0.75rem
|
|
|
|
|
.pagination-list
|
|
|
|
|
justify-content: flex-end
|
|
|
|
|
order: 3
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// .pagination
|
|
|
|
|
// align-items: center
|
|
|
|
|
// display: flex
|
|
|
|
|
// justify-content: center
|
|
|
|
|
// text-align: center
|
|
|
|
|
// a
|
|
|
|
|
// display: block
|
|
|
|
|
// min-width: 32px
|
|
|
|
|
// padding: 3px 8px
|
|
|
|
|
// span
|
|
|
|
|
// color: $text-light
|
|
|
|
|
// display: block
|
|
|
|
|
// margin: 0 4px
|
|
|
|
|
// li
|
|
|
|
|
// margin: 0 2px
|
|
|
|
|
// ul
|
|
|
|
|
// align-items: center
|
|
|
|
|
// display: flex
|
|
|
|
|
// flex-grow: 1
|
|
|
|
|
// flex-shrink: 0
|
|
|
|
|
// justify-content: center
|
|
|
|
|
// // Responsiveness
|
|
|
|
|
// +mobile
|
|
|
|
|
// flex-wrap: wrap
|
|
|
|
|
// & > a
|
|
|
|
|
// width: calc(50% - 5px)
|
|
|
|
|
// &:not(:first-child)
|
|
|
|
|
// margin-left: 10px
|
|
|
|
|
// li
|
|
|
|
|
// flex-grow: 1
|
|
|
|
|
// flex-shrink: 0
|
|
|
|
|
// ul
|
|
|
|
|
// margin-top: 10px
|
|
|
|
|
// +tablet
|
|
|
|
|
// & > a
|
|
|
|
|
// &:not(:first-child)
|
|
|
|
|
// order: 1
|
