From 9e6dabbb106a8a84a0c910139f9705e1aeb9cb83 Mon Sep 17 00:00:00 2001
From: rmacklin <richard.github@nrm.com>
Date: Fri, 20 Oct 2017 00:01:29 -0700
Subject: [PATCH] Reduce z-indexes in button-group, input-group, list-group,
 and pagination to the minimum necessary (#24315)

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.
---
 docs/4.0/layout/overview.md |  2 ++
 scss/_button-group.scss     |  4 ++--
 scss/_input-group.scss      | 10 +++++-----
 scss/_list-group.scss       |  2 +-
 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 a357e58ad3..4952da5b78 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 1a373f3232..4dcd9aa67c 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 a1d16e3848..ae70ebc081 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 7e0b19e01e..abe132255d 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 69a36ffe53..6e83cf676f 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;