<nav class="nav-pagination">
<ul>
<li class="nav-pagination__arrow nav-pagination__arrow--prev">
<a href="#" title="page "><i class="icon icon--chevron-left--yellow"></i><span>Page précédente</span> </a>
</li>
<li class="nav-pagination__current">
<a href="#" title="page " aria-current="page">
<span class="visually-hidden">page </span>1
</a>
</li>
<li>
<a href="#" title="page ">
<span class="visually-hidden">page </span> 2
</a>
</li>
<li>
<a href="#" title="page ">
<span class="visually-hidden">page </span> 3
</a>
</li>
<li>
<a href="#" title="page ">
<span class="visually-hidden">page </span> 4
</a>
</li>
<li>
<a href="#" title="page ">
<span class="visually-hidden">page </span> 5
</a>
</li>
<li class="nav-pagination__arrow nav-pagination__arrow--next">
<a href="#" title="page "><span>Page suivante</span> <i class="icon icon--chevron-right--yellow"></i></a>
</li>
</ul>
</nav>
<nav class="nav-pagination">
<ul>
<li class="nav-pagination__arrow nav-pagination__arrow--prev">
<a href="#" title="page {{pagination.numero_page}}"><i class="icon icon--chevron-left--yellow"></i><span>Page précédente</span> </a>
</li>
<li class="nav-pagination__current">
<a href="#" title="page {{pagination.numero_page}}" aria-current="page">
<span class="visually-hidden">page </span>1
</a>
</li>
<li>
<a href="#" title="page {{pagination.numero_page}}">
<span class="visually-hidden">page </span> 2
</a>
</li>
<li>
<a href="#" title="page {{pagination.numero_page}}">
<span class="visually-hidden">page </span> 3
</a>
</li>
<li>
<a href="#" title="page {{pagination.numero_page}}">
<span class="visually-hidden">page </span> 4
</a>
</li>
<li>
<a href="#" title="page {{pagination.numero_page}}">
<span class="visually-hidden">page </span> 5
</a>
</li>
<li class="nav-pagination__arrow nav-pagination__arrow--next">
<a href="#" title="page {{pagination.numero_page}}"><span>Page suivante</span> <i class="icon icon--chevron-right--yellow"></i></a>
</li>
</ul>
</nav>
/* No context defined for this component. */
.nav-pagination {
> ul {
display: flex;
justify-content: center;
align-items: center;
}
> ul > li {
display: inline-block;
}
> ul > li > a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-width: 55px;
height: 55px;
color: $c-font-color;
}
li:not(.nav-pagination__arrow) + li:not(.nav-pagination__arrow) {
margin-left: .5rem;
}
> ul > li:not(.nav-pagination__arrow) > a {
&::before, &::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
border-radius: $border-radius-s;
transition: .2s ease;
}
&::before {
background: $c-brown-lighter;
top: 0;
z-index: -1;
}
&::after {
top: 0;
background: $c-yellow-dark;
z-index: -2;
}
}
> ul > li.nav-pagination__current > a,
> ul > li:not(.nav-pagination__arrow) > a:hover,
> ul > li:not(.nav-pagination__arrow) > a:focus {
text-decoration: none;
transform: translateY(-7px);
&::before, &::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
border-radius: $border-radius-s;
opacity: 1;
}
&::before { background: $c-yellow }
&::after { top: 7px }
}
> ul > li:not(.nav-pagination__arrow) > a:active {
transform: translateY(-3px);
&::after { top: 3px }
}
> ul > li.nav-pagination__current > a {
&:hover, &:focus, &:active {
cursor: default!important;
pointer-events: none;
transform: translateY(-7px);
&::after { top: 7px }
}
}
&__arrow {
> a {
font-weight: 700;
}
span {
display: none;
@include mediaWQuery($media-query-l) {
display: block;
}
}
&--next {
.icon { margin-left: .5rem }
}
&--prev {
.icon { margin-right: .5rem }
}
}
> ul > li:not(.nav-pagination__arrow):not(.nav-pagination__current) {
display: none;
@include mediaWQuery($media-query-m) {
display: inline-block;
}
}
}
There are no notes for this item.