diff options
| author | patrickhlauke <[email protected]> | 2017-12-25 23:15:21 +0000 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-12-27 16:28:10 -0800 |
| commit | e3f9c463fc862da4d04a1615c0e5aab3df7b2625 (patch) | |
| tree | 8aa0e3ef50b7841fa8654d13ba37b34f5b7fc4c7 | |
| parent | 8ae78b6820de1489392d21a8c10a65fd93a59533 (diff) | |
| download | bootstrap-e3f9c463fc862da4d04a1615c0e5aab3df7b2625.tar.xz bootstrap-e3f9c463fc862da4d04a1615c0e5aab3df7b2625.zip | |
Opinionated: reintroduce `cursor:pointer`
Explicitly re-adds the "hand" `cursor:pointer` for non-disabled `.btn`, `.close`, `.navbar-toggler` elements, as well as forcing `page-link` pagination controls to always have the "hand" cursor (even if an author uses it on, say, `<button>` elements for a dynamically updating in-page pagination).
Controversial, as everybody jumped on the bandwagon following this article https://medium.com/simple-human/buttons-shouldnt-have-a-hand-cursor-b11e99ca374b - which does have its merits of course, but there are also counter-arguments like http://kizu.ru/en/issues/cursor-pointer/
And seeing the amount of issues we've seen following the change, and the potential complexity needed to consistently address the cursor issue (see https://github.com/twbs/bootstrap/issues/24156 where i explore how the cursor needs to be based on "intent", and how that's tough to determine), I'm favouring an opinionated take here of just reintroducing the `cursor:pointer`.
| -rw-r--r-- | scss/_buttons.scss | 5 | ||||
| -rw-r--r-- | scss/_close.scss | 5 | ||||
| -rw-r--r-- | scss/_navbar.scss | 5 | ||||
| -rw-r--r-- | scss/_pagination.scss | 8 |
4 files changed, 23 insertions, 0 deletions
diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 3184f3247..fa0e9c99c 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -32,6 +32,11 @@ @include box-shadow(none); } + // Opinionated: add "hand" cursor to non-disabled .btn elements + &:not([disabled]):not(.disabled) { + cursor: pointer; + } + &:not([disabled]):not(.disabled):active, &:not([disabled]):not(.disabled).active { background-image: none; diff --git a/scss/_close.scss b/scss/_close.scss index 4271bc720..f1763cc22 100644 --- a/scss/_close.scss +++ b/scss/_close.scss @@ -12,6 +12,11 @@ text-decoration: none; opacity: .75; } + + // Opinionated: add "hand" cursor to non-disabled .close elements + &:not([disabled]):not(.disabled) { + cursor: pointer; + } } // Additional properties for button version diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 64766eb76..6b76649a1 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -116,6 +116,11 @@ @include hover-focus { text-decoration: none; } + + // Opinionated: add "hand" cursor to non-disabled .navbar-toggler elements + &:not([disabled]):not(.disabled) { + cursor: pointer; + } } // Keep as a separate element so folks can easily override it with another icon diff --git a/scss/_pagination.scss b/scss/_pagination.scss index 97977f46d..286febc9d 100644 --- a/scss/_pagination.scss +++ b/scss/_pagination.scss @@ -20,6 +20,12 @@ background-color: $pagination-hover-bg; border-color: $pagination-hover-border-color; } + + + // Opinionated: add "hand" cursor to non-disabled .page-link elements + &:not([disabled]):not(.disabled) { + cursor: pointer; + } } .page-item { @@ -45,6 +51,8 @@ &.disabled .page-link { color: $pagination-disabled-color; pointer-events: none; + // Opinionated: remove the "hand" cursor set previously for .page-link + cursor: auto; background-color: $pagination-disabled-bg; border-color: $pagination-disabled-border-color; } |