rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

Reduce z-indexes in button-group, input-group, list-group, and pagination to the minimum necessary (#24315)

Browse Source 
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.
This commit is contained in:
rmacklin 2017-10-20 00:01:29 -07:00 committed by XhmikosR
parent 35317a4331
commit 9e6dabbb10
5 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/4.0/layout/overview.md
View File

@ -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. 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.

4
scss/_button-group.scss
View File

@ -14,12 +14,12 @@
// Bring the hover, focused, and "active" buttons to the front to overlay // Bring the hover, focused, and "active" buttons to the front to overlay
// the borders properly // the borders properly
@include hover { @include hover {
z-index: 2; z-index: 1;
} }
&:focus, &:focus,
&:active, &:active,
&.active { &.active {
z-index: 2; z-index: 1;
} }
} }

10
scss/_input-group.scss
View File

@ -14,7 +14,7 @@
// Ensure that the input is always above the *appended* addon button for // Ensure that the input is always above the *appended* addon button for
// proper border colors. // proper border colors.
position: relative; position: relative;
z-index: 2; z-index: 1;
flex: 1 1 auto; flex: 1 1 auto;
// Add width 1% and flex-basis auto to ensure that button will not wrap out // 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. // 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 // Bring the "active" form control to the front
@include hover-focus-active { @include hover-focus-active {
z-index: 3; z-index: 2;
} }
} }
} }
@ -150,7 +150,7 @@
// Bring the "active" button to the front // Bring the "active" button to the front
@include hover-focus-active { @include hover-focus-active {
z-index: 3; z-index: 2;
} }
} }
@ -168,7 +168,7 @@
&:not(:first-child) { &:not(:first-child) {
> .btn, > .btn,
> .btn-group { > .btn-group {
z-index: 2; z-index: 1;
// remove nagative margin ($input-btn-border-width) to solve overlapping issue with button. // remove nagative margin ($input-btn-border-width) to solve overlapping issue with button.
margin-left: 0; margin-left: 0;
@ -179,7 +179,7 @@
// Because specificity // Because specificity
@include hover-focus-active { @include hover-focus-active {
z-index: 3; z-index: 2;
} }
} }
} }

2
scss/_list-group.scss
View File

@ -70,7 +70,7 @@
// Include both here for `<a>`s and `<button>`s // Include both here for `<a>`s and `<button>`s
&.active { &.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; color: $list-group-active-color;
background-color: $list-group-active-bg; background-color: $list-group-active-bg;
border-color: $list-group-active-border-color; border-color: $list-group-active-border-color;

2
scss/_pagination.scss
View File

@ -18,7 +18,7 @@
} }
&.active .page-link { &.active .page-link {
z-index: 2; z-index: 1;
color: $pagination-active-color; color: $pagination-active-color;
background-color: $pagination-active-bg; background-color: $pagination-active-bg;
border-color: $pagination-active-border-color; border-color: $pagination-active-border-color;