<nav class="m-pagination">
<ul class="m-pagination__list">
<li class="m-pagination__button first"><a href="#"><svg class="a-icon" role="img" title="">
<use xlink:href="#first" />
</svg>
<span class="m-pagination__button-title">Premier</span></a></li>
<li class="m-pagination__button previous"><a href="#"><svg class="a-icon" role="img" title="">
<use xlink:href="#previous" />
</svg>
<span class="m-pagination__button-title">Précédent</span></a></li>
<li class="m-pagination__button ellipsis">...</li>
<li class="m-pagination__button"><a href="#">11</a></li>
<li class="m-pagination__button"><a href="#">12</a></li>
<li class="m-pagination__button"><a href="#">13</a></li>
<li class="m-pagination__button"><a href="#">14</a></li>
<li class="m-pagination__button current"><a href="#">15</a></li>
</ul>
</nav>
<nav class="m-pagination">
<ul class="m-pagination__list">
<li class="m-pagination__button first"><a href="#">{{> @a-icon name="first"}}<span class="m-pagination__button-title">{{button.first}}</span></a></li>
<li class="m-pagination__button previous"><a href="#">{{> @a-icon name="previous"}}<span class="m-pagination__button-title">{{button.previous}}</span></a></li>
<li class="m-pagination__button ellipsis">...</li>
<li class="m-pagination__button"><a href="#">11</a></li>
<li class="m-pagination__button"><a href="#">12</a></li>
<li class="m-pagination__button"><a href="#">13</a></li>
<li class="m-pagination__button"><a href="#">14</a></li>
<li class="m-pagination__button current"><a href="#">15</a></li>
</ul>
</nav>
.m-pagination {
&__list {
display: flex;
justify-content: center;
}
&__button {
@include fluid-props(font-size, $fluid-min, $fluid-max, 14px, 18px);
@include fluid-props(height, $fluid-min, $fluid-max, 32px, 44px);
min-width: 32px;
color: $color-primary;
border: 1px solid $color-text-lighten;
border-right: none;
display: flex;
align-items: center;
justify-content: center;
text-transform: lowercase;
transition: border-color 75ms ease-in;
&:last-child {
border-right: 1px solid $color-text-lighten;
}
a {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: inherit;
height: 100%;
padding: 0 1.2vw;
position: relative;
top: -1px; // tweak visual vertical alignement (compensating lower parts of the characters)
}
@include hover-behaviour {
&:not(.ellipsis) {
border-color: $color-primary;
}
}
&:not(.current):not(.ellipsis):hover + .m-pagination__button {
/** because we hide the right-border to avoid double borders,
* this is a litte trick to have the hover effect
* looks like it really applies to all 4 borders
*/
border-left: solid 1px $color-primary;
}
&.next, &.last, &.first, &.previous {
color: $color-text;
}
&.ellipsis {
padding: 0 1.2vw;
@include hover-behaviour {
background-color: initial;
user-select: none;
}
// cursor: default;
}
&.first, &.previous {
.a-icon {
margin: 0 8% 0 0;
}
}
&.next, &.last {
.a-icon {
margin: 0 0 0 8%;
}
}
&.current {
background-color: $color-primary;
border-color: $color-primary;
color: $color-text-negative;
a {
cursor: default;
}
}
}
&__button-title {
display: none;
@include media($sm-breakpoint) {
display: initial;
}
}
.a-icon {
fill: $color-primary;
@include fluid-props(width, $fluid-min, $fluid-max, 10px, 22px);
position: relative;
top: 1px; // to fix vertical alignment with text
height: 100%;
}
}
{
"button": {
"first": "Premier",
"next": "Suivante",
"previous": "Précédent",
"last": "Dernière"
}
}
There are no notes for this item.