Produto
PRODUTO
Paginação
O componente de paginação é utilizado para a segmentação de conteúdo sempre que houver demasiada quantidade de dados para serem exibidos ou carregados em uma única página.
Estados de interação
Código
HTML 
Exibir código
Copiar código
Exibir código
<div class="pagination">
<ul>
<li>
<a href="#" class="prev"></a>
</li>
<li>
<a href="#">
1
</a>
</li>
<li>
<a href="#" class="active">
2
</a>
</li>
<li>
<a href="#">
3
</a>
</li>
<li class="more"></li>
<li>
<a href="#">
10
</a>
</li>
<li>
<a href="#" class="next"></a>
</li>
</ul>
</div>
SASS Exibir código
Copiar código
Exibir código
@mixin prevNext() {
content: "";
display: block;
position: absolute;
background-image: url(/img/chevron.svg);
background-repeat: no-repeat;
background-size: 24px;
width: 24px;
height: 24px;
}
.pagination{
display: block;
ul{
list-style: none;
margin: 0;
padding: 0;
display: block;
li{
float: left;
margin: 0 10px 10px 0;
a{
display: block;
position: relative;
box-sizing: border-box;
width: 48px;
height: 48px;
border-radius: 23px;
font-family: Lato;
font-size: 1em;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 48px;
letter-spacing: normal;
text-align: center;
text-decoration: none!important;
color: #1e2a54;
background-color: #f1f1f1;
&.prev:after{
@include prevNext;
transform: rotate(90deg);
top: 11px;
left: 11px;
}
&.next:after{
@include prevNext;
transform: rotate(-90deg);
top: 11px;
left: 14px;
}
&:hover,
&.active{
color: #ffffff;
background-color: #3153f5;
&.prev:after,
&.next:after{
background-image: url(/img/chevron-white.svg);
}
}
}
&.more{
height: 48px;
&:before{
content: "";
position: relative;
top: 18px;
display: block;
width: 27px;
height: 13px;
background-image: url(/img/paginate-separator.png);
background-repeat: no-repeat;
}
}
}
}
}