Latte / Html
{* Pagination *}
<nav class="pagination --flex --flex-centre-y">
<div class="pagination__column --flex-inline --flex-column"></div>
<div class="pagination__column --flex-inline --flex-column">
<a class="pagination__button-more button--large button button--text ajax" href="#">
Dalších x produktů
</a>
</div>
<div class="pagination__column --flex-inline --flex-column">
<div class="pagination__wrap --flex-inline --flex-end --flex-centre">
<a href="#"
n:class="'pagination__button pagination__button--left'">
</a>
<ul class="pagination__list">
<li class="pagination__item pagination__item--active"><span
class="pagination__current">1</span>
</li>
<li class="pagination__item">
<a href="#" n:class="'pagination__link'">
2
</a>
</li>
</ul>
<a href="#" n:class="'pagination__button pagination__button--right'">
</a>
</div>
</div>
</nav>
CSS / SCSS
.pagination{
margin: 0 0 25px 0;
flex-direction:column;
align-items: center;
@include media($large){
flex-wrap: nowrap;
flex-direction:row;
}
}
.pagination__column{
width: 100%;
}
.pagination__button-more{
margin: auto;
margin-bottom: 10px;
@include media($large){
margin-bottom: 0px;
}
}
.pagination__wrap {
font-family: $font__title;
align-items: flex-start;
flex-wrap: nowrap;
@include media($large){
margin-left: auto;
}
}
.pagination__list {
display: flex;
flex: 0 1 auto;
flex-wrap: wrap;
justify-content: center;
row-gap: 5px;
}
.pagination__item {
font-size: 1.6rem;
color: $color__text;
line-height: 1.4;
cursor: pointer;
display: block;
&:hover {
background: rgba($color__gray, .5);
}
}
.pagination__link, .pagination__current {
color: $color__text;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 5px 13px;
@include media($medium){
padding: 12px 22px;
}
}
.pagination__item--active {
background-color: $color__gray;
}
.pagination__button {
padding: 5px 13px;
color: #fff;
background: $color__text;
&::before {
@include pseudo(inline-block, relative);
width: 8px;
height: 8px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg);
}
@include media($medium){
padding: 12px 22px;
}
}
.pagination__button--left {
margin-right: 10px;
&::before{
top: -2px;
right: -2px;
}
}
.pagination__button--right {
margin-left: 10px;
&::before{
top: -2px;
left: -2px;
}
}
.pagination__button--left::before {
transform: rotate(135deg);
}