Pagination

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="#">
            More x products
        </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);
}