Reduce z-indexes in button-group, input-group, list-group, and pagination to the...

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.

diff --git a/docs/4.0/layout/overview.md b/docs/4.0/layout/overview.md
index a357e58ad3da300a5b7fb7940d77cedb54500555..4952da5b780f9e201d292fc8ed9cfaed1c50ccde 100644 (file)
--- 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 1a373f323282b31e07f13bd851bfb9120a53621d..4dcd9aa67c3becd912df5b934f727b77b64c7425 100644 (file)
--- 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 a1d16e3848e7fd773951d9a3f9753179dcb30eb1..ae70ebc081ebf9fcc55f796a479b57580a7e1826 100644 (file)
--- 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 7e0b19e01ea62dddbdc24199538675d0ee5a9b1c..abe132255da29f9e0ef9ffc747081cf8afb901e9 100644 (file)
--- 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 69a36ffe53b820648d96c339ef5682d7e7501f01..6e83cf676fa43edd3314a964f183d66af4662c0d 100644 (file)
--- 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;