Update pagination focus styles

- Drops the hover-focus mixin for standard :hover
- Adds explicit :focus styles to match button, input, etc with a box-shadow
- Adjusts z-index values to ensure the layers go initial, hover, active, focus

Fixes #24838.
This commit is contained in:
Mark Otto 2017-12-30 22:50:43 -08:00 committed by Mark Otto
parent e3e4d0389d
commit 2dc5762f96
2 changed files with 8 additions and 1 deletions

View File

@ -14,13 +14,18 @@
background-color: $pagination-bg;
border: $pagination-border-width solid $pagination-border-color;
@include hover-focus {
&:hover {
color: $pagination-hover-color;
text-decoration: none;
background-color: $pagination-hover-bg;
border-color: $pagination-hover-border-color;
}
&:focus {
z-index: 2;
outline: 0;
box-shadow: $pagination-focus-box-shadow;
}
// Opinionated: add "hand" cursor to non-disabled .page-link elements
&:not([disabled]):not(.disabled) {

View File

@ -627,6 +627,8 @@ $pagination-bg: $white !default;
$pagination-border-width: $border-width !default;
$pagination-border-color: $gray-300 !default;
$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
$pagination-hover-color: $link-hover-color !default;
$pagination-hover-bg: $gray-200 !default;
$pagination-hover-border-color: $gray-300 !default;