diff --git a/docs/components/pagination.md b/docs/components/pagination.md index 1ec25b789f..9804da83fd 100644 --- a/docs/components/pagination.md +++ b/docs/components/pagination.md @@ -11,7 +11,7 @@ Provide pagination links for your site or app with the multi-page pagination com * Will be replaced with the ToC, excluding the "Contents" header {:toc} -## Default pagination +## Overview 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. @@ -39,7 +39,7 @@ Simple pagination inspired by Rdio, great for apps and search results. The large {% endexample %} -### Disabled and active states +## Disabled and active states Links are customizable for different circumstances. Use `.disabled` for unclickable links and `.active` to indicate the current page. @@ -49,7 +49,6 @@ Links are customizable for different circumstances. Use `.disabled` for unclicka The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of ``s, but that CSS property is not yet standardized. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a `tabindex="-1"` attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality. {% endcallout %} - {% example html %} {% endexample %} - -## Pager - -Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines. - -### Default example - -By default, the pager centers links. - -{% example html %} - -{% endexample %} - -### Aligned links - -Alternatively, you can align each link to the sides: - -{% example html %} - -{% endexample %} - - -### Optional disabled state - -Pager links also support the `.disabled` class (though note that the same advice about keyboard focus as for the default pagination applies here as well). - -{% example html %} - -{% endexample %} diff --git a/docs/examples/blog/blog.css b/docs/examples/blog/blog.css index da14fce9cc..5fed564246 100644 --- a/docs/examples/blog/blog.css +++ b/docs/examples/blog/blog.css @@ -125,14 +125,10 @@ h6, .h6 { /* Pagination */ -.pager { +.blog-pagination { margin-bottom: 4rem; - text-align: left; } -.pager > li > a { - width: 8rem; - padding: .75rem 1.25rem; - text-align: center; +.blog-pagination > .btn { border-radius: 2rem; } diff --git a/docs/examples/blog/index.html b/docs/examples/blog/index.html index 57cfafacfb..d73f5ec690 100644 --- a/docs/examples/blog/index.html +++ b/docs/examples/blog/index.html @@ -104,11 +104,9 @@

Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.

-