From d5b2dea1a5b9d71a22a5948aff03f546181363f4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 6 Jan 2016 14:47:33 -0800 Subject: [PATCH 1/3] Rip out the pager component --- docs/components/pagination.md | 51 ++---------------------------- scss/_pager.scss | 58 ----------------------------------- scss/bootstrap.scss | 1 - 3 files changed, 3 insertions(+), 107 deletions(-) delete mode 100644 scss/_pager.scss 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/scss/_pager.scss b/scss/_pager.scss deleted file mode 100644 index 1aaa244084..0000000000 --- a/scss/_pager.scss +++ /dev/null @@ -1,58 +0,0 @@ -.pager { - padding-left: 0; - margin-top: $spacer-y; - margin-bottom: $spacer-y; - text-align: center; - list-style: none; - @include clearfix(); - - li { - display: inline; - - > a, - > span { - display: inline-block; - padding: 5px 14px; - background-color: $pager-bg; - border: $pager-border-width solid $pager-border-color; - border-radius: $pager-border-radius; - } - - > a { - @include hover-focus { - text-decoration: none; - background-color: $pager-hover-bg; - } - } - } - - .disabled { - > a { - @include plain-hover-focus { - color: $pager-disabled-color; - pointer-events: none; - cursor: $cursor-disabled; - background-color: $pager-bg; - } - } - > span { - color: $pager-disabled-color; - cursor: $cursor-disabled; - background-color: $pager-bg; - } - } -} - -.pager-next { - > a, - > span { - float: right; - } -} - -.pager-prev { - > a, - > span { - float: left; - } -} diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index a5684181ff..ab33f86c4f 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -33,7 +33,6 @@ @import "card"; @import "breadcrumb"; @import "pagination"; -@import "pager"; @import "labels"; @import "jumbotron"; @import "alert"; From e482fe24e14a5eb35afcb1ff5ef2a1afdf127d3a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 6 Jan 2016 14:48:48 -0800 Subject: [PATCH 2/3] add docs notes --- docs/migration.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/migration.md b/docs/migration.md index 7066ec656f..effbc90a5d 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -36,7 +36,8 @@ Here are the big ticket items you'll want to be aware of when moving from v3 to - [Font Awesome](https://fortawesome.github.io/Font-Awesome/) - Dropped the Affix jQuery plugin. We recommend using a `position: sticky` polyfill instead. [See the HTML5 Please entry](http://html5please.com/#sticky) for details and specific polyfill recommendations. - If you were using Affix to apply additional, non-`position` styles, the polyfills might not support your use case. One option for such uses is the third-party [ScrollPos-Styler](https://github.com/acch/scrollpos-styler) library. -- Refactored nearly all components to use more unnested classes instead of children selectors. +- Dropped the pager component as it was essentially slightly customized buttons. +- Refactored nearly all components to use more un-nested classes instead of children selectors. ### Misc - Non-responsive usage of Bootstrap is no longer supported. @@ -113,6 +114,7 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with ### Pagination - Explicit classes (`.page-item`, `.page-link`) are now required on the descendants of `.pagination`s +- Dropped the `.pager` component entirely as it was little more than customized outline buttons. ### Breadcrumbs From 20261385eacd6e86a362a08d56b4b4241ef248df Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 6 Jan 2016 14:57:00 -0800 Subject: [PATCH 3/3] fix blog example to use customized pagination based on button styles --- docs/examples/blog/blog.css | 8 ++------ docs/examples/blog/index.html | 8 +++----- 2 files changed, 5 insertions(+), 11 deletions(-) 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.

-