Paginace (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="#">
            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);
}

Nevíte si rady?
Neváhejte se zeptat

Nevíte si rady nebo potřebujete něco konzultovat? Nápovědu stále zdokonalujeme na základě vašich požadavků a postřehů. Uvádíme co nejvíce možných variant, které používáme na řešení jednotlivých částí webu, mějte ale na paměti, že projekty řešíme individuálně na základě konkrétních potřeb.

Nádražní 876
560 02 Česká Třebová

honza.cech@czechgroup.cz

+420 774 201 483

*
*