diff options
author | Mark Otto <otto@github.com> | 2013-01-13 01:15:19 +0400 |
---|---|---|
committer | Mark Otto <otto@github.com> | 2013-01-13 01:15:19 +0400 |
commit | 7a3f078fb487323246ccf64460b7efaf7d478afc (patch) | |
tree | d184d0bd3976bc76cf68744049ff8d40bb2a7315 /less/pagination.less | |
parent | 3773b999695c74c21959c046b511ba26efa65dbc (diff) |
Remove parent div from pagination component
* No more div.pagination; it's now just ul.pagination
* No more .pagination-right or .pagination-centered
* Sizes remain
* Any further customization, such as alignment, should be done on the individual application or site level.
Diffstat (limited to 'less/pagination.less')
-rw-r--r-- | less/pagination.less | 81 |
1 files changed, 30 insertions, 51 deletions
diff --git a/less/pagination.less b/less/pagination.less index cad430dab3..a25d7bd018 100644 --- a/less/pagination.less +++ b/less/pagination.less @@ -1,27 +1,17 @@ // // Pagination (multiple pages) // -------------------------------------------------- - -// Space out pagination from surrounding content .pagination { - margin: @line-height-base 0; -} - -.pagination ul { - // Allow for text-based alignment display: inline-block; - // Reset default ul styles - margin-left: 0; - margin-bottom: 0; - // Visuals + margin: @line-height-base 0; border-radius: @border-radius-base; .box-shadow(0 1px 2px rgba(0,0,0,.05)); } -.pagination ul > li { +.pagination > li { display: inline; // Remove list-style and block-level defaults } -.pagination ul > li > a, -.pagination ul > li > span { +.pagination > li > a, +.pagination > li > span { float: left; // Collapse white-space padding: 4px 12px; line-height: @line-height-base; @@ -30,61 +20,50 @@ border: 1px solid @pagination-border; border-left-width: 0; } -.pagination ul > li > a:hover, -.pagination ul > .active > a, -.pagination ul > .active > span { +.pagination > li > a:hover, +.pagination > .active > a, +.pagination > .active > span { background-color: @pagination-background-active; } -.pagination ul > .active > a, -.pagination ul > .active > span { +.pagination > .active > a, +.pagination > .active > span { color: @grayLight; cursor: default; } -.pagination ul > .disabled > span, -.pagination ul > .disabled > a, -.pagination ul > .disabled > a:hover { +.pagination > .disabled > span, +.pagination > .disabled > a, +.pagination > .disabled > a:hover { color: @grayLight; background-color: transparent; cursor: default; } -.pagination ul > li:first-child > a, -.pagination ul > li:first-child > span { +.pagination > li:first-child > a, +.pagination > li:first-child > span { border-left-width: 1px; .border-left-radius(@border-radius-base); } -.pagination ul > li:last-child > a, -.pagination ul > li:last-child > span { +.pagination > li:last-child > a, +.pagination > li:last-child > span { .border-right-radius(@border-radius-base); } -// Alignment -// -------------------------------------------------- - -.pagination-centered { - text-align: center; -} -.pagination-right { - text-align: right; -} - - // Sizing // -------------------------------------------------- // Large .pagination-large { - ul > li > a, - ul > li > span { + > li > a, + > li > span { padding: @padding-large; font-size: @font-size-large; } - ul > li:first-child > a, - ul > li:first-child > span { + > li:first-child > a, + > li:first-child > span { .border-left-radius(@border-radius-large); } - ul > li:last-child > a, - ul > li:last-child > span { + > li:last-child > a, + > li:last-child > span { .border-right-radius(@border-radius-large); } } @@ -92,28 +71,28 @@ // Small and mini .pagination-mini, .pagination-small { - ul > li:first-child > a, - ul > li:first-child > span { + > li:first-child > a, + > li:first-child > span { .border-left-radius(@border-radius-small); } - ul > li:last-child > a, - ul > li:last-child > span { + > li:last-child > a, + > li:last-child > span { .border-right-radius(@border-radius-small); } } // Small .pagination-small { - ul > li > a, - ul > li > span { + > li > a, + > li > span { padding: @padding-small; font-size: @font-size-small; } } // Mini .pagination-mini { - ul > li > a, - ul > li > span { + > li > a, + > li > span { padding: @padding-mini; font-size: @font-size-mini; } |