Foundation - Pagination SASS Reference

Variables

You can change the styles of the components by using the following SASS variables as listed in the table.

Sr.No.	Name & Description	Type	Default Value
1	$pagination-font-size Sets font size of pagination.	Number	rem-calc(14)
2	$pagination-margin-bottom Sets default margin for bottom of media object.	Number	$global-margin
3	$pagination-item-color Sets color for the text of pagination item.	Color	$black
4	$pagination-item-padding Sets padding inside the pagination item.	Number	rem-calc(3 10)
5	$pagination-item-spacing Sets margin at right to keep space in pagination item.	Number	rem-calc(1)
6	$pagination-radius Sets Default radius	Number	$global-radius
7	$pagination-item-background-hover Set background color on hover.	Color	$light-gray
8	$pagination-item-background-current Set background color for current page of pagination item.	Color	$primary-color
9	$pagination-item-color-current Set text color for the current page.	Color	foreground($pagination-item-background-current)
10	$pagination-item-color-disabled Set text color for the disabled pagination item.	Color	$medium-gray
11	$pagination-ellipsis-color Set ellipsis color.	Color	$black
12	$pagination-mobile-items Display only previous/next button in mobile screen.	Boolean	false
13	$pagination-arrows Arrows are included in the previous and next links of pagination.	Boolean	true

You can use the mixins to build the CSS class structure for your components as listed in the table.

Styles are included in the pagination container. It is applied to <ul>

@include pagination-container;

Styles are included for the current pagination item. It is applied to <a>

@include pagination-item-current;

Styles are included for a disabled pagination. It is applied to <a>

@include pagination-item-disabled;

Styles are included for ellipsis for use in a pagination list.

@include pagination-ellipsis;

foundation_navigation.htm

Print Page