Pagination HTML markup

Pagination is used to display numbers of pages in case content exceeds page limits. The markup corresponds to accesibility demands.

Required HTML markup:

.pages {
    .lib-pager();
}

Pagination variables

    
Mixin variable Default value Allowed values Comment
@_pager-label-display none none | block | inline-block The 'page' label is displayed
@_pager-item-display inline-block none | block | inline-block The pager item label is displayed
@_pager-reset-spaces true true | false Reset spaces between inline-block elements if elements 'display' is set to 'inline-block'
@_pager-font-size @font-size__s '' | false | value Pager font size
@_pager-font-weight @font-weight__bold '' | false | value Pager font weight
@_pager-line-height 32px '' | false | value Pager line height
@_pager-item-margin 0 2px 0 0 '' | false | value Pager item margin
@_pager-item-padding 0 4px '' | false | value Pager item padding
@_pager-actions-padding 0 '' | false | value Pager actions padding
Pager current page
@_pager-current-font-weight @font-weight__bold; '' | false | value Current page number font weight
@_pager-current-color @primary__color '' | false | value Current page number color
@_pager-current-border false '' | false | value Current page number border
@_pager-current-background false '' | false | value Current page number background
@_pager-current-gradient false true | false Current page number has gradient background
@_pager-current-gradient-direction false '' | false | vertical | horizontal Direction of current page number background gradient (if there is any)
@_pager-current-gradient-color-start false '' | false | value Current page number gradient start color
@_pager-current-gradient-color-end false '' | false | value Current page number gradient end color
Link to page number
@_pager-gradient false true | false Pager items have gradient background
@_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 @link__color '' | false | value Pager item color
@_pager-border false '' | false | value Pager item border
@_pager-text-decoration none '' | false | value Pager item text decoration
@_pager-background false '' | false | value Pager item background
@_pager-gradient-color-start false '' | false | value Pager item gradient start color
@_pager-gradient-color-end false '' | false | value Pager item gradient end color
Link to page number - visited
@_pager-color-visited @link__visited__color '' | false | value Pager item visited color
@_pager-border-visited false '' | false | value Pager item visited border
@_pager-background-visited false '' | false | value Pager item visited background
@_pager-gradient-color-start-visited false '' | false | value Pager item visited gradient start color
@_pager-gradient-color-end-visited false '' | false | value Pager item visited gradient end color
Link to page number - hover
@_pager-color-hover @link__hover__color   Pager item hover color
@_pager-border-hover false '' | false | value Pager item hover border
@_pager-text-decoration-hover none '' | false | value Pager item hover text decoration
@_pager-background-hover false '' | false | value Pager item hover background
@_pager-gradient-color-start-hover false '' | false | value Pager item hover gradient start color
@_pager-gradient-color-end-hover false '' | false | value Pager item hover gradient end color
Link to page number - active
@_pager-color-active @link__hover__color '' | false | value Pager item active color
@_pager-border-active false '' | false | value Pager item active border
@_pager-background-active false '' | false | value Pager item active background
@_pager-gradient-color-start-active false '' | false | value Pager item active gradient start color
@_pager-gradient-color-end-active false '' | false | value Pager item active gradient end color
Previous/next action links - icons
@_pager-icon-use true true | false previous/next links have icons
@_pager-icon-previous-content @icon-prev '' | false | value "previous" link icon
@_pager-icon-next-content @icon-next '' | false | value "next" link icon
@_pager-icon-text-hide true true | false The "previous" and "next" words are hidden
@_pager-icon-position before before | after Icon position
@_pager-icon-font @icon-font '' | false | value Icon font
@_pager-icon-font-margin 0 0 0 -6px '' | false | value Icon font margin
@_pager-icon-font-vertical-align top '' | false | value Icon font vertical align
@_pager-icon-font-size 46px '' | false | value Icon font size
@_pager-icon-font-line-height @icon-font__line-height '' | false | value Icon font line height
Previous/next action links
@_pager-action-gradient false true | false Previous/next links have gradient background
@_pager-action-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 @text__color__muted '' | false | value Pager action color
@_pager-action-border @border-width__base solid @border-color__base '' | false | value Pager action border
@_pager-action-text-decoration @pager__text-decoration '' | false | value Pager action text decoration
@_pager-action-background @pager__background '' | false | value Pager action background
@_pager-action-gradient-color-start flase '' | false | value Pager action gradient start color
@_pager-action-gradient-color-end flase '' | false | value Pager action gradient end color
Previous/next action links - visited
@_pager-action-color-visited @pager-action__color '' | false | value Pager action visited color
@_pager-action-border-visited flase '' | false | value Pager action visited border
@_pager-action-background-visited flase '' | false | value Pager action visited background
@_pager-action-gradient-color-start-visited flase '' | false | value Pager action visited gradient start color
@_pager-action-gradient-color-end-visited flase '' | false | value Pager action visited gradient end color
Previous/next action links - hover
@_pager-action-color-hover @pager-action__color '' | false | value Pager action hover color
@_pager-action-border-hover flase '' | false | value Pager action hover border
@_pager-action-text-decoration-hover @pager__hover__text-decoration '' | false | value Pager action hover text decoration
@_pager-action-background-hover flase '' | false | value Pager action hover background
@_pager-action-gradient-color-start-hover flase '' | false | value Pager action hover gradient start color
@_pager-action-gradient-color-end-hover flase '' | false | value Pager action hover gradient end color
Previous/next action links - active
@_pager-action-color-active @pager-action__color '' | false | value Pager action active color
@_pager-action-border-active flase '' | false | value Pager action active border
@_pager-action-background-active flase '' | false | value Pager action active background
@_pager-action-gradient-color-start-active flase '' | false | value Pager action active gradient start color
@_pager-action-gradient-color-end-active flase '' | false | value Pager action active gradient end color

Pagination without label, with solid background

Pagination without label, with solid background and icons on previous/next links

Hide pager label:

  @_pager-label-display: none

To set background and font colors for default, visited, hover, active states, use:

  @_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:

  @_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:

  @_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
.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
    );
}