diff options
| -rw-r--r-- | docs/4.0/layout/overview.md | 2 | ||||
| -rw-r--r-- | scss/_button-group.scss | 4 | ||||
| -rw-r--r-- | scss/_input-group.scss | 10 | ||||
| -rw-r--r-- | scss/_list-group.scss | 2 | ||||
| -rw-r--r-- | scss/_pagination.scss | 2 |
5 files changed, 11 insertions, 9 deletions
diff --git a/docs/4.0/layout/overview.md b/docs/4.0/layout/overview.md index a357e58ad..4952da5b7 100644 --- a/docs/4.0/layout/overview.md +++ b/docs/4.0/layout/overview.md @@ -172,3 +172,5 @@ $zindex-tooltip: 1070 !default; ``` Background elements—like the backdrops that allow click-dismissing—tend to reside on a lower `z-index`s, while navigation and popovers utilize higher `z-index`s to ensure they overlay surrounding content. + +Additionally, the `button-group`, `input-group`, `list-group`, and `pagination` components make use of setting `z-index` to `1` or `2` in order to ensure that the borders of the _active_ element correctly appear "above" their sibling elements. diff --git a/scss/_button-group.scss b/scss/_button-group.scss index 1a373f323..4dcd9aa67 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -14,12 +14,12 @@ // Bring the hover, focused, and "active" buttons to the front to overlay // the borders properly @include hover { - z-index: 2; + z-index: 1; } &:focus, &:active, &.active { - z-index: 2; + z-index: 1; } } diff --git a/scss/_input-group.scss b/scss/_input-group.scss index a1d16e384..ae70ebc08 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -14,7 +14,7 @@ // Ensure that the input is always above the *appended* addon button for // proper border colors. position: relative; - z-index: 2; + z-index: 1; flex: 1 1 auto; // Add width 1% and flex-basis auto to ensure that button will not wrap out // the column. Applies to IE Edge+ and Firefox. Chrome does not require this. @@ -23,7 +23,7 @@ // Bring the "active" form control to the front @include hover-focus-active { - z-index: 3; + z-index: 2; } } } @@ -150,7 +150,7 @@ // Bring the "active" button to the front @include hover-focus-active { - z-index: 3; + z-index: 2; } } @@ -168,7 +168,7 @@ &:not(:first-child) { > .btn, > .btn-group { - z-index: 2; + z-index: 1; // remove nagative margin ($input-btn-border-width) to solve overlapping issue with button. margin-left: 0; @@ -179,7 +179,7 @@ // Because specificity @include hover-focus-active { - z-index: 3; + z-index: 2; } } } diff --git a/scss/_list-group.scss b/scss/_list-group.scss index 7e0b19e01..abe132255 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -70,7 +70,7 @@ // Include both here for `<a>`s and `<button>`s &.active { - z-index: 2; // Place active items above their siblings for proper border styling + z-index: 1; // Place active items above their siblings for proper border styling color: $list-group-active-color; background-color: $list-group-active-bg; border-color: $list-group-active-border-color; diff --git a/scss/_pagination.scss b/scss/_pagination.scss index 69a36ffe5..6e83cf676 100644 --- a/scss/_pagination.scss +++ b/scss/_pagination.scss @@ -18,7 +18,7 @@ } &.active .page-link { - z-index: 2; + z-index: 1; color: $pagination-active-color; background-color: $pagination-active-bg; border-color: $pagination-active-border-color; |