0.8.6 beta

| Axle | 'pagination'

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>			
			
2 Mini pagination
  • 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;
}