1. Pagination buttons w/title
There are a lot of little parts here to make this UI. The <ul> block requires both the .pagination and .linkBox classes. .pagination is the primary class that drives the UI. .linkBox drives a JS feature that enables the entire <li> to be clickable, thus increasing the target area.
.pagination has the -box-pack: end attribute that moves all the pagination elements to the right. In order to inset any content to the left, insert another <li> tag with the .pagination_left class.
Only default spacing is surrounding this element. Over-ride at the screen template level as needed.
Example code:
<ul class="pagination linkBox">
<li class="pagination_left">
<h4>This is a title</h4>
</li>
<li>Page</li>
<li><input type="text" title="tool tip message" maxlength="3"/></li>
<li>of XX</li>
<li>
<ul>
<li>
<a href="#" title="Back"></a>
</li>
<li>
<a href="#" title="Next"></a>
</li>
</ul>
</li>
</ul>
1.1 Pagination buttons
Following the same pattern as above, simply remove the <li class="pagination_left"> block and the CSS will address the rest.
Example code:
<ul class="pagination linkBox">
<li>Page</li>
<li><input type="text" title="tool tip message" maxlength="3"/></li>
<li>of XX</li>
<li>
<ul>
<li>
<a href="#" title="Back"></a>
</li>
<li>
<a href="#" title="Next"></a>
</li>
</ul>
</li>
</ul>
- 1 of 15
Example HTML:
<ul class="mini_pagination">
<li>1 of 15</li>
<li>
<button><span></span></button>
<button><span></span></button>
</li>
</ul>
Example LESS mixin:
.mini_buttons () {
.anti_button;
button {
.two_stop_linear_gradient (lighten(@hotel_grey, 10%), @hotel_grey);
.border_radius (.25em);
border: 1px solid @golf_grey;
width: 1.3888888em;
height: 1.3888888em;
color: transparent;
.text_shadow (transparent, 0 0 0);
display: inline-block;
span {
background: url(/public/images/arrow_icon.png) no-repeat 50% 50%;
display: block;
width: 0.555556em;
height: 0.555556em;
margin: 0 auto;
.transform (rotate(180deg));
}
&:hover {
.box_shadow (@white, 0 0 0);
.two_stop_linear_gradient (@hotel_grey, lighten(@hotel_grey, 10%));
}
+ button {
span {
.transform (rotate(0deg));
}
}
}
}
Example semantic LESS using mixin:
.mini_pagination {
font-weight: bold;
line-height: 2.08333333em;
li {
float: left;
margin-right: 0.8333333em;
}
.mini_buttons;
}