Sha256: 65fe9fc4149b969047f53f9a935b715cb726b91076e6cc808585f310fee65fe3
Contents?: true
Size: 1.93 KB
Versions: 5
Compression:
Stored size: 1.93 KB
Contents
/*
Pager
Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.
By default, the pager centers links.
Markup:
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
Styleguide 13
*/
@if $pager {
.pager {
@include clearfix();
list-style: none;
margin: rhythm() 0;
text-align: center;
li {
display: inline;
a,
span {
@include border-radius($base-border-radius);
border-style: solid;
border-width: 1px;
display: inline-block;
line-height: 1em;
padding: $pager-padding;
@extend %pager--btn !optional;
}
a:hover,
a:focus {
@extend %pager--btn__hover !optional;
}
a:active {
@extend %pager--btn__active !optional;
}
}
/*
Alignment
Alternatively, you can align each link to the sides:
Markup:
<ul class="pager">
<li class="previous"><a href="#">Previous</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
Styleguide 13.1
*/
[rel="next"],
.next > a,
.next > span {
float: right;
}
[rel="prev"],
.previous > a,
.previous > span {
float: left;
}
/*
Disabled state
Pager links also use the general `.disabled` utility class from the pagination.
Markup:
<ul class="pager">
<li class="previous disabled"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul>
Styleguide 13.2
*/
.disabled > a,
.disabled > a:hover,
.disabled > a:focus,
.disabled > span {
cursor: default;
@extend %pager--btn__disabled !optional;
}
}
}
Version data entries
5 entries across 5 versions & 1 rubygems