Pagination
The right page
<nav class="pagination">
<ul>
<li><a title="First" href="#tab1"><i class="icon-fast-backward"></i></a></li>
<li><a title="Prev" href="#tab1"><i class="icon-step-backward"></i></a></li>
<li class="active"><a title="Page 1" href="#tab2">1</a></li>
<li><a title="Page 2" href="#tab3">2</a></li>
<li><a title="Page 3" href="#tab3">3</a></li>
<li><a title="Page 4" href="#tab3">4</a></li>
<li><a title="Page 5" href="#tab3">5</a></li>
<li><a title="Page 6" href="#tab3">6</a></li>
<li><a title="Page 7" href="#tab3">7</a></li>
<li><a title="Page 8" href="#tab3">8</a></li>
<li><a title="Page 9" href="#tab3">9</a></li>
<li><a title="Page 10" href="#tab3">10</a></li>
<li><a title="Next" href="#tab1"><i class="icon-step-forward"></i></a></li>
<li><a title="Last" href="#tab1"><i class="icon-fast-forward"></i></a></li>
</ul>
</nav>Customize the appearance
You can customize the appearance of this object by setting up the vars-custom map for this object. By default de values are the vars-default values.
$object-pagination-vars-default: (
/* Page container */
font-family: $font-face-default,
font-size: $font-size-default,
font-weight: normal,
border-radius: $default-border-radius,
background-color: transparent,
color: $color-foreground,
text-align: center,
padding: 0,
/* Page item */
padding-page: $spacing/4,
min-width-page: $spacing/1.5,
color-page: $color-foreground,
background-color-page: transparent,
border-width-page: 0px,
border-style-page: none,
border-color-page: $color-box,
border-radius-page: $default-border-radius,
/* Page active */
background-color-active: $color-primary,
color-active: contrast-color($color-primary),
border-color-active: rgba($color-foreground, .1),
font-weight-active: bold,
/* Page hover */
background-color-hover: $color-link,
color-hover: contrast-color($color-link),
) !global !default;
$object-pagination-vars-custom: () !global !default;
$object-pagination-vars: map-merge($object-pagination-vars-default, $object-pagination-vars-custom) !global;