CSS Pagination

	                <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 in your config folder the following map. By default de values are the indicated here.

 $object-pagination-vars-custom: (

// 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,
color-page: $color-foreground,
background-color-page: $color-box,
border-width-page: 1px,
border-style-page: solid,
border-color-page: $color-box,
border-radius-page: $default-border-radius,

// Page active
background-color-active: $color-background,
color-active: $color-foreground,
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;