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;