Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
A modular UI component example
// ----
// 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