/* Pagination Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas. Default pagination with `.pagination`, it also support [WP-Paginate](http://wordpress.org/plugins/wp-paginate/). Markup: .pagination--center - Center aligned pagination. .pagination--right - Right aligned pagination. .pagination--rounded - Rounded sides. Styleguide 14 */ @if $pagination { .pagination { margin: rhythm() 0; clear: both; > * { @extend .clearfix; @include border-radius($base-border-radius); @include inline-block; margin-bottom: 0; margin-left: $input-border; li { float: left; list-style-type: none; a, span { @include inline-block; padding: $pagination-padding; line-height: 1em; text-decoration: none; border-width: $input-border; border-style: solid; margin-left: -$input-border; @extend %pagination--btn !optional; } } li:first-child > a, li:first-child > span { border-left-width: $input-border; } li > a:hover { @extend %pagination--btn__hover !optional; } li > a:active { @extend %pagination--btn__active !optional; } li.current a, li.current a:hover, // WP Paginate a.current, a.current:hover { @extend %pagination--btn__current !optional; } .disabled > span, .disabled > a, .disabled > a:hover, .disabled > a:focus { @extend %pagination--btn__disabled !optional; } .active > a, .active > span, .disabled > span, .disabled > a, .disabled > a:hover, .disabled > a:focus { cursor: default; } } } // Alternative alignments .pagination--center {text-align: center; } .pagination--right {text-align: right; } // Rounded sides .pagination--rounded { li:first-child > a, li:first-child > span { @include border-left-radius($base-border-radius); } li:last-child > a, li:last-child > span { @include border-right-radius($base-border-radius); } } }