<nav class="nav-pagination" aria-label="pagination">
<ul>
<li class="lnk-prev arrow-pagination">
<a href="#">
<span>Page précédente</span>
<i class="icon icon--chevron-left"></i>
</a>
</li>
<li>
<a class="" data-page="1" href="#">
<span class="screen-reader-text">page </span> 1
</a>
</li>
<li class="active">
<span class="" data-page="2" aria-current="page">
<span class="screen-reader-text">page </span>2
</span>
</li>
<li>
<a class="" data-page="3" href="#">
<span class="screen-reader-text">page </span> 3
</a>
</li>
<li class="lnk-next arrow-pagination">
<a href="#">
<span>Page suivante</span>
<i class="icon icon--chevron-right"></i>
</a>
</li>
</ul>
</nav>
<nav class="nav-pagination" aria-label="pagination">
<ul>
<li class="lnk-prev arrow-pagination">
<a href="#">
<span>Page précédente</span>
<i class="icon icon--chevron-left"></i>
</a>
</li>
<li>
<a class="" data-page="1" href="#">
<span class="screen-reader-text">page </span> 1
</a>
</li>
<li class="active">
<span class="" data-page="2" aria-current="page">
<span class="screen-reader-text">page </span>2
</span>
</li>
<li>
<a class="" data-page="3" href="#">
<span class="screen-reader-text">page </span> 3
</a>
</li>
<li class="lnk-next arrow-pagination">
<a href="#">
<span>Page suivante</span>
<i class="icon icon--chevron-right"></i>
</a>
</li>
</ul>
</nav>
/* No context defined for this component. */
.nav-pagination {
text-align: center;
max-width: none;
margin-bottom: 2rem!important;
margin-top: 3rem!important;
padding: .7rem 0;
li {
display: inline-block;
vertical-align: middle;
margin: 0 .4rem;
> a, > span {
height: 45px;
text-align: center;
text-decoration: none;
font-family: $font-secondary;
font-weight: 700;
}
&:not(.active) {
display: none;
@include mediaWQuery($media-query-m) {
display: inline-block;
}
}
&:not(.arrow-pagination) {
> a, > span { width: 45px }
font-size: rem(18);
}
}
li.arrow-pagination {
font-size: 0;
display: inline-block;
> a {
display: flex;
align-items: center;
padding: 0 .4rem!important;
font-size: 0;
span {
display: none;
}
@include mediaWQuery($media-query-m) {
color: $c-font-color;
span {
font-size: $font-size-m;
font-weight: 700;
display: inline-block;
}
i { display: none }
&:hover, &:focus {
text-decoration: underline;
}
}
}
}
li:not(.arrow-pagination) {
> a, > span {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem!important;
border-radius: $border-radius-s;
background: $c-white;
color: $c-black;
border: 1px solid $c-black;
&:hover, &:focus {
background: $c-black;
color: $c-white;
outline: 0;
}
}
&.active {
> span {
background: $c-black;
color: $c-white;
outline: 0;
}
}
}
}
// Algolia
.ais-Pagination-list {
.ais-Pagination-item--page {
display: none;
@include mediaWQuery($media-query-m) { display: block }
a {
width: 45px;
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem !important;
border-radius: 8px;
background: #fff;
color: #222;
border: 1px solid #222;
height: 45px;
text-align: center;
text-decoration: none;
font-family: $font-secondary;
font-weight: 700;
&:hover, &:focus {
background: $c-black;
color: $c-white;
}
}
&.ais-Pagination-item--selected {
display: block;
a {
background: $c-black;
color: $c-white;
}
}
}
.ais-Pagination-item--firstPage,
.ais-Pagination-item--previousPage,
.ais-Pagination-item--nextPage,
.ais-Pagination-item--lastPage {
a, span {
display: flex;
justify-content: center;
align-items: center;
width: 25px;
height: 45px;
margin-top: -2px;
font-size: 1.6em;
text-decoration: none;
}
&.ais-Pagination-item--disabled { opacity: 0 }
}
}
There are no notes for this item.