- Foundation Tutorial
- Foundation - Home
- Foundation - Overview
- Foundation - Installation
- Foundation - Starter Projects
- Foundation - Kitchen Sink
- Foundation General
- Foundation - Global Styles
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript Utilities
- Foundation - Media Queries
- Foundation - The Grid
- Foundation - Flex Grid
- Foundation - Forms
- Foundation - Visibility Classes
- Foundation - Base Typography
- Foundation - Typography Helpers
- Foundation - Basic Controls
- Foundation - Navigation
- Foundation - Containers
- Foundation - Media
- Foundation - Plugins
- Foundation SASS
- Foundation - Sass Functions
- Foundation - Sass Mixins
- Foundation Libraries
- Foundation - Motion UI
- Foundation Useful Resources
- Foundation - Quick Guide
- Foundation - Useful Resources
- Foundation - Discussion
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 |
Mixins
You can use the mixins to build the CSS class structure for your components as listed in the table.
pagination-container
Styles are included in the pagination container. It is applied to <ul>
@include pagination-container;
pagination-item-current
Styles are included for the current pagination item. It is applied to <a>
@include pagination-item-current;
pagination-item-disabled
Styles are included for a disabled pagination. It is applied to <a>
@include pagination-item-disabled;
pagination-ellipsis
Styles are included for ellipsis for use in a pagination list.
@include pagination-ellipsis;