// ---- | |
// libsass (v3.2.5) | |
// ---- | |
// Set file variable | |
$filename: 'scss/blocks/_pagination.scss'; | |
//////////////////////////////////////////////////////////////////////////////// | |
// @Pagination Map | |
//////////////////////////////////////////////////////////////////////////////// | |
$pagination: ( | |
'classes': true, | |
'class': 'pagination', | |
'class-active': 'active', | |
'class-sep': 'sep', | |
'margin': 1em, | |
'spacing': 0.5em, | |
'font-size': 12px, | |
'font-family': (helvetica, arial, sans-serif), | |
'text-align': center, | |
'color': #aaa, | |
'link-color': #16a6e4, | |
'link-color-hover': #fff, | |
'link-background': #efefef, | |
'link-background-hover': #16a6e4, | |
'link-padding': 0.75em 1em, | |
'link-border': null, | |
'link-border-radius': 3px, | |
) !default; | |
//////////////////////////////////////////////////////////////////////////////// | |
// @Pagination Mixins | |
//////////////////////////////////////////////////////////////////////////////// | |
// Make Pagination | |
// Creates the base styles for pagination. | |
// @param $options | |
// @type map | |
// @default $pagination map | |
@mixin make-pagination($options: ()) { | |
$o: map-merge($pagination, $options); | |
display: block; | |
ul { | |
display: inline-block; | |
margin: map-get($o, 'margin') (-(map-get($o, 'spacing'))) (map-get($o, 'margin') - map-get($o, 'spacing')) 0; | |
padding: 0; | |
list-style: none; | |
&:after { | |
content: ''; | |
display: table; | |
clear: both; | |
} | |
} | |
ul li { | |
float: left; | |
margin: 0 map-get($o, 'spacing') map-get($o, 'spacing') 0; | |
} | |
} | |
// Add Pagination Style | |
// Creates the stylized pagination. | |
// @param $options | |
// @type map | |
// @default $pagination map | |
@mixin add-pagination-style($options: ()) { | |
$o: map-merge($pagination, $options); | |
font-family: map-get($o, 'font-family'); | |
font-size: map-get($o, 'font-size'); | |
text-align: map-get($o, 'text-align'); | |
ul li { | |
a, | |
&.#{map-get($o, 'class-sep')} { | |
display: block; | |
padding: map-get($o, 'link-padding'); | |
} | |
a { | |
background: map-get($o, 'link-background'); | |
border: map-get($o, 'link-border'); | |
border-radius: map-get($o, 'link-border-radius'); | |
text-decoration: none; | |
color: map-get($o, 'link-color'); | |
} | |
a:hover, | |
&.#{map-get($o, 'class-active')} a { | |
background: map-get($o, 'link-background-hover'); | |
color: map-get($o, 'link-color-hover'); | |
} | |
&.#{map-get($o, 'class-sep')} { | |
color: map-get($o, 'color'); | |
} | |
} | |
} | |
// Check if we should output classes | |
@if (map-get($pagination, 'classes') == true) { | |
/*============================================================================== | |
@Pagination - #{$filename} | |
==============================================================================*/ | |
.#{map-get($pagination, 'class')} { | |
@include make-pagination(); | |
@include add-pagination-style(); | |
} | |
} // endif classes |
/*============================================================================== | |
@Pagination - scss/blocks/_pagination.scss | |
==============================================================================*/ | |
.pagination { | |
display: block; | |
font-family: helvetica, arial, sans-serif; | |
font-size: 12px; | |
text-align: center; | |
} | |
.pagination ul { | |
display: inline-block; | |
margin: 1em -0.5em 0.5em 0; | |
padding: 0; | |
list-style: none; | |
} | |
.pagination ul:after { | |
content: ''; | |
display: table; | |
clear: both; | |
} | |
.pagination ul li { | |
float: left; | |
margin: 0 0.5em 0.5em 0; | |
} | |
.pagination ul li a, | |
.pagination ul li.sep { | |
display: block; | |
padding: 0.75em 1em; | |
} | |
.pagination ul li a { | |
background: #efefef; | |
border-radius: 3px; | |
text-decoration: none; | |
color: #16a6e4; | |
} | |
.pagination ul li a:hover, | |
.pagination ul li.active a { | |
background: #16a6e4; | |
color: #fff; | |
} | |
.pagination ul li.sep { | |
color: #aaa; | |
} |
<nav class="pagination"> | |
<ul> | |
<li><a href="#">1</a></li> | |
<li class="active"><a href="#">2</a></li> | |
<li><a href="#">3</a></li> | |
<li><a href="#">4</a></li> | |
<li><a href="#">5</a></li> | |
<li class="sep">...</li> | |
<li><a href="#">10</a></li> | |
<li><a href="#">Next</a></li> | |
</ul> | |
</nav> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment