/
githubmirror
/
magento2
Обзор
Документация
Войти
/
githubmirror
/
magento2
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
2.4-develop
lib/web/css/docs/pages.html
829 строк
247 KB
Alexandra Zota
ACP2E-4019: CE copyright updates for 2.4.9-beta1
22 окт 2025, 10:58
22 окт 2025, 10:58
3d4f486
Код
Авторство
О чём код?
<!-- /** * Copyright 2014 Adobe * All Rights Reserved. */ --> <!DOCTYPE html><html><head><title>pages | Magento UI Library </title><meta charset="utf-8"><style>*{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;border:0}body{padding:60px 0 40px;background-color:hsl(207,10%,90%);color:hsl(207,5%,30%)}.co … [Строка слишком длинная. Вы можете скачать файл] <p> Pagination is used to display numbers of pages in case content exceeds page limits. The markup corresponds to accesibility demands.</p> <p> Required HTML markup:</p> <textarea class="preview-code" spellcheck="false"> <div class="pages"> <strong class="label" id="paging-label">Page</strong> <ul class="items" aria-labelledby="paging-label"> <li class="item"> <a href="1" class="action previous"> <span class="label">Page</span> <span>Previous</span> </a> </li> <li class="item"> <a href="1" class="page"> <span class="label">Page</span> <span>1</span> </a> </li> <li class="item current"> <strong class="page"> <span class="label">You're currently reading page</span> <span>2</span> </strong> </li> <li class="item"> <a href="1" class="page"> <span class="label">Page</span> <span>3</span> </a> </li> <li class="item"> <a href="1" class="action next"> <span class="label">Page</span> <span>Next</span> </a> </li> </ul> </div></textarea> </div><div class="code"><pre><code>.pages { .lib-pager(); }</code></pre></div></article><article id="pagination-variables" class="section"><div class="docs"><a href="#pagination-variables" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="pagination-variables">Pagination variables</h1> <pre> <table> <tr> <th class="vars_head">Mixin variable</th> <th class="vars_head">Global variable</th> <th class="vars_head">Default value</th> <th class="vars_head">Allowed values</th> <th class="vars_head">Comment</th> </tr> <tr> <th nowrap="nowrap">@_pager-label-display</th> <td>@pager-label__display</td> <td class="vars_value">none</td> <td class="vars_value">none | block | inline-block</td> <td>The 'page' label is displayed</td> </tr> <tr> <th nowrap="nowrap">@_pager-item-display</th> <td>@pager-item__display</td> <td class="vars_value">inline-block</td> <td class="vars_value">none | block | inline-block</td> <td>The pager item label is displayed</td> </tr> <tr> <th nowrap="nowrap">@_pager-reset-spaces</th> <td>@pager-reset-spaces</td> <td class="vars_value">true</td> <td class="vars_value">true | false</td> <td>Reset spaces between inline-block elements if elements 'display' is set to 'inline-block'</td> </tr> <tr> <th nowrap="nowrap">@_pager-font-size</th> <td>@pager__font-size</td> <td class="vars_value">@font-size__s</td> <td class="vars_value">'' | false | value</td> <td>Pager font size</td> </tr> <tr> <th nowrap="nowrap">@_pager-font-weight</th> <td>@pager__font-weight</td> <td class="vars_value">@font-weight__bold</td> <td class="vars_value">'' | false | value</td> <td>Pager font weight</td> </tr> <tr> <th nowrap="nowrap">@_pager-line-height</th> <td>@pager__line-height</td> <td class="vars_value">32px</td> <td class="vars_value">'' | false | value</td> <td>Pager line height</td> </tr> <tr> <th nowrap="nowrap">@_pager-item-margin</th> <td>@pager-item__margin</td> <td class="vars_value">0 2px 0 0</td> <td class="vars_value">'' | false | value</td> <td>Pager item margin</td> </tr> <tr> <th nowrap="nowrap">@_pager-item-padding</th> <td>@pager-item__padding</td> <td class="vars_value">0 4px</td> <td class="vars_value">'' | false | value</td> <td>Pager item padding</td> </tr> <tr> <th>@_pager-actions-padding</th> <td>@pager-actions__padding</td> <td class="vars_value">0</td> <td class="vars_value">'' | false | value</td> <td>Pager actions padding</td> </tr> <tr> <th colspan="5" class="vars_section">Pager current page</th> </tr> <tr> <th>@_pager-current-font-weight</th> <td>@pager-current__font-weight</td> <td class="vars_value">@font-weight__bold;</td> <td class="vars_value">'' | false | value</td> <td>Current page number font weight</td> </tr> <tr> <th>@_pager-current-color</th> <td>@pager-current__color</td> <td class="vars_value">@primary__color</td> <td class="vars_value">'' | false | value</td> <td>Current page number color</td> </tr> <tr> <th>@_pager-current-border</th> <td>@pager-current__border</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Current page number border</td> </tr> <tr> <th>@_pager-current-background</th> <td>@pager-current__background</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Current page number background</td> </tr> <tr> <th>@_pager-current-gradient</th> <td>@pager-current__gradient</td> <td class="vars_value">false</td> <td class="vars_value">true | false</td> <td>Current page number has gradient background</td> </tr> <tr> <th>@_pager-current-gradient-direction</th> <td>@pager-current__gradient-direction</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | vertical | horizontal</td> <td>Direction of current page number background gradient (if there is any)</td> </tr> <tr> <th>@_pager-current-gradient-color-start</th> <td>@pager-current__gradient-color-start</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Current page number gradient start color</td> </tr> <tr> <th>@_pager-current-gradient-color-end</th> <td>@pager-current__gradient-color-end</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Current page number gradient end color</td> </tr> <tr> <th colspan="5" class="vars_section">Link to page number</th> </tr> <tr> <th>@_pager-gradient</th> <td>@pager__gradient</td> <td class="vars_value">false</td> <td class="vars_value">true | false</td> <td>Pager items have gradient background</td> </tr> <tr> <th>@_pager-gradient-direction</th> <td>@pager__gradient-direction</td> <td class="vars_value">'false</td> <td class="vars_value">'' | false | vertical | horizontal</td> <td>Direction of background gradient (if there is any) of pager item</td> </tr> <tr> <th colspan="5" class="vars_section">Link to page number - default</th> </tr> <tr> <th>@_pager-color</th> <td>@pager__color</td> <td class="vars_value">@link__color</td> <td class="vars_value">'' | false | value</td> <td>Pager item color</td> </tr> <tr> <th>@_pager-border</th> <td>@pager__border</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Pager item border</td> </tr> <tr> <th>@_pager-text-decoration</th> <td>@pager__text-decoration</td> <td class="vars_value">none</td> <td class="vars_value">'' | false | value</td> <td>Pager item text decoration</td> </tr> <tr> <th>@_pager-background</th> <td>@pager__background</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Pager item background</td> </tr> <tr> <th>@_pager-gradient-color-start</th> <td>@pager__gradient-color-start</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Pager item gradient start color</td> </tr> <tr> <th>@_pager-gradient-color-end</th> <td>@pager__gradient-color-end</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Pager item gradient end color</td> </tr> <tr> <th colspan="5" class="vars_section">Link to page number - visited</th> </tr> <tr> <th>@_pager-color-visited</th> <td>@pager__visited__color</td> <td class="vars_value">@link__visited__color</td> <td class="vars_value">'' | false | value</td> <td>Pager item visited color</td> </tr> <tr> <th>@_pager-border-visited</th> <td>@pager__visited__border</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Pager item visited border</td> </tr> <tr> <th>@_pager-background-visited</th> <td>@pager__visited__background</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Pager item visited background</td> </tr> <tr> <th>@_pager-gradient-color-start-visited</th> <td>@pager__visited__gradient-color-start</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Pager item visited gradient start color</td> </tr> <tr> <th>@_pager-gradient-color-end-visited</th> <td>@pager__visited__gradient-color-end</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Pager item visited gradient end color</td> </tr> <tr> <th colspan="5" class="vars_section">Link to page number - hover</th> </tr> <tr> <th>@_pager-color-hover</th> <td>@pager__hover__color</td> <td class="vars_value">@link__hover__color</td> <td class="vars_value"> </td> <td>Pager item hover color</td> </tr> <tr> <th>@_pager-border-hover</th> <td>@pager__hover__border</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Pager item hover border</td> </tr> <tr> <th>@_pager-text-decoration-hover</th> <td>@pager__text-decoration</td> <td class="vars_value">none</td> <td class="vars_value">'' | false | value</td> <td>Pager item hover text decoration</td> </tr> <tr> <th>@_pager-background-hover</th> <td>@pager__hover__background</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Pager item hover background</td> </tr> <tr> <th>@_pager-gradient-color-start-hover</th> <td>@pager__hover__gradient-color-start</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Pager item hover gradient start color</td> </tr> <tr> <th>@_pager-gradient-color-end-hover</th> <td>@pager__hover__gradient-color-end</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Pager item hover gradient end color</td> </tr> <tr> <th colspan="5" class="vars_section">Link to page number - active</th> </tr> <tr> <th>@_pager-color-active</th> <td>@pager__active__color</td> <td class="vars_value">@link__hover__color</td> <td class="vars_value">'' | false | value</td> <td>Pager item active color</td> </tr> <tr> <th>@_pager-border-active</th> <td>@pager__active__border</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Pager item active border</td> </tr> <tr> <th>@_pager-background-active</th> <td>@pager__active__background</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Pager item active background</td> </tr> <tr> <th>@_pager-gradient-color-start-active</th> <td>@pager__active__gradient-color-start</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Pager item active gradient start color</td> </tr> <tr> <th>@_pager-gradient-color-end-active</th> <td>@pager__active__gradient-color-end</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Pager item active gradient end color</td> </tr> <tr> <th colspan="5" class="vars_section">Previous/next action links - icons</th> </tr> <tr> <th>@_pager-icon-use</th> <td>@pager-icon__use</td> <td class="vars_value">true</td> <td class="vars_value">true | false</td> <td>previous/next links have icons</td> </tr> <tr> <th>@_pager-icon-previous-content</th> <td>@pager-icon__previous-content</td> <td class="vars_value">@icon-prev</td> <td class="vars_value">'' | false | value</td> <td>"previous" link icon</td> </tr> <tr> <th>@_pager-icon-next-content</th> <td>@pager-icon__next-content</td> <td class="vars_value">@icon-next</td> <td class="vars_value">'' | false | value</td> <td>"next" link icon</td> </tr> <tr> <th>@_pager-icon-font-text-hide</th> <td>@pager-icon__text-hide</td> <td class="vars_value">true</td> <td class="vars_value">true | false</td> <td>The "previous" and "next" words are hidden</td> </tr> <tr> <th>@_pager-icon-font-position</th> <td>@pager-icon__position</td> <td class="vars_value">before</td> <td class="vars_value">before | after</td> <td>Icon position</td> </tr> <tr> <th>@_pager-icon-font</th> <td>@pager-icon__font</td> <td class="vars_value">@icon-font</td> <td class="vars_value">'' | false | value</td> <td>Icon font</td> </tr> <tr> <th>@_pager-icon-font-margin</th> <td>@pager-icon__font-margin</td> <td class="vars_value">0 0 0 -6px</td> <td class="vars_value">'' | false | value</td> <td>Icon font margin</td> </tr> <tr> <th>@_pager-icon-font-vertical-align</th> <td>@pager-icon__font-vertical-align</td> <td class="vars_value">top</td> <td class="vars_value">'' | false | value</td> <td>Icon font vertical align</td> </tr> <tr> <th>@_pager-icon-font-size</th> <td>@pager-icon__font-size</td> <td class="vars_value">46px</td> <td class="vars_value">'' | false | value</td> <td>Icon font size</td> </tr> <tr> <th>@_pager-icon-font-line-height</th> <td>@pager-icon__font-line-height</td> <td class="vars_value">@icon-font__line-height</td> <td class="vars_value">'' | false | value</td> <td>Icon font line height</td> </tr> <tr> <th colspan="5" class="vars_section">Previous/next action links</th> </tr> <tr> <th>@_pager-action-gradient</th> <td>@pager__gradient</td> <td class="vars_value">false</td> <td class="vars_value">true | false</td> <td>Previous/next links have gradient background</td> </tr> <tr> <th>@_pager-action-gradient-direction</th> <td>@pager__gradient-direction</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | vertical | horizontal</td> <td>Direction of background gradient (if there is any) of previous/next links</td> </tr> <tr> <th colspan="5" class="vars_section">Previous/next action links - default</th> </tr> <tr> <th>@_pager-action-color</th> <td>@pager-action__color</td> <td class="vars_value">@text__color__muted</td> <td class="vars_value">'' | false | value</td> <td>Pager action color</td> </tr> <tr> <th>@_pager-action-border</th> <td>@pager-action__border</td> <td class="vars_value">@border-width__base solid @border-color__base</td> <td class="vars_value">'' | false | value</td> <td>Pager action border</td> </tr> <tr> <th>@_pager-action-text-decoration</th> <td>@pager-action__text-decoration</td> <td class="vars_value">@pager__text-decoration</td> <td class="vars_value">'' | false | value</td> <td>Pager action text decoration</td> </tr> <tr> <th>@_pager-action-background</th> <td>@pager-action__background</td> <td class="vars_value">@pager__background</td> <td class="vars_value">'' | false | value</td> <td>Pager action background</td> </tr> <tr> <th>@_pager-action-gradient-color-start</th> <td>@pager__gradient-color-start</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Pager action gradient start color</td> </tr> <tr> <th>@_pager-action-gradient-color-end</th> <td>@pager__gradient-color-end</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Pager action gradient end color</td> </tr> <tr> <th colspan="5" class="vars_section">Previous/next action links - visited</th> </tr> <tr> <th>@_pager-action-color-visited</th> <td>@pager-action__visited__color</td> <td class="vars_value">@pager-action__color</td> <td class="vars_value">'' | false | value</td> <td>Pager action visited color</td> </tr> <tr> <th>@_pager-action-border-visited</th> <td>@pager-action__visited__border</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Pager action visited border</td> </tr> <tr> <th>@_pager-action-background-visited</th> <td>@pager-action__visited__background</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Pager action visited background</td> </tr> <tr> <th nowrap="nowrap">@_pager-action-gradient-color-start-visited</th> <td>@pager__visited__gradient-color-start</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Pager action visited gradient start color</td> </tr> <tr> <th>@_pager-action-gradient-color-end-visited</th> <td>@pager__visited__gradient-color-end</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Pager action visited gradient end color</td> </tr> <tr> <th colspan="5" class="vars_section">Previous/next action links - hover</th> </tr> <tr> <th>@_pager-action-color-hover</th> <td>@pager-action__hover__color</td> <td class="vars_value">@pager-action__color</td> <td class="vars_value">'' | false | value</td> <td>Pager action hover color</td> </tr> <tr> <th>@_pager-action-border-hover</th> <td>@pager-action__hover__border</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Pager action hover border</td> </tr> <tr> <th>@_pager-action-text-decoration-hover</th> <td>@pager-action__hover__text-decoration</td> <td class="vars_value" nowrap="nowrap">@pager__hover__text-decoration</td> <td class="vars_value">'' | false | value</td> <td>Pager action hover text decoration</td> </tr> <tr> <th>@_pager-action-background-hover</th> <td>@pager-action__hover__background</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Pager action hover background</td> </tr> <tr> <th nowrap="nowrap">@_pager-action-gradient-color-start-hover</th> <td>@pager__hover__gradient-color-start</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Pager action hover gradient start color</td> </tr> <tr> <th nowrap="nowrap">@_pager-action-gradient-color-end-hover</th> <td>@pager__hover__gradient-color-end</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Pager action hover gradient end color</td> </tr> <tr> <th colspan="5" class="vars_section">Previous/next action links - active</th> </tr> <tr> <th>@_pager-action-color-active</th> <td>@pager-action__active__color</td> <td class="vars_value">@pager-action__color</td> <td class="vars_value">'' | false | value</td> <td>Pager action active color</td> </tr> <tr> <th>@_pager-action-border-active</th> <td>@pager-action__active__border</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Pager action active border</td> </tr> <tr> <th>@_pager-action-background-active</th> <td>@pager-action__active__background</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Pager action active background</td> </tr> <tr> <th nowrap="nowrap">@_pager-action-gradient-color-start-active</th> <td>@pager__active__gradient-color-start</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Pager action active gradient start color</td> </tr> <tr> <th nowrap="nowrap">@_pager-action-gradient-color-end-active</th> <td>@pager__active__gradient-color-end</td> <td class="vars_value">false</td> <td class="vars_value">'' | false | value</td> <td>Pager action active gradient end color</td> </tr> </table> </pre> </div></article><article id="pagination-with-label-and-gradient-background-on-links" class="section"><div class="docs"><a href="#pagination-with-label-and-gradient-background-on-links" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="pagination-with-label-and-gradient-background-on-links">Pagination with label and gradient background on links</h1> <p> To display label set:</p> <pre><code class="lang-css"> @_pager-label-display: inline-block</code></pre> <p> To set up gradient background on pages numbers use:</p> <pre><code class="lang-css"> @_pager-gradient: true</code></pre> <p> To set gradient start and end colors for default and hovered link states use:</p> <pre><code class="lang-css"> @_pager-gradient-color-start: #f4f4f4 @_pager-gradient-color-end: #ccc @_pager-gradient-color-start-hover: #ccc @_pager-gradient-color-end-hover: #f4f4f4</code></pre> <p> To set an icon on "previous" and "next" links use:</p> <pre><code class="lang-css"> @_pager-icon-use: true @_pager-icon-previous-content: @icon-prev @_pager-icon-next-content: @icon-next</code></pre> <textarea class="preview-code" spellcheck="false"> <div class="example-pages-1"> <strong class="label" id="paging-label">Page</strong> <ul class="items" aria-labelledby="paging-label"> <li class="item"> <a href="1" class="action previous"> <span class="label">Page</span> <span>Previous</span> </a> </li> <li class="item"> <a href="1" class="page"> <span class="label">Page</span> <span>1</span> </a> </li> <li class="item current"> <strong class="page"> <span class="label">You're currently reading page</span> <span>2</span> </strong> </li> <li class="item"> <a href="1" class="page"> <span class="label">Page</span> <span>3</span> </a> </li> <li class="item"> <a href="1" class="action next"> <span class="label">Page</span> <span>Next</span> </a> </li> </ul> </div></textarea> </div><div class="code"><pre><code>.example-pages-1 { .lib-pager( @_pager-font-size: 12px, @_pager-label-display: inline-block, @_pager-item-margin: 0 3px, @_pager-gradient: true, @_pager-gradient-direction: vertical, @_pager-color: #333, @_pager-gradient-color-start: #f4f4f4, @_pager-gradient-color-end: #ccc, @_pager-border: 1px solid darken(#ccc, 10%), @_pager-color-hover: #333, @_pager-gradient-color-start-hover: #ccc, @_pager-gradient-color-end-hover: #f4f4f4, @_pager-border-hover: 1px solid darken(#ccc, 20%), @_pager-action-gradient: false, @_pager-current-color: #f7b32e, @_pager-current-border: 1px solid darken(#1979c3, 10%), @_pager-current-background: #1979c3, @_pager-icon-use: true, @_pager-icon-previous-content: @icon-prev, @_pager-icon-next-content: @icon-next, @_pager-icon-font-size: 30px, @_pager-action-color-hover: #ff5501 ); }</code></pre></div></article><article id="pagination-with-previousnext-text-links-and-label" class="section"><div class="docs"><a href="#pagination-with-previousnext-text-links-and-label" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="pagination-with-previousnext-text-links-and-label">Pagination with "previous"..."next" text links and label</h1> <p> Text view of pagination without borders, backgrounds and icons</p> <p> Disable icon use for "previous" and "next" links</p> <pre><code class="lang-css"> @_pager-icon-use: false</code></pre> <p> Display pager label</p> <pre><code class="lang-css"> @_pager-label-display: inline-block</code></pre> <textarea class="preview-code" spellcheck="false"> <div class="example-pages-2"> <strong class="label" id="paging-label">Page</strong> <ul class="items" aria-labelledby="paging-label"> <li class="item"> <a href="1" class="action previous"> <span class="label">Page</span> <span>Previous</span> </a> </li> <li class="item"> <a href="1" class="page"> <span class="label">Page</span> <span>1</span> </a> </li> <li class="item current"> <strong class="page"> <span class="label">You're currently reading page</span> <span>2</span> </strong> </li> <li class="item"> <a href="1" class="page"> <span class="label">Page</span> <span>3</span> </a> </li> <li class="item"> <a href="1" class="action next"> <span class="label">Page</span> <span>Next</span> </a> </li> </ul> </div></textarea> </div><div class="code"><pre><code>.example-pages-2 { .lib-pager( @_pager-label-display: inline-block, @_pager-icon-use: false ); }</code></pre></div></article><article id="pagination-without-label-with-solid-background" class="section"><div class="docs"><a href="#pagination-without-label-with-solid-background" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="pagination-without-label-with-solid-background">Pagination without label, with solid background</h1> <p> Pagination without label, with solid background and icons on previous/next links</p> <p> Hide pager label:</p> <pre><code class="lang-css"> @_pager-label-display: none</code></pre> <p> To set background and font colors for default, visited, hover, active states, use:</p> <pre><code class="lang-css"> @_pager-color: #fff, @_pager-background: @link__color, @_pager-color-visited: #fff, @_pager-background-visited: @link__visited__color, @_pager-color-hover: #fff, @_pager-background-hover: @link__hover__color, @_pager-color-active: #fff, @_pager-background-active: @link__active__color, @_pager-current-color: #fff, @_pager-current-background: @link__visited__color, @_pager-action-background: @link__color, @_pager-icon-font-color: #fff, @_pager-action-background-visited: @link__visited__color</code></pre> <p> To set current page background and font color, use:</p> <pre><code class="lang-css"> @_pager-current-color: #fff, @_pager-current-background: @link__visited__color</code></pre> <p> To set background and icon color for default, visited, hover, active states of "previous" and "next" links, use:</p> <pre><code class="lang-css"> @_pager-action-background: @link__color, @_pager-action-background-visited: @link__visited__color, @_pager-action-background-hover: @link__hover__color, @_pager-action-background-active: @link__active__color, @_pager-icon-font-color: #fff, @_pager-icon-font-color-visited: #fff, @_pager-icon-font-color-hover: #fff, @_pager-icon-font-color-active: #fff</code></pre> <textarea class="preview-code" spellcheck="false"> <div class="example-pages-3"> <strong class="label" id="paging-label">Page</strong> <ul class="items" aria-labelledby="paging-label"> <li class="item"> <a href="1" class="action previous"> <span class="label">Page</span> <span>Previous</span> </a> </li> <li class="item"> <a href="1" class="page"> <span class="label">Page</span> <span>1</span> </a> </li> <li class="item current"> <strong class="page"> <span class="label">You're currently reading page</span> <span>2</span> </strong> </li> <li class="item"> <a href="1" class="page"> <span class="label">Page</span> <span>3</span> </a> </li> <li class="item"> <a href="1" class="action next"> <span class="label">Page</span> <span>Next</span> </a> </li> </ul> </div></textarea> </div><div class="code"><pre><code>.example-pages-3 { .lib-pager( @_pager-label-display: none, @_pager-color: #fff, @_pager-background: @link__color, @_pager-color-visited: #fff, @_pager-background-visited: @link__visited__color, @_pager-color-hover: #fff, @_pager-background-hover: @link__hover__color, @_pager-color-active: #fff, @_pager-background-active: @link__active__color, @_pager-current-color: #fff, @_pager-current-background: @link__visited__color, @_pager-action-background: @link__color, @_pager-action-background-visited: @link__visited__color, @_pager-action-background-hover: @link__hover__color, @_pager-action-background-active: @link__active__color, @_pager-action-color: #fff, @_pager-action-color-hover: #fff, @_pager-action-color-active: #fff ); }</code></pre></div></article></section><div class="bar bottom"><div hidden class="settings container"><!-- Icons from http://iconmonstr.com--><button title="Desktop (1280)" data-width='1280'><svg vie … [Строка слишком длинная. Вы можете скачать файл]