From 16443f0ecf22d7edc4b7532a730e46673ff41383 Mon Sep 17 00:00:00 2001 From: Richard Macklin Date: Mon, 9 Oct 2017 14:30:36 -0700 Subject: [PATCH 1/2] Reduce z-indexes in button-group, input-group, list-group, & pagination These were using `z-index: 2` to "Place active items above their siblings for proper border styling". However, using `z-index: 1` is sufficient for accomplishing that goal. In input-group, there were also three `z-index: 3` rules for the hover/focus/active states. I reduced these to `z-index: 2` since they just needed to be "one more than normal" (i.e. one more than what is now `z-index: 1` after my changes). These changes can be verified by viewing the documentation pages for Button group, Input group, List group, and Pagination before and after this commit and observing that the active elements are still "above" their siblings, so their borders look correct. --- scss/_button-group.scss | 4 ++-- scss/_input-group.scss | 10 +++++----- scss/_list-group.scss | 2 +- scss/_pagination.scss | 2 +- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/scss/_button-group.scss b/scss/_button-group.scss index 1a373f323282..4dcd9aa67c3b 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 a1d16e3848e7..ae70ebc081eb 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 ce3876b6cb80..579e77c014e7 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -70,7 +70,7 @@ // Include both here for ``s and `