<div class="pagination-controls">
<div class="pagination-controls-inner">
<!-- we can add up to here -->
<span class="currentpage">1</span>
<a href="#">2</a>
<a href="#">></a>
<a href="#">>></a>
<!-- we can add after here -->
</div>
</div>
<div class="pagination-controls">
<div class="pagination-controls-inner">
<!-- we can add up to here -->
<span class="currentpage">1</span>
<a href="#">2</a>
<a href="#">></a>
<a href="#">>></a>
<!-- we can add after here -->
</div>
</div>
/* No context defined for this component. */
/*
Bring our T4 out of the box pagination up to scratch pagination
/*/
$('.pagination-controls').each(function () {
$('a', $(this)).each(function(){
var text = $(this).html();
if (text == '>') {
$(this).html('Next <i class="uod-icons uod-icons-chevron-right"></i>');
}
if (text == '>>') {
$(this).html('Last <i class="uod-icons uod-icons-chevron-right"></i><i class="uod-icons uod-icons-chevron-right"></i>');
}
if (text == '<') {
$(this).html('<i class="uod-icons uod-icons-chevron-left"></i> Prev');
}
if (text == '<<') {
$(this).html('<i class="uod-icons uod-icons-chevron-left"></i><i class="uod-icons uod-icons-chevron-left"></i> First');
}
if ($('.button-overlay', $(this)).length == 0) {
var text = $(this).html(); //get the text again incase it has changed
$(this).html(text + '<span class="button-overlay"><span>' + text + '</span></span>');
}
});
});
.pagination-controls {
@include margin-large;
text-align: right;
a {
@extend %button;
@extend %button-overlay;
&:last-child {
margin-right: 10px;
}
.button-overlay {
background: $mid-blue;
color: $white;
}
.uod-icons {
margin-right: 0;
vertical-align: sub;
}
}
&-inner {
margin-right: -10px;
> span:not(.spacer) {
@extend .button-blue;
}
}
&-section-iterator {
a {
&:first-child:before(),
&:first-child .button-overlay > span:before() {
@extend %uod-icons;
content: $uod-icons-chevron-left;
vertical-align: sub;
margin-right: 0.3em;
}
&:last-child {
padding-right: calc(1.3em + 11px);
.button-overlay > span {
padding-right: calc(1.3em + 11px);
}
&:before(),
.button-overlay > span:before() {
@extend %uod-icons;
content: $uod-icons-chevron-right;
vertical-align: sub;
margin-left: 0.3em;
position: absolute;
right: 1em;
top: 50%;
margin-top: -9px;
}
}
}
}
}
/*
For go live listing pages as per the designs aren't possible
Using listing pages generated in T4 we want to give pagination controls the same behaviour as a text block
*/
.center-align > .pagination-controls {
// mixin that sets a consistent columns width
@include uod-text-column;
}
There are no notes for this item.