// /** // * 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 //
//
Mixin variable | //Global variable | //Default value | //Allowed values | //Comment | //
---|---|---|---|---|
@_pager-label-display | //@pager-label__display | //none | //none | block | inline-block | //The 'page' label is displayed | //
@_pager-item-display | //@pager-item__display | //inline-block | //none | block | inline-block | //The pager item label is displayed | //
@_pager-reset-spaces | //@pager-reset-spaces | //true | //true | false | //Reset spaces between inline-block elements if elements 'display' is set to 'inline-block' | //
@_pager-font-size | //@pager__font-size | //@font-size__s | //'' | false | value | //Pager font size | //
@_pager-font-weight | //@pager__font-weight | //@font-weight__bold | //'' | false | value | //Pager font weight | //
@_pager-line-height | //@pager__line-height | //32px | //'' | false | value | //Pager line height | //
@_pager-item-margin | //@pager-item__margin | //0 2px 0 0 | //'' | false | value | //Pager item margin | //
@_pager-item-padding | //@pager-item__padding | //0 4px | //'' | false | value | //Pager item padding | //
@_pager-actions-padding | //@pager-actions__padding | //0 | //'' | false | value | //Pager actions padding | //
Pager current page | //||||
@_pager-current-font-weight | //@pager-current__font-weight | //@font-weight__bold; | //'' | false | value | //Current page number font weight | //
@_pager-current-color | //@pager-current__color | //@primary__color | //'' | false | value | //Current page number color | //
@_pager-current-border | //@pager-current__border | //false | //'' | false | value | //Current page number border | //
@_pager-current-background | //@pager-current__background | //false | //'' | false | value | //Current page number background | //
@_pager-current-gradient | //@pager-current__gradient | //false | //true | false | //Current page number has gradient background | //
@_pager-current-gradient-direction | //@pager-current__gradient-direction | //false | //'' | false | vertical | horizontal | //Direction of current page number background gradient (if there is any) | //
@_pager-current-gradient-color-start | //@pager-current__gradient-color-start | //false | //'' | false | value | //Current page number gradient start color | //
@_pager-current-gradient-color-end | //@pager-current__gradient-color-end | //false | //'' | false | value | //Current page number gradient end color | //
Link to page number | //||||
@_pager-gradient | //@pager__gradient | //false | //true | false | //Pager items have gradient background | //
@_pager-gradient-direction | //@pager__gradient-direction | //'false | //'' | false | vertical | horizontal | //Direction of background gradient (if there is any) of pager item | //
Link to page number - default | //||||
@_pager-color | //@pager__color | //@link__color | //'' | false | value | //Pager item color | //
@_pager-border | //@pager__border | //false | //'' | false | value | //Pager item border | //
@_pager-text-decoration | //@pager__text-decoration | //none | //'' | false | value | //Pager item text decoration | //
@_pager-background | //@pager__background | //false | //'' | false | value | //Pager item background | //
@_pager-gradient-color-start | //@pager__gradient-color-start | //false | //'' | false | value | //Pager item gradient start color | //
@_pager-gradient-color-end | //@pager__gradient-color-end | //false | //'' | false | value | //Pager item gradient end color | //
Link to page number - visited | //||||
@_pager-color-visited | //@pager__visited__color | //@link__visited__color | //'' | false | value | //Pager item visited color | //
@_pager-border-visited | //@pager__visited__border | //false | //'' | false | value | //Pager item visited border | //
@_pager-background-visited | //@pager__visited__background | //false | //'' | false | value | //Pager item visited background | //
@_pager-gradient-color-start-visited | //@pager__visited__gradient-color-start | //false | //'' | false | value | //Pager item visited gradient start color | //
@_pager-gradient-color-end-visited | //@pager__visited__gradient-color-end | //false | //'' | false | value | //Pager item visited gradient end color | //
Link to page number - hover | //||||
@_pager-color-hover | //@pager__hover__color | //@link__hover__color | //// | Pager item hover color | //
@_pager-border-hover | //@pager__hover__border | //false | //'' | false | value | //Pager item hover border | //
@_pager-text-decoration-hover | //@pager__text-decoration | //none | //'' | false | value | //Pager item hover text decoration | //
@_pager-background-hover | //@pager__hover__background | //false | //'' | false | value | //Pager item hover background | //
@_pager-gradient-color-start-hover | //@pager__hover__gradient-color-start | //false | //'' | false | value | //Pager item hover gradient start color | //
@_pager-gradient-color-end-hover | //@pager__hover__gradient-color-end | //false | //'' | false | value | //Pager item hover gradient end color | //
Link to page number - active | //||||
@_pager-color-active | //@pager__active__color | //@link__hover__color | //'' | false | value | //Pager item active color | //
@_pager-border-active | //@pager__active__border | //false | //'' | false | value | //Pager item active border | //
@_pager-background-active | //@pager__active__background | //false | //'' | false | value | //Pager item active background | //
@_pager-gradient-color-start-active | //@pager__active__gradient-color-start | //false | //'' | false | value | //Pager item active gradient start color | //
@_pager-gradient-color-end-active | //@pager__active__gradient-color-end | //false | //'' | false | value | //Pager item active gradient end color | //
Previous/next action links - icons | //||||
@_pager-icon-use | //@pager-icon__use | //true | //true | false | //previous/next links have icons | //
@_pager-icon-previous-content | //@pager-icon__previous-content | //@icon-prev | //'' | false | value | //"previous" link icon | //
@_pager-icon-next-content | //@pager-icon__next-content | //@icon-next | //'' | false | value | //"next" link icon | //
@_pager-icon-font-text-hide | //@pager-icon__text-hide | //true | //true | false | //The "previous" and "next" words are hidden | //
@_pager-icon-font-position | //@pager-icon__position | //before | //before | after | //Icon position | //
@_pager-icon-font | //@pager-icon__font | //@icon-font | //'' | false | value | //Icon font | //
@_pager-icon-font-margin | //@pager-icon__font-margin | //0 0 0 -6px | //'' | false | value | //Icon font margin | //
@_pager-icon-font-vertical-align | //@pager-icon__font-vertical-align | //top | //'' | false | value | //Icon font vertical align | //
@_pager-icon-font-size | //@pager-icon__font-size | //46px | //'' | false | value | //Icon font size | //
@_pager-icon-font-line-height | //@pager-icon__font-line-height | //@icon-font__line-height | //'' | false | value | //Icon font line height | //
Previous/next action links | //||||
@_pager-action-gradient | //@pager__gradient | //false | //true | false | //Previous/next links have gradient background | //
@_pager-action-gradient-direction | //@pager__gradient-direction | //false | //'' | false | vertical | horizontal | //Direction of background gradient (if there is any) of previous/next links | //
Previous/next action links - default | //||||
@_pager-action-color | //@pager-action__color | //@text__color__muted | //'' | false | value | //Pager action color | //
@_pager-action-border | //@pager-action__border | //@border-width__base solid @border-color__base | //'' | false | value | //Pager action border | //
@_pager-action-text-decoration | //@pager-action__text-decoration | //@pager__text-decoration | //'' | false | value | //Pager action text decoration | //
@_pager-action-background | //@pager-action__background | //@pager__background | //'' | false | value | //Pager action background | //
@_pager-action-gradient-color-start | //@pager__gradient-color-start | //false | //'' | false | value | //Pager action gradient start color | //
@_pager-action-gradient-color-end | //@pager__gradient-color-end | //false | //'' | false | value | //Pager action gradient end color | //
Previous/next action links - visited | //||||
@_pager-action-color-visited | //@pager-action__visited__color | //@pager-action__color | //'' | false | value | //Pager action visited color | //
@_pager-action-border-visited | //@pager-action__visited__border | //false | //'' | false | value | //Pager action visited border | //
@_pager-action-background-visited | //@pager-action__visited__background | //false | //'' | false | value | //Pager action visited background | //
@_pager-action-gradient-color-start-visited | //@pager__visited__gradient-color-start | //false | //'' | false | value | //Pager action visited gradient start color | //
@_pager-action-gradient-color-end-visited | //@pager__visited__gradient-color-end | //false | //'' | false | value | //Pager action visited gradient end color | //
Previous/next action links - hover | //||||
@_pager-action-color-hover | //@pager-action__hover__color | //@pager-action__color | //'' | false | value | //Pager action hover color | //
@_pager-action-border-hover | //@pager-action__hover__border | //false | //'' | false | value | //Pager action hover border | //
@_pager-action-text-decoration-hover | //@pager-action__hover__text-decoration | //@pager__hover__text-decoration | //'' | false | value | //Pager action hover text decoration | //
@_pager-action-background-hover | //@pager-action__hover__background | //false | //'' | false | value | //Pager action hover background | //
@_pager-action-gradient-color-start-hover | //@pager__hover__gradient-color-start | //false | //'' | false | value | //Pager action hover gradient start color | //
@_pager-action-gradient-color-end-hover | //@pager__hover__gradient-color-end | //false | //'' | false | value | //Pager action hover gradient end color | //
Previous/next action links - active | //||||
@_pager-action-color-active | //@pager-action__active__color | //@pager-action__color | //'' | false | value | //Pager action active color | //
@_pager-action-border-active | //@pager-action__active__border | //false | //'' | false | value | //Pager action active border | //
@_pager-action-background-active | //@pager-action__active__background | //false | //'' | false | value | //Pager action active background | //
@_pager-action-gradient-color-start-active | //@pager__active__gradient-color-start | //false | //'' | false | value | //Pager action active gradient start color | //
@_pager-action-gradient-color-end-active | //@pager__active__gradient-color-end | //false | //'' | false | value | //Pager action active gradient end color | //