Pagination with CSS Custom Properties
A Pen by Stas Melnikov on CodePen.
<div class="page"> | |
<div class="page__demo"> | |
<div class="main-container page__container"> | |
<div class="demo"> | |
<span class="demo__label">#1</span> | |
<ul class="pagination pagination_type1"> | |
<li class="pagination__item"><a href="#0" class="pagination__number">←<span class="pagination__control pagination__control_prev">prev</span></a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">1</a></li> | |
<li class="pagination__item"><span class="pagination__number pagination__number_active">2</span></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">3</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">4</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">5</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">6</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">7</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">8</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">9</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">10</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number"><span class="pagination__control pagination__control_next">next</span>→</a></li> | |
</ul> | |
</div> | |
<div class="demo"> | |
<span class="demo__label">#2</span> | |
<ul class="pagination pagination_type2"> | |
<li class="pagination__item"><a href="#0" class="pagination__number">←<span class="pagination__control pagination__control_prev">prev</span></a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">1</a></li> | |
<li class="pagination__item"><span class="pagination__number pagination__number_active">2</span></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">3</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">4</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">5</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">6</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">7</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">8</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">9</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">10</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number"><span class="pagination__control pagination__control_next">next</span>→</a></li> | |
</ul> | |
</div> | |
<div class="demo"> | |
<span class="demo__label">#3</span> | |
<ul class="pagination pagination_type1 pagination_type3"> | |
<li class="pagination__item"><a href="#0" class="pagination__number">←<span class="pagination__control pagination__control_prev">prev</span></a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">1</a></li> | |
<li class="pagination__item"><span class="pagination__number pagination__number_active">2</span></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">3</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">4</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">5</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">6</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">7</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">8</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">9</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">10</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number"><span class="pagination__control pagination__control_next">next</span>→</a></li> | |
</ul> | |
</div> | |
<div class="demo"> | |
<span class="demo__label">#4</span> | |
<ul class="pagination pagination_type2 pagination_type3"> | |
<li class="pagination__item"><a href="#0" class="pagination__number">←<span class="pagination__control pagination__control_prev">prev</span></a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">1</a></li> | |
<li class="pagination__item"><span class="pagination__number pagination__number_active">2</span></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">3</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">4</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">5</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">6</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">7</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">8</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">9</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">10</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number"><span class="pagination__control pagination__control_next">next</span>→</a></li> | |
</ul> | |
</div> | |
<div class="demo"> | |
<span class="demo__label">#5</span> | |
<ul class="pagination pagination_type1 pagination_type4"> | |
<li class="pagination__item"><a href="#0" class="pagination__number">←<span class="pagination__control pagination__control_prev">prev</span></a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">1</a></li> | |
<li class="pagination__item"><span class="pagination__number pagination__number_active">2</span></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">3</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">4</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">5</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">6</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">7</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">8</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">9</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">10</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number"><span class="pagination__control pagination__control_next">next</span>→</a></li> | |
</ul> | |
</div> | |
<div class="demo"> | |
<span class="demo__label">#6</span> | |
<ul class="pagination pagination_type1 pagination_type5"> | |
<li class="pagination__item"><a href="#0" class="pagination__number">←<span class="pagination__control pagination__control_prev">prev</span></a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">1</a></li> | |
<li class="pagination__item"><span class="pagination__number pagination__number_active">2</span></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">3</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">4</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">5</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">6</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">7</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">8</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">9</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number">10</a></li> | |
<li class="pagination__item"><a href="#0" class="pagination__number"><span class="pagination__control pagination__control_next">next</span>→</a></li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
<footer class="footer"> | |
<div class="main-container footer__container"> | |
<a href="https://stas-melnikov.ru/donate/" class="footer__link" rel="noopener noreferrer" target="_blank">Liked? Please, look the page</a> | |
<a href="https://stas-melnikov.ru" class="footer__link melnik909" rel="noopener noreferrer" target="_blank">Developed by Stas Melnikov</a> | |
</div> | |
</footer> | |
</div> |
A Pen by Stas Melnikov on CodePen.
/* | |
*reset pagination | |
*/ | |
.pagination{ | |
--uiPaginationItemPadding: var(--paginationItemPadding, 5px 8px); | |
--uiPaginationItemBorderRadius: var(--paginationItemBorderRadius); | |
--uiPaginationItemTextColor: var(--paginationItemTextColor, inherit); | |
--uiPaginationItemActiveTextColor: var(--paginationItemActiveTextColor); | |
--uiPaginationItemActiveBgColor: var(--paginationItemActiveBgColor); | |
--uiPaginationItemActiveBorderColor: var(--paginationItemActiveBorderColor, transparent); | |
--uiPaginationItemFontWeight: var(--paginationItemFontWeight, 700); | |
--uiPaginationArrowIndent: var(--paginationArrowIndent, 4px); | |
padding-left: 0; | |
margin-top: 0; | |
margin-bottom: 0; | |
list-style: none; | |
display: flex; | |
flex-wrap: wrap; | |
align-items: center; | |
} | |
.pagination__number_active{ | |
font-weight: var(--uiPaginationItemFontWeight); | |
} | |
.pagination__control_prev{ | |
margin-left: var(--uiPaginationArrowIndent); | |
} | |
.pagination__control_next{ | |
margin-right: var(--uiPaginationArrowIndent); | |
} | |
.pagination__number{ | |
display: inline-block; | |
line-height: 1; | |
padding: var(--uiPaginationItemPadding); | |
border: 2px solid transparent; | |
border-radius: var(--uiPaginationItemBorderRadius); | |
text-decoration: none; | |
color: var(--uiPaginationItemTextColor); | |
} | |
.pagination__number:focus{ | |
outline-color: var(--uiPaginationItemActiveBgColor); | |
} | |
.pagination__number_active{ | |
border-color: var(--uiPaginationItemActiveBorderColor); | |
background-color: var(--uiPaginationItemActiveBgColor); | |
color: var(--uiPaginationItemActiveTextColor); | |
} | |
/* | |
* demo styles for pagination | |
*/ | |
.pagination{ | |
--paginationItemActiveBgColor: #4557bb; | |
--paginationItemTextColor: #0094d9; | |
--paginationItemActiveTextColor: #fff; | |
justify-content: center; | |
} | |
/* type 2 */ | |
.pagination_type2{ | |
--paginationItemTextColor: #0094d9; | |
--paginationItemActiveTextColor: #4557bb; | |
--paginationItemActiveBgColor: #fff; | |
--paginationItemActiveBorderColor: #4557bb; | |
} | |
/* type 3 */ | |
.pagination_type3{ | |
--paginationItemBorderRadius: 50%; | |
} | |
/* type 4 */ | |
.pagination_type4{ | |
--paginationItemBorderRadius: 2px; | |
} | |
/* type 5 */ | |
.pagination_type5{ | |
--paginationArrowIndent: 5px; | |
--paginationItemPadding: 10px 15px; | |
--paginationItemTextColor: #fff; | |
--paginationItemActiveBgColor: #5668ca; | |
background-color: #4557bb; | |
} | |
@media screen and (max-width: 640px){ | |
.pagination__item{ | |
display: none; | |
} | |
.pagination__item:first-child, .pagination__item:nth-child(2), | |
.pagination__item:nth-child(3), .pagination__item:nth-child(4), | |
.pagination__item:nth-child(5), .pagination__item:last-child{ | |
display: inline-block; | |
} | |
.pagination__control{ | |
display: none; | |
} | |
} | |
/* | |
* demo page | |
*/ | |
@media screen and (min-width: 768px){ | |
html{ | |
font-size: 62.5%; | |
} | |
} | |
@media screen and (max-width: 767px){ | |
html{ | |
font-size: 50%; | |
} | |
} | |
body{ | |
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Open Sans", "Ubuntu", "Fira Sans", "Helvetica Neue", sans-serif; | |
font-size: 1.6rem; | |
color: #222; | |
background-color: #f0f0f0; | |
margin: 0; | |
-webkit-overflow-scrolling: touch; | |
} | |
.page{ | |
min-height: 100vh; | |
display: flex; | |
flex-direction: column; | |
justify-content: space-around; | |
} | |
.page__demo{ | |
flex-grow: 1; | |
} | |
.main-container{ | |
width: 90%; | |
max-width: 800px; | |
box-sizing: border-box; | |
padding-left: 1rem; | |
padding-right: 1rem; | |
margin-right: auto; | |
margin-left: auto; | |
} | |
.page__container{ | |
margin-top: 5rem; | |
margin-bottom: 5rem; | |
} | |
.demo{ | |
position: relative; | |
padding: 5rem 3rem; | |
background-color: #fff; | |
} | |
.demo:not(:first-of-type){ | |
margin-top: 5rem; | |
} | |
.demo__label{ | |
position: absolute; | |
top: 8px; | |
left: 0; | |
font-weight: 700; | |
margin: 0 0 1.5rem 1.5rem; | |
font-size: 1.8rem; | |
} | |
.footer{ | |
padding-top: 1rem; | |
padding-bottom: 1rem; | |
text-align: center; | |
font-size: 1.4rem; | |
} | |
.footer__link{ | |
color: #222; | |
text-decoration: none; | |
} | |
@media screen and (min-width: 641px){ | |
.footer__container{ | |
display: flex; | |
justify-content: space-between; | |
} | |
} | |
@media screen and (max-width: 640px){ | |
.melnik909{ | |
display: none; | |
} | |
} |