Pagination
Pagination component pack for Seed
Install
npm install seed-pagination --save
Dependencies
Example
<nav>
<ul class="c-pagination">
<li class="c-pagination__item is-disabled">
<a href="#" class="c-pagination__link">
Previous
</a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__link">
1
</a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__link">
2
</a>
</li>
<li class="c-pagination__item is-active">
<a href="#" class="c-pagination__link">
3
</a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__link">
Next
</a>
</li>
</ul>
</nav>Modifiers
Alignment
These size modifier classes support responsive modifiers.
<nav>
<ul class="c-pagination c-pagination--left">
<li class="c-pagination__item is-disabled">
<a href="#" class="c-pagination__link">
Previous
</a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__link">
1
</a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__link">
2
</a>
</li>
<li class="c-pagination__item is-active">
<a href="#" class="c-pagination__link">
3
</a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__link">
Next
</a>
</li>
</ul>
</nav>
<nav>
<ul class="c-pagination c-pagination--center">
<li class="c-pagination__item is-disabled">
<a href="#" class="c-pagination__link">
Previous
</a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__link">
1
</a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__link">
2
</a>
</li>
<li class="c-pagination__item is-active">
<a href="#" class="c-pagination__link">
3
</a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__link">
Next
</a>
</li>
</ul>
</nav>
<nav>
<ul class="c-pagination c-pagination--right">
<li class="c-pagination__item is-disabled">
<a href="#" class="c-pagination__link">
Previous
</a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__link">
1
</a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__link">
2
</a>
</li>
<li class="c-pagination__item is-active">
<a href="#" class="c-pagination__link">
3
</a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__link">
Next
</a>
</li>
</ul>
</nav><div class="c-pagination c-pagination--left">...</div>
<div class="c-pagination c-pagination--center">...</div>
<div class="c-pagination c-pagination--right">...</div>
Sizing
Large
<nav>
<ul class="c-pagination c-pagination--lg">
<li class="c-pagination__item is-disabled">
<a href="#" class="c-pagination__link">
Previous
</a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__link">
1
</a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__link">
2
</a>
</li>
<li class="c-pagination__item is-active">
<a href="#" class="c-pagination__link">
3
</a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__link">
Next
</a>
</li>
</ul>
</nav><div class="c-pagination c-pagination--lg">...</div>
Medium
<nav>
<ul class="c-pagination c-pagination--md">
<li class="c-pagination__item is-disabled">
<a href="#" class="c-pagination__link">
Previous
</a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__link">
1
</a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__link">
2
</a>
</li>
<li class="c-pagination__item is-active">
<a href="#" class="c-pagination__link">
3
</a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__link">
Next
</a>
</li>
</ul>
</nav><div class="c-pagination c-pagination--md">...</div>
Small
<nav>
<ul class="c-pagination c-pagination--sm">
<li class="c-pagination__item is-disabled">
<a href="#" class="c-pagination__link">
Previous
</a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__link">
1
</a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__link">
2
</a>
</li>
<li class="c-pagination__item is-active">
<a href="#" class="c-pagination__link">
3
</a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__link">
Next
</a>
</li>
</ul>
</nav><div class="c-pagination c-pagination--sm">...</div>
Configurations
Below are the default Sass configuration variables for seed-pagination. The variables can be found in the pack’s _config.scss file.
seed-pagination/_config.scss// Dependencies
@import "pack/seed-button/config";
@import "pack/seed-dash/_index";
// Namespaces
$seed-pagination-namespace: c-pagination !default;
$seed-pagination-item-namespace: #{$seed-pagination-namespace}__item !default;
$seed-pagination-link-namespace: #{$seed-pagination-namespace}__link !default;
// Configs
$seed-pagination-border-radius: $seed-button-border-radius !default;
$seed-pagination-padding: 0 0.75em !default;
// $seed-button-color config:
// https://github.com/helpscout/seed-button#options
$seed-pagination-link-color: _extend($seed-button-color, (
background: (
default: #fff,
hover: #f9f9f9,
active: #3197D6,
active-hover: #237AB3,
),
border: (
default: #ddd,
hover: #ddd,
active: #3197D6,
focus: #3197D6,
active-hover: #237AB3,
),
box-shadow: (
focus: 0 0 0 1px rgba(white, 0.4) inset,
),
text: (
default: #3197D6,
hover: #1F5E89,
active: #fff,
disabled: #72808E,
),
)) !default;
// Alignment
$seed-pagination-alignment: (
left: flex-start,
center: center,
right: flex-end,
) !default;