Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory : /home/corals/old/vendor/magento/magento2-base/lib/web/css/docs/source/ |
// /**
// * Copyright © Magento, Inc. All rights reserved.
// * See COPYING.txt for license details.
// */
// # Pagination HTML markup
// Pagination is used to display numbers of pages in case content exceeds page limits. The markup corresponds to accessibility demands.
//
// Required HTML markup:
// ```html
// <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>
// ```
.pages {
.lib-pager();
}
// # Pagination variables
//
// <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>
// # Pagination with label and gradient background on links
//
// To display label set:
// ```css
// @_pager-label-display: inline-block
// ```
// To set up gradient background on pages numbers use:
// ```css
// @_pager-gradient: true
// ```
// To set gradient start and end colors for default and hovered link states use:
// ```css
// @_pager-gradient-color-start: #f4f4f4
// @_pager-gradient-color-end: #ccc
// @_pager-gradient-color-start-hover: #ccc
// @_pager-gradient-color-end-hover: #f4f4f4
// ```
// To set an icon on "previous" and "next" links use:
// ```css
// @_pager-icon-use: true
// @_pager-icon-previous-content: @icon-prev
// @_pager-icon-next-content: @icon-next
// ```
// ```html
// <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>
// ```
.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
);
}
// # Pagination with "previous"..."next" text links and label
//
// Text view of pagination without borders, backgrounds and icons
//
// Disable icon use for "previous" and "next" links
// ```css
// @_pager-icon-use: false
// ```
// Display pager label
// ```css
// @_pager-label-display: inline-block
// ```
// ```html
// <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>
// ```
.example-pages-2 {
.lib-pager(
@_pager-label-display: inline-block,
@_pager-icon-use: false
);
}
// # Pagination without label, with solid background
//
// Pagination without label, with solid background and icons on previous/next links
//
// Hide pager label:
// ```css
// @_pager-label-display: none
// ```
// To set background and font colors for default, visited, hover, active states, use:
// ```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
// ```
// To set current page background and font color, use:
// ```css
// @_pager-current-color: #fff,
// @_pager-current-background: @link__visited__color
// ```
// To set background and icon color for default, visited, hover, active states of "previous" and "next" links, use:
// ```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
// ```
//
// ```html
// <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>
// ```
.example-pages-3 {
.lib-pager(
@_pager-label-display: none,
@_pager-color: @color-white,
@_pager-background: @link__color,
@_pager-color-visited: @color-white,
@_pager-background-visited: @link__visited__color,
@_pager-color-hover: @color-white,
@_pager-background-hover: @link__hover__color,
@_pager-color-active: @color-white,
@_pager-background-active: @link__active__color,
@_pager-current-color: @color-white,
@_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: @color-white,
@_pager-action-color-hover: @color-white,
@_pager-action-color-active: @color-white
);
}